/* ==========================================================================
   BY SARA FODDIS — main.css
   0 Fonts · 1 Tokens · 2 Base · 3 Type · 4 Chrome · 5 Placeholders & media
   6 Hero · 7 Manifesto · 8 Work (bento) · 9 Archive · 10 About · 11 Panels
   12 Experience · 13 Contact · 14 Case studies · 15 Responsive · 16 Reduced motion
   ========================================================================== */

/* 0 ── Fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face{font-family:"Anton";src:url("../fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-wdth-normal.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Yellowtail";src:url("../fonts/yellowtail-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* 1 ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --ink:#140C10;        /* aubergine black */
  --plum:#2A1220;       /* deep plum: tiles, experience */
  --wine:#6E3346;       /* mid wine: placeholder + tonal steps */
  --salmon:#EE9184;     /* the one accent */
  --blush:#F2D8CB;      /* peach paper */
  --paper:#F6E7DF;      /* text on dark */
  --dust:#B59CA1;       /* muted text on dark */
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --m:clamp(16px,3.2vw,52px);
  --g:clamp(10px,1.4vw,24px);
  --hdr:64px;
  --ease:cubic-bezier(.2,.8,.1,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
}
[data-theme=ink]{background:var(--ink);color:var(--paper);--muted:var(--dust);--hi:var(--salmon);--line:rgba(238,145,132,.28);--on-hi:var(--ink)}
[data-theme=plum]{background:var(--plum);color:var(--paper);--muted:var(--dust);--hi:var(--salmon);--line:rgba(238,145,132,.32);--on-hi:var(--ink)}
[data-theme=blush]{background:var(--blush);color:var(--ink);--muted:#6B4A50;--hi:#8A2E45;--line:rgba(20,12,16,.24);--on-hi:var(--blush)}
[data-theme=salmon]{background:var(--salmon);color:var(--ink);--muted:#5B2A31;--hi:var(--plum);--line:rgba(20,12,16,.32);--on-hi:var(--salmon)}

/* 2 ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px);background:var(--ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 clamp(16px,1.15vw,18px)/1.5 var(--sans);color:var(--paper);background:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
@media (hover:hover) and (pointer:fine){
  body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--hi,var(--salmon));outline-offset:4px}
::selection{background:var(--salmon);color:var(--ink)}
.skip{position:fixed;left:12px;top:-60px;z-index:400;background:var(--salmon);color:var(--ink);padding:10px 16px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
main{display:block}

/* 3 ── Type ───────────────────────────────────────────────────────────── */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(60px,10.4vw,210px);line-height:.92;letter-spacing:.003em;color:var(--hi)}
.ln{display:block;overflow:hidden;padding-block:.05em;margin-block:-.05em}
.ln__i{display:block}
.display .ln:nth-child(2){padding-left:.45em}
.js [data-reveal=lines] .ln__i{transform:translateY(112%)}
.js [data-reveal=lines].is-in .ln__i{transform:none;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*110ms)}

/* text roll: sans caps → serif italic on hover */
.roll{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-block:.1em;margin-block:-.1em}
.roll>*{grid-area:1/1;white-space:nowrap;transition:transform .6s var(--ease)}
.roll__b{transform:translateY(115%);font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:0;text-transform:capitalize;font-size:1.12em;color:var(--hi,var(--salmon))}
a:is(:hover,:focus-visible) .roll__a,button:is(:hover,:focus-visible) .roll__a{transform:translateY(-115%)}
a:is(:hover,:focus-visible) .roll__b,button:is(:hover,:focus-visible) .roll__b{transform:none}
.btn{display:inline-flex;align-items:center;padding:.85em 1.5em;border:1px solid currentColor;border-radius:99px;font-size:14px;font-weight:600;transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease)}
.btn:hover{background:var(--salmon);color:var(--ink);border-color:var(--salmon)}
.btn .roll__b{color:inherit}
[data-magnetic]{transition:transform .5s var(--ease)}

/* 4 ── Chrome ─────────────────────────────────────────────────────────── */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);color:var(--paper);--hi:var(--salmon);transition:color .35s,background .35s}
.site-header{--hbg:rgba(20,12,16,.94)}
.site-header.is-stuck{background:var(--hbg)}
.site-header[data-hdr=plum]{color:var(--paper);--hbg:rgba(42,18,32,.94)}
.site-header[data-hdr=blush]{color:var(--ink);--hi:#8A2E45;--hbg:rgba(242,216,203,.94)}
.site-header[data-hdr=salmon]{color:var(--ink);--hi:var(--plum);--hbg:rgba(238,145,132,.94)}
/* Brand: wordmark (default + inverted state) and SF monogram. Same mask-roll language as the rest of the site. */
.brand{--wm-h:1.4rem;--mk-h:1.7rem;display:grid;align-items:center;height:2.6rem;overflow:hidden;max-width:calc(var(--wm-h) * var(--rf,3.88));transition:max-width .9s var(--ease)}
.brand__full,.brand__mono{grid-area:1/1;display:block}
.brand__full{height:var(--wm-h)}
.brand__mono{height:var(--mk-h)}
.wm,.mk{display:block;height:100%;width:auto}
.wm__it{fill:var(--hi,currentColor)}
.wm__hv{fill:currentColor}
.wm__c{transition:transform .85s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.wm__b .wm__c{transform:translateY(1500px)}
html.js:not(.is-ready) .wm__a .wm__c{transform:translateY(1500px)}
.is-ready .wm__a .wm__c{animation:wm-in 1s var(--ease) backwards;animation-delay:calc(var(--i) * 55ms + 300ms)}
@keyframes wm-in{from{transform:translateY(1500px)}}
.brand:is(:hover,:focus-visible) .wm__a .wm__c{transform:translateY(-1500px)}
.brand:is(:hover,:focus-visible) .wm__b .wm__c{transform:none}
.brand__mono .mk{transform:translateY(130%);transition:transform .85s var(--ease)}
.is-collapsed .brand{max-width:calc(var(--mk-h) * var(--rm,.92))}
.is-collapsed .brand__mono .mk{transform:none}
.is-collapsed .wm__a .wm__c{transform:translateY(-1500px)}
.is-collapsed .brand:is(:hover,:focus-visible){max-width:calc(var(--wm-h) * var(--rf,3.88))}
.is-collapsed .brand:is(:hover,:focus-visible) .wm__a .wm__c{transform:none}
.is-collapsed .brand:is(:hover,:focus-visible) .wm__b .wm__c{transform:translateY(1500px)}
.is-collapsed .brand:is(:hover,:focus-visible) .brand__mono .mk{transform:translateY(-130%)}
.curtain{--hi:var(--plum)}
.curtain__mk{position:absolute;left:var(--m);top:var(--m);height:clamp(60px,9vw,120px)}
.wm--static{display:block;height:100%;width:auto}
.colophon__logo{display:block;height:clamp(28px,2.6vw,40px)}
.nav ul{display:flex;gap:clamp(20px,2.6vw,44px)}
.nav a{font-size:13px;font-weight:600;letter-spacing:.08em;display:inline-block;padding:8px 2px}
.menu-btn{display:none;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:10px 0}
.menu{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--paper);--hi:var(--salmon);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--hdr) + 5vh) var(--m) calc(var(--m) + env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io)}
.menu-open .menu{clip-path:inset(0)}
.menu-open .site-header{color:var(--paper);--hi:var(--salmon)}
.menu li{overflow:hidden}
.menu nav a{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-size:clamp(56px,19vw,150px);line-height:1;text-transform:uppercase;color:var(--salmon)}
.menu__n{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--dust)}
.menu__t{display:block;transform:translateY(105%);transition:transform .8s var(--ease)}
.menu-open .menu__t{transform:none}
.menu li:nth-child(2) .menu__t{transition-delay:.06s}.menu li:nth-child(3) .menu__t{transition-delay:.12s}.menu li:nth-child(4) .menu__t{transition-delay:.18s}
.menu__foot{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px}
.menu__foot a{text-decoration:underline;text-underline-offset:4px}

.curtain{position:fixed;inset:0;z-index:200;background:var(--salmon);color:var(--ink);transform:translate3d(0,100%,0);pointer-events:none;display:flex;align-items:flex-end;padding:var(--m)}
.curtain__label{font-family:var(--display);font-size:clamp(56px,13vw,220px);line-height:.9;text-transform:uppercase}
.is-leaving .curtain{transform:none;transition:transform .6s var(--ease-io);pointer-events:auto}
.is-arriving .curtain{transform:none;transition:none;animation:curtain-failsafe 0s 3.5s forwards}
.is-revealing .curtain{transform:translate3d(0,-100%,0);transition:transform .8s var(--ease-io)}
@keyframes curtain-failsafe{to{visibility:hidden}}
.progress{display:none}
.is-case .progress{display:block;position:fixed;left:0;top:0;right:0;height:3px;z-index:110;background:var(--salmon);transform-origin:left;transform:scaleX(var(--p,0))}

.cursor{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;--c:var(--salmon);--c-on:var(--ink);transition:opacity .3s}
.has-cursor .cursor{opacity:1}
.cursor[data-on=blush],.cursor[data-on=salmon]{--c:var(--ink);--c-on:var(--paper)}
.cursor__dot,.cursor__ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.cursor__dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--c)}
.cursor__ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--c);display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s}
.cursor__label{font-size:13px;font-weight:600;color:var(--c-on);opacity:0;transition:opacity .2s}
.cursor[data-state=link] .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px}
.cursor[data-state=label] .cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--c)}
.cursor[data-state=label] .cursor__label{opacity:1}
.cursor[data-state=label] .cursor__dot{opacity:0}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor .hscroll{cursor:none}

/* 5 ── Placeholders & media ───────────────────────────────────────────── */
.media{position:relative}
.media__frame{position:relative;aspect-ratio:var(--ratio);overflow:hidden;background:var(--plum);transition:clip-path .7s var(--ease);clip-path:inset(0)}
.media__inner{position:absolute;inset:-7% 0;will-change:transform}
.media__inner:not([data-parallax]){inset:0}
.media__inner>img,.media__inner>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.media figcaption{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);margin-top:10px}
.js .media[data-reveal=image]:not(.is-in) .media__frame{clip-path:inset(0 0 100% 0)}
.media[data-reveal=image].is-in .media__frame{animation:frame-reveal 1.3s var(--ease-io) backwards}
@keyframes frame-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

.ph{--ph-bg:var(--plum);--ph-fg:#E9CFC8;--ph-l:rgba(238,145,132,.09);color:var(--ph-fg);background-color:var(--ph-bg);background-image:repeating-linear-gradient(135deg,var(--ph-l) 0 1px,transparent 1px 9px);display:flex;align-items:flex-end;padding:clamp(22px,2.4vw,34px)}
.ph[data-tone=blush]{--ph-bg:#E3BFB0;--ph-fg:#4A2A31;--ph-l:rgba(20,12,16,.08)}
.ph[data-tone=salmon]{--ph-bg:var(--salmon);--ph-fg:#40161C;--ph-l:rgba(20,12,16,.1)}
.ph[data-tone=wine]{--ph-bg:var(--wine);--ph-fg:#F3D3CB;--ph-l:rgba(246,231,223,.08)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background:
 linear-gradient(currentColor,currentColor) left 10px top 10px/14px 1px,linear-gradient(currentColor,currentColor) left 10px top 10px/1px 14px,
 linear-gradient(currentColor,currentColor) right 10px top 10px/14px 1px,linear-gradient(currentColor,currentColor) right 10px top 10px/1px 14px,
 linear-gradient(currentColor,currentColor) left 10px bottom 10px/14px 1px,linear-gradient(currentColor,currentColor) left 10px bottom 10px/1px 14px,
 linear-gradient(currentColor,currentColor) right 10px bottom 10px/14px 1px,linear-gradient(currentColor,currentColor) right 10px bottom 10px/1px 14px;background-repeat:no-repeat}
.ph::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;opacity:.5;pointer-events:none;background:
 linear-gradient(currentColor,currentColor) center/1px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
 radial-gradient(circle,transparent 0 8px,currentColor 8px 9px,transparent 9px)}
.ph__label{display:flex;flex-direction:column;gap:1px;font-size:11px;line-height:1.3;max-width:100%;overflow:hidden;position:relative;z-index:1}
.ph__label b{font-weight:700}
.ph__label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 6 ── Hero ───────────────────────────────────────────────────────────── */
.hero{--tfs:calc(100cqw / 3.9);container-type:inline-size;position:relative;min-height:100svh;padding:calc(var(--hdr) + 1.5vh) var(--m) 0;overflow:hidden;border-bottom:1px solid var(--line);touch-action:pan-y}
.hero__disc{position:absolute;z-index:0;left:47%;top:7%;width:min(54cqw,84svh);aspect-ratio:1;border-radius:50%;background:#0b0407;transform:translateX(-50%);pointer-events:none}
.hero__brush{position:absolute;z-index:0;left:-3%;bottom:0;width:66%;height:80%;pointer-events:none}
.hero__glow{position:absolute;z-index:0;left:24%;top:8%;width:56%;height:100%;background:radial-gradient(closest-side,rgba(110,51,70,.8),rgba(110,51,70,0));pointer-events:none}
.hero__title{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:400;color:var(--salmon);text-transform:uppercase;line-height:1}
.hero__by{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(30px,3.8cqw,66px);line-height:1;color:var(--paper);margin:0 0 clamp(2px,.3cqw,8px) .05em;overflow:hidden;padding-bottom:.14em}
.hero__word{display:flex;gap:0;white-space:nowrap;font-size:var(--tfs);line-height:.9;margin-left:-.02em}
.w1,.w2{display:inline-flex;overflow:hidden;padding-block:.03em}
.ch{display:inline-block}
.js .hero__by .ch,.js .hero__word .ch{transform:translateY(112%)}
.is-ready .hero__by .ch,.is-ready .hero__word .ch{transform:none;transition:transform 1.15s var(--ease);transition-delay:calc(var(--i)*55ms + 100ms)}
.hero__portrait{position:absolute;z-index:2;bottom:0;left:50%;height:calc(100% - var(--hdr) - 5vh);aspect-ratio:3/4;transform:translateX(-58%);pointer-events:none}
.js .hero__portrait{clip-path:inset(100% 0 0 0)}
.is-ready .hero__portrait{clip-path:inset(0);transition:clip-path 1.4s var(--ease-io) .35s}
.portrait{width:100%;height:100%;object-fit:contain;object-position:bottom}
.portrait--ph{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(14px,2vw,28px)}
.portrait--ph svg{position:absolute;inset:0;width:100%;height:100%}
.portrait--ph path{fill:#3A1A2C;stroke:var(--salmon);stroke-width:1.6;stroke-dasharray:7 7}
.portrait--ph .ph__label{color:var(--paper);text-align:center;align-items:center;background:rgba(20,12,16,.6);padding:8px 12px}
.hero__left{position:absolute;z-index:3;left:var(--m);bottom:clamp(18px,3.2vw,52px);display:flex;flex-direction:column-reverse;gap:clamp(22px,3.4vw,54px);width:min(34cqw,480px)}
.hero__roles{display:flex;flex-direction:column;gap:6px;font-size:clamp(12px,1.05vw,15px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:14px;border-top:1px solid var(--line)}
.hero__script{position:relative;font-family:var(--script);color:var(--salmon);font-size:clamp(34px,5.2cqw,92px);line-height:.95;rotate:-8deg;transform-origin:left bottom;padding-bottom:.35em}
.sl{display:block;white-space:nowrap}
.sl:nth-child(2){margin-left:.35em}.sl:nth-child(3){margin-left:.7em}.sl:nth-child(4){margin-left:1.05em}
.hero__scribble{position:absolute;left:1.1em;bottom:0;width:78%;height:.4em;overflow:visible}
.hero__scribble path{fill:none;stroke:var(--salmon);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.is-ready .hero__scribble path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-io) 1.5s}
.is-ready .hero__scribble path+path{transition-delay:1.8s}
.hero__card{position:absolute;z-index:3;right:var(--m);bottom:clamp(120px,12vw,190px);width:min(25cqw,360px)}
.hero__name{display:flex;align-items:center;gap:.7em;font-size:clamp(17px,1.9cqw,30px);font-weight:600;letter-spacing:.12em;color:var(--salmon);margin-bottom:1em}
.hero__name svg{width:.9em;height:.9em}
.hero__intro{font-size:clamp(15px,1.25cqw,19px);line-height:1.45;max-width:20em}
.hero__loc{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--salmon);margin-top:clamp(18px,2vw,30px);padding-bottom:12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;line-height:1.5}
.badge{display:block;color:var(--hi)}
.badge__svg{display:block;width:100%;height:auto}
.badge__svg text{font:600 14.5px var(--sans);letter-spacing:.06em;fill:currentColor}
.badge__ring{transform-box:view-box;transform-origin:50% 50%;animation:spin 28s linear infinite}
.badge:hover .badge__ring{animation-duration:9s}
@keyframes spin{to{transform:rotate(360deg)}}
.badge--hero{position:absolute;z-index:3;right:var(--m);bottom:clamp(16px,2.4vw,36px);width:clamp(92px,9.4cqw,150px);--hi:var(--salmon)}
.js .hero__left,.js .hero__card,.js .badge--hero{opacity:0}
.is-ready .hero__left,.is-ready .hero__card,.is-ready .badge--hero{opacity:1;transition:opacity .9s ease 1.1s}
[data-depth]{will-change:translate}

.bar{display:flex;justify-content:space-between;align-items:center;gap:var(--g);padding:clamp(14px,1.5vw,20px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(18px,2.4vw,34px)}
.bar__t{display:flex;align-items:center;gap:.8em;font-size:clamp(15px,1.55vw,23px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.bar__t .ln{padding-block:.2em;margin-block:-.2em}
.arr{width:1.05em;height:1.05em;flex:none;color:var(--hi)}
.bar__r{font-size:clamp(10.5px,.85vw,13px);letter-spacing:.14em;text-transform:uppercase;text-align:right;color:var(--muted);max-width:28em;line-height:1.5}
.star{display:block;width:1em;height:1em;flex:none}
.tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,26px)}
.tools .filters,.tools .view-toggle{justify-content:flex-start}

/* 7 ── Manifesto ──────────────────────────────────────────────────────── */
.manifesto{position:relative;padding:clamp(56px,8vw,120px) var(--m) clamp(56px,7vw,110px)}
.manifesto__star{position:absolute;right:var(--m);top:clamp(28px,4vw,60px);width:clamp(40px,6vw,92px);height:clamp(40px,6vw,92px);color:var(--salmon)}
.circled{position:relative;display:inline-block;white-space:nowrap}
.circled__o{position:absolute;left:-7%;top:-16%;width:114%;height:132%;overflow:visible;pointer-events:none}
.circled__o path{fill:none;stroke:var(--salmon);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease-io)}
.js .circled__o path{stroke-dashoffset:1}
.js .circled.is-drawn .circled__o path{stroke-dashoffset:0}
.manifesto__text{font-family:var(--serif);font-style:italic;font-size:clamp(32px,5.6vw,98px);line-height:1.04;letter-spacing:-.015em;max-width:19em;margin-left:clamp(0px,8vw,140px);color:var(--paper)}
.mw{transition:opacity .35s}
.js .mw{opacity:.2}
.js .mw.on{opacity:1}
.disciplines{display:flex;flex-wrap:wrap;gap:.4em 1.6em;margin-top:clamp(40px,7vw,110px);font-size:clamp(14px,1.2vw,18px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;max-width:62em;color:var(--salmon)}
.disciplines li{transition:color .25s,transform .4s var(--ease)}
.disciplines li:hover{color:var(--paper);transform:translateY(-2px)}

/* 8 ── Work (bento) ───────────────────────────────────────────────────── */
.work{padding:clamp(20px,3vw,44px) var(--m) clamp(60px,8vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--g);margin-bottom:clamp(30px,5vw,80px)}
.sec-head__side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.count{font-size:14px;color:var(--muted)}
.view-toggle,.filters{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.view-toggle button,.filters button{font-size:14px;font-weight:500;padding:.5em 1.1em;border:1px solid var(--line);border-radius:99px;transition:background .25s,color .25s,border-color .25s}
.view-toggle button:hover,.filters button:hover{border-color:currentColor}
.view-toggle button[aria-pressed=true],.filters button[aria-pressed=true]{background:var(--hi);color:var(--on-hi);border-color:var(--hi)}

.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pt{--tile:var(--plum);--tile-fg:var(--paper);--tile-mut:var(--dust);grid-column:span var(--span);position:relative;background:var(--tile);color:var(--tile-fg);min-height:clamp(300px,31vw,480px);overflow:hidden}
.pt[data-tone=blush]{--tile:var(--blush);--tile-fg:var(--ink);--tile-mut:#6B4A50}
.pt[data-tone=salmon]{--tile:var(--salmon);--tile-fg:var(--ink);--tile-mut:#5B2A31}
.pt__link{display:block;position:relative;height:100%;min-height:inherit;padding:clamp(16px,2vw,32px)}
.pt__media{position:absolute;right:0;top:0;bottom:0;width:52%}
.pt__media .media,.pt__media .media__frame{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.pt__text{position:relative;z-index:2;max-width:48%;display:flex;flex-direction:column;gap:clamp(6px,.8vw,12px)}
.pt__n{font-size:clamp(14px,1.1vw,17px);font-variant-numeric:tabular-nums;color:var(--tile-mut)}
.pt__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,46px);line-height:.98;letter-spacing:.005em;transition:transform .7s var(--ease);overflow-wrap:break-word}
.pt__meta{display:flex;flex-direction:column;font-size:clamp(12px,.95vw,14px);letter-spacing:.08em;text-transform:uppercase;color:var(--tile-mut);font-weight:500;line-height:1.5}
.pt__role{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.3vw,20px);color:var(--tile-fg)}
@media (hover:hover){
  .pt__role{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
  .pt__link:hover .pt__role,.pt__link:focus-visible .pt__role{max-height:3em;opacity:1}
  .pt__link:hover .pt__title{transform:translateX(.5vw)}
  .pt__link:hover .media__frame{clip-path:inset(10px)}
  .pt__link:hover .media__inner>*{transform:scale(1.07)}
}
.pt .media{margin:0}
.pt--narrow .pt__media{left:0;right:0;top:auto;bottom:0;width:auto;height:44%}
.pt--narrow .pt__text{max-width:100%}

.index-wrap{display:none}
.work[data-view=index] .gallery{display:none}
.work[data-view=index] .index-wrap{display:block}
.index{border-top:1px solid var(--line)}
.idx{display:grid;grid-template-columns:4ch minmax(0,1fr) minmax(0,.55fr) 5ch;align-items:baseline;gap:var(--g);padding:clamp(12px,1.8vw,26px) 0;border-bottom:1px solid var(--line);transition:opacity .3s}
.idx__n,.idx__y{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.idx__t{font-family:var(--display);font-size:clamp(40px,8vw,150px);line-height:.98;text-transform:uppercase;color:var(--salmon)}
.idx__s{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.idx__y{text-align:right}
.index:hover .idx:not(:hover){opacity:.22}
.float{position:fixed;left:0;top:0;width:clamp(200px,22vw,360px);aspect-ratio:4/5;pointer-events:none;z-index:60;opacity:0;transition:opacity .3s;display:none}
.float.is-on{opacity:1}
.float__item{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--ease-io)}
.float__item.is-active{clip-path:inset(0)}
.float__item>*{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media (hover:hover) and (pointer:fine){.float{display:block}}

/* 9 ── Archive (peach) ────────────────────────────────────────────────── */
.archive{padding:clamp(20px,3vw,44px) var(--m) clamp(60px,8vw,120px)}
.archive__note{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,26px);max-width:19em;color:var(--muted)}
.masonry{columns:3;column-gap:var(--g)}
.tile{position:relative;break-inside:avoid;margin:0 0 calc(var(--g) * 1.4);width:100%;rotate:var(--tr,0deg);transition:opacity .5s,filter .5s,rotate .6s var(--ease)}
.tile:hover{rotate:0deg}
.tile--tape::before{content:"";position:absolute;left:50%;top:-11px;width:32%;height:22px;margin-left:-16%;background:rgba(238,145,132,.78);rotate:-3deg;z-index:3}
.tile__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.archive__hand{font-family:var(--script);font-size:clamp(22px,2.6vw,38px);color:var(--hi);rotate:-3deg;line-height:1}
.tile--l{width:80%}
.tile--r{width:80%;margin-left:auto}
.tile .media{margin:0}
.tile.is-dim{opacity:.16;filter:grayscale(1)}
.tile__btn{position:absolute;inset:0;width:100%;height:100%}
.tile__cap{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);padding:9px 14px 10px;transform:translateY(101%);transition:transform .5s var(--ease);pointer-events:none;z-index:2;max-width:100%}
.tile__t{font-weight:600;font-size:14px;line-height:1.2}
.tile__c{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.1;color:var(--salmon)}
@media (hover:hover){
  .tile:hover .tile__cap,.tile:focus-within .tile__cap{transform:none}
  .tile:hover .media__inner>*{transform:scale(1.06)}
}
@media (hover:none){.tile__clip{position:static;overflow:visible}.tile__cap{transform:none;position:static;margin-top:8px;padding:0;background:none;color:inherit;flex-direction:row;gap:.6em;align-items:baseline}.tile__c{color:var(--muted)}}
.lightbox,.lightbox *{cursor:auto!important}
.lightbox button{cursor:pointer!important}
.lightbox{border:0;padding:0;background:transparent;color:var(--paper);width:100%;max-width:none;height:100%;max-height:none}
.lightbox::backdrop{background:rgba(20,12,16,.95)}
.lightbox__in{height:100%;display:grid;grid-template-rows:1fr auto;padding:clamp(16px,3vw,48px);gap:16px}
.lightbox__fig{position:relative;min-height:0;display:grid;place-items:center}
.lightbox__fig .media{max-height:100%;width:min(100%,calc((100svh - 190px) * var(--lr,1)))}
.lightbox__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px}
.lightbox__bar button{border:1px solid rgba(246,231,223,.4);border-radius:99px;padding:.5em 1.2em;font-weight:500;transition:background .25s,color .25s}
.lightbox__bar button:hover{background:var(--salmon);color:var(--ink);border-color:var(--salmon)}
.lightbox__cap b{font-weight:600}.lightbox__cap i{font-family:var(--serif);font-size:18px;margin-left:.6em;color:var(--salmon)}

/* 10 ── About ─────────────────────────────────────────────────────────── */
.about{padding:clamp(20px,3vw,44px) var(--m) clamp(60px,8vw,110px)}
.about__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(24px,4vw,60px);align-items:end}
.about__copy{grid-column:1/6;grid-row:1}
.about__visual{grid-column:7/13;grid-row:1;position:relative;padding-bottom:clamp(30px,10vw,160px)}
.about__main{width:76%;margin-left:auto}
.about__detail{position:absolute;left:0;bottom:0;width:38%}
.about__star{position:absolute;left:-1vw;top:2%;width:clamp(30px,4vw,56px);height:clamp(30px,4vw,56px);color:var(--salmon)}
.about__tag{position:absolute;right:-1.6vw;top:10%;writing-mode:vertical-rl;font-family:var(--script);font-size:clamp(24px,2.6vw,40px);color:var(--salmon)}
.about__lead{font-family:var(--serif);font-size:clamp(32px,3.7vw,64px);line-height:1.04;letter-spacing:-.01em;margin-bottom:.8em}
.about__body p{max-width:36em;margin-bottom:1em;color:#E8D4CB}
.about__facts{margin-top:clamp(28px,3.5vw,52px);display:grid;gap:12px}
.about__facts div{display:grid;grid-template-columns:8.5em 1fr;gap:1em;padding-top:12px;border-top:1px solid var(--line)}
.about__facts dt{font-size:14px;color:var(--muted)}
.about__facts dd{font-weight:500}

/* 11 ── Panels: skills + process ──────────────────────────────────────── */
.panels{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.panel{background:var(--ink);padding:clamp(22px,3.2vw,52px)}
.panel__h{display:flex;align-items:center;gap:.8em;font-size:clamp(15px,1.3vw,19px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:clamp(22px,3.4vw,52px)}
.skill{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--g);align-items:start;padding:clamp(14px,1.8vw,26px) 0;border-top:1px solid var(--line)}
.skill__name{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.9vw,72px);line-height:.95;text-transform:uppercase;color:var(--salmon)}
.skill__list{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.8vw,29px);line-height:1.18;padding-top:.15em}
.skill__list li{width:max-content;max-width:100%;transition:color .25s,transform .5s var(--ease)}
.skill__list li:hover{color:var(--salmon);transform:translateX(.35em)}
.system{margin-top:clamp(22px,2.8vw,40px);border-top:1px solid var(--line);padding-top:clamp(16px,2vw,26px)}
.system .panel__h{margin-bottom:16px}
.system__type{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sp span{display:block;font-size:clamp(44px,5vw,88px);line-height:1;color:var(--paper)}
.sp small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.4}
.sp--a span{font-family:var(--display)}
.sp--b span{font-family:var(--serif);font-style:italic}
.sp--c span{font-family:var(--sans);font-weight:700}
.sp--d span{font-family:var(--script);color:var(--salmon)}
.system__sw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:clamp(16px,2vw,24px)}
.system__sw li{display:grid;gap:3px}
.system__sw i{display:block;aspect-ratio:1.6/1;background:var(--c);border:1px solid var(--line)}
.system__sw b{font-size:12px;font-weight:600;margin-top:4px}
.system__sw small{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.mood__star{position:absolute;right:2%;bottom:4%;width:clamp(28px,3.6vw,52px);height:clamp(28px,3.6vw,52px);color:var(--salmon);z-index:4}
.process{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);align-items:start}
.process__list li{display:grid;grid-template-columns:2.6em 1fr;gap:12px;padding:clamp(12px,1.5vw,22px) 0;border-top:1px solid var(--line)}
.process__list li:first-child{border-top:0;padding-top:0}
.process__n{font-family:var(--display);font-size:clamp(30px,3.2vw,52px);line-height:1;color:var(--salmon)}
.process__list h3{font-size:clamp(15px,1.2vw,18px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.3em}
.process__list p{color:var(--muted);max-width:22em;font-size:15px}
.mood{position:relative;min-height:clamp(340px,40vw,620px)}
.mood>div{position:absolute}
.mood .media{margin:0}
.mood__a{left:0;top:6%;width:38%;rotate:-3deg}
.mood__b{right:0;top:0;width:46%;rotate:2deg}
.mood__c{right:18%;bottom:0;width:34%;rotate:-2deg;z-index:2}
.mood__note{position:absolute;left:10%;bottom:3%;width:42%;background:var(--blush);color:var(--ink);padding:clamp(16px,1.8vw,26px) clamp(14px,1.6vw,24px);rotate:-5deg;font-family:var(--script);font-size:clamp(20px,2.1vw,32px);line-height:1.12;z-index:3}
.mood__note::before{content:"";position:absolute;left:50%;top:-12px;width:38%;height:22px;margin-left:-19%;background:rgba(238,145,132,.6);rotate:3deg}

/* 12 ── Experience ───────────────────────────────────────────────────── */
.exp{padding:clamp(20px,3vw,44px) var(--m) clamp(60px,8vw,120px)}
.exp__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(12px,2vw,30px);align-items:start}
.ladder{grid-column:1/7;position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center}
.ladder__list{display:flex;flex-direction:column;gap:clamp(6px,.9vw,14px);width:100%}
.stage{font-family:var(--display);text-transform:uppercase;line-height:.98;color:var(--paper);opacity:.24;transition:opacity .6s,color .6s,transform .8s var(--ease)}
.stage{position:relative}
.stage.is-done{opacity:.6}
.stage__scribble{position:absolute;left:0;bottom:-.04em;width:82%;height:.2em;overflow:visible}
.stage__scribble path{fill:none;stroke:var(--salmon);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-io) .2s}
.stage.is-on .stage__scribble path{stroke-dashoffset:0}
.stage.is-on{opacity:1}
.stage:nth-child(1){font-size:clamp(15px,1.5vw,24px);margin-left:0}
.stage:nth-child(2){font-size:clamp(19px,2.1vw,34px);margin-left:1.6vw}
.stage:nth-child(3){font-size:clamp(25px,2.9vw,48px);margin-left:3.4vw}
.stage:nth-child(4){font-size:clamp(32px,3.9vw,64px);margin-left:5.4vw}
.stage:nth-child(5){font-size:clamp(34px,4.1vw,70px);margin-left:7.4vw}
.stage:nth-child(6){font-size:clamp(46px,6.4vw,118px);margin-left:9.4vw}
.stage:last-child.is-on{color:var(--salmon)}
.jobs{grid-column:8/13}
.job{min-height:52svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(28px,4vw,60px);border-top:1px solid var(--line)}
.job__co{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,80px);line-height:.96;text-transform:uppercase;transition:color .5s}
.job.is-current .job__co{color:var(--salmon)}
.job__role{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,32px);margin-top:.5em}
.job__line{color:var(--muted);margin-top:.6em;max-width:24em}
.job:nth-child(1){min-height:36svh}.job:nth-child(1) .job__co{font-size:clamp(24px,2.8vw,48px)}
.job:nth-child(2) .job__co{font-size:clamp(30px,3.6vw,62px)}
.job:nth-child(6) .job__co{font-size:clamp(46px,7vw,124px)}

/* 13 ── Contact ──────────────────────────────────────────────────────── */
.contact{container-type:inline-size;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(30px,4vw,60px);padding:calc(var(--hdr) + 3vw) var(--m) 22px}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) minmax(0,.6fr);gap:var(--g);align-items:end}
.contact__title{font-family:var(--display);font-weight:400;font-size:calc(100cqw * .124);line-height:.9;text-transform:uppercase;color:var(--ink)}
.contact__arch{position:relative;align-self:end}
.burst{position:absolute;right:7%;top:15%;width:23%;color:var(--salmon);pointer-events:none}
.contact__arch .media{margin:0}
.contact__arch .media__frame{border-radius:999px 999px 0 0}
.contact__side{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px);align-self:stretch;justify-content:space-between}
.contact__k{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.contact__list{display:grid;gap:8px;font-size:clamp(18px,1.9vw,28px);font-weight:600}
.badge--cta{width:clamp(96px,11cqw,170px);--hi:var(--ink);align-self:flex-end}
.contact__mailrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;border-top:1px solid var(--line);padding-top:clamp(16px,2vw,28px)}
.mail{font-family:var(--display);font-size:calc(100cqw * .104);line-height:1;display:inline-block;word-break:break-all;order:2}
.contact__mailrow .contact__k{order:1;width:100%}
.mc{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;padding-block:.06em;margin-block:-.06em}
.mc>span{display:block;transition:transform .6s var(--ease);transition-delay:calc(var(--i)*22ms)}
.mc>span:last-child{position:absolute;left:0;top:.06em;transform:translateY(115%);font-family:var(--serif);font-style:italic;font-weight:400;color:var(--plum);font-size:1.08em;line-height:.95}
.mail:is(:hover,:focus-visible) .mc>span:first-child{transform:translateY(-115%)}
.mail:is(:hover,:focus-visible) .mc>span:last-child{transform:none}
.copy{order:3;font-size:14px;font-weight:600;border:1px solid currentColor;border-radius:99px;padding:.6em 1.3em;transition:background .25s,color .25s}
.copy:hover{background:var(--ink);color:var(--salmon);border-color:var(--ink)}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;padding-top:16px;border-top:1px solid var(--line)}
.colophon a{font-weight:600}

/* 14 ── Case studies ─────────────────────────────────────────────────── */
.case{background:var(--ink)}
.case-hero{container-type:inline-size;padding:calc(var(--hdr) + clamp(24px,5vw,80px)) var(--m) clamp(28px,4vw,64px)}
.case-hero__n{display:flex;gap:.7em;align-items:baseline;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--paper)}
.case-hero__n span{font-weight:500;color:var(--muted)}
.case-hero__title{font-family:var(--display);font-weight:400;font-size:min(calc(100cqw / (var(--len) * .47)),calc(34cqw / var(--lines,1)));line-height:.92;text-transform:uppercase;color:var(--salmon);margin:.16em 0 .3em}
.case-hero--tight .case-hero__title{font-size:min(calc(100cqw / (var(--len) * .47)),24cqw)}
.case-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:16px}
.case-meta>div{grid-column:span 4;border-top:1px solid var(--line);padding-top:12px}
.case-meta dt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.case-meta dd{font-size:clamp(17px,1.5vw,22px);font-weight:500;line-height:1.3}
.bleed{margin-top:clamp(20px,3vw,40px)}
.cs .bleed{margin-inline:calc(var(--m) * -1)}
.bleed--gap{margin-top:clamp(50px,8vw,120px)}
.wrap{padding:clamp(10px,2vw,30px) var(--m) 0}
.cs{padding:clamp(60px,9vw,150px) var(--m) 0}
.cs__head{display:flex;align-items:baseline;gap:clamp(10px,1.4vw,22px);margin-bottom:clamp(26px,4.5vw,72px)}
.cs__n{font-size:14px;font-weight:600;color:var(--salmon);font-variant-numeric:tabular-nums}
.cs__t{font-family:var(--display);font-weight:400;font-size:clamp(44px,9vw,160px);line-height:.92;color:var(--paper)}
.cs__text p{font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:32em;margin-bottom:1em;color:#E8D4CB}
.cs__caption{margin-top:14px}
.cs__caption p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted)}
.cs__statement{font-family:var(--serif);font-style:italic;font-size:clamp(34px,6vw,108px);line-height:1.02;letter-spacing:-.015em;max-width:16em;margin-bottom:clamp(24px,4vw,64px)}
.cs__statement--sm{font-size:clamp(28px,3.6vw,60px);margin-bottom:0}
.mini{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,42px);text-transform:uppercase;color:var(--salmon);margin-bottom:.4em;line-height:1}

.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:clamp(24px,4vw,64px)}
.g>.cell{grid-column:var(--c,1/-1);grid-row:var(--r,auto);margin-top:var(--mt,0);align-self:var(--as,start);rotate:var(--rot,0deg);position:relative}
.g--tight{margin-top:clamp(20px,3vw,40px)}
.g--hydra .media{margin:0}
.g--collage>.cell{transition:rotate .6s var(--ease),transform .6s var(--ease)}
.g--collage>.cell:hover{rotate:0deg;transform:translateY(-6px);z-index:5!important}
.browser{border:1px solid var(--line);background:var(--ink)}
.browser__bar,.shot__bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.browser__bar i,.shot__bar i{width:9px;height:9px;border-radius:50%;background:var(--salmon);opacity:.5}
.browser .media__frame,.shot .media__frame,.phone .media__frame{clip-path:none}
.phone{width:72%;margin-left:auto;border:clamp(4px,.5vw,8px) solid var(--salmon);border-radius:clamp(16px,2.2vw,34px);overflow:hidden;background:var(--ink)}
.g>.cell:has(>.phone){margin-bottom:-4vw}
.shot{border:1px solid var(--line);background:var(--ink)}
.shot__win{position:relative;aspect-ratio:var(--win);overflow:hidden}
.shot__tall{position:absolute;left:0;right:0;top:0;will-change:transform}
.hscroll{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);cursor:grab}
.hscroll::-webkit-scrollbar{display:none}
.hscroll.is-drag{cursor:grabbing;scroll-snap-type:none}
.hscroll ul{display:flex;gap:var(--g);width:max-content;padding-right:var(--m)}
.hscroll li{flex:0 0 clamp(240px,29vw,460px);scroll-snap-align:start}
.hscroll__bar{height:2px;background:var(--line);margin-top:26px}
.hscroll__bar i{display:block;height:100%;width:100%;background:var(--salmon);transform-origin:left;transform:scaleX(var(--sp,.25))}
.step .media{margin:0}
.step__t{display:flex;gap:.7em;font-weight:600;margin:14px 0 4px}
.step__t span{color:var(--salmon);font-variant-numeric:tabular-nums}
.step__d{color:var(--muted);max-width:24em;font-size:16px}
.bigwords{display:flex;flex-direction:column;font-family:var(--display);font-size:clamp(50px,9vw,160px);line-height:.94;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--salmon)}
.bigwords span{transition:color .4s}
.bigwords span:hover{color:var(--salmon)}
.ledger li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:8px;padding:clamp(20px,3vw,44px) 0;border-top:1px solid var(--line);align-items:start}
.ledger li:last-child{border-bottom:1px solid var(--line)}
.ledger__n{grid-column:1/2;grid-row:1;font-size:14px;font-weight:600;padding-top:.6em;color:var(--salmon)}
.ledger__t{grid-column:2/7;grid-row:1;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.8vw,64px);line-height:.96;text-transform:uppercase}
.ledger__d{grid-column:2/7;grid-row:2;color:var(--muted);max-width:26em}
.ledger__m{grid-column:8/13;grid-row:1/3;margin:0}
.mosaic{columns:3;column-gap:var(--g)}
.mosaic .media{break-inside:avoid;margin:0 0 var(--g)}
.sticky{position:sticky;top:calc(var(--hdr) + 20px)}
.steps li{display:grid;grid-template-columns:3.4em 1fr;column-gap:var(--g);padding:clamp(16px,2.2vw,32px) 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps span{grid-row:1/3;font-family:var(--display);font-size:clamp(40px,5vw,84px);line-height:.9;color:var(--salmon)}
.steps h3{font-size:clamp(16px,1.3vw,20px);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.steps p{color:var(--muted);max-width:24em}
.next-wrap{padding:clamp(70px,10vw,160px) var(--m)}
.next{display:grid;gap:10px;justify-items:start}
.next__k{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,32px);color:var(--muted)}
.next__t{font-family:var(--display);font-size:clamp(56px,12.5vw,240px);line-height:.92;text-transform:uppercase;color:var(--salmon);transition:transform .8s var(--ease)}
.next__t{max-width:100%}
.next__t .roll{display:grid;max-width:100%}
.next__t .roll>*{white-space:normal}
.next:hover .next__t{transform:translateX(1.2vw)}
.next__m{font-size:14px;color:var(--muted)}
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding:var(--hdr) var(--m)}
.nf__n{font-family:var(--display);font-size:38vw;line-height:.85;color:var(--salmon)}
.nf__t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,4vw,60px)}

/* 15 ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1100px){
  .masonry,.mosaic{columns:2}
  .ladder{grid-column:1/6}.jobs{grid-column:6/13}
  .about__copy{grid-column:1/7}.about__visual{grid-column:8/13}
  .panels{grid-template-columns:1fr}
  .system__type{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contact__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .contact__side{grid-column:1/-1;flex-direction:row;align-items:flex-end}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
}
@media (max-width:760px){
  :root{--hdr:56px}
  .brand{--wm-h:1.2rem;--mk-h:1.55rem}
  .hero{--tfs:calc(100cqw / 2.05);min-height:100svh;padding-bottom:0}
  .hero__word{flex-direction:column;gap:0;font-size:var(--tfs)}
  .w1{font-size:1.092em;align-self:flex-start}
  .hero__brush{width:140%;left:-24%;height:58%}
  .hero__disc{width:118cqw;top:24%;left:66%}
  .stage__scribble path{stroke-dashoffset:0}
  .burst{right:6%;top:14%;width:26%}
  .system__type{grid-template-columns:repeat(2,1fr)}
  .system__sw{grid-template-columns:repeat(3,1fr)}
  .w2{font-size:1em}
  .hero__portrait{height:70%;left:auto;right:-10%;transform:none;aspect-ratio:3/4}
  .portrait--ph{align-items:center;padding-bottom:0}
  .portrait--ph .ph__label{max-width:70%}
  .hero__left{left:var(--m);bottom:16px;width:56%;gap:16px}
  .hero__script{font-size:clamp(28px,9.6vw,44px);rotate:-6deg}
  .hero__roles{font-size:10.5px;letter-spacing:.1em;flex-direction:row;flex-wrap:wrap;gap:4px 12px}
  .hero__card{left:var(--m);right:auto;top:auto;bottom:auto;position:relative;width:60%;margin-top:14px;order:3}
  .hero{display:flex;flex-direction:column}
  .hero__title{flex:0 0 auto}
  .hero__card{display:none}
  .badge--hero{width:84px;right:var(--m);bottom:16px}
  .manifesto__text{margin-left:0;font-size:clamp(30px,8.6vw,48px)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .sec-head__side{align-items:flex-start;text-align:left}
  .view-toggle,.filters{justify-content:flex-start}
  .display{font-size:clamp(56px,20vw,140px)}
  .pt{grid-column:1/-1;min-height:300px}
  .pt__title{font-size:clamp(30px,7.6vw,46px)}.pt__text{max-width:50%}
  .idx{grid-template-columns:3ch minmax(0,1fr) 4ch}
  .idx__s{display:none}
  .idx__t{font-size:clamp(34px,11vw,64px)}
  .masonry{columns:2;column-gap:10px}
  .tile{margin-bottom:10px}
  .tile--l,.tile--r{width:100%}
  .about__grid{display:flex;flex-direction:column-reverse;gap:40px}
  .about__visual{padding-bottom:22vw;width:100%}
  .about__main{width:78%}
  .about__detail{width:40%}
  .about__tag{right:0}
  .about__facts div{grid-template-columns:7em 1fr}
  .skill{grid-template-columns:1fr;gap:8px}
  .process{grid-template-columns:1fr}
  .mood{min-height:110vw}
  .exp__grid{display:flex;flex-direction:column;gap:40px}
  .ladder{position:static;height:auto;display:block}
  .stage{opacity:1;color:var(--paper)}
  .stage:nth-child(1){font-size:15px}.stage:nth-child(2){font-size:22px;margin-left:5vw}.stage:nth-child(3){font-size:30px;margin-left:10vw}
  .stage:nth-child(4){font-size:40px;margin-left:15vw}.stage:nth-child(5){font-size:32px;margin-left:20vw}.stage:nth-child(6){font-size:19vw;margin-left:8vw;color:var(--salmon)}
  .job,.job:nth-child(1){min-height:0}
  .job__co,.job:nth-child(n) .job__co{font-size:clamp(32px,10vw,54px)}
  .job:nth-child(1) .job__co{font-size:clamp(26px,7.4vw,40px)}
  .contact{padding-top:calc(var(--hdr) + 40px)}
  .contact__grid{grid-template-columns:1fr 1fr;row-gap:24px}
  .contact__title{grid-column:1/-1;font-size:calc(100cqw * .25)}
  .contact__arch{grid-column:1/2}
  .contact__side{grid-column:2/3;flex-direction:column;align-self:end}
  .mail{font-size:calc(100cqw * .115)}
  .case-meta>div{grid-column:span 6}.case-meta>div:last-child{grid-column:1/-1}
  .g>.cell{grid-column:var(--mc,1/-1);grid-row:auto;margin-top:calc(var(--mt,0) * .5)}
  .g>.cell:has(>.phone){margin-bottom:-8vw}
  .phone{width:100%}
  .ledger__t,.ledger__d{grid-column:2/13}.ledger__m{grid-column:2/13;grid-row:3;margin-top:12px}
  .steps li{grid-template-columns:2.6em 1fr}
  .sticky{position:static}
  .hscroll li{flex-basis:72vw}
  .lightbox__fig .media{width:min(100%,calc((100svh - 170px) * var(--lr,1)))}
}
@media (min-width:1700px){
  :root{--m:clamp(52px,4vw,96px)}
  body{font-size:19px}
}

/* 16 ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal=lines] .ln__i,.js .hero .ch{transform:none!important}
  .js .media[data-reveal=image]:not(.is-in) .media__frame,.js .hero__portrait{clip-path:inset(0)!important}
  .js .hero__left,.js .hero__card,.js .badge--hero{opacity:1!important}
  .hero__scribble path,.circled__o path,.stage__scribble path{stroke-dashoffset:0!important}
  .js .mw{opacity:1!important}
  .badge__ring{animation:none}
  .curtain{display:none}
}