/* Page below the intro. Colour moves with the argument:
   seal red (intro) → paper (thesis) → night (the clock) → paper (portfolio) → seal red (founders, footer). */
:root{--paper:#ece6da;--night:#100302;--seal:#f51b25;--gold:#a47c2e}
html:root{transition:background-color .7s cubic-bezier(.3,0,.1,1),color .7s cubic-bezier(.3,0,.1,1)}
html[data-theme='paper']{--page:var(--paper)}
html[data-theme='night']{--page:var(--night);--fg:var(--paper)}

/* Scroll cue: two arrows in the bottom corners once the logo has landed. */
.cues{position:fixed;inset:auto 0 32px;display:flex;justify-content:space-between;padding:0 32px;z-index:28;pointer-events:none}
.cue{display:block}
.cue svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;overflow:visible}

/* Word masks: each word rises out of its own line. The extra bottom room keeps
   descenders (p, y, g) out of the clip. */
.split .w{display:inline-block;vertical-align:top;clip-path:inset(-.08em -.3em 0 -.3em);padding-bottom:.14em;margin-bottom:-.14em}
.split .wi{display:inline-block;transform-origin:0 100%}

/* Drums: one digit wide, one cell tall; the reel inside slides. */
.slot{display:inline-block;width:.56em;height:.9em;overflow:hidden;flex:none}

/* Thesis */
/* The section is tall and its content sticks, so the statement holds still in
   view while the scroll builds it. */
.thesis{height:220vh}
.thesis-inner{position:sticky;top:0;height:100svh;padding:0 32px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-content:center}
.decree{grid-column:1 / 11;font-size:clamp(44px,7.4vw,138px);font-weight:700;letter-spacing:-.055em;line-height:.94;margin:0}
.decree .w,.decree .yd{transform:translate3d(0,calc(var(--v,0) * var(--k,0) * 1px),0)}
.decree .yr{white-space:nowrap;display:inline-block;vertical-align:top}
.decree .yd{display:inline-block;vertical-align:top;overflow:hidden;height:.94em}
.decree .yreel{display:block}
.decree .yreel>span{display:block;height:.94em;line-height:.94em;transition:color .6s cubic-bezier(.3,0,.1,1)}
/* Midas: 2047 turns to gold the moment it lands. */
.decree .yr.gold .yreel>span{color:var(--gold)}
.plain{grid-column:1 / 7;font-size:clamp(17px,1.35vw,21px);line-height:1.45;margin:8vh 0 0;max-width:30em}

/* The clock: days left until 3 May 2047, counted down out of the whole century. */
.clock{padding:24vh 32px 26vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.clock .label{grid-column:1 / -1;font-size:15px;line-height:1.4;margin:0 0 4vh}
.count{grid-column:1 / -1;display:flex;font-size:min(25vw,54svh);font-weight:700;letter-spacing:-.075em;line-height:.85;color:var(--seal);margin:0 0 0 -.045em}
.count .comma{flex:none;width:.26em}
.clock .line{grid-column:6 / 13;font-size:clamp(28px,3.4vw,60px);font-weight:700;letter-spacing:-.045em;line-height:1;margin:6vh 0 0}

/* Portfolio */
.next{padding:18vh 32px 22vh}
.next .label{font-size:15px;margin:0 0 20px}
.next .big{font-size:clamp(56px,11vw,210px);font-weight:700;letter-spacing:-.06em;line-height:.9;margin:0}

/* Founders: the page's one question, then its one action. */
.founders{padding:26vh 32px 20vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.ask{grid-column:1 / -1;font-size:clamp(60px,13vw,250px);font-weight:700;letter-spacing:-.065em;line-height:.88;margin:0}

/* The thread: one stroke from the portfolio underline down into the envelope. */
.thread{position:relative}
.thread-line{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:5;fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
.mail{grid-column:7 / -1;justify-self:end;display:block;width:clamp(150px,17vw,320px);aspect-ratio:1.5;margin-top:10vh;position:relative;z-index:6}
.mail:focus-visible{outline:4px solid currentColor;outline-offset:14px}
/* Appears once the envelope has formed, letter by letter. */
.mail-label{position:absolute;left:0;top:calc(100% + 22px);font-size:clamp(18px,1.5vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.2;white-space:nowrap;visibility:hidden}
.mail-label.on{visibility:visible}
.mail-label .lc{display:inline-block;clip-path:inset(-.1em -.1em -.3em -.1em)}
.mail-label .lc>span{display:inline-block}

/* Footer: the mark rises out of the page edge, and every character answers the pointer. */
.site-end{display:block;padding:0 32px;font-size:15px;overflow:hidden}
.end-row{display:flex;justify-content:space-between;gap:24px;line-height:1.4;padding-bottom:5vh}
.end-row a:hover{opacity:.6}
.endmark{display:flex;font-size:calc((100vw - 64px) / 2.66);font-weight:700;letter-spacing:-.075em;line-height:.85;margin:0 0 0 -.03em;padding-bottom:32px;cursor:default;user-select:none;-webkit-user-select:none}
.endmark .lt{display:inline-block;height:.9em;line-height:.9em;clip-path:inset(0 -.2em);letter-spacing:-.05em}
.endmark .lt>span{display:block;text-shadow:0 .9em currentColor}

@media(max-width:650px){
  .cues{padding:0 16px;bottom:24px}
  .thesis{height:200vh}
  .thesis-inner{padding:0 16px;grid-template-columns:1fr}
  .decree,.plain{grid-column:1}
  .decree{font-size:44px}
  .plain{margin-top:64px}
  .clock{padding:120px 16px 140px;grid-template-columns:1fr}
  .count{font-size:30vw}
  .clock .line{grid-column:1;font-size:30px}
  .next{padding:96px 16px 120px}
  .founders{padding:140px 16px 100px;grid-template-columns:1fr}
  .ask{font-size:17vw}
  .mail{grid-column:1;justify-self:start;width:46vw;margin-top:56px}
  .site-end{padding:0 16px;font-size:13px}
  .end-row{flex-wrap:wrap;gap:8px 20px}
  .endmark{font-size:calc((100vw - 32px) / 2.66)}
}