@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --navy:#0b1426;--ice:#9fc0ea;
  --gutter:clamp(20px,5vw,88px);
  --gap:clamp(20px,3vw,48px);
  --sec:clamp(96px,13vw,220px);
  --t-1:clamp(.875rem,.85rem + .12vw,.96rem);
  --t0:clamp(1.05rem,1rem + .25vw,1.22rem);
  --t1:clamp(1.4rem,1.15rem + 1vw,2.25rem);
  --t2:clamp(2.2rem,1.4rem + 3.2vw,4.8rem);
  --t3:clamp(3.2rem,1rem + 8.6vw,10.5rem);
}
.w-base{--bg:#0b1426;--ink:#ffffff;--soft:#a9b6ca;--line:#ffffff26;--accent:#9fc0ea}
.w-paper{--bg:#ffffff;--ink:#0b1426;--soft:#51607a;--line:#0b142622;--accent:#1d4f91}
.w-tide{--bg:#12315f;--ink:#ffffff;--soft:#c3d3e8;--line:#ffffff30;--accent:#ffffff}
.w-greenback{--bg:#f3efe2;--ink:#12301f;--soft:#4f6257;--line:#12301f29;--accent:#1b5e37}
.w-ffs{--bg:#15171b;--ink:#f2f3f4;--soft:#a9b0b8;--line:#ffffff24;--accent:#e2233f}
.w-tsd,.w-sd{--bg:#070605;--ink:#f3eadb;--soft:#b3a795;--line:#ffffff22;--accent:#e07a2f}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t0)/1.58 "Archivo",Arial,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2,h3,p,figure,dl,dd,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;font-stretch:88%;letter-spacing:-.022em;line-height:1;text-wrap:balance}
p,li{text-wrap:pretty}
figcaption,.note,.when,.muted{color:var(--soft)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;z-index:60}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{padding-inline:var(--gutter);max-width:1680px;margin-inline:auto}
.lede{font-size:var(--t1);line-height:1.22;letter-spacing:-.015em;font-weight:450;max-width:26em}
.mt{margin-top:1.1em}
.note{font-size:var(--t-1);line-height:1.5;margin-top:1.6em;max-width:62ch}
figcaption{font-size:var(--t-1);line-height:1.45;margin-top:.9em;max-width:58ch}
.go{display:inline-block;font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.32em;padding-block:.5em;min-height:44px}
.go:hover{text-decoration-thickness:3px}
.pill{display:inline-flex;align-items:center;min-height:48px;padding:.6em 1.35em;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:650;text-decoration:none;font-size:var(--t-1);transition:transform .25s ease}
.pill:hover{transform:translateY(-2px);text-decoration:underline}
.row-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:1.6em;align-items:center}
.row-links.stack{flex-direction:column;align-items:flex-start;margin-top:0}
.plate{display:inline-block;background:#fff;padding:8px 12px;border-radius:3px;line-height:0}
.w-paper .plate{padding-left:0}

/* header */
.top{position:relative;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px var(--gutter);color:var(--hc);background:var(--hb);transition:color .4s,background-color .4s}
.home{font-weight:800;font-stretch:85%;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;font-size:1.08rem}
.links{display:flex;gap:clamp(16px,2.2vw,34px)}
.links a{text-decoration:none;font-size:var(--t-1);font-weight:550;white-space:nowrap}
.links a:hover,.links a[aria-current]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
.menu-btn{display:none;font:650 var(--t-1)/1 "Archivo",sans-serif;color:inherit;background:none;border:0;min-height:44px;min-width:44px;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.35em}
@media(max-width:1060px){.links{display:none}.menu-btn{display:block}}
#menu{border:0;margin:0;padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:#0b1426;color:#fff}
#menu::backdrop{background:#0b1426}
#menu[open]{animation:fade .22s ease}
@keyframes fade{from{opacity:0}}
.menu-in{height:100%;padding:15px var(--gutter) 32px;display:flex;flex-direction:column;justify-content:space-between}
.menu-head{display:flex;justify-content:space-between;align-items:center}
#menu nav{display:grid;gap:12px}
#menu nav a{font-size:clamp(2.2rem,10vw,4.4rem);line-height:1;letter-spacing:-.025em;font-weight:800;font-stretch:72%;text-transform:uppercase;text-decoration:none}

/* hero */
.hero{--bg:#0b1426;--ink:#ffffff;--soft:#a9b6ca;--line:#ffffff26;position:relative;background:var(--bg);color:var(--ink);min-height:calc(100svh - 60px);overflow:hidden;display:flex;transition:background-color .5s,color .5s}
.hero[data-aud=greenback]{--bg:#12301f;--ink:#f3efe2;--soft:#bcd2c4;--line:#ffffff2e}
.hero[data-aud=ffs]{--bg:#15171b;--ink:#f2f3f4;--soft:#a9b0b8}
.hero[data-aud=tsd]{--bg:#070605;--ink:#f3eadb;--soft:#b3a795}
.stage{position:absolute;top:0;right:0;bottom:0;width:48%}
.stage figure{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;margin:0}
.stage figure.on{opacity:1}
.stage img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 62%,transparent) 22%,transparent 46%);transition:opacity .5s;pointer-events:none}
.hero[data-aud=tsd] .stage::after{opacity:0}
.stage .tsd{display:grid;place-items:center;padding:10% 5% 10% 34%}
.stage .tsd img{object-fit:contain}
.hero-in{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3vh,36px);padding:clamp(8px,1.6vh,24px) var(--gutter) clamp(22px,3.6vh,40px);max-width:none}
.hero h1{font-size:clamp(4.1rem,min(14.2vw,27svh),17.5rem);font-weight:800;font-stretch:72%;letter-spacing:-.022em;line-height:.82;text-transform:uppercase}
.hero h1 .ln{display:block;width:max-content;overflow:hidden;padding-block:.04em}
.hero h1 i{font-style:normal;display:inline-block;transition:color .25s ease;animation:rise .95s cubic-bezier(.16,.8,.2,1) both}
.hero h1 .ln+.ln i{animation-delay:.08s}
@keyframes rise{from{transform:translateY(102%)}}
.hero .lede{max-width:21em;font-size:clamp(1.2rem,1rem + .85vw,1.95rem)}
.auds{display:grid;width:min(50%,720px)}
.aud{display:grid;grid-template-columns:clamp(112px,11vw,160px) minmax(0,1fr);gap:16px;align-items:center;padding:clamp(8px,1.3vh,14px) 0;border-top:1px solid var(--line);text-decoration:none;transition:padding .3s ease}
.aud:last-child{border-bottom:1px solid var(--line)}
.a-mark{display:flex;align-items:center;height:clamp(34px,4.6vh,48px)}
.a-logo{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left}
.a-mark .plate{padding:5px 8px;height:100%}
.a-mark .plate .a-logo{height:100%}
.a-logo.tall{height:150%}
.aud b{display:block;font-size:clamp(1.02rem,.9rem + .5vw,1.4rem);font-weight:650;letter-spacing:-.015em;line-height:1.15}
.aud small{display:block;font-size:var(--t-1);color:var(--soft);line-height:1.3}
@media(hover:hover){.aud:hover{padding-left:.7rem}}
@media(max-width:900px){
  .hero{flex-direction:column;min-height:0}
  .stage{position:relative;order:2;width:100%;height:auto;aspect-ratio:4/4.4}
  .hero-in{display:contents}
  .hero h1{order:1;padding:8px var(--gutter) 22px;font-size:clamp(3.4rem,20.6vw,11rem)}
  .stage::after{display:none}
  .hero .lede{order:3;padding:26px var(--gutter) 22px;max-width:none}
  .auds{order:4;width:auto;margin:0 var(--gutter) 34px}
}

/* intro */
.intro{background:var(--bg);color:var(--ink);padding-block:var(--sec) clamp(72px,9vw,150px)}
.say{font-size:var(--t2);font-weight:600;font-stretch:84%;line-height:1.04;letter-spacing:-.022em;max-width:21em}
.say span{transition:opacity .25s linear}
.proof{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--gap);margin-top:clamp(56px,8vw,120px);border-top:1px solid var(--line);padding-top:clamp(20px,2vw,32px)}
.proof dt{font-size:clamp(3rem,1.4rem + 4.4vw,6.6rem);font-weight:800;font-stretch:72%;line-height:.92;letter-spacing:-.02em;color:var(--accent)}
.proof div:first-child dt{font-size:clamp(2.4rem,1.2rem + 3.3vw,5rem);line-height:.96;text-transform:uppercase}
.proof dd{font-size:var(--t-1);color:var(--soft);margin-top:.9em;line-height:1.42;max-width:30ch}
@media(max-width:900px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.proof div:first-child{grid-column:1/-1}}

/* project chapters, ordinary document flow */
.proj{background:var(--bg);color:var(--ink);padding-block:clamp(72px,10vw,170px)}
.p-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gap);align-items:start;margin-bottom:clamp(32px,5vw,72px)}
.proj h2{font-size:var(--t2);font-weight:700;font-stretch:80%;max-width:17em;line-height:1.02}
.p-logo{height:clamp(44px,5vw,72px);width:auto}
.p-logo.sm{height:clamp(36px,3.6vw,54px)}
.p-media{display:block;overflow:hidden;background:#000}
.p-media img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.1,1)}
@media(hover:hover){.p-media:hover img{transform:scale(1.025)}}
.p-foot{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:var(--gap);margin-top:clamp(28px,4vw,56px);align-items:start}
.p-foot .pill{justify-self:end}
.p-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center;padding-right:var(--gutter)}
.p-side h2{margin-top:clamp(18px,2.4vw,32px)}
.p-side .c-role{margin-top:1.2em}
.p-side p+p{margin-top:.7em;max-width:40ch}
.p-side .pill{margin-top:1.4em}
.p-sd{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.p-mark{display:block}
.p-mark img{width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.1,1)}
@media(hover:hover){.p-mark:hover img{transform:scale(1.02)}}
.p-sd .c-role{margin-top:1.2em}
.p-sd p+p{margin-top:.7em;max-width:40ch}
.p-sd .pill{margin-top:1.4em;background:#e07a2f;color:#120801}
.p-shot{margin-top:clamp(44px,6vw,90px)}
@media(max-width:860px){.p-head,.p-foot,.p-sd{grid-template-columns:minmax(0,1fr)}.p-foot .pill{justify-self:start}.p-split{grid-template-columns:minmax(0,1fr);padding-right:0}.p-side{padding-inline:var(--gutter)}}

/* recognition */
.recog{background:var(--bg);color:var(--ink);padding-block:var(--sec)}
.r-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,5vw,88px);align-items:end}
.r-copy h2{font-size:var(--t2);font-weight:700;font-stretch:80%;line-height:1;margin-bottom:.5em}
.r-facts{border-top:1px solid var(--line)}
.r-facts div{padding-block:.8em;border-bottom:1px solid var(--line)}
.r-facts dt{font-size:var(--t-1);color:var(--soft)}
.r-facts dd{font-weight:600;line-height:1.3;margin-top:.1em}
@media(max-width:900px){.r-grid{grid-template-columns:minmax(0,1fr)}}

/* moments gallery */
.moments{background:var(--bg);color:var(--ink);padding-block:var(--sec) clamp(72px,9vw,140px)}
h2.in{font-size:var(--t2);font-weight:700;font-stretch:80%;margin-bottom:clamp(28px,4vw,60px);max-width:17em}
.gal .strip{grid-auto-columns:auto;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:clamp(12px,1.6vw,26px);cursor:grab}
.gal .strip figure{width:max-content;max-width:88vw}
.gal .strip img{height:clamp(320px,62vh,720px);width:auto;max-width:88vw;object-fit:cover}
.gal .strip.drag{cursor:grabbing;scroll-snap-type:none}
.gal .strip.drag .zoom{pointer-events:none}
.gal .arrows{margin-top:14px}

/* press on home */
.feature-press{background:var(--bg);color:var(--ink);padding-block:var(--sec)}
.fp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,110px);align-items:center}
.fp-text .press{display:block;margin:0}
@media(max-width:860px){.fp{grid-template-columns:minmax(0,1fr)}}
.press blockquote{font-size:var(--t1);line-height:1.22;letter-spacing:-.015em;font-weight:450}
.press figcaption{margin-top:1.3em}
.press figcaption strong,.quote strong{color:var(--ink);font-weight:650}

/* about strip */
.about-strip{background:var(--bg);color:var(--ink);padding-block:var(--sec)}
.ab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,110px);align-items:center}
.ab .plate.wide{margin-bottom:1.6em}
.nsu{width:clamp(150px,14vw,200px);height:auto}
@media(max-width:860px){.ab{grid-template-columns:minmax(0,1fr)}}

/* closing */
.closing{background:var(--bg);color:var(--ink);padding-block:var(--sec)}
.closing h2{font-size:var(--t2);font-weight:800;font-stretch:76%;max-width:15em;line-height:.98}
.big-link{font-size:clamp(1.3rem,.6rem + 3.4vw,4.2rem);letter-spacing:-.025em;font-weight:500;margin-top:.5em;overflow-wrap:anywhere;line-height:1.1}
.muted{font-size:var(--t-1);margin-top:1.2em;max-width:52ch}
.closing .muted{color:var(--soft)}
.foot{background:#060c18;color:#c9d2e0;padding-block:clamp(40px,5vw,72px);font-size:var(--t-1)}
.foot-name{font-weight:800;font-stretch:85%;font-size:1.08rem;color:#fff}
.foot-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 26px}
.foot-note{margin-top:1.6em;opacity:.72;max-width:66ch;line-height:1.5}

/* case studies */
.c-hero{background:var(--bg);color:var(--ink)}
.c-hero.photo{position:relative;min-height:calc(100svh - 60px);display:flex;align-items:flex-end;overflow:hidden;background:#000;color:#fff}
.c-img{position:absolute;inset:0}
.c-img img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.c-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000000f7 0%,#000000dc 36%,#00000080 58%,#00000010 80%)}
.c-over{position:relative;width:100%;max-width:none;padding-bottom:clamp(28px,5vh,60px)}
.c-logo{height:clamp(44px,5vw,72px);margin-bottom:clamp(14px,2vh,24px);display:flex}
.c-logo img{height:100%;width:auto}
.c-logo .plate{height:100%;padding:6px 10px}
.c-hero h1{font-size:clamp(3.4rem,1rem + 10.4vw,12.5rem);font-weight:800;font-stretch:70%;text-transform:uppercase;letter-spacing:-.016em;line-height:.84;max-width:9.4em}
.c-sub{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gap);margin-top:clamp(20px,3vh,44px);align-items:start}
.c-sub .lede{grid-column:2;grid-row:1}
.c-sub>div{grid-column:2;grid-row:1}
.c-sub .c-role,.c-sub .row-links{grid-column:1;grid-row:1}
.c-role{font-size:var(--t-1);line-height:1.45;color:var(--soft)}
.c-role strong{color:var(--ink);font-weight:650}
.c-hero.photo .c-role{color:#ffffffc9}
.c-hero.photo .c-role strong{color:#fff}
@media(max-width:860px){.c-sub{grid-template-columns:minmax(0,1fr)}.c-sub .lede,.c-sub>div,.c-sub .c-role,.c-sub .row-links{grid-column:1;grid-row:auto}}
.c-hero.mark{padding-block:clamp(12px,3vh,40px) clamp(40px,6vw,90px)}
.c-mark{width:min(82vw,880px);margin-inline:auto;margin-bottom:clamp(20px,3vw,48px)}
.c-mark img{width:100%;height:auto}
.res-hero,.about-hero{padding-block:clamp(40px,6vw,96px) clamp(56px,7vw,110px)}
.subnav{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2.6vw,38px);padding-block:12px}
.subnav a{font-size:var(--t-1);font-weight:550;text-decoration:none;padding-block:10px}
.subnav a:hover{text-decoration:underline;text-underline-offset:.3em}
[id]{scroll-margin-top:20px}
.c-sec{background:var(--bg);color:var(--ink);padding-block:clamp(52px,7vw,110px)}
.c-wide{background:var(--bg);color:var(--ink);padding-block:clamp(52px,7vw,110px)}
.c-wide.tint{background:color-mix(in srgb,var(--ink) 6%,var(--bg));padding-block:clamp(72px,9vw,150px)}
.split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gap)}
.split>h2{font-size:var(--t0);font-weight:700;font-stretch:96%;letter-spacing:-.008em;line-height:1.3;padding-top:.32em}
.split-body{min-width:0;max-width:900px}
.split-body .plate{margin-bottom:1.4em}
.pk{width:70px;height:auto}
@media(max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:16px}}
.rows li{padding-block:clamp(14px,1.6vw,22px);border-top:1px solid var(--line);max-width:62ch}
.rows{border-bottom:1px solid var(--line)}
.gap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,4vw,52px)}
.gap b{display:block;font-size:var(--t3);font-weight:800;font-stretch:72%;line-height:.92;margin-bottom:.1em;color:var(--accent)}
.gap p{max-width:24ch;font-size:var(--t-1);line-height:1.45;color:var(--soft)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px);align-items:start}
.pair.lead{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,36px);align-items:start}
.tri>:nth-child(2){margin-top:clamp(28px,5vw,88px)}
@media(max-width:640px){.pair,.pair.lead,.tri{grid-template-columns:minmax(0,1fr);gap:40px}.tri>:nth-child(2){margin-top:0}}
.bleed img{width:100%}
.bleed figcaption{margin-top:.9em;max-width:none}
.bleed{background:var(--bg);padding-bottom:0}
.tagged{position:relative}
.tag{position:absolute;z-index:2;top:12px;left:12px;background:#12301f;color:#fff;font-size:var(--t-1);font-weight:650;padding:.28em .7em;line-height:1.35}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:center}
.feature-text p{max-width:54ch}
@media(max-width:860px){.feature{grid-template-columns:minmax(0,1fr)}}
.silo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}
@media(max-width:860px){.silo{grid-template-columns:minmax(0,1fr)}}
.phone{max-width:380px;width:100%;margin-inline:auto}
.phone video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:4px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,30vw,460px);gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--soft) transparent;-webkit-overflow-scrolling:touch}
.strip>*{scroll-snap-align:start}
.arrows{display:flex;gap:6px;margin-top:8px}
.arrow{width:44px;height:44px;background:none;color:inherit;border:1px solid var(--line);border-radius:50%;cursor:pointer;font:400 1.15rem/1 "Archivo",sans-serif;transition:background-color .2s}
.arrow:hover{background:var(--line)}
.cal li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;padding-block:.7em;border-top:1px solid var(--line);line-height:1.35}
.cal li span{color:var(--soft);font-size:var(--t-1);font-variant-numeric:tabular-nums;padding-top:.15em}
.cal{border-bottom:1px solid var(--line)}
.platforms{display:flex;flex-wrap:wrap;gap:.1em .9em;font-size:var(--t1);letter-spacing:-.02em;line-height:1.3}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px)}
.quote blockquote{font-size:var(--t1);line-height:1.22;letter-spacing:-.015em}
@media(max-width:760px){.quotes{grid-template-columns:minmax(0,1fr)}}

/* screenshots */
.bar{display:flex;align-items:center;gap:8px;background:#1b1916;color:#b3a795;font-size:.78rem;padding:9px 14px;border-radius:6px 6px 0 0}
.bar::before{content:"";width:8px;height:8px;border-radius:50%;background:#544d41;box-shadow:13px 0 0 #544d41,26px 0 0 #544d41;margin-right:32px}
.shot .zoom img{border-radius:0 0 6px 6px}
.shots{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(14px,2.4vw,36px);align-items:end}
.phone-shot img{border-radius:18px}
@media(max-width:640px){.shots{grid-template-columns:minmax(0,1fr)}.phone-shot{max-width:64%}}

/* zoom */
.zoom{all:unset;display:block;cursor:zoom-in;width:100%}
.zoom:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.zoom img{width:100%}
.gal .zoom{width:auto}
#zoom{border:0;padding:0;background:transparent;max-width:min(94vw,1400px);max-height:92dvh;overflow:visible}
#zoom::backdrop{background:#000000e6}
#zoom img{max-height:86dvh;width:auto;max-width:100%;margin:auto}
#zoom p{color:#fff;font-size:var(--t-1);margin-top:10px;text-align:center}
#zoom button{position:fixed;top:12px;right:14px;background:none;color:#fff;border:0;min-height:44px;padding:0 8px;font:650 .95rem "Archivo",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:.3em}

/* survey */
.survey{display:grid;gap:clamp(28px,5vw,88px);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
@media(max-width:860px){.survey{grid-template-columns:minmax(0,1fr)}}
.answer,.q-list{min-width:0}
.q{all:unset;box-sizing:border-box;display:block;width:100%;padding:13px 0;border-top:1px solid var(--line);cursor:pointer;line-height:1.3;transition:padding .25s ease}
.q:last-child{border-bottom:1px solid var(--line)}
.q[aria-pressed=true]{font-weight:700;padding-left:.7rem}
.q:hover{padding-left:.7rem}
.q:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.answer .big{font-size:var(--t3);font-weight:800;font-stretch:72%;line-height:.92;color:var(--accent)}
.answer p{margin-top:.6em;max-width:44ch}
.dots{display:grid;grid-template-columns:repeat(auto-fill,minmax(12px,1fr));gap:6px;margin-top:26px;max-width:640px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background-color .35s ease}
.dots i.on{background:var(--accent)}

/* about + resume */
.ah{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:end}
.ah .lede{margin-top:.8em}
.portrait img{width:100%;aspect-ratio:4/4.5;object-fit:cover;object-position:50% 25%}
@media(max-width:860px){.ah{grid-template-columns:minmax(0,1fr)}}
.job{display:grid;grid-template-columns:60px minmax(0,1fr);gap:clamp(14px,2vw,26px);padding-block:clamp(22px,3vw,36px);border-top:1px solid var(--line)}
.job:last-child{border-bottom:1px solid var(--line)}
.job>img,.job-plate{width:60px;height:60px;object-fit:contain;background:#fff;padding:4px;display:block;border-radius:2px;box-shadow:0 0 0 1px var(--line)}
.job-plate{display:flex;align-items:center}
.job-plate img{width:100%;height:auto}
.job h3{font-size:var(--t0);font-weight:700;font-stretch:96%;letter-spacing:-.008em;line-height:1.3}
.when{font-size:var(--t-1);margin-top:.2em}
.ticks{margin-top:.8em}
.ticks li{padding-left:1.1em;position:relative;margin-top:.4em;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:.5em;height:1px;background:currentColor}
.skills div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:12px;padding-block:.7em;border-top:1px solid var(--line)}
.skills{border-bottom:1px solid var(--line)}
.skills dt{font-weight:650;font-size:var(--t-1)}
@media(max-width:560px){.skills div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* next */
.next{display:block;text-decoration:none;background:var(--bg);color:var(--ink);padding-block:clamp(64px,9vw,150px);border-top:1px solid var(--line)}
.next .wrap{display:block}
.next small{display:block;color:var(--soft);font-size:var(--t-1);margin-bottom:.6em}
.next b{font-size:var(--t3);font-weight:800;font-stretch:70%;text-transform:uppercase;letter-spacing:-.015em;line-height:.88;display:block;transition:transform .45s cubic-bezier(.2,.7,.1,1)}
@media(hover:hover){.next:hover b{transform:translateX(.12em)}}

.rv{opacity:0;transition:opacity .45s ease}
.rv.in{opacity:1}
.no-js .rv{opacity:1}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1}
}
@media print{.top,#menu,#zoom{display:none}}

/* The Sinister District page */
.sd-hero{padding-block:clamp(16px,3vw,48px) clamp(48px,7vw,110px)}
.sd-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.sd-grid .c-mark{width:100%;margin:0}
.listen{margin-top:1.6em;border-top:1px solid var(--line);padding-top:1em}
.listen p{font-size:var(--t-1);margin-bottom:.6em}
.listen audio{width:100%;color-scheme:dark;display:block}
@media(max-width:860px){.sd-grid{grid-template-columns:minmax(0,1fr)}}
.proof.even{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;border-top:0;padding-top:0}
.proof.even div:first-child dt{font-size:clamp(3rem,1.4rem + 4.4vw,6.6rem);text-transform:none;line-height:.92}
.proof.even div:first-child{grid-column:auto}
@media(max-width:700px){.proof.even{grid-template-columns:repeat(2,minmax(0,1fr))}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px) var(--gap);counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:.9em}
.steps li::before{content:counter(s);display:block;font-size:var(--t-1);color:var(--accent);font-weight:650;margin-bottom:.5em}
.steps b{display:block;font-size:var(--t1);font-weight:700;font-stretch:84%;line-height:1.1}
.steps p{margin-top:.5em;color:var(--soft);font-size:var(--t-1);line-height:1.45;max-width:30ch}
@media(max-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eps{border-bottom:1px solid var(--line);columns:2;column-gap:clamp(28px,5vw,88px)}
.eps li{break-inside:avoid;border-top:1px solid var(--line)}
.eps a{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding-block:.75em;text-decoration:none;transition:color .2s,padding .25s}
.eps span{font-size:var(--t-1);color:var(--soft);white-space:nowrap}
.eps b{font-weight:600;line-height:1.25}
@media(hover:hover){.eps a:hover{color:var(--accent);padding-left:.5rem}}
@media(max-width:760px){.eps{columns:1}}
.guest-wall{font-size:var(--t2);font-weight:700;font-stretch:78%;line-height:1.08;letter-spacing:-.015em}
.guest-wall i{font-style:normal;color:var(--accent);font-weight:400}
.quotes{margin-top:clamp(44px,6vw,90px)}
.mayor{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.w-paper.mayor-sec{padding-top:0;padding-bottom:var(--sec)}
@media(max-width:860px){.mayor{grid-template-columns:minmax(0,1fr)}}