/* =========================================================
   Shared night theme for the scroll-craft pages: tokens, loud bar,
   junction signal, shared buttons, the green-light close.
   ========================================================= */
:root {
  --sc-canvas: #0b0f14;
  --sc-surface: #141a22;
  --sc-ink: #f5f7fa;
  --sc-ink-soft: #b9c2cc;
  --sc-accent: #ec6d4d;
  --sc-accent-ink: #1a0d08;
  --sc-font-display: 'Montserrat', system-ui, sans-serif;
  --sc-font-text: 'Figtree', system-ui, sans-serif;
  --night: #0b0f14;
  --night-ink: #f5f7fa;
  --night-soft: #b9c2cc;
  --go: #1f7a47;
  --signal-red: #ff4d3d;
  --signal-amber: #ffb020;
  --signal-green: #37d67a;
}

/* ---------- Loud bar ---------- */
.site-header--loud { background: var(--night); border-bottom-color: rgba(255, 255, 255, 0.08); color: var(--night-ink); }
.site-header--loud .brand { color: var(--night-ink); }
.site-header--loud .nav-links a { color: rgba(245, 247, 250, 0.72); }
.site-header--loud .nav-links a:hover { color: #fff; }
.site-header--loud .nav-links a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-header--loud .nav-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
@media (max-width: 1199px) { .site-header--loud .nav-menu { background: var(--night); border-bottom-color: rgba(255, 255, 255, 0.08); } }

/* ---------- The junction signal (signature move) ---------- */
.signal { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #050709; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.lamp { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.lamp::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--off); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); transition: background-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); }
.lamp--red { --on: var(--signal-red); --off: #3a1614; }
.lamp--amber { --on: var(--signal-amber); --off: #3a2a10; }
.lamp--green { --on: var(--signal-green); --off: #10301f; }
.signal[data-state='red'] .lamp--red::before,
.signal[data-state='amber'] .lamp--amber::before,
.signal[data-state='green'] .lamp--green::before { background: var(--on); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.lamp:hover::before { transform: scale(1.12); }
.lamp:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.signal-live { margin-left: 6px; font-size: 0.8rem; font-weight: 600; color: rgba(245, 247, 250, 0.82); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .signal.is-switch [class*='lamp--']::before { animation: lamp-in 360ms var(--sc-ease-out); }
}
@keyframes lamp-in { from { transform: scale(0.8); } to { transform: scale(1); } }
@media (max-width: 420px) { .signal-live { display: none; } }

/* ---------- Shared cut behaviour ---------- */
.cut { position: relative; overflow: clip; }
/* Copy that sits directly in a full-bleed cut lines up with the .sc-wrap column used elsewhere. */
.page-home main { --edge: calc(max(0px, (100% - var(--sc-maxw)) / 2) + var(--sc-gutter)); }
.btn-dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); color: var(--night-ink); }
.btn-dark:hover { border-color: #fff; }
.btn-light { background: var(--night-ink); color: #0e3d23; }
.btn-light:hover { background: #fff; }
.page-home :focus-visible { outline-color: var(--sc-accent); }

/* ---------- The green-light close (any page) ---------- */
.cut-go { min-height: calc(100svh - 68px); background: var(--night); color: #fff; display: grid; align-items: end; }
.go-band { position: absolute; inset: 0; background: var(--go); clip-path: circle(0px at 100% 0px); }
.go-wrap { position: relative; z-index: 2; padding-block: clamp(64px, 12svh, 120px) clamp(48px, 9svh, 96px); }
.go-title { margin: 0; font-size: clamp(3.6rem, 12vw, 10.5rem); line-height: 0.92; letter-spacing: -0.05em; color: #fff; }
.go-sub { margin: 1.4rem 0 0; max-width: 40ch; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: #eef8f1; }
.cut-go .btn-row { margin-top: 2.2rem; }

.go-title--long { font-size: clamp(3rem, 8vw, 7rem); }
.btn-ink { background: var(--text); color: var(--bg); }
.btn-ink:hover { background: color-mix(in srgb, var(--text) 85%, var(--bg)); }