@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --fog:#A9B4C2; --navy:#0F1B2B; --cream:#F1E7D6; --lamp:#FFB25A;
  --ink:var(--navy); --dim:color-mix(in oklab,var(--ink) 74%,transparent); --line:color-mix(in oklab,var(--ink) 22%,transparent);
  --t0:13px; --t1:17px; --t2:21px; --t3:27px; --t4:33px; --t5:42px; --t6:52px; --t7:65px; --t8:81px;
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:128px;
  --gut:clamp(20px,4.4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --slow:1.1s;
  --serif:Fraunces,"Iowan Old Style",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html.night{--ink:var(--cream)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--fog)}
body{margin:0;color:var(--ink);font:400 var(--t1)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:color var(--slow) var(--ease)}
h1,h2,p,ul{margin:0;padding:0}
a{color:inherit}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;font-variation-settings:"opsz" 144}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--lamp);outline-offset:4px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--s2);top:var(--s2);z-index:30;background:var(--navy);color:var(--cream);padding:12px 18px;border-radius:99px;font-size:var(--t0);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

#sea,#still{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.8s var(--ease)}
#still{object-fit:cover}
html.ready #sea,html.nogl.ready #still{opacity:1}
html.nogl #sea{display:none}

#bar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:var(--s1) var(--gut);padding-top:max(var(--s1),env(safe-area-inset-top))}
.mark{font:400 var(--t2)/1 var(--serif);letter-spacing:-.01em;text-decoration:none;min-height:44px;display:flex;align-items:center}
.clock{display:flex;align-items:baseline;gap:12px;font-size:var(--t0);font-variant-numeric:tabular-nums}
#hour{font:400 var(--t2)/1 var(--serif);min-width:5.2ch;text-align:right}
#watch{color:var(--dim);min-width:11ch}

#rail{position:fixed;right:var(--gut);top:50%;transform:translateY(-50%);z-index:9;display:grid;gap:2px;justify-items:end}
#rail a{display:flex;align-items:center;gap:12px;flex-direction:row-reverse;min-height:30px;font-size:var(--t0);text-decoration:none;color:var(--dim)}
#rail i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;transition:background-color .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
#rail span{opacity:0;transform:translateX(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap}
#rail a:hover span,#rail a:focus-visible span,#rail a.on span{opacity:1;transform:none}
#rail a.on{color:var(--ink)}
#rail a.on i{background:var(--lamp);box-shadow:0 0 0 1px var(--lamp),0 0 14px 2px color-mix(in oklab,var(--lamp) 60%,transparent);transform:scale(1.15)}

main{position:relative;z-index:2}
.ch{position:relative;min-height:190vh;min-height:190svh;padding:0 var(--gut)}
.ch.hero{min-height:118vh;min-height:118svh}
.ch.play{min-height:240vh;min-height:240svh}
.ch.end{min-height:220vh;min-height:220svh}
.tx{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);max-width:470px;padding:calc(var(--s4) + 44px) 0 clamp(40px,9vh,96px);pointer-events:none;
  opacity:0;transform:translateY(22px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.tx>*{pointer-events:auto}
.ch.on .tx{opacity:1;transform:none}
.ch.right .tx{margin-left:auto;margin-right:clamp(0px,7vw,120px)}
.hero .tx{justify-content:flex-start;max-width:620px;padding-top:clamp(96px,15vh,150px)}
.ch.top .tx{justify-content:flex-start;padding-top:clamp(96px,15vh,150px)}
h1{font-size:clamp(var(--t5),6.2vw,var(--t8))}
h2{font-size:clamp(var(--t4),4.2vw,var(--t6))}
.k{font-size:var(--t0);letter-spacing:.02em;color:var(--dim)}
.lede{font-size:var(--t1);max-width:330px;color:var(--dim)}
.tx p:not(.k):not(.lede):not(.hint):not(.fine):not(.tag){max-width:42ch;text-shadow:0 0 22px color-mix(in oklab,var(--ink) 0%,transparent)}
.tx{text-shadow:0 0 26px rgba(196,206,220,.7)}
html.night .tx{text-shadow:0 1px 20px rgba(4,8,14,.8)}
.go{text-shadow:none}
.go{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:99px;background:var(--ink);color:var(--fog);font-size:15px;text-decoration:none;transition:background-color var(--slow) var(--ease),color var(--slow) var(--ease),transform .5s var(--ease)}
html.night .go{color:var(--navy)}
.go:hover{transform:translateY(-2px)}
.hint{font-size:var(--t0);color:var(--dim);margin-top:var(--s2);display:flex;align-items:center;gap:10px}
.hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 14px 3px color-mix(in oklab,var(--lamp) 70%,transparent)}
.tag{min-height:3.2em;font:300 var(--t3)/1.25 var(--serif);font-variation-settings:"opsz" 60;color:var(--lamp);transition:opacity .6s var(--ease)}
.tag.off{opacity:0}
.visit{display:grid;justify-items:start;gap:var(--s2);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);max-width:42ch}
.fine{font-size:var(--t0);color:var(--dim);margin-top:var(--s2);max-width:46ch}
.fine a{text-underline-offset:3px}

@media (max-width:760px){
  :root{--scrim:rgba(176,186,200,.9)}
  html.night{--scrim:rgba(7,12,22,.78)}
  .tx{isolation:isolate}
  .ch:not(.hero) .tx::before{content:"";position:absolute;z-index:-1;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);bottom:0;height:62%;background:linear-gradient(to top,var(--scrim) 42%,transparent);transition:background var(--slow) var(--ease)}
  .ch.top .tx::before{bottom:auto;top:0;height:56%;background:linear-gradient(to bottom,var(--scrim) 46%,transparent)}
  #rail span{display:none}
  #rail{right:10px;gap:0}
  #rail a{min-height:26px;min-width:26px;justify-content:center}
  #watch{display:none}
  .tx{max-width:none;padding-right:34px}
  .ch.right .tx{margin:0}
  .hero .tx{padding-top:96px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.2s!important}
  .tx{transform:none}
}