/* ============================================================
   4789 · "After Dark" skin  (nocturne.css)
   Load AFTER site.css + pages.css. Re-tokenizes the whole
   interior-page system to the homepage's After Dark identity:
   warm off-white ink on near-black, ember accent, Fraunces
   display + Hanken body, plus a cursor-light layer.
   No markup changes required on the pages themselves.
   ============================================================ */
:root,
html[data-dir="calm"],
html[data-dir="cinematic"],
html[data-dir="bold"]{
  /* surfaces */
  --bg:#0a0b0d; --bg-2:#0f1114; --card:#15181d; --card-2:#1b1f26; --card-3:#2a303a;
  --line:rgba(243,239,231,.10); --line-2:rgba(243,239,231,.18);
  /* ink */
  --text:#f3efe7; --dek:#a9a396; --muted:#6f6a5f;
  /* accents */
  --orange:#ff7a45; --orange-2:#ffb07d; --green:#8bff67; --green-ink:#0c1a07;
  --accent:#ff7a45; --accent-ink:#1a0e08;
  /* type */
  --ui:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  /* atmosphere */
  --flood:.13; --grain:.05;
  --shadow:0 44px 120px -30px rgba(0,0,0,.9);
}
html[data-dir="calm"]{--flood:.08}

/* editorial display: section titles echo the homepage (Fraunces, light) */
h1,h2{font-family:var(--serif);font-weight:360;letter-spacing:-.022em;font-optical-sizing:auto}
h3{font-family:var(--ui);font-weight:650;letter-spacing:-.01em}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--orange-2)}
.hero h1 .serif,.page-hero h1 .serif{color:var(--orange)}
h1{font-size:clamp(44px,6vw,88px);line-height:.98}
.page-hero h1{font-size:clamp(38px,5.4vw,66px)}
.docs-body h1{font-family:var(--serif);font-weight:360}
.eyebrow{color:var(--orange);letter-spacing:.2em}

/* warm the recolored surfaces that used slate literals */
.nav{background:rgba(10,11,13,.72);border-bottom:1px solid var(--line)}
.card{background:linear-gradient(165deg,rgba(27,31,38,.6),rgba(21,24,29,.5))}
.msheet{background:#0f1114;border-color:var(--line-2)}
.btn-primary{box-shadow:0 12px 34px -12px rgba(255,122,69,.55)}
.btn-primary:hover{box-shadow:0 16px 44px -12px rgba(255,122,69,.7)}
.floater,.pin,.wall-frame .cap,.field{background:rgba(18,20,25,.82)}
.field{background:var(--card)}
::selection{background:rgba(255,122,69,.35);color:#fff}

/* the poster-field + globe read warmer under the ember flood */
.device{background:linear-gradient(160deg,#31353c,#14161a 55%,#0a0b0d)}
.device .island{background:#050607}

/* ---------- cursor light (the After Dark signature) ---------- */
.nocturne-lamp{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1s ease;
  background:radial-gradient(340px 340px at var(--nx,50vw) var(--ny,40vh),rgba(255,181,128,.13),rgba(255,140,86,.05) 44%,transparent 66%)}
html.lamp-on .nocturne-lamp{opacity:1}
@media (hover:none),(pointer:coarse){.nocturne-lamp{display:none}}
@media (prefers-reduced-motion:reduce){.nocturne-lamp{display:none}}

/* magnetic primary actions */
.btn-primary,.cta{will-change:transform}

/* tighten a couple of interior rhythms for the darker canvas */
.section-head h2{margin-top:14px}
.note{background:linear-gradient(120deg,rgba(255,122,69,.06),var(--card));border-left-color:var(--accent)}

/* docs: sticky side-nav + code surfaces read right on the dark canvas */
.docs-nav a{transition:color .18s,background .18s,border-color .18s}
.docs-nav a.active{color:var(--text);background:rgba(255,122,69,.09);border-left-color:var(--accent)}
.docs-nav a:hover{background:rgba(243,239,231,.045)}
.docs-body pre,.prose pre{background:#0a0c0f;border:1px solid var(--line);box-shadow:0 24px 60px -34px rgba(0,0,0,.85)}
.docs-body code,.prose code{background:var(--card-2);border:1px solid var(--line);color:var(--orange-2)}
.docs-body h2{border-top:1px solid var(--line)}