@font-face{font-family:"Inter";src:url(/a/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@view-transition{navigation:auto}
:root{
  --ink:#0b0a09;--ink-2:#14120f;--ink-3:#1d1a16;--bone:#f2ede4;--bone-2:#e4ded4;--mute:#a39b8f;
  --red:#c8102e;--red-hi:#ff2a46;--gold:#c9a96a;--line:rgba(242,237,228,.14);--line-hi:rgba(242,237,228,.34);
  --serif:"Inter",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--bone);-webkit-text-size-adjust:100%;scrollbar-color:#3a342c var(--ink)}
body{margin:0;font:500 17px/1.6 var(--sans);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--red);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* film grain + vignette over everything */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* top bar */
.bar{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--gut);mix-blend-mode:difference;color:#fff}
.brand{display:flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.brand b{font:600 22px/1 var(--serif);letter-spacing:.04em;text-transform:none}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:grid;place-items:center;min-width:44px;min-height:44px;text-decoration:none;font:600 14px/1 var(--sans);letter-spacing:.12em;opacity:.55;transition:opacity .3s}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateY(14px)}
.nav li{position:relative;display:grid;place-items:center}
.snd{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid currentColor;border-radius:999px;background:none;color:inherit;font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.snd i{display:flex;gap:2px;align-items:flex-end;height:12px}
.snd i span{width:2px;height:4px;background:currentColor;transition:height .2s}
.snd[aria-pressed=true] i span{animation:eq .9s ease-in-out infinite}
.snd[aria-pressed=true] i span:nth-child(2){animation-delay:.2s}.snd[aria-pressed=true] i span:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:12px}}

/* bottom hud */
.hud{position:fixed;inset:auto 0 0;z-index:60;display:flex;align-items:center;gap:18px;padding:16px var(--gut);font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;mix-blend-mode:difference;color:#fff;pointer-events:none}
.hud .prog{flex:1;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.hud .prog i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hud .ch{min-width:6ch;text-align:right;font-variant-numeric:tabular-nums}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:95;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease);display:grid;place-items:center;font:700 14px/1 var(--sans);letter-spacing:.12em;color:#000}
.cur.big{width:84px;height:84px;margin:-42px 0 0 -42px}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* page curtain */
.curtain{position:fixed;inset:0;z-index:100;background:var(--ink);transform-origin:50% 0;pointer-events:none;animation:lift 1.1s var(--ease-io) .1s both}
.curtain::after{content:attr(data-t);position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(40px,9vw,140px)/1 var(--serif);color:var(--bone);animation:fadeout .6s ease .2s both}
@keyframes lift{to{transform:scaleY(0)}}
@keyframes fadeout{to{opacity:0;transform:translateY(-20px)}}

/* type */
.eyebrow{font:600 14px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.display{font:700 clamp(44px,10vw,170px)/.95 var(--serif);letter-spacing:-.02em;margin:0}
.h2{font:700 clamp(34px,5.4vw,84px)/1 var(--serif);letter-spacing:-.02em;margin:0}
.lede{font:500 clamp(17px,1.5vw,21px)/1.6 var(--sans);color:var(--bone-2);max-width:56ch}
.w{display:inline-block;white-space:nowrap}.split .w{padding-bottom:.06em}
.split .c{display:inline-block;opacity:0;transform:translateY(.55em) rotate(7deg) scale(.92);filter:blur(8px);transition:transform 1s var(--ease),opacity .7s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--i) * 22ms)}
.split.in .c{opacity:1;transform:none;filter:none}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}
.kin{transform:skewY(var(--sk,0deg)) scaleY(var(--sy,1));transform-origin:0 50%;will-change:transform}

/* buttonography: ink spreads from where the cursor came in, arrow nudges, press sinks */
.btn,.gmap-btn,.snd,.ink{--fill:var(--bone);--on:var(--ink);position:relative;isolation:isolate;overflow:hidden;transition:color .45s var(--ease),border-color .45s var(--ease),scale .15s,translate .5s var(--ease)}
.btn::before,.gmap-btn::before,.snd::before,.ink::before{content:"";position:absolute;z-index:-1;width:260%;aspect-ratio:1;border-radius:50%;background:var(--fill);left:var(--x,50%);top:var(--y,50%);translate:-50% -50%;scale:0;transition:scale .65s var(--ease)}
.btn:hover::before,.btn:focus-visible::before,.gmap-btn:hover::before,.snd:hover::before,.ink:hover::before,.ink:focus-visible::before{scale:1}
.btn:hover,.gmap-btn:hover,.snd:hover,.ink:hover{color:var(--on)}
.btn:active,.gmap-btn:active,.snd:active,.ink:active{scale:.96}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 28px;border:1.5px solid var(--line-hi);border-radius:999px;color:var(--bone);text-decoration:none;font:700 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:none;cursor:pointer}
.btn:hover{border-color:var(--bone)}
.btn.red{border-color:var(--red);background:var(--red);color:#fff;--fill:#fff;--on:var(--red)}
.btn.red:hover{border-color:#fff}
.btn .lbl{display:inline-grid;overflow:hidden;height:1em;line-height:1}
.btn .lbl>span{grid-area:1/1;transition:translate .5s var(--ease)}
.btn .lbl>span+span{translate:0 110%}
.btn:hover .lbl>span:first-child{translate:0 -110%}.btn:hover .lbl>span+span{translate:0 0}
.btn svg{width:16px;height:16px;transition:transform .5s var(--ease)}.btn:hover svg{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{padding:0 var(--gut)}
section{position:relative}

/* map + footer */
.gmap{padding:120px var(--gut) 40px}
.gmap-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--ink-2)}
.gmap-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding:26px 28px 22px;border-bottom:1px solid var(--line)}
.gmap-head h2{margin:6px 0 0;font:700 clamp(30px,4vw,52px)/1 var(--serif)}
.section-eyebrow{font:600 14px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.gmap-line{display:flex;gap:6px;margin:10px 0 0;color:var(--bone-2);font-size:16px}.gmap-line svg{flex:none;margin-top:3px;color:var(--red-hi)}
.gmap-actions{display:flex;flex-wrap:wrap;gap:8px}
.gmap-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line-hi);border-radius:999px;color:var(--bone);text-decoration:none;font:700 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.gmap-btn:hover{border-color:var(--bone)}
.gmap-btn-primary{background:var(--red);border-color:var(--red);color:#fff;--fill:#fff;--on:var(--red)}
.gmap-frame{position:relative;aspect-ratio:16/6;min-height:260px;background:var(--ink-3);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px}
.gmap-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6) contrast(.9)}
.gmap-facade{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;width:100%;border:0;background:none;color:var(--bone-2);font:600 14.5px/1 var(--sans);cursor:pointer}
.gmap-facade-pin{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff}
.gmap-frame.is-loaded .gmap-facade{display:none}
.foot{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-end;padding:40px var(--gut) 96px;border-top:1px solid var(--line);margin-top:40px;color:var(--bone-2);font-size:15px}
.foot a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.foot a:hover{color:var(--bone)}
.foot .big{font:700 clamp(34px,5vw,64px)/1 var(--serif);color:var(--bone)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot nav a{min-height:44px;display:inline-flex;align-items:center}

/* next chapter band */
.next{display:block;padding:18vh var(--gut);text-decoration:none;border-top:1px solid var(--line);position:relative;overflow:hidden}
.next .eyebrow{display:block;margin-bottom:18px}
.next .display{display:block;transition:translate 1s var(--ease),font-weight .8s var(--ease)}
.next:hover .display{translate:2vw 0;font-weight:900}
.next video,.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s,transform 1.6s var(--ease);z-index:-1}
.next:hover video,.next:hover img{opacity:.45;transform:none}

@media (max-width:760px){
  .nav{display:none}
  .hud{font-size:14px;gap:12px}
  .hud .who{display:none}
  .gmap-frame{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .split .w>span,.reveal{transform:none;opacity:1}
}
[hidden]{display:none!important}

/* kinetic letters: wave on hover */
.wave .c{display:inline-block;transition:translate .5s var(--ease),font-weight .5s var(--ease)}
a:hover .wave .c,.wave:hover .c{animation:wv .7s var(--ease) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes wv{40%{translate:0 -.14em}100%{translate:0 0}}
@media (prefers-reduced-motion:reduce){.kin{transform:none}a:hover .wave .c{animation:none}}
@media (max-width:520px){.btn{padding:0 18px;letter-spacing:.03em;gap:10px;max-width:100%}}
