/* ============================================================
   ATALAYA — an observatory and station in the Atacama.

   The site is a journey upward: the road in, the station, the
   instrument, the log, the sky. Day at the bottom, night at the top.

   So the palette is not a set of colours, it is a clock. One custom
   property, --night, runs 0 to 1 across the whole document and every
   colour is derived from it. Scrolling does not reveal a dark section;
   it takes you into the night, and the sun sets exactly once.
   ============================================================ */

@property --night{ syntax:"<number>"; inherits:true; initial-value:0 }

/* --night runs 0 to 1 down the whole document and the palette is built from
   it. Day and night cannot simply be cross-faded, though: halfway through,
   cream paper and dark ink meet in the same grey and the text disappears.
   So the day has two halves with one cut between them — the sun sets, once,
   on the picture of the sunset — and inside each half the colour keeps
   moving. Cream warms toward late gold; dusk indigo deepens to black. */
:root{
  --night: 0;
  --k: clamp(0, calc(var(--night) / .5), 1);              /* through the day half */

  --paper: color-mix(in oklab, #F1EBDF calc((1 - var(--k)) * 100%), #E7DCC6);
  --ink:   color-mix(in oklab, #241F17 calc((1 - var(--k)) * 100%), #2C2115);
  --sun:   color-mix(in oklab, #9A5314 calc((1 - var(--k)) * 100%), #A54B0C);

  --dim:   color-mix(in oklab, var(--ink) 64%, var(--paper));
  --faint: color-mix(in oklab, var(--ink) 58%, var(--paper));
  --hair:  color-mix(in oklab, var(--ink) 20%, var(--paper));

  --trim: clamp(1.1rem, 4vw, 4.5rem);
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
  --slow: cubic-bezier(.22,.61,.24,1);
}

:root[data-dark]{
  --k: clamp(0, calc((var(--night) - .5) / .5), 1);       /* through the night half */
  --paper: color-mix(in oklab, #161324 calc((1 - var(--k)) * 100%), #06070E);
  --ink:   color-mix(in oklab, #E1DEEC calc((1 - var(--k)) * 100%), #E9EBF2);
  --sun:   color-mix(in oklab, #8F98E5 calc((1 - var(--k)) * 100%), #7C8BD8);
}

/* the cut itself. the transition is only switched on for the moment it
   happens, so nothing on the page carries a transition it never uses. */
html.flip, html.flip *{
  transition:color .8s ease, background-color .8s ease, border-color .8s ease,
             fill .8s ease, stroke .8s ease !important;
}

*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--paper); -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3,p,figure,blockquote,dl,dd,dt,table{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--sun); color:var(--paper) }
:focus-visible{ outline:1.5px solid var(--sun); outline-offset:4px }

/* grain over the whole document. static, cheap, and the single thing
   that stops large flat gradients from banding. */
body::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-dark] body::after{ opacity:.5; mix-blend-mode:soft-light }

/* ---------- type ---------- */
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.012em; line-height:.98 }
.d1{ font-size:clamp(3.4rem,13vw,11rem) }
.d2{ font-size:clamp(2.3rem,7vw,6rem) }
.d3{ font-size:clamp(1.6rem,3.6vw,3rem) }
.lede{ font-size:clamp(1.06rem,1.7vw,1.4rem); line-height:1.46; max-width:44ch; color:var(--dim) }
.body{ max-width:60ch; color:var(--dim); font-size:1.02rem }
.body p + p{ margin-top:1.1em }
.body b{ color:var(--ink); font-weight:500 }
.body i{ font-family:var(--serif); font-style:italic; font-size:1.14em }

/* readouts. the instrument voice. */
.dat{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
}
.dat b{ color:var(--ink); font-weight:400 }
.dat--lg{ font-size:.74rem }
.rule{ height:1px; background:var(--hair); border:0; margin:0 }
.num{ font-variant-numeric:tabular-nums }

/* ---------- chrome ---------- */
.nav{
  position:fixed; z-index:60; inset:0 0 auto 0;
  display:flex; gap:1.6rem; align-items:baseline;
  padding:1.05rem var(--trim); mix-blend-mode:difference; color:#fff;
  transition:transform .55s var(--ease), opacity .35s;
}
.nav[data-hide]{ transform:translateY(-118%); opacity:0 }
.nav__mark{ font-family:var(--serif); font-size:1.02rem; letter-spacing:.34em }
.nav__links{ display:flex; gap:1.35rem; margin-left:auto }
.nav a{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; opacity:.62; transition:opacity .3s }
.nav a:hover, .nav a[aria-current]{ opacity:1 }
@media (max-width:720px){ .nav{ gap:.8rem } .nav__links{ gap:.85rem } .nav a{ font-size:.54rem; letter-spacing:.1em } .nav__mark{ font-size:.88rem; letter-spacing:.24em } }

/* ---------- the beautiful link ---------- */
.lnk{ position:relative; display:inline-block; padding-bottom:2px }
.lnk::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.lnk:hover::after,.lnk:focus-visible::after{ transform:scaleX(1); transform-origin:0 50% }
.lnk--on::after{ transform:scaleX(1) }
.arw{ display:inline-block; transition:transform .5s var(--ease) }
.lnk:hover .arw{ transform:translateX(.35em) }

/* ---------- plates ---------- */
.plate{ position:relative; overflow:hidden; background:color-mix(in oklab,#000 12%,var(--paper)) }
.plate img{ width:100%; height:100%; object-fit:cover }
.plate--full{ height:100svh }
.plate--wide{ aspect-ratio:2.39/1 }
.plate--film{ aspect-ratio:16/9 }
.plate--sq{ aspect-ratio:1/1 }
.plate--tall{ aspect-ratio:4/5 }
.plate::after{           /* the vignette. grit, not decoration. */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.30) 100%);
}
.plate--flat::after{ display:none }
.cap{
  font-family:var(--mono); font-size:.6rem; line-height:1.6; letter-spacing:.08em;
  color:var(--dim); margin-top:.65rem; max-width:38ch;
}
.cap b{ color:var(--ink); font-weight:400 }

/* ---------- layout ---------- */
.sect{ padding-block:clamp(4.5rem,13vh,12rem) }
.sect--tight{ padding-block:clamp(2.6rem,7vh,6rem) }
.wrap{ padding-inline:var(--trim) }
.grid{ display:grid; gap:clamp(1.5rem,3.4vw,3.4rem) }
.g2{ grid-template-columns:repeat(2,1fr) }
.g12{ grid-template-columns:repeat(12,1fr) }
.c1{grid-column:1/7} .c2{grid-column:8/13} .c3{grid-column:1/5} .c4{grid-column:6/13}
.c5{grid-column:2/8} .c6{grid-column:1/13} .c7{grid-column:4/13} .c8{grid-column:1/4}
@media (max-width:900px){
  .g2,.g12{ grid-template-columns:1fr }
  .g12 > *{ grid-column:1 / -1 !important }
}

/* section markers — the roman numerals down the left */
.mark{ display:flex; align-items:baseline; gap:1.1rem; margin-bottom:clamp(1.4rem,4vh,3rem) }
.mark span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--sun) }
.mark hr{ flex:1; height:1px; background:var(--hair); border:0 }

/* ---------- the data strip ---------- */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.strip > div{ padding:1.5rem 1.2rem 1.6rem; border-left:1px solid var(--hair) }
.strip > div:first-child{ border-left:0; padding-left:0 }
.strip dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint) }
.strip dd{ font-family:var(--serif); font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1; margin-top:.7rem; font-variant-numeric:tabular-nums }
.strip dd small{ font-family:var(--sans); font-size:.3em; letter-spacing:.06em; color:var(--dim); margin-left:.35em }
@media (max-width:760px){
  .strip{ grid-template-columns:repeat(2,1fr) }
  .strip > div:nth-child(3){ border-left:0; padding-left:0 }
  .strip > div:nth-child(-n+2){ border-bottom:1px solid var(--hair) }
}

/* ---------- spec sheet ---------- */
.spec{ font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; border-top:1px solid var(--hair) }
.spec div{ display:flex; gap:1.2rem; padding:.62rem 0; border-bottom:1px solid var(--hair) }
.spec dt{ flex:0 0 42%; color:var(--faint); text-transform:uppercase; letter-spacing:.13em; font-size:.62rem; padding-top:.1em }
.spec dd{ flex:1; color:var(--ink); font-variant-numeric:tabular-nums }
.spec dd em{ font-style:normal; color:var(--faint) }

/* ---------- the night log ---------- */
.entry{ padding-block:clamp(1.6rem,4vh,2.8rem); border-top:1px solid var(--hair) }
.entry__h{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:baseline; margin-bottom:.85rem }
.entry__d{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--sun); font-variant-numeric:tabular-nums }
.entry__w{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }
.entry__t{ font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.7rem); line-height:1.28; max-width:52ch; color:var(--ink) }
.entry__t + .entry__t{ margin-top:.7em }
.entry__t .cut{ color:var(--faint) }
.entry__n{ font-family:var(--mono); font-size:.66rem; line-height:1.75; color:var(--faint); max-width:56ch; margin-top:1.1rem; padding-left:1.1rem; border-left:1px solid var(--hair) }
.entry__n b{ color:var(--dim); font-weight:400 }

/* ---------- the index of pages ---------- */
.idx{ border-top:1px solid var(--hair) }
.idx__row{ display:block; position:relative; border-bottom:1px solid var(--hair) }
.idx__in{
  display:flex; align-items:baseline; gap:1.2rem; padding:clamp(1.1rem,3.2vh,2.1rem) 0;
  transition:transform .6s var(--ease), color .4s;
}
.idx__row:hover .idx__in{ transform:translateX(clamp(.5rem,2vw,1.6rem)) }
.idx__no{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; color:var(--faint); flex:0 0 3.2em }
.idx__t{ font-family:var(--serif); font-size:clamp(1.9rem,5.4vw,4rem); line-height:1; letter-spacing:-.015em }
.idx__s{ font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-left:auto; text-align:right }
@media (max-width:640px){ .idx__s{ display:none } }
.idx__peek{
  position:fixed; z-index:70; width:min(23vw,300px); aspect-ratio:16/9; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.94); transform-origin:50% 50%;
  transition:opacity .35s var(--ease), transform .55s var(--ease); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.idx__peek img{ width:100%; height:100%; object-fit:cover }
.idx__peek[data-on]{ opacity:1; transform:translate(-50%,-50%) scale(1) }
@media (hover:none),(max-width:900px){ .idx__peek{ display:none } }

/* ---------- footer ---------- */
.foot{ padding:clamp(2.4rem,6vh,4.5rem) 0 clamp(2rem,5vh,3.5rem); border-top:1px solid var(--hair) }
.foot__g{ display:flex; flex-wrap:wrap; gap:1.6rem 3rem; align-items:flex-start }
.foot__g > *{ min-width:0 }

/* ---------- reveals ---------- */
html.js [data-rv]{ opacity:0; transform:translateY(16px); transition:opacity 1.15s var(--slow), transform 1.15s var(--slow) }
html.js [data-rv][data-in]{ opacity:1; transform:none }
[data-rv-d="1"]{ transition-delay:.09s } [data-rv-d="2"]{ transition-delay:.18s }
[data-rv-d="3"]{ transition-delay:.27s } [data-rv-d="4"]{ transition-delay:.36s }

/* Plates arrive by uncovering rather than fading — a curtain that wipes up.
   It has to be a pseudo-element and not clip-path on the plate itself:
   clipping an element to zero height gives it an empty intersection rect,
   and IntersectionObserver then never reports it as visible at all. */
html.js [data-rv="plate"]{ opacity:1; transform:none; position:relative }
html.js [data-rv="plate"]::before{
  content:""; position:absolute; inset:-1px; z-index:6; background:var(--paper);
  transform-origin:50% 100%; transition:transform 1.35s var(--slow);
}
html.js [data-rv="plate"] img{ transform:scale(1.09); transition:transform 2.4s var(--slow) }
html.js [data-rv="plate"][data-in]::before{ transform:scaleY(0) }
html.js [data-rv="plate"][data-in] img{ transform:none }

@media (prefers-reduced-motion:reduce){
  html.js [data-rv]{ opacity:1 !important; transform:none !important; transition:none }
  html.js [data-rv="plate"]::before{ display:none }
  html.js [data-rv] img{ transform:none !important; transition:none }
}

/* ============================================================
   THE ARRIVAL
   The page opens blown out, the way your eyes open on the
   altiplano at noon. The exposure settles, the road resolves
   out of the white, then the name lands and the horizon draws.
   All of it is opacity, transform and one filter — nothing here
   asks anything of the GPU after the first three seconds.
   ============================================================ */
.hero{ position:relative; height:260svh }
.hero__stick{ position:sticky; top:0; height:100svh; min-height:34rem; overflow:hidden; isolation:isolate }

/* the picture. a still of the first frame paints immediately so there is
   something there before a single byte of the sequence has arrived; the
   canvas sits on top and fades in the moment it has drawn frame one, which
   is the same picture, so the handover is invisible. */
.hero__frame{ position:absolute; inset:0; z-index:0 }
.hero__seed,.hero .scrub__cv{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.hero .scrub__cv{ opacity:0; transition:opacity .4s linear }
.hero[data-painted] .scrub__cv{ opacity:1 }

html.js .hero__frame{ animation:expose 3.1s var(--slow) forwards }
@keyframes expose{
  0%   { transform:scale(1.15); filter:brightness(2.9) contrast(.22) saturate(.15) }
  55%  { filter:brightness(1.28) contrast(.82) saturate(.8) }
  100% { transform:none; filter:none }
}
.hero__frame{ transform:scale(1.15); filter:brightness(2.9) contrast(.22) saturate(.15) }
html:not(.js) .hero__frame{ transform:none; filter:none }

/* the white the eye is adjusting from */
.hero__flash{ position:absolute; inset:0; z-index:1; background:#FBF7EF; pointer-events:none }
html.js .hero__flash{ animation:flash 2.5s var(--slow) forwards }
@keyframes flash{ 0%{opacity:1} 100%{opacity:0} }

/* a slow warm fall-off so the type has something to sit on */
.hero__shade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(18,11,4,.80) 0%, rgba(18,11,4,.42) 20%, rgba(18,11,4,.08) 46%, transparent 70%);
}

.hero__in{
  position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 var(--trim) clamp(1.6rem,5vh,3.4rem); color:#FBF7EF;
  /* the title holds for the first stretch of the drive, then clears out
     so that the rest of the road is just the road */
  opacity:clamp(0, calc((.62 - var(--p, 0)) / .20), 1);
  transform:translateY(calc(var(--p, 0) * -5vh));
}
.hero__ttl{
  font-family:var(--serif); font-weight:400; line-height:.9;
  font-size:clamp(3.6rem,17vw,15rem); letter-spacing:.02em; margin:0 0 -.02em -.02em;
  display:flex; flex-wrap:wrap;
}
.hero__ttl .ltr{ display:inline-block; overflow:hidden; padding-bottom:.06em }
.hero__ttl .ltr i{ display:inline-block; font-style:normal }
html.js .hero__ttl .ltr i{ transform:translateY(105%); animation:rise 1.25s var(--ease) forwards; animation-delay:calc(1.35s + var(--i) * .062s) }
@keyframes rise{ to{ transform:none } }

/* the horizon. one hairline, drawn. */
.hero__hz{ height:1px; background:rgba(251,247,239,.42); margin:.9rem 0 1.05rem }
html.js .hero__hz{ transform:scaleX(0); transform-origin:0 50%; animation:draw 1.9s 2.05s var(--slow) forwards }
@keyframes draw{ to{ transform:none } }

.hero__ft{ display:flex; flex-wrap:wrap; gap:.9rem 2.4rem; align-items:baseline }
.hero__ft .dat{ color:rgba(251,247,239,.66) }
.hero__ft .dat b{ color:#FBF7EF }
.hero__ft > *{ min-width:0 }
html.js .hero__ft > *{ opacity:0; animation:up 1.3s var(--slow) forwards; animation-delay:calc(2.5s + var(--i,0) * .13s) }
@keyframes up{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.hero .scrub__bar{ z-index:4 }
@media (max-width:720px){ .hero{ height:220svh } }

/* page headers on the interior pages — same grammar, shorter */
.head{ position:relative; height:min(74svh,44rem); min-height:22rem; overflow:hidden; isolation:isolate }
.head img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
html.js .head img{ transform:scale(1.08); animation:settle 2.6s .1s var(--slow) forwards }
@keyframes settle{ from{ transform:scale(1.08); filter:brightness(1.9) contrast(.5) } to{ transform:scale(1); filter:none } }
.head__shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(16,11,5,.66), rgba(16,11,5,.05) 55%, rgba(16,11,5,.28)) }
.head__in{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--trim) clamp(1.6rem,5vh,3rem); color:#FBF7EF }
.head__in .dat{ color:rgba(251,247,239,.62) } .head__in .dat b{ color:#FBF7EF }
.head__t{ font-family:var(--serif); font-size:clamp(2.6rem,10vw,8rem); line-height:.94; letter-spacing:-.01em; margin:.5rem 0 0 }
html.js .head__t,html.js .head__in .dat{ opacity:0; animation:up 1.3s var(--slow) forwards }
html.js .head__in .dat{ animation-delay:.55s } html.js .head__t{ animation-delay:.72s }

@media (prefers-reduced-motion:reduce){
  html.js .hero__bg img,html.js .hero__flash,html.js .hero__ttl .ltr i,html.js .hero__hz,
  html.js .hero__ft > *,html.js .head img,html.js .head__t,html.js .head__in .dat{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* the pages are one place, so moving between them should not blink */
@view-transition{ navigation:auto }
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important } }

/* ---------- the station day ----------
   The row containing the hour it currently is at the station is marked
   live. It is the smallest possible way to say: this place is running
   right now, and you are not there. */
.sched{ border-top:1px solid var(--hair) }
.sched__r{
  display:flex; gap:clamp(.8rem,2.4vw,2.4rem); align-items:baseline;
  padding:1rem 0 1.05rem; border-bottom:1px solid var(--hair);
  position:relative; transition:color .5s, opacity .5s;
}
.sched__t{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--dim); flex:0 0 4.4em; font-variant-numeric:tabular-nums }
.sched__l{ flex:1; max-width:58ch; color:var(--dim); font-size:.96rem }
.sched__n{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-align:right; flex:0 0 11em }
@media (max-width:760px){
  .sched__r{ flex-wrap:wrap; gap:.35rem .9rem }
  .sched__n{ text-align:left; flex:0 0 auto; order:3; width:100% }
}
.sched__r[data-now]{ color:var(--ink) }
.sched__r[data-now] .sched__t{ color:var(--sun) }
.sched__r[data-now] .sched__l{ color:var(--ink) }
.sched__r[data-now]::before{
  content:""; position:absolute; left:calc(-1 * clamp(.5rem,1.6vw,1.4rem)); top:1.15rem;
  width:4px; height:4px; border-radius:50%; background:var(--sun);
  animation:beat 3.4s ease-in-out infinite;
}
.sched__r[data-now]::after{
  content:"now"; position:absolute; right:0; top:-.62rem;
  font-family:var(--mono); font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sun);
}
@keyframes beat{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@media (max-width:760px){ .sched__r[data-now]::before{ left:-.7rem } .sched__r[data-now]::after{ top:auto; bottom:.9rem } }
@media (prefers-reduced-motion:reduce){ .sched__r[data-now]::before{ animation:none } }

/* ---------- the console ---------- */
.con{ border:1px solid var(--hair); border-radius:2px; overflow:hidden }
.con__g{ display:grid; grid-template-columns:repeat(4,1fr) }
.con__c{ padding:1.15rem 1.15rem 1.35rem; border-left:1px solid var(--hair); border-bottom:1px solid var(--hair) }
.con__c:nth-child(4n+1){ border-left:0 }
.con__c dt{ font-family:var(--mono); font-size:.55rem; letter-spacing:.19em; text-transform:uppercase; color:var(--faint) }
.con__c dd{ font-family:var(--mono); font-size:clamp(1rem,2.1vw,1.5rem); letter-spacing:.01em; margin-top:.65rem;
            font-variant-numeric:tabular-nums; text-transform:uppercase; color:var(--ink) }
@media (max-width:820px){ .con__g{ grid-template-columns:repeat(2,1fr) } .con__c:nth-child(2n+1){ border-left:0 } }

/* the sun's altitude, drawn on a cross-section of its own sky.
   the diagram does not change with --night; it is what --night is made of. */
.tw{ --bh:clamp(2.2rem,5vw,3.4rem); position:relative; padding:1.15rem 1.15rem 2.6rem }
.tw__band{ height:var(--bh); border-radius:1px; position:relative; overflow:hidden;
  background:linear-gradient(90deg,#04060C 0%,#080D1E 10%,#111a3e 17%,#242a56 22%,#4c3a58 26%,#8d5340 28.6%,#C1743A 31%,#D6A265 35%,#CFC5AE 48%,#BFC6CE 78%,#C9D2DA 100%) }
.tw__band::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) }
.tw__tk{ position:absolute; top:1.15rem; height:var(--bh); width:1px; background:rgba(255,255,255,.34); transform:translateX(-.5px) }
.tw__tk b{ position:absolute; top:calc(100% + .35rem); left:0; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-weight:400; font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }
@media (max-width:760px){
  .tw__tk b span{ display:none }
  .tw__tk--m b{ display:none }
}
.tw__mk{ position:absolute; top:.5rem; height:calc(var(--bh) + 1.3rem); width:1px; background:var(--ink);
  transition:left 1s linear; will-change:left }
.tw__mk::before{ content:""; position:absolute; top:-2px; left:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 3px var(--paper) }
.tw__mk b{ position:absolute; top:-1.5rem; left:0; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-weight:400; font-size:.6rem; letter-spacing:.1em; color:var(--ink);
  background:var(--paper); padding:0 .35em; font-variant-numeric:tabular-nums }

/* ============================================================
   THE SEQUENCE
   Eight seconds of dusk, cut into frames, and the scroll is the
   transport. The section is four screens tall; the picture is
   pinned for all four and advances one frame at a time, so the
   sun goes down at exactly the speed you decide.
   ============================================================ */
.scrub{ position:relative; background:#05060B }
.scrub__stick{
  position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; background:#04050A;
}
/* the picture keeps its anamorphic frame instead of being cropped to the
   window — the whole site is built out of 2.39:1 plates and this is the
   biggest one. what is left above and below is the letterbox, and the
   captions live in it. */
.scrub__frame{ position:relative; width:100%; aspect-ratio:2.39/1; max-height:100svh; overflow:hidden }
.scrub__cv{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0 }
.scrub__vig{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 44%, rgba(0,0,0,.42) 100%),
    linear-gradient(to top, rgba(4,5,10,.72) 0%, rgba(4,5,10,.18) 26%, transparent 52%);
}
.scrub__ui{
  position:absolute; z-index:2; inset:auto 0 0 0; padding:0 var(--trim) clamp(1.5rem,5vh,3.2rem);
  display:flex; align-items:flex-end; gap:1.5rem; color:#F4F0E6; pointer-events:none;
}
.scrub__caps{ position:relative; flex:1; min-height:5.2em }
.scrub__cap{
  position:absolute; inset:auto auto 0 0; max-width:34ch;
  font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,2rem); line-height:1.18; letter-spacing:-.01em;
  opacity:0; transform:translateY(12px); transition:opacity .8s var(--slow), transform .8s var(--slow);
}
.scrub__cap[data-on]{ opacity:1; transform:none }
.scrub__cap b{ display:block; font-family:var(--mono); font-weight:400; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; opacity:.66; margin-bottom:.7em }
.scrub__t{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,240,230,.6); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap }
.scrub__t b{ color:#F4F0E6; font-weight:400 }
.scrub__bar{ position:absolute; z-index:2; inset:auto 0 0 0; height:1px; background:rgba(244,240,230,.16) }
.scrub__bar span{ display:block; height:100%; width:0; background:#F4F0E6; transform-origin:0 50% }
.scrub__hint{
  position:absolute; z-index:3; left:50%; top:clamp(5rem,13vh,8rem); transform:translateX(-50%);
  font-family:var(--mono); font-size:.55rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,240,230,.55); transition:opacity .6s; text-align:center;
}
.scrub__hint[data-off]{ opacity:0 }
@media (max-width:720px){
  /* a 2.39:1 letterbox on a phone is a 157 px slot, which is no picture at
     all — so on narrow screens the frame is cropped upright and the caption
     sits under it in normal flow rather than over the bottom of the shot. */
  .scrub__stick{ display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:1.1rem }
  .scrub__frame{ aspect-ratio:4/5; width:100%; flex:0 0 auto }
  .scrub__ui{ position:static; width:100%; flex-direction:column; align-items:flex-start; gap:.7rem; padding-bottom:0 }
  .scrub__caps{ width:100%; min-height:5.6em }
  .scrub__cap{ max-width:none }
  .scrub__t{ text-align:left }
}
/* while the frames are still arriving the picture is honest about it */
.scrub[data-loading] .scrub__t{ color:rgba(244,240,230,.5) }
.scrub{ height:400svh }
@media (max-width:720px){ .scrub{ height:300svh } }