/* Night Coast: loads after css/site.css. Black like the rest of the site; the only colour is the lights' own. */

:root {
  --ink: #f2f4f8;
  --ink-soft: #a9b0c0;
  --ink-mute: #6b7282;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --bg-elev: #0b0c10;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --nav-h: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --red: #ff4d3f;
  --green: #38ff8e;
  --white: #fff3d6;
}
body.lights { overflow-x: hidden; }
body.lights .cursor, body.lights .cursor-ring { display: none !important; }
:where(body.lights) canvas { display: block; }
body.lights [hidden] { display: none !important; }

/* ---------- head ---------- */
.u-head { padding: calc(var(--nav-h) + 30px) var(--gutter) 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
.u-title h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); font-weight: 760; line-height: .9; letter-spacing: -.05em; margin: 0 0 .7rem; }
.u-stats { font-size: 1rem; color: var(--ink-soft); max-width: 36em; }
.u-switch { display: grid; gap: .6rem; justify-items: end; max-width: 720px; }
.u-tabs { display: inline-flex; gap: 26px; }
.u-tabs button { position: relative; padding: 6px 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink-mute); white-space: nowrap; transition: color .2s var(--ease); }
.u-tabs button:hover, .u-tabs button[aria-selected="true"] { color: var(--ink); }
.u-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); }
.u-desc { font-size: .92rem; line-height: 1.45; color: var(--ink-soft); text-align: right; min-height: 1.5em; max-width: 34em; }
.u-stage { position: relative; }
.u-view { display: none; position: relative; }
.u-view.on { display: block; animation: uIn .6s var(--ease-out) both; }
@keyframes uIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- shared controls ---------- */
.chip-btn, .ctl {
  font-size: .86rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .42rem .75rem; color: var(--ink-soft); background: transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem;
}
.chip-btn:hover, .ctl:hover { color: var(--ink); border-color: rgba(255, 255, 255, .34); }
.chip-btn[aria-pressed="true"] { color: #000; background: var(--ink); border-color: var(--ink); }
.chip-btn i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ctl svg { width: 15px; height: 15px; }
.ctl[aria-pressed="true"] { color: var(--ink); border-color: rgba(255, 255, 255, .34); }
.lbl { font-size: .86rem; color: var(--ink-mute); }

/* ---------- The Night ---------- */
.n-stage { position: relative; height: max(620px, calc(100svh - var(--nav-h) - 4px)); overflow: hidden; background: #000; }
.n-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.n-canvas:active { cursor: grabbing; }
.n-stage::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 40%); z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .82), rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0)); }
.n-read { position: absolute; left: var(--gutter); top: 12px; z-index: 2; pointer-events: none; width: 240px; text-shadow: 0 0 10px #000, 0 0 3px #000; }
.n-where { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 740; line-height: 1; letter-spacing: -.035em; }
.n-count { margin-top: .5rem; font-size: .92rem; line-height: 1.5; color: var(--ink-mute); }
.n-count b { color: var(--ink); font-weight: 600; }
.n-legend { margin-top: .9rem; font-size: .84rem; line-height: 1.55; color: var(--ink-mute); }
.n-legend b { color: var(--ink-soft); font-weight: 600; }
.n-card { position: absolute; left: var(--gutter); bottom: 150px; z-index: 3; display: flex; gap: .9rem; align-items: flex-start; max-width: 340px; padding: .8rem .95rem; background: rgba(8, 9, 12, .86); border: 1px solid var(--line-strong); border-radius: 12px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.n-card.show { opacity: 1; transform: none; }
.n-card b { display: block; font-size: 1rem; font-weight: 650; color: var(--ink); }
.n-card small { display: block; margin-top: .15rem; font-size: .84rem; line-height: 1.4; color: var(--ink-soft); }
.n-card em { display: block; margin-top: .2rem; font-style: normal; font-size: .8rem; color: var(--ink-mute); }
.n-blink { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid; }
.rh-row { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.rh-row code { font-family: inherit; font-size: .84rem; font-weight: 650; color: var(--ink); white-space: nowrap; }
.rh { display: block; flex: none; }
.n-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px var(--gutter) 14px; background: linear-gradient(to top, rgba(0, 0, 0, .92) 60%, rgba(0, 0, 0, 0)); }
.n-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.n-ctls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .55rem; }
.n-sep { flex: 1; min-width: 10px; }
.n-listen[aria-pressed="true"] { color: #000; background: var(--white); border-color: var(--white); }

/* ---------- The Grammar ---------- */
.g-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 56px; padding: 22px var(--gutter) 0; align-items: start; }
.g-side { position: sticky; top: calc(var(--nav-h) + 18px); }
.g-map canvas { width: 100%; }
.g-cap { margin-top: .9rem; min-height: 6.2em; }
.g-cap b { display: block; font-size: 1.15rem; font-weight: 680; letter-spacing: -.01em; }
.g-cap small { display: block; margin-top: .2rem; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.g-cap em { display: block; margin-top: .4rem; font-style: normal; font-size: .8rem; color: var(--ink-mute); }
.g-cap .rh-row { margin-top: .55rem; }
.g-sec { padding: 0 0 56px; }
.g-big { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.28; letter-spacing: -.02em; font-weight: 500; color: var(--ink-soft); max-width: 30em; margin: 0 0 2.6rem; }
.g-big b { color: var(--ink); font-weight: 760; }
.g-h { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 730; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .55rem; }
.g-p { font-size: .98rem; line-height: 1.55; color: var(--ink-soft); max-width: 40em; margin: 0 0 1.15rem; }
.g-p b { color: var(--ink); font-weight: 650; }
.g-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.g-fams { display: flex; flex-wrap: wrap; gap: .35rem; }
.g-note { font-size: .88rem; line-height: 1.45; color: var(--ink-mute); min-height: 1.45em; margin: 0 0 .5rem; }
.g-score canvas { width: 100%; }
.g-listen[aria-pressed="true"] { color: #000; background: var(--white); border-color: var(--white); }
.g-clock { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: 30px; align-items: center; }
.g-clock canvas { width: 100%; aspect-ratio: 1; }
.g-clock-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-card, .g-mo { position: relative; display: grid; gap: .3rem; justify-items: start; text-align: left; padding: .8rem .9rem .85rem; border: 1px solid var(--line-strong); border-radius: 12px; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.g-card:hover, .g-card.hot, .g-mo:hover, .g-mo.hot { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .03); }
.g-card b, .g-mo b { font-size: 1rem; font-weight: 660; }
.g-card code { font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.g-card small, .g-mo small { font-size: .8rem; line-height: 1.35; color: var(--ink-mute); }
.g-lamp { position: absolute; right: .9rem; top: .9rem; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); }
.g-card.lit .g-lamp { background: var(--white); border-color: var(--white); box-shadow: 0 0 14px 3px rgba(255, 243, 214, .65); }
.g-morse { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.g-mo-l { font-size: 2.2rem; font-weight: 760; line-height: 1; letter-spacing: -.03em; }
.g-mo-code { display: flex; gap: 5px; align-items: center; height: 14px; margin: .2rem 0 .25rem; }
.g-mo-code i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.g-mo-code .di { width: 7px; }
.g-mo-code .da { width: 22px; }
.g-mo-code i.on { background: var(--lamp); box-shadow: 0 0 10px 1px var(--lamp); }
.g-beat svg { display: block; width: 100%; overflow: visible; }
.g-ax text { font-size: 11px; fill: var(--ink-mute); }
.g-top { font-size: 12px; font-weight: 600; fill: var(--ink-soft); }
.g-bin { cursor: pointer; }
.g-bin:hover rect { filter: brightness(1.35); }

/* ---------- Red Right Returning ---------- */
.r-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; padding: 22px var(--gutter) 34px; align-items: center; }
.r-lede .g-big { margin-bottom: 1.2rem; }
.r-tally { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 1.4rem; }
.r-tally b { display: block; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 760; line-height: 1; letter-spacing: -.045em; }
.r-tally span { display: block; margin-top: .3rem; font-size: .9rem; color: var(--ink-soft); }
.r-a { color: var(--red); }
.r-b { color: var(--green); }
.r-figs { display: flex; gap: 28px; justify-content: center; }
.r-fig { margin: 0; width: min(190px, 46%); }
.r-fig svg { display: block; width: 100%; }
.r-fig figcaption { display: grid; gap: .12rem; margin-top: .7rem; }
.r-fig b { font-size: 1rem; font-weight: 700; }
.r-fig span { font-size: .9rem; color: var(--ink); }
.r-fig small { font-size: .8rem; line-height: 1.35; color: var(--ink-mute); }
.rb { fill: #000; stroke-width: 1.5; transition: fill .05s; }
.r-fig-t { font-size: 9px; fill: var(--ink-mute); letter-spacing: .02em; }
.rb-r { stroke: var(--red); }
.rb-g { stroke: var(--green); }
.rb-r.on { fill: var(--red); filter: drop-shadow(0 0 6px var(--red)); }
.rb-g.on { fill: var(--green); filter: drop-shadow(0 0 6px var(--green)); }
.r-stage { position: relative; height: max(560px, calc(100svh - var(--nav-h) - 40px)); overflow: hidden; background: #000; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.r-stage::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 40%); z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .82), rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0)); }
.r-mode { display: inline-flex; gap: .35rem; }
.r-mode .ctl[aria-pressed="true"] { color: #000; background: var(--ink); border-color: var(--ink); }
.r-foot { padding: 20px var(--gutter) 0; max-width: 62em; }

/* ---------- tooltip ---------- */
.u-tip {
  position: fixed; left: 0; top: 0; z-index: 170; pointer-events: none; max-width: 330px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 10px; padding: .55rem .75rem;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.u-tip.show { opacity: 1; transform: none; }
.u-tip b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.u-tip small { display: block; margin-top: .1rem; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }
.u-tip em { display: block; margin-top: .2rem; font-style: normal; font-size: .78rem; line-height: 1.4; color: var(--ink-mute); }

/* ---------- footer ---------- */
.u-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding: 1.6rem var(--gutter) 2rem; margin-top: 2.4rem; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.5; color: var(--ink-mute); }
.u-foot > span { max-width: 46em; }
.u-foot a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.u-foot a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .u-switch { justify-items: start; }
  .u-desc { text-align: left; }
  .g-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .g-side { order: -1; top: var(--nav-h); z-index: 4; background: #000; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
  .g-cap { min-height: 4.4em; margin-top: .5rem; }
  .g-cap b { font-size: 1rem; }
  .g-cap small { font-size: .84rem; }
  .r-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) { :root { --nav-h: 64px; } }
@media (max-width: 760px) {
  .n-stage { height: 78svh; min-height: 520px; }
  .n-stage::before { width: 100%; height: 150px; bottom: auto; background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
  .n-read { width: auto; right: var(--gutter); }
  .n-legend { display: none; }
  .n-card { bottom: auto; top: 90px; right: var(--gutter); max-width: none; }
  .n-presets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 640px) {
  .u-switch { width: 100%; }
  .u-tabs { width: 100%; justify-content: space-between; gap: 12px; }
  .u-tabs button { font-size: .95rem; }
  .g-clock { grid-template-columns: minmax(0, 1fr); }
  .g-clock canvas { max-width: 300px; margin: 0 auto; }
  .r-stage { height: 76svh; min-height: 500px; }
  .r-stage::before { width: 100%; height: 130px; bottom: auto; background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
}
@media (prefers-reduced-motion: reduce) { .u-view.on { animation: none; } }