@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{
  --paper:#F1ECE1; --ink:#15130F; --night:#04060B; --gold:#F5B63F;
  --sky:var(--paper); --fg:var(--ink);
  --dim:color-mix(in oklab,var(--fg) 66%,transparent);
  --line:color-mix(in oklab,var(--fg) 18%,transparent);
  /* type: one ratio, 1.25 */
  --t0:13px; --t1:16px; --t2:20px; --t3:25px; --t4:31px; --t5:39px; --t6:49px; --t7:61px; --t8:76px; --t9:95px;
  /* space: one scale */
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:128px;
  --gut:clamp(20px,6vw,96px);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:Fraunces,"Iowan Old Style",Palatino,Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mx:3; --my:0;
}
html[data-night]{--fg:var(--paper)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:0}
body{margin:0;background:var(--sky);color:var(--fg);font:400 var(--t1)/1.55 var(--sans);font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:color .6s var(--ease)}
h1,h2,h3,p,ol{margin:0;padding:0}
ol{list-style:none}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid currentColor;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:20;background:var(--fg);color:var(--sky);padding:12px 18px;border-radius:99px;font-size:var(--t0);transform:translateY(-200%)}
.skip:focus{transform:none}
.k{font-size:var(--t0);letter-spacing:.02em;color:var(--dim);font-variant-numeric:tabular-nums}

/* the sky */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#nogl{display:none}
html.nogl #sky{display:none}
html.nogl #nogl{display:block;position:fixed;z-index:0;left:50%;top:26vh;width:28vmin;height:28vmin;margin-left:-14vmin}
#nogl i{position:absolute;inset:0;border-radius:50%}
#nogl .s{background:var(--gold)}
#nogl .m{background:var(--sky);transform:translate(calc(var(--mx)*50%),calc(var(--my)*50%)) scale(1.079)}
header,main,footer,#rail{position:relative;z-index:1}

/* the round slot the sun sits in */
.o{display:inline-block;width:.5em;height:.5em;border-radius:50%;margin:0 .035em;font-size:inherit;color:transparent;overflow:hidden;vertical-align:baseline;user-select:none}
html.nogl h1 .o,html.nogl .giant .o{background:var(--gold)}

/* header */
#bar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--gut);padding-top:max(var(--s2),env(safe-area-inset-top))}
.mark{font:300 var(--t3)/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.03em;display:inline-flex;align-items:center;min-height:44px}
.mark .o{position:relative;background:var(--gold);overflow:hidden;transition:box-shadow .6s var(--ease)}
.mark .o i{position:absolute;inset:0;border-radius:50%;background:var(--sky);transform:translate(calc(var(--mx)*50%),calc(var(--my)*50%)) scale(1.079)}
html[data-night] .mark .o{box-shadow:0 0 0 1px color-mix(in oklab,var(--paper) 70%,transparent),0 0 10px 1px color-mix(in oklab,var(--paper) 45%,transparent)}
.read{display:flex;align-items:center;gap:12px;font-size:var(--t0);font-variant-numeric:tabular-nums;color:var(--dim);margin-right:auto}
.read .sep{width:16px;height:1px;background:currentColor;opacity:.6}
#bar nav{display:flex;align-items:center;gap:var(--s3);font-size:var(--t0)}
#bar nav a{min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(currentColor,currentColor) 0 72%/0 1px no-repeat;transition:background-size .3s var(--ease)}
#bar nav a:hover{background-size:100% 1px}
.pill{font:500 var(--t0)/1 var(--sans);color:inherit;background:none;border:1px solid currentColor;border-radius:99px;min-height:44px;padding:0 20px;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pill:hover{background:var(--fg);color:var(--sky)}
.pill.solid{background:var(--fg);color:var(--sky);min-height:56px;padding:0 28px;font-size:var(--t1)}
.pill.solid:hover{background:none;color:var(--fg)}

#bar::before{content:"";position:absolute;inset:0 0 -24px 0;z-index:-1;pointer-events:none;background:linear-gradient(var(--sky) 58%,transparent)}

/* phase rail */
#rail{position:fixed;right:var(--s2);top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;align-items:flex-end}
#rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;height:30px;width:44px}
#rail a::after{content:"";width:12px;height:1px;background:currentColor;opacity:.45;transform-origin:right;transition:transform .3s var(--ease),opacity .3s var(--ease)}
#rail a span{position:absolute;right:40px;white-space:nowrap;font-size:var(--t0);opacity:0;transform:translateX(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
#rail a:hover::after,#rail a:focus-visible::after,#rail a[aria-current]::after{transform:scaleX(2.2);opacity:1}
#rail a:hover span,#rail a:focus-visible span{opacity:1;transform:none}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;position:relative;padding:0 var(--gut)}
#word{font-size:22.5vw;line-height:.9;letter-spacing:-.05em;white-space:nowrap;margin-top:-4vh}
.ln{display:block;overflow:hidden;padding:.06em .04em .14em}
.ln>span{display:block}
html.js .ln>span{transform:translateY(112%);transition:transform 1.4s var(--ease)}
html.ready .ln>span{transform:none}
.hero-foot{position:absolute;inset:auto var(--gut) var(--s3) var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--s3)}
html.js .hero-foot{opacity:0;transition:opacity 1.4s var(--ease) .5s}
html.ready .hero-foot{opacity:1}
.date{font:300 var(--t3)/1.2 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em}
.lede{grid-column:3;justify-self:end;max-width:30ch;font-size:var(--t1);color:var(--dim)}
.hint{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:var(--t0);color:var(--dim)}
.hint i{width:1px;height:32px;background:currentColor;transform-origin:top;animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* chapters with one beat each */
.chap{min-height:130vh;display:grid;align-items:center;padding:0 var(--gut)}
.beat{max-width:28rem;display:grid;gap:var(--s2);will-change:opacity,transform}
.left .beat{justify-self:start}
.right .beat{justify-self:end}
.beat h2{font-size:var(--t7)}
.beat p:not(.k){font-size:var(--t2);line-height:1.5;color:var(--dim)}

/* pinned stages */
.pin{position:relative}
.pin .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pin:focus-visible{outline:none}
.pin:focus-visible .stage{outline:2px solid currentColor;outline-offset:-6px}
#crescents{height:260vh}
#play{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.play-copy{position:absolute;left:var(--gut);top:16vh;max-width:25rem;display:grid;gap:var(--s2);justify-items:start}
.play-copy h2{font-size:var(--t5)}
.play-copy p:not(.k){color:var(--dim)}
.play-copy .how{color:var(--fg)!important;font-weight:500}
.how .coarse{display:none}
@media (pointer:coarse){.how .fine{display:none}.how .coarse{display:inline}}

#totality{height:520vh}
.tot-top,.tot-bot .lines{display:grid}
.tot-top>*,.lines>*{grid-area:1/1}
.tot-top{position:absolute;inset:96px var(--gut) auto;justify-items:center;text-align:center}
.tot-bot{position:absolute;inset:auto var(--gut) 7vh;display:grid;justify-items:center;gap:var(--s2);text-align:center}
.tot-bot>.tb{display:flex;align-items:baseline;gap:var(--s3)}
#tot-h{font-size:var(--t6)}
.clock{display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
#clock{display:inline-flex;font:300 var(--t6)/1 var(--sans);letter-spacing:-.04em;height:1em;overflow:hidden}
#clock b{display:block;font-weight:inherit;will-change:transform}
#clock b i{display:block;height:1em;font-style:normal}
.clock .of{font-size:var(--t0);color:var(--dim)}
.lines{min-height:6.2em;align-items:start;justify-items:center}
.lines p{max-width:36ch;font-size:var(--t2);line-height:1.45;text-shadow:0 0 24px var(--sky),0 0 8px var(--sky)}
.lines p.big{font:300 var(--t4)/1.2 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;max-width:26ch}
.tb{opacity:0;will-change:opacity}
html:not(.js) .tb{opacity:1;position:static}

#path{height:420vh}
.path-head{position:absolute;left:var(--gut);top:13vh;max-width:30rem;display:grid;gap:var(--s2)}
.path-head h2{font-size:var(--t7)}
.path-head p:not(.k){color:var(--dim)}
.road{position:absolute;left:0;right:0;bottom:11vh}
#stops{display:flex;align-items:flex-end;width:max-content;padding:0 var(--gut);position:relative;will-change:transform}
#stops li{width:210px;position:relative;display:grid;gap:6px;padding-top:var(--s2);transition:color .5s var(--ease)}
#stops li.in{color:var(--paper)}
#stops .dur{font:300 var(--t4)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#stops .bar{width:1px;background:currentColor;margin:6px 0 0;height:calc(var(--h)*15vh);position:relative}
#stops .bar::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:currentColor}
#stops .base{height:1px;background:var(--line);margin-right:0;width:100%}
#stops li.in .base{background:color-mix(in oklab,var(--paper) 30%,transparent)}
#stops .city{font:300 var(--t3)/1.1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;margin-top:10px}
#stops .meta{font-size:var(--t0);font-variant-numeric:tabular-nums;opacity:.7}
#stops #umbra{display:block;padding:0;position:absolute;left:0;bottom:-12vh;width:52vh;height:52vh;margin-left:-26vh;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--night) 0 78%,color-mix(in oklab,var(--night) 55%,transparent) 88%,transparent 100%);will-change:transform}
.legend{position:absolute;left:var(--gut);bottom:var(--s3);display:flex;gap:var(--s3);font-size:var(--t0);color:var(--dim)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.lg-bar{width:1px;height:14px;background:currentColor}
.lg-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* watch safely */
#watch{padding:var(--s5) var(--gut);display:grid;gap:var(--s4)}
.watch-head{display:grid;gap:var(--s2)}
.watch-head h2{font-size:var(--t7)}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.rules li{border-top:1px solid var(--line);padding-top:var(--s2);display:grid;gap:var(--s2);align-content:start}
.rules .n{font-size:var(--t0);color:var(--dim);font-variant-numeric:tabular-nums}
.rules h3{font-size:var(--t3);line-height:1.15}
.rules p{color:var(--dim)}

/* the ask */
#go{padding:var(--s5) var(--gut);display:grid;justify-items:center;text-align:center;gap:var(--s3)}
.days{display:grid;justify-items:center;gap:var(--s1)}
#days{display:flex;font:300 var(--t9)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
#days .d{height:1em;overflow:hidden}
#days .d b{display:block;font-weight:inherit;transition:transform 1.25s var(--ease)}
#days .d b i{display:block;height:1em;font-style:normal}
.days .unit{font-size:var(--t0);color:var(--dim)}
#go h2{font-size:var(--t8)}
.go-p{max-width:46ch;font-size:var(--t2);line-height:1.5;color:var(--dim)}
.done{min-height:1.6em;font-size:var(--t0);color:var(--dim)}

/* footer */
#foot{padding:var(--s4) 0 0;overflow:hidden}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--gut) 0;border-top:1px solid var(--line);margin:0 var(--gut);padding-left:0;padding-right:0;font-size:var(--t0);color:var(--dim)}
.foot-row p{max-width:52ch}
.foot-row nav{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.foot-row a{min-height:44px;display:inline-flex;align-items:center;color:var(--fg)}
.foot-row a:hover{text-decoration:underline;text-underline-offset:4px}
.giant{font:300 22.5vw/.9 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.05em;white-space:nowrap;text-align:center;padding:.1em 0 .34em;margin-top:var(--s3)}
.giant span{display:block;will-change:transform}

/* staged reveals for blocks that are not scrubbed */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
html.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  #rail,#bar nav a{display:none}
  .rules{grid-template-columns:repeat(2,1fr)}
  .beat h2{font-size:var(--t5)}
  .path-head h2,.watch-head h2{font-size:var(--t6)}
  #go h2{font-size:var(--t6)}
}
@media (max-width:600px){
  #bar{gap:var(--s2)}
  #bar nav{display:none}
  .read{margin-left:auto;margin-right:0}
  #word{margin-top:-12vh}
  .hero-foot{grid-template-columns:1fr;gap:var(--s2);justify-items:start;inset:auto var(--gut) var(--s3)}
  .lede{grid-column:1;justify-self:start}
  .hint{grid-column:1;grid-row:auto;flex-direction:row;align-items:center}
  .hint i{width:32px;height:1px;transform-origin:left;animation-name:dripx}
  .chap{min-height:120vh;align-items:end;padding-bottom:22vh}
  .left .beat,.right .beat{justify-self:start}
  .beat h2{font-size:var(--t4)}
  .beat p:not(.k){font-size:var(--t1)}
  .play-copy{top:33vh;right:var(--gut)}
  .play-copy h2{font-size:var(--t3)}
  .play-copy p:not(.k):not(.how){display:none}
  .play-copy .pill{display:none}
  .tot-top{top:76px}
  .tot-bot{bottom:5vh}
  .tot-bot>.tb{gap:var(--s2)}
  #tot-h,#clock{font-size:var(--t4)}
  .lines p{font-size:var(--t1)}
  .lines p.big{font-size:var(--t3)}
  .lines{min-height:7.4em}
  .path-head{top:12vh;right:var(--gut)}
  .path-head h2{font-size:var(--t5)}
  .road{bottom:11vh}
  #stops li{width:150px}
  #stops .dur{font-size:var(--t3)}
  #stops .city{font-size:var(--t2)}
  #stops .bar{height:calc(var(--h)*13vh)}
  #stops #umbra{width:44vh;height:44vh;margin-left:-22vh;bottom:-10vh}
  #watch,#go{padding:var(--s4) var(--gut) var(--s5)}
  .rules{grid-template-columns:1fr}
  #days{font-size:var(--t8)}
  #go h2{font-size:var(--t5)}
  .go-p{font-size:var(--t1)}
  .foot-row{flex-direction:column}
}
@keyframes dripx{0%{transform:scaleX(0)}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html.js .ln>span,html.js .rv{transform:none;opacity:1}
  html.js .hero-foot{opacity:1}
}