/* ============================================================
   nocturne — series hero "Lights out"
   One moment, three beats: the lights die (flash + afterimage),
   your eyes adjust, you get a headlamp. Scroll and the lamp
   becomes the moon: you enter nocturne01 Luna.
   ============================================================ */

.nx:not(.luna-on) .exp{opacity:0!important}
.nx .exp{transition:opacity 1.4s cubic-bezier(.16,1,.3,1)!important}
.nx .hud{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1)}
.nx.luna-on .hud{opacity:1}

.hx{position:relative;height:250vh;border:0!important}
.hx-pin{position:sticky;top:0;z-index:2;height:100vh;height:100svh;overflow:hidden;
  --x:50vw;--y:46vh;--R:320px;--li:0;--bi:0;--co:1}
.hx-l,.hx-ghost{position:absolute;inset:0}
.hx-l{opacity:var(--co);will-change:opacity}

/* --- layout (shared by every layer so they register perfectly) --- */
.hx-in{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto auto;column-gap:24px;
  padding:clamp(92px,13vh,132px) var(--pad) clamp(22px,4vh,40px)}
.hx-wh{grid-column:1/-1;font-family:var(--mono);font-size:13px;letter-spacing:.04em;min-height:1.5em;color:var(--g)}
.hx-wh u{text-decoration:none}
.hx-wh i{display:inline-block;width:.6em;height:1.05em;vertical-align:-.18em;margin-left:2px;background:currentColor;animation:caret 1.1s steps(1) infinite}
.hx-wm{grid-column:1/-1;align-self:center;font-size:clamp(76px,22.5vw,400px);font-weight:400;letter-spacing:-.055em;line-height:.78;margin-left:-.06em;white-space:nowrap;padding-bottom:.06em}
.hx-tag{grid-column:1/8;margin-bottom:clamp(26px,4.6vh,54px)}
.hx-t1{font-size:clamp(28px,3.3vw,52px);font-weight:300;line-height:1;letter-spacing:-.04em;text-wrap:balance;max-width:14em}
.hx-t1 em{font-style:normal}
.hx-t2{margin-top:12px;font-size:15px}
.hx-arc{grid-column:1/-1;list-style:none;border-top:1px solid}
.hx-arc .row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,2.2fr) 18px;align-items:baseline;column-gap:16px;
  padding:13px 0 12px;border-bottom:1px solid;text-decoration:none;color:inherit}
.hx-arc .ct,.hx-arc .yr{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.hx-arc .nm{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.025em;line-height:1.1}
.hx-arc .st{font-size:14px;font-variant-numeric:tabular-nums}
.hx-arc .st b{font-weight:400}
.hx-arc .ar{width:14px;height:14px;justify-self:end;align-self:center}
.rd{display:inline-block;width:var(--w);height:.72em;background:currentColor;vertical-align:-.02em}
.hx-arc .ct .rd{height:.9em;vertical-align:-.12em}

/* --- the dark-adapted layer: what your eyes see without the lamp --- */
.hx-dim{opacity:0;color:rgba(244,241,232,.15)}
.hx.adapt .hx-dim{opacity:var(--co);transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.hx-dim .hx-wh{color:rgba(2,251,127,.32)}
.hx-dim .hx-wm{color:transparent;-webkit-text-stroke:1px rgba(244,241,232,.13)}
.hx-dim .hx-t1 em{color:transparent;-webkit-text-stroke:1px rgba(244,241,232,.2)}
.hx-dim .hx-arc,.hx-dim .hx-arc .row{border-color:rgba(244,241,232,.07)}
.hx-dim .hx-arc .on{color:rgba(244,241,232,.3)}
.hx-dim .hx-arc .on .n{color:rgba(2,251,127,.5)}
.hx-dim .rd{opacity:.55}
.hx-dim .row:focus-visible{outline:1px solid var(--g);outline-offset:6px}

/* --- the lit layer: only exists inside the beam --- */
.hx-lit{pointer-events:none;color:var(--ink);
  -webkit-mask-image:radial-gradient(circle var(--R) at var(--x) var(--y),rgba(0,0,0,var(--li)) 0%,rgba(0,0,0,calc(var(--li)*.92)) 34%,rgba(0,0,0,calc(var(--li)*.42)) 64%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(circle var(--R) at var(--x) var(--y),rgba(0,0,0,var(--li)) 0%,rgba(0,0,0,calc(var(--li)*.92)) 34%,rgba(0,0,0,calc(var(--li)*.42)) 64%,rgba(0,0,0,0) 100%)}
.hx-lit .hx-wh u{color:var(--g)}
.hx-lit .hx-t1 em{color:transparent;-webkit-text-stroke:1px rgba(244,241,232,.75)}
.hx-lit .hx-t2,.hx-lit .hx-arc .ct,.hx-lit .hx-arc .yr{color:var(--ink-2)}
.hx-lit .hx-arc,.hx-lit .hx-arc .row{border-color:rgba(244,241,232,.28)}
.hx-lit .hx-arc .on .st b{color:var(--g)}
.hx-lit .rd{color:rgba(244,241,232,.88)}
/* retroreflective numerals: they flare when the beam crosses them, like the strips on running gear */
.hx-lit [data-refl]{--f:0;color:color-mix(in srgb,#eafff3 calc(var(--f)*100%),var(--ink-3));
  text-shadow:0 0 calc(var(--f)*4px) rgba(255,255,255,calc(var(--f)*.9)),0 0 calc(var(--f)*12px) rgba(2,251,127,var(--f)),0 0 calc(var(--f)*34px) rgba(2,251,127,calc(var(--f)*.8)),0 0 calc(var(--f)*70px) rgba(2,251,127,calc(var(--f)*.45))}

/* --- light on the wall --- */
.hx-beam{position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(circle calc(var(--R)*.82) at var(--x) var(--y),rgba(255,244,222,calc(var(--bi)*.075)) 0%,rgba(255,244,222,calc(var(--bi)*.05)) 55%,rgba(255,244,222,0) 100%),
   radial-gradient(ellipse calc(var(--R)*2.6) calc(var(--R)*2) at var(--x) var(--y),rgba(255,240,214,calc(var(--bi)*.035)) 0%,rgba(255,240,214,0) 70%)}
.hx-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

.hx-hint{position:absolute;right:var(--pad);top:clamp(92px,13vh,132px);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(244,241,232,.38);
  opacity:0;transition:opacity .8s}
.hx.adapt .hx-hint{opacity:1;transition-delay:1.6s}
.hx.moved .hx-hint{opacity:0;transition-delay:0s}

.hx-cap{position:absolute;left:0;right:0;top:var(--cy,70%);text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--g);opacity:0}
.hx-cap i{display:inline-block;width:.6em;height:1.05em;vertical-align:-.18em;margin-left:2px;background:var(--g);animation:caret 1.1s steps(1) infinite}

/* --- beat 1: the lights die --- */
.hx-flash{position:fixed;inset:0;z-index:60;background:#F4F1E8;opacity:0;pointer-events:none;visibility:hidden}
.hx-flash .hx-in > :not(.hx-wm),.hx-ghost .hx-in > :not(.hx-wm){visibility:hidden}
.hx-flash .hx-wm{color:#030303}
.hx.intro .hx-flash{visibility:visible;opacity:1}
.hx.intro.go .hx-flash{animation:hxCut .3s linear forwards}
@keyframes hxCut{0%,46%{opacity:1}47%{opacity:0}60%{opacity:.5}62%{opacity:0}72%{opacity:.16}74%,100%{opacity:0}}

/* --- beat 2: afterimage burned on the retina --- */
.hx-ghost{opacity:0;pointer-events:none;mix-blend-mode:screen}
.hx-ghost .hx-wm{color:var(--g)}
.hx.intro.go .hx-ghost{animation:hxGhost 1.5s cubic-bezier(.2,.7,.2,1) .14s forwards}
@keyframes hxGhost{0%{opacity:0;filter:blur(1px)}6%{opacity:.62;filter:blur(2px)}100%{opacity:0;filter:blur(18px);transform:translate3d(0,-.8%,0) scale(1.02)}}

/* header waits in the dark too */
.nx .top{transition:opacity .9s cubic-bezier(.16,1,.3,1) .35s}
.nx.hx-boot .top{opacity:0}

@media (max-width:900px){
  .hx-tag{grid-column:1/-1}
  .hx-arc .row{grid-template-columns:minmax(0,1fr) 14px;column-gap:12px;row-gap:3px;padding:12px 0 11px}
  .hx-arc .ct,.hx-arc .yr{display:none}
  .hx-arc .st{grid-column:1;grid-row:2;font-size:12.5px}
  .hx-arc .ar{grid-column:2;grid-row:1}
  .nx .hud{display:none}
  .hx-hint{left:var(--pad);right:auto;top:auto;bottom:calc(100% - clamp(92px,13vh,132px) - 44px)}
}
@media (max-width:560px){
  .hx-in{padding-top:118px}
  .hx-hint{display:none}
  .hx-t1{font-size:30px}
  .hx-t2{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hx{height:auto}.hx-pin{position:relative}
  .hx-dim{opacity:1}
  .hx-lit{-webkit-mask-image:none;mask-image:none}
  .hx-flash,.hx-ghost,.hx-cv,.hx-hint,.hx-beam{display:none}
}

/* phone: less to read, a bigger night. Wordmark edge to edge, one edition, no whisper */
@media (max-width:560px){
  .hx-wh{display:none}
  .hx-in{grid-template-rows:1fr auto auto}
  .hx-wm{width:100vw;margin-left:calc(-1 * var(--pad));text-align:center;font-size:28.6vw;align-self:center}
  .hx-t1{font-size:clamp(36px,10.4vw,44px);line-height:.98}
  .hx-t2{font-size:15px;margin-top:14px}
  .hx-arc li:not(.on){display:none}
  .hx-tag{margin-bottom:28px}
}