/* ======================================================================
   MORNINGVALE : "ONE MORNING"

   The room is dark on purpose. You cannot see a shaft of light on a bright
   page, and the light is the whole point. What changes across the morning
   is how much warm light is in the room and the angle the sun throws it
   at. --base / --warm / --beam-i / --beam-a / --amb / --sun are all
   written by the light model in app.js, every frame, from the scroll.
   ====================================================================== */

/* ============================ TOKENS ============================ */
:root{
  /* written live by the light model (these are only the pre-dawn seed) */
  --base:rgb(10,7,5);
  --warm:rgb(150,92,44);
  --beam-i:0;
  --beam-a:78deg;
  --amb:0;
  --sun:0;
  --vel:0;

  /* the fixed warm palette: nothing here is ever cool */
  --ink:#F2E5CB;
  --ink-2:rgba(242,229,203,.66);
  --ink-3:rgba(242,229,203,.40);
  --crema:#E08A34;
  --crema-2:#F0A85A;
  --ember:#C05A1E;
  --line:rgba(242,229,203,.14);
  --line-2:rgba(242,229,203,.07);

  /* long, weighted easings: nothing in this room snaps */
  --e-silk:cubic-bezier(.22,1,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,.12,.2,1);
  --e-liquid:cubic-bezier(.62,.02,.2,1);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1240px;
  --pad:clamp(1.25rem,5vw,4.5rem);

  /* one warm grade on every photograph, everywhere */
  --grade:sepia(.42) saturate(1.25) contrast(1.04) hue-rotate(-8deg);

  --f-huge:clamp(4.2rem,15.5vw,17rem);
  --f-big:clamp(2.8rem,8vw,8rem);
  --f-h:clamp(1.9rem,4.2vw,3.8rem);
  --f-lede:clamp(1.02rem,1.35vw,1.28rem);
  --f-micro:clamp(.66rem,.78vw,.76rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
  background:var(--base);
}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--base);
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .3s linear;
}
body.lock{overflow:hidden}
body.booting{overflow:hidden}

::selection{background:var(--crema);color:#160C05}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:9999;
  background:var(--crema);color:#160C05;padding:.7rem 1.1rem;border-radius:.5rem;
  font:600 .85rem/1 var(--sans);text-decoration:none;
}
.skip:focus{top:1rem}

:focus-visible{outline:2px solid var(--crema-2);outline-offset:3px;border-radius:3px}

img{max-width:100%;display:block}

/* ============================ THE ATMOSPHERE ============================ */
/* The room itself. The CSS version is always here; the WebGL canvas lays
   over it when the machine can carry it. Both read the same light model. */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--base)}

.atmos-css{
  position:absolute;inset:0;
  background:
    /* where the shaft lands */
    radial-gradient(60vw 52vh at 34% 74%, var(--warm) 0%, transparent 68%),
    /* the window itself, up on the left */
    radial-gradient(38vw 40vh at 8% 2%, var(--warm) 0%, transparent 62%),
    /* ambient bounce as the morning gets on */
    radial-gradient(120vw 100vh at 60% 40%, var(--warm) 0%, transparent 70%);
  opacity:calc(.10 + var(--beam-i) * .42);
  transition:opacity .35s linear;
}
/* the shaft, in pure CSS, for every machine that is not running the canvas */
.atmos-css::after{
  content:'';position:absolute;top:-60vh;left:-10vw;width:34vw;height:230vh;
  transform-origin:50% 0;
  transform:rotate(var(--beam-a)) translateY(-10vh);
  background:linear-gradient(90deg,transparent 0%,var(--warm) 48%,transparent 100%);
  filter:blur(46px);
  opacity:calc(var(--beam-i) * .5);
  mix-blend-mode:screen;
}
/* the vignette pulls you into the middle of the room */
.atmos::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(130vw 110vh at 50% 46%, transparent 24%, rgba(0,0,0,.5) 100%);
}
.atmos-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* when the canvas is carrying the room, the CSS room steps back to a base coat */
.atmos.has-gl .atmos-css{opacity:calc(.04 + var(--beam-i) * .06)}
.atmos.has-gl::after{opacity:.35}

/* ============================ GRAIN ============================ */
.grain{
  position:fixed;inset:-50%;z-index:2;pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite;
}
.atmos.has-gl ~ .grain{opacity:.022}
@keyframes grainshift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
  100%{transform:translate(0,0)}
}

/* ============================ PRELOADER ============================ */
.boot{
  position:fixed;inset:0;z-index:900;
  background:rgb(8,6,4);
  display:grid;place-items:center;
  transition:opacity .9s var(--e-silk), visibility .9s;
}
.boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-in{text-align:center;display:grid;gap:.9rem;justify-items:center}
.boot-word{
  font:400 clamp(1.4rem,3vw,2.4rem)/1 var(--display);
  font-variation-settings:'opsz' 120,'SOFT' 60,'WONK' 1;
  letter-spacing:.04em;color:var(--ink-2);
}
.boot-clock{
  font:400 clamp(3.4rem,10vw,7rem)/1 var(--mono);
  color:var(--crema);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.boot-note{font:400 var(--f-micro)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.boot-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(242,229,203,.08)}
.boot-line i{display:block;height:100%;background:var(--crema);transform:scaleX(0);transform-origin:0 50%}

/* ============================ THE CLOCK ============================ */
.clock{
  position:fixed;left:var(--pad);bottom:1.4rem;z-index:60;
  display:grid;gap:.15rem;pointer-events:none;
}
.clock-t{
  font:400 1.02rem/1 var(--mono);color:var(--crema-2);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.clock-s{
  font:400 .58rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================ TOP BAR ============================ */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem var(--pad);
  transition:padding .5s var(--e-silk), background-color .5s var(--e-silk), backdrop-filter .5s;
}
.bar.solid{
  padding:.7rem var(--pad);
  background:linear-gradient(rgba(10,7,4,.72),rgba(10,7,4,0));
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;color:var(--ink)}
.mark{width:38px;height:38px;flex:none;overflow:visible}
.mk-rays{stroke:var(--crema);stroke-width:2.2;stroke-linecap:round;opacity:calc(.25 + var(--sun)*.75);transition:opacity .4s linear}
.mk-sun{fill:var(--crema);transform-origin:22px 27px;transform:scaleY(calc(.55 + var(--sun)*.45));transition:transform .5s var(--e-silk)}
.mk-line{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.mk-vale{stroke:var(--ink);stroke-width:2;stroke-linecap:round;fill:none;opacity:.45}
.wm{display:grid;line-height:1}
.wm b{font:400 1.06rem/1 var(--display);font-variation-settings:'opsz' 100,'SOFT' 50,'WONK' 1;letter-spacing:.005em}
.wm b em{font-style:normal;color:var(--crema)}
.wm span{font:500 .52rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin-top:.24rem}

.dots{
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:grid;place-content:center;gap:5px;border-radius:50%;
  transition:background-color .4s var(--e-silk);
}
.dots:hover{background:rgba(242,229,203,.07)}
.dots i{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .5s var(--e-silk),opacity .4s,width .5s var(--e-silk)}
.dots i:nth-child(2){width:15px;margin-left:auto}
.dots:hover i:nth-child(2){width:22px}
.dots[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.dots[aria-expanded="true"] i:nth-child(2){opacity:0;transform:translateX(12px)}
.dots[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================ OVERLAY NAV : the hours ============================ */
.menu{
  position:fixed;inset:0;z-index:65;
  background:rgba(9,6,4,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path 1s var(--e-liquid), visibility 1s;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu-inner{
  height:100%;display:grid;align-content:center;gap:clamp(1.6rem,4vh,3rem);
  padding:6rem var(--pad) 3rem;max-width:var(--wrap);margin-inline:auto;width:100%;
}
.menu-eyebrow{font:400 var(--f-micro)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.menu-nav{display:grid}
.menu-nav a{
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(.5rem,1.4vh,1rem) 0;
  border-top:1px solid var(--line-2);
  text-decoration:none;color:var(--ink);
  opacity:0;transform:translateY(30px);
  transition:opacity .7s var(--e-out),transform .8s var(--e-out),color .4s;
}
.menu-nav a:last-child{border-bottom:1px solid var(--line-2)}
.menu.open .menu-nav a{opacity:1;transform:none}
.menu.open .menu-nav a:nth-child(1){transition-delay:.16s}
.menu.open .menu-nav a:nth-child(2){transition-delay:.24s}
.menu.open .menu-nav a:nth-child(3){transition-delay:.32s}
.menu.open .menu-nav a:nth-child(4){transition-delay:.40s}
.menu-nav .idx{font:400 .82rem/1 var(--mono);color:var(--crema);flex:none;width:3.4em;font-variant-numeric:tabular-nums}
.menu-nav .lbl{
  font:400 clamp(2rem,6.4vw,4.6rem)/1.02 var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1;
  letter-spacing:-.02em;
  transition:font-variation-settings .5s var(--e-silk);
}
.menu-nav .lbl em{font-style:italic;color:var(--crema)}
.menu-nav a:hover .lbl,.menu-nav a:focus-visible .lbl{font-variation-settings:'opsz' 144,'SOFT' 100,'WONK' 1}
.menu-nav a:hover .idx{color:var(--crema-2)}
.menu-nav a.on .idx::after{content:' \2022'}
.menu-foot{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  font:400 .78rem/1.5 var(--sans);color:var(--ink-3);
  opacity:0;transition:opacity .8s var(--e-out) .5s;
}
.menu.open .menu-foot{opacity:1}
.menu-foot b{color:var(--ink-2);font-weight:500}

/* ============================ TYPE ============================ */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:-.025em}
.eyebrow{
  font:400 var(--f-micro)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--crema);
}
.lede{font-size:var(--f-lede);color:var(--ink-2);max-width:46ch}

.big{font-size:var(--f-big);font-variation-settings:'opsz' 144,'SOFT' 30,'WONK' 1}
.huge{font-size:var(--f-huge);font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;letter-spacing:-.045em;line-height:.86}

/* ============================ REVEALS ============================ */
/* Lines rise from behind a mask. The mask is the point: the words arrive
   from somewhere, they do not fade in from nothing. */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>i{
  display:block;font-style:inherit;
  transform:translateY(106%);
  transition:transform 1.15s var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms + var(--d,0ms));
}
[data-rv="lift"].in .ln>i{transform:none}

[data-rv="mask"]{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--e-out) var(--d,0ms),transform 1s var(--e-out) var(--d,0ms);
}
[data-rv="mask"].in{opacity:1;transform:none}

[data-rv="slide"]{
  opacity:0;transform:translateX(-16px);
  transition:opacity .8s var(--e-out) var(--d,0ms),transform .9s var(--e-out) var(--d,0ms);
}
[data-rv="slide"].in{opacity:1;transform:none}

[data-rv="fade"]{opacity:0;transition:opacity 1.2s var(--e-out) var(--d,0ms)}
[data-rv="fade"].in{opacity:1}

/* a photograph is wiped in, like a squeegee across glass */
[data-rv="wipe"]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.4s var(--e-liquid) var(--d,0ms);
}
[data-rv="wipe"].in{clip-path:inset(0 0 0 0)}

[data-rv="rule"]{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e-out) var(--d,0ms)}
[data-rv="rule"].in{transform:scaleX(1)}

/* ============================ BUTTONS ============================ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.5rem;border-radius:999px;
  font:500 .86rem/1 var(--sans);letter-spacing:.02em;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);
  overflow:hidden;isolation:isolate;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--crema);
  transform:translateY(101%);
  transition:transform .7s var(--e-liquid);
}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:#180D05;border-color:var(--crema)}
.btn .arw{font-style:normal;transition:transform .6s var(--e-silk)}
.btn:hover .arw{transform:translateX(5px)}
.btn.light{background:var(--crema);color:#180D05;border-color:var(--crema)}
.btn.light::before{background:var(--ink)}
.btn.light:hover{color:#180D05;border-color:var(--ink)}

.tlink{
  font:500 .86rem/1 var(--sans);color:var(--ink-2);text-decoration:none;
  padding-bottom:3px;background-image:linear-gradient(var(--crema),var(--crema));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .6s var(--e-silk),color .4s;
}
.tlink:hover,.tlink:focus-visible{color:var(--ink);background-size:100% 1px}

.acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2rem}

/* ============================ CURSOR ============================ */
.cur{position:fixed;inset:0;z-index:800;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.cur.on{opacity:1}
.cur-dot,.cur-ring{position:absolute;top:0;left:0;border-radius:50%}
.cur-dot{width:5px;height:5px;margin:-2.5px;background:var(--crema-2)}
.cur-ring{
  width:34px;height:34px;margin:-17px;
  border:1px solid rgba(224,138,52,.5);
  background:radial-gradient(circle,rgba(224,138,52,.16),transparent 70%);
  transition:width .5s var(--e-silk),height .5s var(--e-silk),margin .5s var(--e-silk),border-color .4s;
}
.cur.hot .cur-ring{width:62px;height:62px;margin:-31px;border-color:rgba(240,168,90,.75)}
.cur.down .cur-ring{width:24px;height:24px;margin:-12px}
body.has-cur,body.has-cur a,body.has-cur button{cursor:none}

/* ============================ LAYOUT ============================ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:3}
main{position:relative;z-index:3}
section{position:relative}
.tick{position:absolute;top:52%;left:0;width:1px;height:1px}

/* ============================ 6:52 . BEFORE ============================ */
.night{min-height:100svh;display:grid;align-items:center;padding:8rem 0 6rem;position:relative}
.night-wrap{display:grid;gap:1.4rem;justify-items:start}
.night-h{
  font-size:var(--f-big);
  font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;
  letter-spacing:-.04em;line-height:.92;
  color:var(--ink);
}
.night-h .ln:nth-child(3)>i{color:var(--crema)}
.night-p{font-size:var(--f-lede);color:var(--ink-3);max-width:42ch;margin-top:.4rem}
.night-hint{
  position:absolute;left:var(--pad);bottom:2.4rem;
  display:flex;align-items:center;gap:.9rem;
  font:400 var(--f-micro)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
/* named so it cannot collide with the .ln line-mask class used by the reveals */
.night-hint .hint-ln{position:relative;width:60px;height:1px;background:linear-gradient(90deg,var(--crema),transparent)}
.night-hint .hint-ln::after{
  content:'';position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:var(--crema);
  animation:drop 2.6s var(--e-soft) infinite;
}
@keyframes drop{0%{transform:translate(0,-10px);opacity:0}30%{opacity:1}100%{transform:translate(0,12px);opacity:0}}

/* ============================ THE FIRST POUR AT SEVEN ============================ */
/* The signature. 340vh of scroll, pinned, and every value inside is a
   function of how far through it you are. */
.pour{height:340vh;position:relative}
.pour-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.pour-room{position:absolute;inset:0;display:grid;place-items:center}

/* the shaft that crosses the room */
.beam{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;overflow:hidden}
.beam span{
  position:absolute;top:-55vh;left:0;height:220vh;transform-origin:50% 50%;
  transform:translate3d(calc(-30vw + var(--sweep,0) * 118vw),0,0) rotate(16deg);
}
.beam-core{
  width:9vw;
  background:linear-gradient(90deg,transparent,rgba(240,168,90,.7) 45%,rgba(255,226,180,.85) 52%,transparent);
  filter:blur(14px);
  opacity:calc(.5 + var(--sweep,0) * .5);
}
.beam-soft{
  width:34vw;margin-left:-12vw;
  background:linear-gradient(90deg,transparent,rgba(224,138,52,.42) 50%,transparent);
  filter:blur(60px);
  opacity:.8;
}
/* dust hanging in the beam */
.beam-dust{
  width:16vw;margin-left:-3vw;
  background-image:radial-gradient(circle at 20% 12%,rgba(255,226,180,.9) 0 1px,transparent 1.6px),
                   radial-gradient(circle at 68% 34%,rgba(255,226,180,.7) 0 1.2px,transparent 2px),
                   radial-gradient(circle at 40% 62%,rgba(255,226,180,.8) 0 1px,transparent 1.6px),
                   radial-gradient(circle at 82% 84%,rgba(255,226,180,.6) 0 1.4px,transparent 2.2px);
  background-size:120px 160px,180px 220px,90px 130px,150px 190px;
  opacity:calc(var(--sweep,0) * .8);
  animation:dustrise 26s linear infinite;
}
@keyframes dustrise{to{background-position:0 -160px,0 -220px,0 -130px,0 -190px}}

/* the counter */
.pour-stage{position:relative;z-index:3;display:grid;place-items:center;transform:translateY(4vh)}
.cup{position:relative;width:clamp(220px,26vw,360px);aspect-ratio:1;border-radius:50%}
.cup-img{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.cup-img img{
  width:100%;height:100%;object-fit:cover;
  /* the cup is dark until the light finds it */
  filter:var(--grade) brightness(calc(.14 + var(--ignite,0) * 1.15)) saturate(calc(.5 + var(--ignite,0) * .9));
  transform:scale(calc(1.06 - var(--ignite,0) * .06));
}
.cup-img.noimg{background:radial-gradient(circle at 40% 36%,var(--crema),#2A1608 72%)}
/* the crema takes the light */
.cup-ignite{
  position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 38%,rgba(255,214,150,.95),rgba(224,138,52,.42) 40%,transparent 68%);
  opacity:calc(var(--ignite,0) * .9);
  mix-blend-mode:screen;
  filter:blur(6px);
}
.cup-rim{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,214,150,.35),
             0 40px 90px -30px rgba(0,0,0,.8);
  opacity:calc(.3 + var(--ignite,0) * .7);
}

/* steam only exists where the beam is behind it */
.steam{
  position:absolute;left:50%;bottom:62%;width:clamp(120px,14vw,190px);height:auto;
  transform:translateX(-46%);
  opacity:calc(var(--backlit,0) * .85);
  pointer-events:none;
}
.steam path{
  stroke:#FFE7C4;stroke-width:2.2;stroke-linecap:round;fill:none;
  filter:blur(3px);
  stroke-dasharray:340;
  animation:wisp 9s ease-in-out infinite;
}
.steam path:nth-child(2){animation-duration:11s;animation-delay:-3s;opacity:.75}
.steam path:nth-child(3){animation-duration:13s;animation-delay:-6s;opacity:.55}
@keyframes wisp{
  0%{stroke-dashoffset:340}
  100%{stroke-dashoffset:-340}
}

/* the type, lit into existence by the beam */
.pour-type{position:absolute;z-index:4;left:var(--pad);bottom:12vh;display:grid;gap:.7rem;pointer-events:none}
.pour-eyebrow{font:400 var(--f-micro)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase}
.pour-h{font-size:var(--f-huge);line-height:.82;letter-spacing:-.05em;font-variation-settings:'opsz' 144,'SOFT' 30,'WONK' 1}
.pour-sub{font-size:var(--f-lede);letter-spacing:.01em}

/* THE technique of this site: the text is not faded in on a timer. The
   beam's own gradient is the text's fill, and it slides across as the
   light crosses the room, so letters warm up as it reaches them and stay
   lit once it has passed. */
[data-lit]{
  --unlit:rgba(242,229,203,.07);
  --lit:var(--ink);
  --hot:#FFE9C6;
  display:inline-block;
  background-image:linear-gradient(96deg,
    var(--lit) 0%, var(--lit) 40%,
    var(--hot) 48%, var(--crema-2) 53%,
    var(--unlit) 62%, var(--unlit) 100%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  background-position:calc((1 - var(--lit-p,0)) * 100%) 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.pour-h [data-lit]{--unlit:rgba(242,229,203,.05)}
.pour-eyebrow [data-lit]{--lit:var(--crema)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  [data-lit]{color:var(--ink);-webkit-text-fill-color:currentColor;background-image:none}
}

/* the floor takes the light too */
.pour-floor{
  position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:1;
  background:linear-gradient(transparent,var(--warm));
  opacity:calc(var(--sweep,0) * .45);
  mix-blend-mode:screen;
}

/* ============================ 7:20 . THE ROOM FILLS ============================ */
/* An editorial grid, deliberately off balance: the words hold the left,
   the photographs hang at two different depths on the right. */
.fills{padding:16vh 0 18vh}
.fills-grid{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1.05fr .95fr;
  grid-template-areas:'lead p1' 'p2 p1';
  gap:clamp(1.5rem,4vw,4rem) clamp(1.5rem,5vw,5rem);
  align-items:end;
  position:relative;z-index:3;
}
.fills-lead{grid-area:lead;display:grid;gap:1.1rem;justify-items:start;padding-bottom:3rem}
.plate{position:relative;overflow:hidden;border-radius:2px}
.plate img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--grade) brightness(calc(.42 + var(--sun) * .5));
  transform:translate3d(0,var(--par,0px),0) scale(1.14);
}
.plate.p1{grid-area:p1;aspect-ratio:3/4}
.plate.p2{grid-area:p2;aspect-ratio:4/3;margin-bottom:2rem}
.plate figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;gap:.2rem;padding:2.6rem 1.2rem 1.1rem;
  background:linear-gradient(transparent,rgba(8,5,3,.88));
}
.plate figcaption b{font:400 .78rem/1 var(--mono);color:var(--crema-2);font-variant-numeric:tabular-nums}
.plate figcaption span{font:400 .86rem/1.45 var(--sans);color:var(--ink-2)}
.tag{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  font:400 .54rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(8,5,3,.5);
  padding:.34rem .5rem;border-radius:2px;
}

/* ============================ 9:00 . THE BOARD ============================ */
.board{height:420vh}
.board-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-content:center;gap:clamp(1.5rem,4vh,3rem)}
.board-head{padding-inline:var(--pad);display:grid;gap:.7rem;max-width:var(--wrap);margin-inline:auto;width:100%}
.board-h{font-size:var(--f-h);font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1}
.board-track{
  display:flex;gap:clamp(1rem,2.4vw,2.4rem);
  padding-inline:var(--pad);
  will-change:transform;
}
.chalk{
  flex:none;width:clamp(260px,25vw,360px);
  display:grid;gap:.6rem;align-content:start;
  padding:2rem 1.6rem;
  border:1px solid var(--line-2);
  border-radius:3px;
  background:linear-gradient(rgba(242,229,203,.035),rgba(242,229,203,.012));
  transition:border-color .6s var(--e-silk),transform .6s var(--e-silk);
}
.chalk:hover{border-color:rgba(224,138,52,.4);transform:translateY(-6px)}
.chalk .n{font:400 .74rem/1 var(--mono);color:var(--crema)}
.chalk h3{font-size:clamp(1.4rem,2.1vw,2rem);font-variation-settings:'opsz' 120,'SOFT' 60,'WONK' 1;color:var(--ink)}
.chalk p{font:400 .9rem/1.6 var(--sans);color:var(--ink-3)}
.chalk .pz{font:400 .95rem/1 var(--mono);color:var(--ink-2);margin-top:.5rem}
.chalk.end{align-content:center;justify-items:start;background:none;border-style:dashed;border-color:var(--line)}
.chalk.end .btn{margin-top:.8rem}
.board-rail{height:1px;background:var(--line-2);max-width:var(--wrap);margin-inline:auto;width:calc(100% - var(--pad)*2)}
.board-rail i{display:block;height:1px;background:var(--crema);transform-origin:0 50%;transform:scaleX(0)}

/* ============================ 12:00 . HIGH LIGHT ============================ */
.noon{padding:14vh 0 16vh;overflow:hidden}
.marquee{overflow:hidden;padding:1rem 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-bottom:clamp(4rem,10vh,9rem)}
.mq-track{display:flex;align-items:center;gap:2rem;width:max-content;will-change:transform}
.mq-track span{
  font:400 clamp(1.6rem,3.6vw,3rem)/1 var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 80,'WONK' 1;
  color:transparent;-webkit-text-stroke:1px rgba(242,229,203,.28);
  white-space:nowrap;
}
.mq-track i{color:var(--crema);font-style:normal;font-size:1.4rem}
.noon-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.noon-aside{display:grid;gap:1rem;padding-bottom:1rem}
.noon-aside .rule{display:block;height:1px;background:var(--crema);width:100%}
.noon-aside p{font-size:var(--f-lede);color:var(--ink-2)}

/* ============================ 1:58 . CLOSE ============================ */
.close{padding:12vh 0 10vh}
.close-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.close-grid>div:first-child{display:grid;gap:1.1rem;justify-items:start}
.hourscard{
  display:grid;gap:.2rem;padding:2rem 1.8rem;
  border:1px solid var(--line-2);border-radius:3px;
  background:linear-gradient(rgba(242,229,203,.04),rgba(242,229,203,.012));
}
.hourscard h3{font-size:1.3rem;font-variation-settings:'opsz' 120,'SOFT' 60,'WONK' 1;margin-bottom:.8rem;color:var(--ink)}
.hrow{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-top:1px solid var(--line-2);font:400 .9rem/1.4 var(--sans);color:var(--ink-3)}
.hrow b{font:400 .9rem/1.4 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.hrow.rest b{color:var(--ink-3)}
.hnote{font:400 .68rem/1.4 var(--sans);color:var(--ink-3);opacity:.7;margin-top:.9rem}

/* ============================ FOOTER ============================ */
.foot{padding:8vh 0 3rem;border-top:1px solid var(--line-2);margin-top:6vh}
.frow{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-end}
.fbig{
  font:400 clamp(1.8rem,4.4vw,3.4rem)/1.06 var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 40,'WONK' 1;
  letter-spacing:-.03em;color:var(--ink);
}
.footnav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem}
.footnav a{font:400 .86rem/1 var(--sans);color:var(--ink-3);text-decoration:none;transition:color .4s}
.footnav a:hover{color:var(--crema)}
.footline{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  margin-top:4rem;padding-top:1.4rem;border-top:1px solid var(--line-2);
  font:400 .72rem/1.5 var(--sans);color:var(--ink-3);
}
.credit{margin-top:.8rem;font:400 .72rem/1.5 var(--sans)}
.credit a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.credit a:hover{color:var(--crema)}

/* ============================ ROOM TONE ============================ */
.hum{
  position:fixed;right:var(--pad);bottom:1.4rem;z-index:60;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(8,5,3,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:pointer;color:var(--ink-3);
  transition:color .4s,border-color .4s;
}
.hum:hover{color:var(--ink-2);border-color:var(--line)}
.hum.on{color:var(--crema);border-color:rgba(224,138,52,.4)}
.hum .bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.hum .bars i{width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.hum.on .bars i{animation:eq 1.4s ease-in-out infinite}
.hum.on .bars i:nth-child(2){animation-delay:.2s}
.hum.on .bars i:nth-child(3){animation-delay:.4s}
.hum.on .bars i:nth-child(4){animation-delay:.15s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
.hum .lbl{font:400 .58rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* ============================ RESPONSIVE : re-choreographed, not shrunk ============================ */
@media (max-width:1000px){
  .fills-grid{grid-template-columns:1fr;grid-template-areas:'lead' 'p1' 'p2';gap:2rem}
  .plate.p1{aspect-ratio:4/5}
  .plate.p2{margin-bottom:0}
  .noon-wrap,.close-grid{grid-template-columns:1fr;gap:2.5rem;align-items:start}
  .noon-aside{padding-bottom:0}
}

@media (max-width:760px){
  :root{--f-huge:clamp(3.6rem,22vw,7rem);--f-big:clamp(2.4rem,10.5vw,4.2rem)}

  /* the pour still happens, it just happens closer to your thumb */
  .pour{height:300vh}
  .pour-type{left:var(--pad);right:var(--pad);bottom:9vh}
  .pour-stage{transform:translateY(-6vh)}
  .cup{width:min(62vw,300px)}
  .beam span{transform:translate3d(calc(-40vw + var(--sweep,0) * 150vw),0,0) rotate(12deg)}
  .beam-core{width:22vw}
  .beam-soft{width:70vw;margin-left:-24vw}
  .beam-dust{width:34vw}

  /* the board goes back to being a thing you push with your thumb */
  .board{height:auto}
  .board-pin{position:static;height:auto;padding:12vh 0}
  .board-track{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    transform:none !important;
    padding-bottom:1.5rem;
    scrollbar-width:none;
  }
  .board-track::-webkit-scrollbar{display:none}
  .chalk{width:min(76vw,320px);scroll-snap-align:center}
  .board-rail{display:none}

  .clock{bottom:1rem}
  .hum{bottom:1rem}
  .menu-nav .idx{width:2.8em;font-size:.7rem}
  .footline,.frow{gap:1.2rem}
  .frow{align-items:flex-start}
  .marquee{margin-bottom:3rem}
}

@media (max-width:420px){
  .clock-t{font-size:.9rem}
  .hum .lbl{display:none}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .boot{display:none}
  .ln>i{transform:none}
  [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important}
  [data-rv="rule"]{transform:scaleX(1) !important}
  .pour{height:100svh}
  .pour-pin{position:relative}
  .board{height:auto}
  .board-pin{position:static;height:auto;padding:10vh 0}
  .board-track{overflow-x:auto;transform:none !important}
  .grain{animation:none}
  .steam path{animation:none;stroke-dasharray:none}
  .beam-dust{animation:none}
}

/* ======================================================================
   THE OTHER HOURS : subpages live in the same room, at their own hour.
   9:00 the board (menu) . 11:00 the room (about) . 1:00 the walk up
   (visit) . 2:04 after close (404). Same light model, same tokens.
   ====================================================================== */

/* -- refinements -- */
/* the hint moves to the centre so the clock owns the bottom-left corner */
.night-hint{left:50%;bottom:2.2rem;transform:translateX(-50%)}
/* the clock bows out when the footer arrives: the day is over */
.clock{transition:opacity .6s var(--e-silk)}
.clock.dim{opacity:0}

/* -- shared page hero -- */
.phero{min-height:76vh;display:grid;align-content:end;padding:9rem 0 4.5rem;position:relative}
.phero .wrap{display:grid;gap:1.2rem;justify-items:start}
.phero-h{
  font-size:var(--f-big);
  font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;
  letter-spacing:-.04em;line-height:.92;color:var(--ink);
}
.phero-h em{font-style:italic;color:var(--crema)}

/* ============ 9:00 . THE BOARD (menu) ============ */
.courses{padding:4vh 0 2vh}
.course{
  display:grid;grid-template-columns:minmax(180px,.7fr) 1.3fr;
  gap:clamp(1.5rem,4vw,4.5rem);
  padding:clamp(2.6rem,6vh,4.5rem) 0;
  border-top:1px solid var(--line-2);
}
.course:first-of-type{border-top:0}
.course-side{position:sticky;top:16vh;align-self:start;display:grid;gap:.7rem;justify-items:start}
.cnum{font:400 .72rem/1 var(--mono);color:var(--crema);letter-spacing:.2em;text-transform:uppercase}
.course h2{font-size:var(--f-h);font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 1;color:var(--ink)}
.course h2 em{font-style:italic;color:var(--crema)}
.clist{display:grid;align-content:start}
.mline{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line-2);
  transition:padding-left .45s var(--e-silk);
}
.mline:hover{padding-left:.7rem}
.mline .nm{font:400 clamp(1.15rem,1.9vw,1.5rem)/1.2 var(--display);font-variation-settings:'opsz' 120,'SOFT' 60,'WONK' 1;color:var(--ink)}
.mline .nm .ds{display:block;font:400 .84rem/1.5 var(--sans);color:var(--ink-3);margin-top:.22rem}
.mline .dotfill{flex:1;min-width:2rem;border-bottom:1px dotted rgba(242,229,203,.22);transform:translateY(-.35em)}
.mline .pr{font:400 .92rem/1 var(--mono);color:var(--crema-2);font-variant-numeric:tabular-nums}
.bnote{margin:2.2rem 0 0;font:400 .68rem/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bfig{position:relative;border-radius:3px;overflow:hidden;margin:clamp(2rem,6vh,4rem) 0}
.bfig img{
  width:100%;aspect-ratio:21/9;object-fit:cover;
  filter:var(--grade) brightness(calc(.4 + var(--sun) * .5));
  transform:translate3d(0,var(--par,0px),0) scale(1.14);
}
.bfig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem 1rem;
  font:400 .72rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:linear-gradient(transparent,rgba(8,5,3,.85));
}

/* ============ the closing band every page shares ============ */
.promise{padding:16vh 0 12vh}
.promise .wrap{display:grid;gap:1.2rem;justify-items:start}
.promise-h{font-size:var(--f-big);font-variation-settings:'opsz' 144,'SOFT' 30,'WONK' 1;letter-spacing:-.04em;line-height:.94;color:var(--ink)}
.promise-h em{font-style:italic;color:var(--crema)}

/* ============ 11:00 . THE ROOM (about) ============ */
.chapter{padding:clamp(3rem,8vh,6rem) 0}
.chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.chapter.rev .chfig{order:2}
.chfig{position:relative;border-radius:3px;overflow:hidden}
.chfig img{
  width:100%;aspect-ratio:4/4.4;object-fit:cover;
  filter:var(--grade) brightness(calc(.4 + var(--sun) * .55));
  transform:translate3d(0,var(--par,0px),0) scale(1.14);
}
.chbody{display:grid;justify-items:start}
.chnum{font:400 clamp(3.2rem,7vw,5.6rem)/1 var(--mono);color:rgba(242,229,203,.08);font-variant-numeric:tabular-nums}
.chapter h2{font-size:var(--f-h);font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 1;color:var(--ink);margin:.5rem 0 1rem}
.chapter h2 em{font-style:italic;color:var(--crema)}
.chapter .chbody p{color:var(--ink-2);max-width:44ch}
.sig{margin-top:1.3rem;font:400 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.pull{padding:clamp(4rem,12vh,9rem) 0;text-align:center}
.pull blockquote{
  font:400 clamp(1.9rem,4.6vw,4rem)/1.16 var(--display);
  font-variation-settings:'opsz' 144,'SOFT' 90,'WONK' 1;
  font-style:italic;color:var(--ink);max-width:20em;margin-inline:auto;
}
.pull blockquote b{color:var(--crema);font-weight:400}
.pull .who{margin-top:1.4rem;font:400 var(--f-micro)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.dayline{padding:clamp(3rem,8vh,6rem) 0 clamp(4rem,10vh,8rem)}
.dayline-grid{display:grid;grid-template-columns:minmax(180px,.7fr) 1.3fr;gap:clamp(2rem,5vw,5rem)}
.dayline-side{position:sticky;top:16vh;align-self:start;display:grid;gap:.7rem;justify-items:start}
.dayline h2{font-size:var(--f-h);font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 1;color:var(--ink)}
.dayline h2 em{font-style:italic;color:var(--crema)}
.stops{--fill:0;position:relative;padding-left:2rem}
.stops::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.stops::after{
  content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:var(--crema);transform:scaleY(var(--fill));transform-origin:0 0;
}
.stop{position:relative;padding:1.1rem 0}
.stop::before{
  content:'';position:absolute;left:calc(-2rem + 2px);top:1.5rem;width:7px;height:7px;border-radius:50%;
  background:var(--base);border:1.5px solid var(--ink-3);
  transition:background .6s,border-color .6s,box-shadow .6s;
}
.stop.in::before{background:var(--crema);border-color:var(--crema);box-shadow:0 0 12px rgba(224,138,52,.5)}
.stop b{font:400 .78rem/1 var(--mono);color:var(--crema);font-variant-numeric:tabular-nums}
.stop h3{font-size:clamp(1.25rem,2vw,1.7rem);font-variation-settings:'opsz' 120,'SOFT' 60,'WONK' 1;color:var(--ink);margin:.4rem 0 .3rem}
.stop p{font:400 .92rem/1.6 var(--sans);color:var(--ink-3);max-width:46ch}

/* ============ 1:00 . THE WALK UP (visit) ============ */
.approach{height:240vh;position:relative}
.approach-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.approach-img{position:absolute;inset:0}
.approach-img img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--grade) brightness(calc(.30 + var(--walk,0) * .3));
  transform:scale(calc(1.26 - var(--walk,0) * .24));
  will-change:transform;
}
.approach-img::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 112%, rgba(8,5,3,.85), rgba(8,5,3,.2) 55%, transparent 80%),
    linear-gradient(rgba(8,5,3,.52), rgba(8,5,3,.12) 42%, rgba(8,5,3,.62));
}
.approach-copy{
  position:relative;z-index:2;text-align:center;display:grid;gap:1.1rem;justify-items:center;
  padding-inline:var(--pad);
  transform:translate3d(0,calc(var(--walk,0) * -4vh),0);
}
.approach-h{
  font-size:var(--f-big);font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;
  letter-spacing:-.04em;line-height:.94;color:var(--ink);
  text-shadow:0 8px 50px rgba(8,5,3,.7);
}
.approach-h em{font-style:italic;color:var(--crema-2)}
.doorhint{font:400 var(--f-micro)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:.6rem}
.inside{padding:12vh 0 4vh}
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5.5rem);align-items:start}
.split-fig{position:sticky;top:12vh;border-radius:3px;overflow:hidden}
.split-fig img{
  width:100%;aspect-ratio:4/4.6;object-fit:cover;
  filter:var(--grade) brightness(calc(.4 + var(--sun) * .5));
  transform:translate3d(0,var(--par,0px),0) scale(1.12);
}
.split-tx{display:grid;gap:1rem;justify-items:start}
.split-tx h2{font-size:var(--f-h);font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 1;color:var(--ink)}
.split-tx h2 em{font-style:italic;color:var(--crema)}
.infolist{display:grid;margin-top:.6rem;width:100%}
.infolist>div{
  display:grid;grid-template-columns:minmax(100px,.36fr) 1fr;gap:1rem;
  padding:.85rem 0;border-top:1px solid var(--line-2);
  font:400 .92rem/1.55 var(--sans);
}
.infolist b{font:400 .62rem/1.9 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--crema)}
.infolist span{color:var(--ink-2)}
.mapwrap{margin-top:clamp(2.5rem,6vh,4rem);border-radius:3px;overflow:hidden;border:1px solid var(--line-2)}
.mapwrap iframe{
  display:block;width:100%;height:clamp(280px,42vh,430px);border:0;
  filter:sepia(.5) saturate(.7) brightness(.8) contrast(1.05);opacity:.92;
}
.mapnote{margin-top:.8rem;font:400 .62rem/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ============ 2:04 . AFTER CLOSE (404) ============ */
.lost{min-height:100svh;display:grid;align-content:center;position:relative}
.lost .wrap{display:grid;gap:1.2rem;justify-items:start}
.lost-h{font-size:var(--f-big);font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;letter-spacing:-.04em;line-height:.92;color:var(--ink)}
.lost-h em{font-style:italic;color:var(--crema)}

/* ============ subpages, re-choreographed ============ */
@media (max-width:1000px){
  .chapter-grid{grid-template-columns:1fr;gap:1.6rem}
  .chapter.rev .chfig{order:0}
  .chfig img{aspect-ratio:4/3}
  .split{grid-template-columns:1fr}
  .split-fig{position:relative;top:0}
  .split-fig img{aspect-ratio:4/3.1}
  .course{grid-template-columns:1fr;gap:.9rem}
  .course-side{position:static}
  .dayline-grid{grid-template-columns:1fr;gap:1.6rem}
  .dayline-side{position:static}
}
@media (max-width:760px){
  .phero{min-height:62vh;padding-top:7.5rem}
  .approach{height:200vh}
  .bfig img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .approach{height:auto}
  .approach-pin{position:relative}
  .approach-img img{transform:none;filter:var(--grade) brightness(.55)}
  .approach-copy{transform:none}
  .stops::after{transform:scaleY(1)}
  .stop::before{background:var(--crema);border-color:var(--crema)}
}

/* ======================================================================
   THE FINISH : the type system, the turn, the flare, the bloom, and the
   craft floor. Everything below is deliberate override; it comes last so
   the cascade reads as a history of decisions.
   ====================================================================== */

/* ---- contrast floor : body text must be readable all morning ---- */
:root{--ink-3:rgba(242,229,203,.55)}
.chalk p{color:rgba(237,227,206,.66)}

/* ---- the type system : opsz tracks size, weight ramps down as size goes
   up, WONK is a granted gesture instead of a default ---- */
body{font-optical-sizing:auto}
:root{--soft-sharp:22;--soft-mid:52;--soft-warm:90;
  --f-item:clamp(1.2rem,1.9vw,1.55rem);--f-card:clamp(1.35rem,2.2vw,2rem)}
.huge,.pour-h{font-weight:340;font-variation-settings:'opsz' 144,'SOFT' var(--soft-sharp),'WONK' 1}
.big,.night-h,.phero-h,.promise-h,.approach-h,.lost-h{font-weight:365;
  font-variation-settings:'opsz' 144,'SOFT' var(--soft-sharp),'WONK' 0}
.board-h,.course h2,.chapter h2,.dayline h2,.split-tx h2{
  font-variation-settings:'opsz' 72,'SOFT' var(--soft-mid),'WONK' 0}
.pull blockquote{font-variation-settings:'opsz' 120,'SOFT' var(--soft-warm),'WONK' 1}
.pull blockquote b{font-weight:480}
.menu-nav .lbl em{font-weight:440}
.wm b,.chalk h3,.stop h3,.hourscard h3,.boot-word{font-variation-settings:'SOFT' 60,'WONK' 0}
.mline .nm{font-size:var(--f-item);font-variation-settings:'SOFT' 60,'WONK' 0;
  transition:font-variation-settings .5s var(--e-silk)}
.mline:hover .nm{font-variation-settings:'SOFT' 100,'WONK' 0}
.stop h3{font-size:var(--f-item)}
.chalk h3{font-size:var(--f-card)}
.hourscard h3{font-size:var(--f-card)}
.ln{padding-right:.12em}

/* ---- the menu-line ember : the leader warms toward the price ---- */
.mline .dotfill{transition:border-color .5s var(--e-silk)}
.mline:hover .dotfill{border-color:rgba(224,138,52,.55)}
.mline:hover .pr{color:var(--crema-2)}

/* ---- the turn : navigation is time passing ---- */
.turn{position:fixed;inset:0;z-index:850;display:grid;place-content:center;justify-items:center;
  gap:.55rem;background:rgb(8,6,4);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--e-soft),visibility .32s}
.turn::before{content:'';position:absolute;inset:0;
  background:radial-gradient(56vw 46vh at 50% 46%,rgba(224,138,52,.14),transparent 70%)}
.turn.on{opacity:1;visibility:visible;pointer-events:auto}
.turn-t{position:relative;font:400 clamp(3.2rem,9vw,6.6rem)/1 var(--mono);color:var(--crema);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.turn-l{position:relative;font:400 var(--f-micro)/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---- the clock flips its minute ---- */
.clock-t{display:inline-block}
.clock-t.tick{animation:ctick .32s var(--e-out)}
@keyframes ctick{from{transform:translateY(.16em);opacity:.35}to{transform:none;opacity:1}}

/* ---- the marquee never sleeps : CSS drifts, scroll shoves ---- */
.mq-inner{display:flex;align-items:center;gap:2rem;width:max-content;
  animation:mqdrift 38s linear infinite}
@keyframes mqdrift{to{transform:translateX(-50%)}}
.mq-track span{opacity:calc(.62 + var(--sun) * .38)}

/* ---- seven o'clock lands physically : the one-shot flare ---- */
.pour.lit .cup-ignite{animation:flare .95s var(--e-out)}
@keyframes flare{0%{opacity:.12;transform:scale(.85)}24%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}

/* ---- the door opens : bloom at the end of the walk up ---- */
.approach-bloom{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(64% 56% at 50% 46%,rgba(255,214,150,.8),rgba(224,138,52,.28) 46%,transparent 72%);
  opacity:calc(max(0, var(--walk,0) - .8) * 4.5)}
.doorhint{opacity:calc(1 - max(0, var(--walk,0) - .45) * 2.4)}

/* ---- after close you carry the only light : the 404 cursor-lamp ---- */
body[data-page="lost"] .cur-ring{width:130px;height:130px;margin:-65px;
  border-color:rgba(240,168,90,.26);
  background:radial-gradient(circle,rgba(224,138,52,.3),transparent 70%)}
body[data-page="lost"] .cur.hot .cur-ring{width:160px;height:160px;margin:-80px}
body[data-page="lost"] .atmos-css{opacity:calc(.05 + var(--beam-i) * .1)}
body[data-page="lost"] .atmos-css::after{opacity:calc(var(--beam-i) * .12)}

/* ---- warm shadows only, and buttons that take the light ---- */
.cup-rim{box-shadow:inset 0 0 0 1px rgba(255,214,150,.35),0 40px 90px -30px rgba(26,13,5,.85)}
.btn:hover,.btn:focus-visible{box-shadow:0 6px 34px -10px rgba(224,138,52,.45)}

/* ---- performance floor ---- */
.grain{inset:0;animation:grainpos 1.15s steps(5) infinite}
@keyframes grainpos{0%{background-position:0 0}20%{background-position:-70px 40px}
  40%{background-position:40px -60px}60%{background-position:-30px -40px}
  80%{background-position:60px 20px}100%{background-position:0 0}}
.atmos.has-gl .atmos-css::after{display:none}

/* ---- stable viewport units : the iOS url bar must not move seven o'clock ---- */
.pour{height:300svh}
.board{height:420svh}
.approach{height:240svh}

/* ---- the hand and the notch ---- */
.clock{bottom:max(1.4rem, env(safe-area-inset-bottom, 0px));
  left:max(var(--pad), env(safe-area-inset-left, 0px))}
.hum{bottom:max(1.4rem, env(safe-area-inset-bottom, 0px));
  right:max(var(--pad), env(safe-area-inset-right, 0px))}
.tag{font-size:.58rem}
.wm span{font-size:.56rem}
.hum .lbl{font-size:.62rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  .pour{height:320svh}
  .approach{height:210svh}
  .night-hint{bottom:5rem}
  .board-rail{display:block;margin-top:1.4rem}
  .hum{padding:.72rem 1rem}
  .clock,.hum{bottom:max(1rem, env(safe-area-inset-bottom, 0px))}
}
@media (pointer:coarse){
  .tlink{padding:.55rem 2px}
  .footnav a{padding:.5rem 0}
}
@media (max-height:540px){
  .menu-inner{align-content:start;padding-top:4.6rem;overflow-y:auto;max-height:100%}
}
@media (prefers-reduced-motion:reduce){
  .pour{height:100svh}
  .board{height:auto}
  .approach{height:auto}
  .mq-inner{animation:none}
  .turn{display:none}
  .clock-t.tick{animation:none}
  .grain{animation:none}
  .approach-bloom{opacity:.4}
  .doorhint{opacity:1}
}