/* NATE journey — shared styles (hero variants add their own) */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400-normal.woff2) format('woff2')}
/* Thunder Black LC (Rajesh Rajput) — the Skiper hover-members font. size-adjust lifts its 0.70em cap height to Anton's 0.86em so every line-height:.86 cap-box rule and the canvas measuring keep working; ascent-override 70% (pre-size-adjust) puts the baseline on the box bottom. Declared as weight 400 so nothing synthesizes bold. */
@font-face{font-family:'Thunder';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Thunder-BlackLC.woff2) format('woff2');size-adjust:122.857%;ascent-override:70%;descent-override:0%;line-gap-override:0%}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format('woff2')}

:root{
  --bg:#0b0b0c;--bg2:#141416;--ink:#f2efea;--sand:#bdb1a5;--red:#e3203c;--red2:#ff2d4d;
  --mute:rgba(242,239,234,.58);--mute2:rgba(242,239,234,.34);--line:rgba(242,239,234,.14);
  --display:'Thunder','Anton',Impact,'Arial Narrow Bold',sans-serif;--sans:'Inter Tight',Inter,system-ui,-apple-system,sans-serif;--mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);--vh:100vh;
  --lb-bg:rgba(8,8,9,.97);--lb-fg:#fff;
}
@supports (height:100dvh){:root{--vh:100dvh}}
html{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;font-size:16px;line-height:1.5}
/* hosts that wrap the page (artifact viewer) put their own body{color;font} and :root{color-scheme} first; the rules above and below win by order */
:root{color-scheme:dark}
main,header,footer,section,h1,h2,h3,p,a,button{color:inherit}
html.has-cursor body,html.has-cursor a,html.has-cursor button{cursor:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---- grain + cursor ---- */
.grain{position:fixed;left:-10%;top:-10%;width:120%;height:120%;pointer-events:none;z-index:900;opacity:.06;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cur{position:fixed;left:0;top:0;z-index:950;pointer-events:none;display:none}
html.has-cursor .cur{display:block}
.cur_dot{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);will-change:transform}
.cur_ring{position:fixed;left:0;top:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(242,239,234,.55);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s;will-change:transform}
.cur_ring span{opacity:0;transition:opacity .2s}
.cur.is-hover .cur_ring{width:56px;height:56px;border-color:var(--ink);background:rgba(242,239,234,.12)}
.cur.is-label .cur_ring{width:84px;height:84px;background:var(--red);border-color:var(--red)}
.cur.is-label .cur_ring span{opacity:1}
.cur.is-label .cur_dot{opacity:0}

/* ---- fixed nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .35s,transform .35s}
.nav::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(11,11,12,.92),rgba(11,11,12,.6) 70%,rgba(11,11,12,0));pointer-events:none}
.nav.is-on{opacity:1;transform:none;pointer-events:auto}
.nav_mark{font-family:var(--display);font-size:22px;letter-spacing:.02em;line-height:1;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;color:var(--ink)}
.nav_keys{display:flex;gap:0}
.nav_key{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;text-decoration:none;font:400 22px/1 var(--display);letter-spacing:.02em;color:var(--mute2);transition:color .25s,transform .25s}
.nav_key.is-past{color:var(--sand)}
.nav_key.is-current{color:var(--red2);transform:scale(1.15)}
.nav_key:hover{color:var(--ink)}
.nav_mail{font:500 13px/1 var(--sans);text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:0 14px;min-height:40px;display:inline-flex;align-items:center;gap:8px;background:rgba(11,11,12,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,background .25s}
.nav_mail:hover{border-color:var(--ink);background:rgba(242,239,234,.08)}
.nav_mail i{display:block;width:7px;height:7px;border-radius:50%;background:#55d47a}
@media (max-width:480px){.nav_mark{font-size:20px}.nav_key{width:38px}}

/* ---- common blocks ---- */
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.display{font-family:var(--display);line-height:.86;letter-spacing:.005em;text-transform:uppercase}
.hero{position:relative;height:var(--vh);min-height:560px;overflow:hidden;background:var(--bg)}
.hero_top{position:absolute;left:var(--gutter);right:var(--gutter);top:14px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.hero_name{display:flex;flex-direction:column;gap:2px;text-decoration:none;min-height:44px;justify-content:center}
.hero_name b{font:600 14px/1.1 var(--sans);letter-spacing:-.01em}
.hero_name span{font:400 11px/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.badge{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:700 14px/1 var(--mono);color:var(--ink);background:rgba(242,239,234,.04);transition:background .25s,border-color .25s,transform .25s}
.badge:hover{background:var(--red);border-color:var(--red);transform:rotate(-8deg)}
.hero_cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);z-index:5;text-decoration:none;min-height:44px;justify-content:flex-end;padding:0 12px}
.hero_cue i{display:block;width:1px;height:28px;background:var(--mute2);overflow:hidden;position:relative}
.hero_cue i::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--ink);animation:cue 1.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{to{top:100%}}

/* hero word engine */
.hw{position:absolute;left:0;right:0;z-index:3}
.hw_clip{position:absolute;left:-50vw;right:-50vw;top:0;overflow:hidden;padding:2px 0 0}
.hw_word{position:relative;display:flex;justify-content:center;align-items:flex-start;font-family:var(--display);line-height:.86;letter-spacing:0;white-space:nowrap;margin:0;color:var(--word,var(--ink));will-change:transform;text-transform:uppercase}
.hw_c{display:inline-block;will-change:transform;flex:0 0 auto}
.hw_keys{position:absolute;left:0;top:0;height:0;width:100%;pointer-events:none;z-index:4}
.key{position:absolute;left:0;bottom:0;transform:translateX(-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;min-width:44px;min-height:44px;padding:0 4px;-webkit-tap-highlight-color:transparent;will-change:transform;cursor:pointer}
.key_t{font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap;transition:color .25s,opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);transform:translateY(2px);opacity:.75}
.key:hover .key_t,.key.is-on .key_t,.key:focus-visible .key_t{color:var(--ink);opacity:1;transform:none}
.key_box{position:relative;display:block;width:var(--box,28px);height:var(--box,28px);background:var(--red);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.key_box::after{content:attr(data-l);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 calc(var(--box,28px)*.62)/1 var(--display);color:rgba(255,255,255,.92);letter-spacing:0}
.key:hover .key_box,.key.is-on .key_box{transform:translateY(-4px) scale(1.12);background:var(--red2)}
.key:focus-visible .key_box{outline:2px solid #fff;outline-offset:3px}
.peek{position:absolute;left:0;top:0;width:min(34vw,240px);aspect-ratio:3/4;border-radius:10px;overflow:hidden;pointer-events:none;opacity:0;z-index:6;transform:translate(-50%,-50%);box-shadow:0 30px 60px rgba(0,0,0,.6);background:#222;will-change:transform}
.peek img{width:100%;height:100%;object-fit:cover;display:block}
.peek_t{position:absolute;left:10px;bottom:10px;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 8px;border-radius:4px}

.hw:not(.is-ready) .key_box,.hw:not(.is-ready) .key_t,.cols:not(.is-ready) .key_box{transition:none}
.hero{--hw-top:calc(50% + var(--hw-h0,0px)/2)}
.hw{top:calc(var(--hw-top) - var(--hw-h0,0px))}
@media (orientation:landscape) and (min-width:768px){.hero{--hw-top:88%}}

/* ---- chapters ---- */
.ch{position:relative;padding:clamp(64px,11vh,120px) 0 0;background:var(--bg)}
.chh{display:block;padding:0 var(--gutter);margin-bottom:clamp(28px,5vh,52px)}
.chh_key{position:relative;display:flex;flex-direction:column;align-items:center;gap:0}
.chh_box{display:block;width:clamp(16px,2.4vw,30px);height:clamp(16px,2.4vw,30px);background:var(--red);transform-origin:50% 100%}
.chh_clip{overflow:hidden;padding-top:2px}
.chh_letter{display:block;font-family:var(--display);font-size:clamp(120px,19vw,250px);line-height:.86;color:var(--sand);letter-spacing:0}
.chh_meta{padding-bottom:.2em}
.chh_num{display:block;font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.chh_title{margin:0 0 14px;font:400 clamp(56px,10vw,128px)/.9 var(--display);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.chh_lede{margin:0;max-width:46ch;color:var(--mute);font-size:clamp(15px,1.3vw,18px);line-height:1.5}
.chh_lede a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mute2);text-underline-offset:3px}

/* N — commercial stack */
.stack{position:relative}
.sc{position:sticky;top:0;height:var(--vh);min-height:560px;overflow:hidden;background:#000;transform-origin:50% 0;will-change:transform;isolation:isolate}
.sc_img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.86;transform:scale(1.02)}
.sc_scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 32%,rgba(0,0,0,.08) 60%,rgba(0,0,0,.35) 100%)}
.sc_in{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,4vh,40px);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}
.sc_in>div{min-width:0}
.sc_num{display:block;font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--mute);margin-bottom:10px}
.sc_title{margin:0;font-family:var(--display);font-size:clamp(44px,8vw,112px);line-height:.9;letter-spacing:.005em;text-transform:uppercase}
.sc_studio{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 13px/1 var(--sans);color:var(--ink)}
.sc_studio i{display:block;width:8px;height:8px;background:var(--red)}
.sc_blurb{margin:12px 0 0;max-width:52ch;color:rgba(242,239,234,.78);font-size:15px;line-height:1.5}
.sc_strip{display:flex;gap:8px;margin-top:16px;max-width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.sc_strip::-webkit-scrollbar{display:none}
.sc_th{flex:0 0 auto;width:64px;height:64px;border-radius:6px;overflow:hidden;background:#222;display:block;border:1px solid rgba(255,255,255,.12);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.sc_th img{width:100%;height:100%;object-fit:cover;display:block}
.sc_th:hover{transform:translateY(-3px);border-color:#fff}
.sc_open{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font:500 14px/1 var(--sans);color:#fff;text-decoration:none;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,border-color .25s;white-space:nowrap}
.sc_open:hover{background:var(--red);border-color:var(--red)}
.sc_open b{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em}
@media (max-width:640px){.sc_in{grid-template-columns:1fr}.sc_open{justify-self:start}}

/* N — case studies: pin, then step through the pieces as you scroll */
.cs{position:relative;height:calc(var(--vh) + var(--n,4) * 34vh);--n:4}
.cs_pin{position:sticky;top:0;height:var(--vh);min-height:560px;overflow:hidden;background:#000;isolation:isolate}
.cs_media{position:absolute;inset:0;cursor:pointer}
.cs_media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:0;transform:scale(1.04);transition:opacity .55s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);display:block;background:#000}
.cs_media>.is-on{opacity:1;transform:none}
.cs_media>.is-contain{object-fit:contain;background:#0a0a0a}
.cs_scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.4) 100%)}
.cs_in{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,3.5vh,36px);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;pointer-events:none}
.cs_in>*{pointer-events:auto}
.cs_in>div{min-width:0}
.cs_num{display:flex;gap:14px;font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--mute);margin-bottom:10px}
.cs_title{margin:0;font-family:var(--display);font-size:clamp(40px,7.5vw,104px);line-height:.9;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.cs_studio{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 13px/1 var(--sans);color:var(--ink)}
.cs_studio i{display:block;width:8px;height:8px;background:var(--red)}
.cs_blurb{margin:10px 0 0;max-width:54ch;color:rgba(242,239,234,.8);font-size:15px;line-height:1.5}
.cs_cap{margin:10px 0 0;font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--mute);min-height:1.4em}
.cs_strip{display:flex;align-items:flex-end;gap:10px;margin-top:14px;padding:12px 4px 0;max-width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}
.cs_strip::-webkit-scrollbar{display:none}
.cs_th{flex:0 0 auto;width:56px;height:56px;border-radius:6px;overflow:hidden;background:#222;display:block;border:1px solid rgba(255,255,255,.14);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,opacity .3s;opacity:.65;transform-origin:50% 100%;position:relative}
.cs_th img{width:100%;height:100%;object-fit:cover;display:block}
.cs_th.is-on{transform:scale(1.3);border-color:#fff;opacity:1}
.cs_th:hover{opacity:1}
.cs_th b{position:absolute;left:0;right:0;bottom:0;font:700 8px/1 var(--mono);letter-spacing:.1em;text-align:center;background:var(--red);color:#fff;padding:3px 0}
.cs_bar{position:relative;height:2px;background:rgba(255,255,255,.18);margin-top:12px;max-width:min(100%,420px);overflow:hidden}
.cs_bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--red2);transform:scaleX(0);transform-origin:0 50%}
.cs_open{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font:500 14px/1 var(--sans);color:#fff;text-decoration:none;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,border-color .25s;white-space:nowrap}
.cs_open:hover{background:var(--red);border-color:var(--red)}
.cs_open b{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em}
.cs_hint{position:absolute;right:var(--gutter);top:clamp(70px,12vh,110px);font:400 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-align:right;pointer-events:none;opacity:0;transition:opacity .4s}
.cs.is-pinned .cs_hint{opacity:1}
@media (max-width:640px){.cs{height:calc(var(--vh) + var(--n,4) * 30vh)}.cs_in{grid-template-columns:1fr;gap:12px}.cs_open{justify-self:start}.cs_th{width:48px;height:48px}.cs_blurb{display:none}.cs_hint{display:none}}

/* A — clients */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:clamp(20px,4vh,40px);background:var(--bg)}
.mq_track{display:flex;width:max-content;animation:mq 60s linear infinite;will-change:transform}
.mq_track:hover{animation-play-state:paused}
.mq span{font-family:var(--display);font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);padding:0 .28em;white-space:nowrap}
.mq span i{display:inline-block;width:.32em;height:.32em;background:var(--red);vertical-align:.18em;margin-left:.5em}
@keyframes mq{to{transform:translateX(-50%)}}
.cl_list{padding:0 var(--gutter);border-top:1px solid var(--line)}
.cl{position:relative;display:grid;grid-template-columns:3.2em 1fr auto auto;align-items:center;gap:clamp(10px,2vw,28px);width:100%;text-align:left;padding:16px 0;border-bottom:1px solid var(--line);min-height:64px;transition:padding .35s cubic-bezier(.2,.8,.2,1);color:var(--ink);-webkit-tap-highlight-color:transparent}
.cl_i{font:400 11px/1 var(--mono);letter-spacing:.16em;color:var(--mute)}
.cl_n{font:600 clamp(22px,3.4vw,46px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink);transition:color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.cl_n small{display:block;font:400 13px/1.3 var(--sans);letter-spacing:0;color:var(--mute);margin-top:4px}
.cl_c{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--mute);white-space:nowrap}
.cl_a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .35s}
.cl:hover .cl_n,.cl:focus-visible .cl_n{color:var(--red2);transform:translateX(6px)}
.cl:hover .cl_a{background:var(--red);border-color:var(--red);transform:rotate(-45deg)}
.cl:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.cl_more{display:flex;justify-content:center;padding:22px var(--gutter)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none;transition:background .25s,border-color .25s;white-space:nowrap}
.btn:hover{border-color:var(--ink);background:rgba(242,239,234,.06)}
.btn.is-red{background:var(--red);border-color:var(--red);color:#fff}
.btn.is-red:hover{background:var(--red2);border-color:var(--red2)}
.btn b{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em}
@media (max-width:640px){.cl{grid-template-columns:2.4em 1fr auto}.cl_c{display:none}.cl_n small{font-size:12px}}

/* T — social */
.so_links{display:flex;flex-wrap:wrap;gap:10px;padding:0 var(--gutter);margin:-10px 0 clamp(24px,4vh,44px)}
.so_cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);padding:0 var(--gutter);align-items:start;will-change:transform}
.so_col{display:flex;flex-direction:column;gap:clamp(8px,1.2vw,16px);will-change:transform}
.so_col:nth-child(even){padding-top:clamp(40px,8vw,120px)}
.so_card{display:block;position:relative;border-radius:8px;overflow:hidden;background:#1a1a1c;-webkit-tap-highlight-color:transparent}
.so_card img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.so_card:hover img{transform:scale(1.04)}
.so_card::after{content:attr(data-cat);position:absolute;left:8px;bottom:8px;font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:5px 7px;border-radius:4px;opacity:0;transition:opacity .25s}
.so_card:hover::after{opacity:1}
.so_more{display:flex;justify-content:center;gap:12px;padding:clamp(24px,4vh,44px) var(--gutter) 0}
.so_all{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);padding:clamp(16px,3vh,28px) var(--gutter) 0}
.so_all[hidden]{display:none}
.so_mag{margin:clamp(40px,8vh,80px) var(--gutter) 0;padding:clamp(20px,3vw,36px);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--bg2)}
.so_mag_box{width:52px;height:52px;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:30px;line-height:1;color:#fff}
.so_mag h3{margin:0 0 4px;font:600 clamp(18px,2vw,24px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.so_mag p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:767px){.so_cols,.so_all{grid-template-columns:1fr 1fr}.so_col:nth-child(even){padding-top:clamp(28px,10vw,60px)}.so_col:nth-child(3){padding-top:0}.so_card::after{opacity:1}}

/* E — contact */
.ct{padding-bottom:clamp(40px,8vh,80px)}
.ct_big{padding:0 var(--gutter);margin:0 0 clamp(20px,4vh,40px)}
.ct_big .fit{display:block;font-family:var(--display);line-height:.86;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ct_big .fit em{font-style:normal;color:var(--red)}
.ct_row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:0 var(--gutter)}
.ct_email{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.ct_addr{display:inline-flex;align-items:flex-end;min-height:44px;font:600 clamp(20px,3vw,40px)/1.1 var(--sans);letter-spacing:-.03em;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:4px;word-break:break-all}
.ct_copy{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font:500 13px/1 var(--sans);color:var(--ink);transition:border-color .25s,background .25s}
.ct_copy:hover{border-color:var(--ink);background:rgba(242,239,234,.06)}
.ct_note{margin:14px 0 0;color:var(--mute);max-width:46ch;font-size:15px}
@media (max-width:640px){.ct_row{grid-template-columns:1fr}}

/* E — bio */
.bio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px clamp(24px,5vw,80px);padding:clamp(40px,8vh,80px) var(--gutter) 0;margin-top:clamp(40px,8vh,80px);border-top:1px solid var(--line)}
.bio_t{margin:10px 0 0;font:600 clamp(20px,2.2vw,28px)/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.bio_t span{color:var(--red2)}
.bio p{margin:0 0 1em;color:rgba(242,239,234,.82);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:66ch}
.bio p:last-child{margin-bottom:0}
@media (max-width:767px){.bio{grid-template-columns:1fr}}

/* T — in print */
.pr{margin-top:clamp(40px,8vh,80px)}
.pr_h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;padding:0 var(--gutter);margin-bottom:18px}
.pr_h h3{margin:6px 0 0;font:400 clamp(32px,5vw,64px)/.9 var(--display);text-transform:uppercase;color:var(--ink)}
.pr_h p{margin:0;color:var(--mute);font-size:15px;max-width:50ch}
.pr_strip{display:flex;gap:12px;padding:0 var(--gutter) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.pr_strip::-webkit-scrollbar{display:none}
.pr_card{flex:0 0 auto;width:min(68vw,300px);scroll-snap-align:start;display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.pr_card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;background:#1a1a1c}
.pr_card span{display:block;margin-top:8px;font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--mute)}

/* footer */
.ft{border-top:1px solid var(--line);padding:28px var(--gutter) 40px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
.ft_mark{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-decoration:none;min-height:44px;justify-content:center}
.ft_mark b{font:400 34px/.86 var(--display);letter-spacing:.01em;color:var(--sand);margin-top:3px}
.ft_links{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center}
.ft_links a{font:500 13px/1 var(--sans);color:var(--mute);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .25s}
.ft_links a:hover{color:var(--ink)}
.ft_c{font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--mute2);text-align:right}
@media (max-width:640px){.ft{grid-template-columns:1fr 1fr}.ft_links{grid-column:1/-1;justify-content:flex-start}.ft_c{text-align:right}}

/* reveal helpers */
.ry{opacity:0;transform:translateY(24px)}
.ry.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.hero_cue i::after{animation:none}.mq_track{animation:none}.ry{opacity:1;transform:none}.sc{transform:none!important}}