/* Visual work pages (Roulette, Blossom, Cerulean July, Shinsegae Namsan). Loads after type.css + site.css + footer.css.
   Each page follows her PDF portfolio slide by slide (same order, layout, images and hierarchy); only the text and UI
   system are the website's: Atkinson, the site type scale, site buttons and captions. Neutral palette, no blue: the work carries the color.
   Images are block-by-block crops of the flattened PDF (img/<slug>/*.webp); labels on diagrams are live HTML (.tl). */
:root{--wv:1280px;--edge:max(var(--gut),calc((100vw - var(--wv)) / 2))}
body.vw{background:#0B0B0B}
.vw .dark{--bg:#0B0B0B;--tx:#F2F2F2;--tx2:#C4C4C4;--tx3:#8F8F8F;--line:#2C2C2C;--acc:#FFFFFF;--surf:#161616;background:var(--bg);color:var(--tx)}
.vw .light{--bg:#FAFAFA;--tx:#141414;--tx2:#3B3B3B;--tx3:#666;--line:#DCDCDC;--acc:#141414;--surf:#EFEFEF;background:var(--bg);color:var(--tx)}
.vw .light.grey{--bg:#E6E6E6;--tx3:#5A5A5A;--line:#CFCFCF}
.vw .dark.char{--bg:#343434;--tx2:#D2D2D2;--tx3:#A6A6A6;--line:#4A4A4A}
.vw ::selection{background:#F2F2F2;color:#0B0B0B}
.vw .light ::selection{background:#141414;color:#fff}
html:has(body.vw){--nav-bg:rgba(11,11,11,.8);--nav-line:rgba(44,44,44,.9)}
html:has(body.vw)[data-nav="light"]{--nav-tx:#141414;--nav-bg:rgba(250,250,250,.86);--nav-line:rgba(220,220,220,.9)}
/* neutral footer on these pages */
.vw .sf{--sf-bg:#0B0B0B;--sf-field:#151515;--sf-line:#2C2C2C;--sf-acc:#F2F2F2;--d-acc:#F2F2F2}
.pw{max-width:calc(var(--wv) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type (site scale only) ---------- */
.sl{position:relative;padding-block:clamp(104px,10vw,168px)}
.sl-h{font-size:var(--fs-2);line-height:1.06;font-weight:600;letter-spacing:-.024em;color:var(--tx);margin-bottom:clamp(40px,4vw,64px)}
.st{font-size:var(--fs-4);line-height:1.3;font-weight:600;letter-spacing:-.006em;color:var(--tx);margin-bottom:12px}
.bd{max-width:741px;color:var(--tx2)}
.bd + .bd{margin-top:14px}
.cp{margin-top:10px;font-size:var(--fs-sm);line-height:1.45;color:var(--tx3)}
.cp.r{text-align:right}
.note{margin-top:12px;font-size:var(--fs-xs);line-height:1.5;color:var(--tx3);max-width:44ch}
.vw figure{margin:0}
.vw figure img,.zoom img{display:block;width:100%;height:auto}
.zoom{cursor:zoom-in}
.mt{margin-top:clamp(28px,3vw,44px)}
.mt2{margin-top:clamp(56px,5vw,88px)}

/* ---------- cover: the PDF cover, copy on black, the work fading in from the right ---------- */
.w-cover{position:relative;min-height:max(680px,min(100vh,1000px));display:flex;overflow:hidden;isolation:isolate}
.w-cover > .pw{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(132px,13vw,184px);padding-bottom:clamp(48px,5vw,80px)}
.w-cover .bg{position:absolute;z-index:-1;top:0;bottom:0;right:0;left:38%;width:62%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%);animation:fadeIn 1.6s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.w-cover .in{max-width:560px}
.w-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(40px,5vw,72px);font-size:var(--fs-sm);font-weight:700;color:var(--tx2);text-decoration:none}
.w-back svg{width:16px;height:16px;transform:scaleX(-1);transition:transform .35s var(--ease)}
.w-back:hover{color:var(--tx)}
.w-back:hover svg{transform:scaleX(-1) translateX(4px)}
.w-cat{display:block;margin-bottom:14px;font-size:var(--fs-sm);font-weight:700;color:var(--tx3)}
.w-cover h1{font-size:var(--fs-display);line-height:1;font-weight:500;letter-spacing:-.03em;color:#fff;text-wrap:balance;animation:rise 1.1s var(--ease) .1s both}
.w-cover .lead{margin-top:28px;color:var(--tx2);max-width:34ch;animation:rise 1.1s var(--ease) .25s both}
.w-cover .btn{margin-top:36px;border-color:rgba(242,242,242,.6);color:#F2F2F2;animation:rise 1.1s var(--ease) .35s both}
.w-cover .btn svg{width:12px;height:12px}
.w-cover .btn:hover{background:#F2F2F2;border-color:#F2F2F2;color:#0B0B0B}
.w-facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 40px;margin:0;padding-left:24px;border-left:.4px solid #5D697D;font-size:var(--fs-ui);max-width:620px;animation:rise 1.1s var(--ease) .45s both}
.w-facts dt{font-size:var(--fs-sm);font-weight:700;line-height:1.6;color:#5D697D}
.w-facts dd{margin:0;color:#949EAB}

/* ---------- diagrams with live labels (positions in % of the image) ---------- */
.dg{position:relative}
.dg > img{display:block;width:100%;height:auto}
.tl{position:absolute;transform:translateY(-50%);font-size:var(--fs-sm);font-weight:600;line-height:1.2;white-space:nowrap;color:var(--tx);pointer-events:none}
.tl.big{font-size:var(--fs-4);font-weight:500}
.tl.on-dark{color:#F2F2F2;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.tl.num{font-size:var(--fs-xs);font-weight:500;color:#6A6A6A}
.callout{position:absolute;max-width:var(--w,24%);pointer-events:none}
.callout b{display:block;font-size:var(--fs-ui);line-height:1.3;font-weight:700;color:var(--tx);transform:translateY(-50%);margin-bottom:-4px}
.callout span{display:block;margin-top:8px;font-size:var(--fs-sm);line-height:1.5;color:var(--tx2)}
/* grid and flex children may shrink below their content (wide diagrams scroll inside them instead) */
.r-ip > *,.b-ip > *,.c-ip > *,.c-ip .top > *,.g > *,.c-bs > *,.c-cl > *,.tallpage > *,.rbleed > *{min-width:0}
.vw main{overflow-x:clip}
@media (max-width: 760px){
  .scroll-x{overflow-x:auto;overscroll-behavior-x:contain;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scrollbar-width:thin}
  .scroll-x > .dg,.scroll-x > .shelf{min-width:var(--minw,760px)}
}

/* ---------- moodboards: the PDF's 3 x 4 grid, tile by tile ---------- */
.mood{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mood img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--ease),filter .4s;cursor:zoom-in}
.mood:hover img{filter:saturate(.6) brightness(.92)}
.mood img:hover{transform:scale(1.04);filter:none;position:relative;z-index:1}

/* ---------- full-bleed slides (wireframe, workspace, final renders): image edge to edge, title over it ---------- */
.full{position:relative;background:#0B0B0B;overflow:hidden}
.full > img{display:block;width:100%;height:auto}
.full .ov{position:absolute;inset:0;pointer-events:none}
.full .ov .pw{padding-top:clamp(28px,5.2vw,92px)}
.full .sl-h{margin-bottom:12px;color:#F2F2F2;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.full .st{color:#F2F2F2;font-size:var(--fs-ui);font-weight:700;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.full.ink .sl-h,.full.ink .st{color:#141414;text-shadow:none}
.full .watch{position:absolute;right:var(--edge);bottom:clamp(20px,3vw,48px);pointer-events:auto}
.watch{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;border:1px solid rgba(242,242,242,.55);background:rgba(11,11,11,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#F2F2F2;font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.watch svg{width:11px;height:11px}
.watch:hover{background:#F2F2F2;border-color:#F2F2F2;color:#0B0B0B}
.full.ink .watch{border-color:rgba(20,20,20,.45);color:#141414;background:rgba(250,250,250,.4)}
.full.ink .watch:hover{background:#141414;color:#fff}
@media (max-width: 760px){
  .full .ov{position:static;background:#0B0B0B}
  .full .ov .pw{padding-block:56px 20px}
  .full.ink .sl-h,.full.ink .st{color:#F2F2F2}
  .full .watch{position:static;margin:16px var(--gut) 32px}
  .full.ink .watch{border-color:rgba(242,242,242,.55);color:#F2F2F2;background:none}
}

/* ---------- split slide with an image bleeding to the right edge (Render & Composition) ---------- */
.rbleed{display:grid;grid-template-columns:minmax(0,1fr) min(42vw,820px);align-items:stretch}
.rbleed .lc{padding:clamp(104px,10vw,168px) clamp(32px,4vw,72px) clamp(104px,10vw,168px) var(--edge)}
.rbleed .rc{position:relative;align-self:stretch;min-height:100%}
.rbleed .rc .dg{position:sticky;top:0}

/* ---------- video ---------- */
.film{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000}
.film.tall{aspect-ratio:4/5}
.film img,.film iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;border:0;background:none;cursor:pointer;color:#fff}
.play .disc{display:grid;place-items:center;width:clamp(68px,6.5vw,92px);height:clamp(68px,6.5vw,92px);border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .35s,color .35s,transform .6s var(--ease)}
.play .disc svg{width:28%;height:28%;margin-left:6%}
.play:hover .disc,.play:focus-visible .disc{background:#fff;color:#0B0B0B;transform:scale(1.06)}
.fm{border:0;padding:0;margin:auto;width:min(1280px,92vw);max-height:92vh;background:transparent;overflow:visible}
.fm.tall{width:min(640px,86vw,68vh)}
.fm::backdrop{background:rgba(6,6,6,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fm .box{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.fm.tall .box{aspect-ratio:4/5}
.fm iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fm .x{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:6px;border:1px solid rgba(242,242,242,.3);background:rgba(11,11,11,.7);color:#F2F2F2;cursor:pointer;display:grid;place-items:center}
.fm .x svg{width:20px;height:20px}

/* ---------- before / after slider ---------- */
.cmp{--p:50%;position:relative;overflow:hidden;border-radius:4px;user-select:none;-webkit-user-select:none;touch-action:pan-y;background:var(--surf)}
.cmp img{display:block;width:100%;height:auto;pointer-events:none}
.cmp .after{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--p))}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--p);width:1px;background:#141414;pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:var(--p);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#141414;color:#fff;display:grid;place-items:center;pointer-events:none;transition:transform .3s var(--ease)}
.cmp:hover .knob{transform:scale(1.08)}
.cmp .knob svg{width:20px;height:20px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp input:focus-visible ~ .knob{outline:2px solid #141414;outline-offset:3px}
.cmp .tag{position:absolute;bottom:12px;font-size:var(--fs-sm);font-weight:700;color:#3B3B3B;pointer-events:none}
.cmp .tag.l{left:14px}.cmp .tag.r{right:14px}

/* ---------- grids for the slide layouts ---------- */
.g{display:grid;gap:clamp(24px,3vw,56px);align-items:start}
.g.tight{gap:12px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* Roulette · Ideation & Planning (p.2): concept over the top, moodboard left, anatomy sketch rising on the right */
.r-ip{display:grid;grid-template-columns:410fr 1320fr;column-gap:clamp(24px,3vw,56px);grid-template-rows:auto 1fr}
.r-ip .concept{grid-column:1 / 3;grid-row:1;position:relative;z-index:1;max-width:min(741px,64%)}
.r-ip .mb{grid-column:1;grid-row:2;align-self:end}
.r-ip .sk{grid-column:2;grid-row:1 / 3;align-self:start}
.r-ip .sk .st{position:absolute;left:0;top:33.5%;transform:translateY(-100%)}
/* Roulette · Camerawork (p.4) */
.r-cw{grid-template-columns:880fr 750fr}
.r-paths{display:grid;grid-template-columns:500fr 373fr;gap:8px}
.r-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
/* Roulette · Render & Composition (p.6) */
.r-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* Blossom · Ideation & Planning (p.11) */
.b-ip{display:grid;grid-template-columns:410fr 432fr 734fr;gap:clamp(24px,3vw,56px) clamp(24px,3vw,56px);grid-template-rows:auto 1fr}
.b-ip .concept{grid-column:1 / 3;grid-row:1}
.b-ip .mb{grid-column:1;grid-row:2}
.b-ip .bs{grid-column:2;grid-row:2}
.b-ip .ref{grid-column:3;grid-row:1 / 3}
/* Blossom · Environment building (p.13) */
.b-env{grid-template-columns:695fr 925fr}
/* Blossom / Cerulean · Final render: a tall frame in the middle of a dark page (p.14, p.18) */
.tallpage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:stretch}
.tallpage .meta p{color:var(--tx2)}
.tallpage .side{display:flex;align-items:flex-end;justify-content:flex-end}
/* Cerulean · Ideation & Planning (p.16) */
.c-ip{display:grid;grid-template-columns:410fr 1232fr;gap:clamp(40px,4vw,64px) clamp(24px,3vw,56px)}
.c-ip .top{grid-column:1 / 3;display:grid;grid-template-columns:minmax(0,1fr) min(300px,24%);gap:clamp(24px,3vw,56px);align-items:end}
.c-bs{display:grid;grid-template-columns:485fr 723fr;gap:24px;margin-top:28px;align-items:end}
/* Cerulean · Camera & Lighting (p.17): the lit set bleeding off the left edge */
.c-cl{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.c-cl .set{margin-left:calc(-1*var(--edge));margin-top:clamp(24px,3vw,40px)}
.c-cl .rt{padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--line)}
.c-cl .rt figure{max-width:370px;margin:clamp(28px,3vw,44px) auto 0}
/* Shinsegae · Project overview (p.36) */
.s-po .facade{position:absolute;top:0;right:0;width:min(46vw,780px);height:auto;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%),linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%);pointer-events:none}
.s-po .pw{position:relative}
.s-po-g{grid-template-columns:900fr 780fr}
.pats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px}
.pat{margin:0}
.pat .pi{position:relative;aspect-ratio:176/270;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.pat .pi img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pat:hover .pi img{transform:scale(1.9)}
.pat figcaption{margin-top:8px;font-size:var(--fs-sm);font-weight:600;line-height:1.3;color:var(--tx);text-align:center}
/* Shinsegae · Prototyping (p.37): the sample line-up as a shelf */
.s-pr{grid-template-columns:840fr 760fr}
.leg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-bottom:clamp(24px,3vw,40px)}
.leg .co{display:block;text-align:left;padding:14px 0 0;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;font:inherit;color:inherit;transition:opacity .4s,border-color .4s}
.leg .co b{display:block;font-size:var(--fs-ui);line-height:1.3;font-weight:700;color:var(--tx)}
.leg .co span{display:block;margin-top:6px;font-size:var(--fs-sm);line-height:1.5;color:var(--tx2)}
.leg .co i{display:block;margin-top:8px;font-style:normal;font-size:var(--fs-sm);color:var(--tx3)}
.leg .co.on{border-top-color:var(--tx)}
[data-shelf][data-g] .co:not(.on){opacity:.32}
.shelf{position:relative;aspect-ratio:1720/390}
.shelf .bag{position:absolute;display:block;border:0;padding:0;background:none;cursor:pointer;transition:transform .55s var(--ease),opacity .4s,filter .4s}
.shelf .bag img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.08));transition:filter .4s}
[data-shelf][data-g] .bag{opacity:.25;filter:saturate(.4)}
[data-shelf][data-g] .bag.on{opacity:1;filter:none;transform:translateY(-12px)}
[data-shelf][data-g] .bag.on img{filter:drop-shadow(0 22px 22px rgba(0,0,0,.16))}
@media (max-width: 760px){ .leg{grid-template-columns:1fr 1fr} }
/* Shinsegae · Final design (p.38) */
.s-fd{grid-template-columns:520fr 480fr 510fr}
.spec{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 20px;font-size:var(--fs-ui);line-height:1.5}
.spec dt{font-weight:700;color:var(--tx)}
.spec dd{margin:0;color:var(--tx2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 20px}
.chip-c{position:relative;width:38px;height:18px;border:1px solid rgba(0,0,0,.12);background:var(--c);padding:0;cursor:default}
.chip-c::after{content:attr(data-n);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:5px 8px;border-radius:4px;background:#141414;color:#fff;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.chip-c:hover::after,.chip-c:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.chips .k{width:100%;font-size:var(--fs-xs);font-weight:700;color:var(--tx3)}
/* Shinsegae · Product posters (p.39–40): charcoal page with the Namsan chevrons rising from the bottom */
.vw .posters{background:linear-gradient(180deg,#2E3034 0%,#3A3D41 55%,#4A4D51 100%);overflow:hidden}
.posters::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='46'><path d='M9 36 L19 12 L29 36' fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/></svg>");-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,transparent 100%);pointer-events:none}
.posters .pw{position:relative}
.pst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.pst.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
.pst img{display:block;width:100%;height:auto;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .7s var(--ease),box-shadow .7s var(--ease);cursor:zoom-in}
.pst img:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.45)}

/* ---------- next piece ---------- */
.w-end{padding-block:clamp(96px,9vw,144px)}
.next{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;min-height:clamp(300px,28vw,400px);padding:clamp(32px,4vw,56px);text-decoration:none;overflow:hidden;isolation:isolate;border-radius:var(--r);color:#F2F2F2;border:1px solid #2C2C2C;background:#111;transition:border-color .4s}
.next-bg{position:absolute;z-index:-1;top:0;bottom:0;right:0;left:30%;width:70%;height:100%;object-fit:cover;opacity:.6;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.next:hover{border-color:#5A5A5A}
.next:hover .next-bg{opacity:.85;transform:scale(1.03)}
.next-txt{max-width:30ch}
.next .k{display:block;margin-bottom:14px;font-size:var(--fs-sm);font-weight:700;color:#A8A8A8}
.next .t{display:block;font-size:var(--fs-1);line-height:1;font-weight:600;letter-spacing:-.03em}
.next .d{display:block;margin-top:18px;font-size:var(--fs-4);line-height:1.5}
.next .m{display:block;margin-top:10px;font-size:var(--fs-sm);color:#A8A8A8}
.next .circ{width:clamp(64px,6vw,88px);height:clamp(64px,6vw,88px);border-radius:50%;border:1px solid rgba(242,242,242,.35);display:grid;place-items:center;transition:background .35s,border-color .35s,color .35s,transform .6s var(--ease)}
.next .circ svg{width:26px;height:26px}
.next:hover .circ{background:#F2F2F2;border-color:#F2F2F2;color:#0B0B0B;transform:rotate(-45deg)}

/* ---------- smaller screens: slides stack in reading order ---------- */
@media (max-width: 1100px){
  .r-ip,.b-ip,.c-ip{grid-template-columns:1fr;grid-template-rows:none}
  .r-ip > *,.b-ip > *,.c-ip > *,.c-ip .top{grid-column:auto !important;grid-row:auto !important}
  .r-ip .concept{max-width:741px}
  .r-ip .sk .st{position:static;transform:none}
  .r-ip .mb,.b-ip .mb{max-width:520px}
  .c-ip .top{grid-template-columns:1fr}
  .c-ip .top figure{max-width:300px}
  .r-cw,.b-env,.s-po-g,.s-pr,.s-fd,.c-cl{grid-template-columns:1fr}
  .c-cl .rt{padding-left:0;border-left:0}
  .c-cl .set{margin-right:calc(-1*var(--gut))}
  .rbleed{grid-template-columns:1fr}
  .rbleed .lc{padding-inline:var(--gut)}
  .rbleed .rc .dg{position:relative}
  .tallpage{grid-template-columns:1fr}
  .tallpage .side{justify-content:flex-start}
  .tallpage .frame{max-width:520px}
  .w-cover .bg{left:0;width:100%;-webkit-mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.6) 100%);mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.6) 100%)}
  .s-po .facade{width:90vw;opacity:.25}
}
@media (max-width: 640px){
  .two:has(.cmp){grid-template-columns:1fr;gap:40px}
  .pats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pst,.pst.two{grid-template-columns:1fr;max-width:440px}
  .three{grid-template-columns:1fr 1fr}
  .next{grid-template-columns:1fr}
  .next .circ{display:none}
  .next-bg{left:0;width:100%;opacity:.35}
}
@media (prefers-reduced-motion: reduce){ .w-cover *,.w-cover .bg{animation:none} }

/* titles: Mona Sans */
.sl-h,.w-cover h1,.next .t{font-family:var(--title);font-weight:500}