/* ==========================================================================
   Darkerlight — design system v2 "Come in from the dark"
   --------------------------------------------------------------------------
   Concept: the page begins at dusk (the genre's dark) and warms as you
   descend into the world — golden-hour light is the star, the dark is the
   frame. No frameworks, no CDNs, no build step. Motion is progressive:
   CSS + IntersectionObserver only, fully honoring prefers-reduced-motion.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* the dark frame (dusk, not void) */
  --dusk-0: #0d1118;        /* page base — deep dusk slate */
  --dusk-1: #111722;        /* raised */
  --dusk-2: #18202c;        /* card */
  --dusk-3: #202a38;        /* card hover / borders base */

  /* the warm light (the star) */
  --lantern: #ffc865;       /* signal gold */
  --lantern-hi: #ffe3a8;    /* highlight gold */
  --ember: #e08a4c;         /* warm mid */
  --terracotta: #b5563b;    /* settlement warmth (style bible) */
  --plaster: #e6d2a8;       /* settlement plaster (style bible) */

  /* cool counterweight */
  --slate: #7f93a8;
  --teal: #4fb39e;

  /* ---- the full mark palette (business/brand.md, LOCKED 2026-07-20) ----
     Every colour the Dawnbreak mark and the Ignition wordmark actually use.
     Branded surfaces draw from these and nothing else; gold and pine are
     signals, steel/ridge/mist/dusk are ground. */
  --steel-0: #f2eee3;       /* wordmark: the lightest steel, DARKER's crown */
  --steel-1: #c8ccd5;
  --steel-2: #b9bec9;
  --steel-3: #98a0af;
  --steel-4: #78808f;       /* deepest steel before it reads as dusk */
  --ridge-0: #525f76;       /* mark: lit crest of the near foothill */
  --ridge-1: #46536b;
  --ridge-2: #2b3546;
  --ridge-3: #1f2937;
  --ridge-4: #1c2534;
  --ridge-5: #131a26;       /* the far country at its darkest */
  --pine: #2e5c4a;          /* the one living thing — a signal, used sparingly */
  --pine-deep: #152a22;
  --mist: #afc3e1;          /* veils/scrims ONLY, at 10–15% alpha, never solid */
  --moon: #ffe3a8;          /* the moon + the two stars (shares the gold high) */
  /* dusk values that live inside the mark rather than on the page */
  --dusk-disc-hi: #2a3547;  /* the disc's lit top */
  --dusk-mark: #0e1219;     /* the mark field — deliberately its own value */
  --dusk-floor: #0d1018;    /* the near hill's base, the darkest brand value */

  /* text */
  --ink: #eee7d7;           /* warm parchment white */
  --ink-soft: #b8c0c9;
  --ink-dim: #8d97a3;

  /* semantic */
  --hairline: rgba(238, 231, 215, 0.09);
  --hairline-warm: rgba(255, 200, 101, 0.22);
  --glow: 0 0 24px rgba(255, 200, 101, 0.16), 0 0 64px rgba(255, 200, 101, 0.06);

  --font-display: "Cinzel", "Trajan Pro", "Optima", "Palatino", Georgia, serif;
  --font-body: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --nav-h: 72px;            /* the fixed header's height — heroes reserve it */
  --w-max: 1120px;
  --w-prose: 68ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--dusk-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--lantern); text-decoration: none; }
a:hover { color: var(--lantern-hi); }
::selection { background: rgba(255, 200, 101, 0.28); color: #fff8ea; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
.prose { max-width: var(--w-prose); }
.muted { color: var(--ink-soft); }
.dim { color: var(--ink-dim); }

/* focus */
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; border-radius: 2px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.section { position: relative; padding: clamp(52px, 8vw, 100px) 0; }

/* the descent: sections warm gradually via data-warmth (0 dusk → 3 golden) */
.section[data-warmth="1"] { background: linear-gradient(180deg, var(--dusk-0), #131722 60%, #171a24); }
.section[data-warmth="2"] { background:
  radial-gradient(120% 90% at 50% 0%, rgba(224, 138, 76, 0.07), transparent 55%),
  linear-gradient(180deg, #171a24, #1b1c24); }
.section[data-warmth="3"] { background:
  radial-gradient(130% 100% at 50% 10%, rgba(255, 200, 101, 0.12), transparent 60%),
  linear-gradient(180deg, #1b1c24, #201d22); }

/* section headers */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lantern);
}
.kicker::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lantern));
}
.section h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-top: 0.45em; }
.section .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 56ch; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--dusk-0) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s;
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }
.nav-inner {
  max-width: var(--w-max); margin: 0 auto;
  padding: 14px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.wordmark {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--ink); display: inline-flex; align-items: center; gap: 10px;
}
.wordmark:hover { color: var(--ink); }
/* The real brand mark, straight from brand/ — never a hand-drawn copy in the
   sprite, which is how the nav kept a retired mark through a brand rebuild.
   Sized to the wordmark, not to an icon slot: at 28px the disc's interior
   (moon, ridge, pine) collapsed to mush and the rising spark read as a
   smudge sitting ON the mark rather than as part of it. */
.wordmark .mark { width: 44px; height: 44px; flex: none; margin-top: -2px; }
@media (max-width: 680px) { .wordmark .mark { width: 36px; height: 36px; } }
/* the lettering lockup at nav size (tight crop, retina source) */
.wordmark .wm-img {
  height: 42px; width: auto; display: block;
  filter: brightness(1.1) drop-shadow(0 1px 10px rgba(8, 11, 17, 0.75));
}
@media (max-width: 680px) { .wordmark .wm-img { height: 34px; } }
/* one word, dark igniting into light — text fallback treatment (kept for reuse) */
.wordmark .wm {
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, #f2d49b 64%, var(--lantern) 84%, var(--lantern-hi) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 200, 101, 0.26));
}
.wordmark .wm em { font-style: italic; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.nav-links a {
  color: var(--ink-soft); font-size: 0.92rem; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { position: relative; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--lantern);
}
.nav-cta {
  padding: 8px 18px; border: 1px solid var(--hairline-warm); border-radius: 999px;
  color: var(--lantern) !important; font-weight: 600; white-space: nowrap;
  transition: background 0.25s, box-shadow 0.25s;
}
.nav-cta:hover { background: rgba(255, 200, 101, 0.08); box-shadow: var(--glow); }
/* below this width the burger takes over (see .nav-burger); the CTA moves
   into .nav-menu (below) instead of staying inline, where it had nothing
   constraining its width and collided with the wordmark. */
@media (max-width: 680px) {
  .nav-links a { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  /* full-viewport drama on laptops, but capped so tall windows don't become
     a skyscraper of empty scrim between the nav and the content */
  min-height: min(100svh, 980px);
  display: grid; align-items: end;
  isolation: isolate; overflow: hidden;
  /* The nav is fixed and floats OVER the hero, and hero content is anchored to
     the bottom — so a hero whose copy is taller than its box grew UPWARDS and
     slid its first line under the header (credits and the two mid pages were
     all clipped this way). Reserving the header's height here makes that
     impossible for every hero, present and future, instead of per-page. */
  padding-top: var(--nav-h);
}
.hero-vista {
  position: absolute; inset: -6% -2%; z-index: -3;
  background-size: cover; background-position: center 46%;
  opacity: 0; transition: opacity 1.6s ease;
  transform: scale(1.04);
}
.hero-vista.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-vista.is-loaded { animation: vista-drift 44s ease-in-out infinite alternate; }
  @keyframes vista-drift {
    from { transform: scale(1.04) translateY(0); }
    to   { transform: scale(1.09) translateY(-1.6%); }
  }
}
/* dusk falls at the edges; the light lives in the middle distance */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(13, 17, 24, 0.48) 0%, rgba(13, 17, 24, 0.05) 22%, rgba(13, 17, 24, 0) 55%, rgba(13, 17, 24, 0.88) 94%),
    radial-gradient(90% 60% at 50% 58%, transparent 42%, rgba(13, 17, 24, 0.22) 100%);
}
/* no-image fallback sky: dusk into golden hour */
.hero-fallback {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(110% 75% at 50% 82%, rgba(255, 200, 101, 0.32), rgba(224, 138, 76, 0.14) 38%, transparent 66%),
    linear-gradient(180deg, #0c1017 0%, #131a26 45%, #2a2430 72%, #3a2b28 100%);
}
/* portrait/mobile: the wide art's dark sky-top reads as dead space under the
   nav — oversize and frame lower to crop it out, and thin the top scrim */
@media (max-width: 680px) {
  .hero-vista { background-size: auto 122%; background-position: center 68%; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(13, 17, 24, 0.32) 0%, rgba(13, 17, 24, 0) 16%, rgba(13, 17, 24, 0) 52%, rgba(13, 17, 24, 0.9) 96%),
      radial-gradient(90% 60% at 50% 58%, transparent 42%, rgba(13, 17, 24, 0.22) 100%);
  }
}
.hero-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-inner { width: 100%; padding-bottom: clamp(64px, 10vh, 120px); }
.hero h1, .hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  font-weight: 500;
  line-height: 1.12;
  /* positive tracking: Cinzel is caps-derived, and caps need air, not the
     negative tracking that suits a lowercase-heavy face */
  letter-spacing: 0.012em;
  text-wrap: balance;
  max-width: 17ch;
  margin: 0 0 0.35em;
}
.hero .lit {
  /* NO italic: the display face has none, so this asked the browser to fake a
     slant. The emphasis was never carried by the slant anyway -- it is the
     lantern-hi color and the glow doing the work, and both survive. */
  font-weight: 600; color: var(--lantern-hi);
  text-shadow: 0 0 30px rgba(255, 200, 101, 0.45);
}
/* the generated lettering lockup — display sizes only (nav keeps the vector) */
.hero-logo {
  width: min(520px, 78vw); height: auto;
  margin: 0 0 6px -14px;
  filter: drop-shadow(0 3px 22px rgba(8, 11, 17, 0.75));
}
.hero-headline { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--ink); }
.hero .lede { font-size: clamp(1.08rem, 1.9vw, 1.3rem); color: var(--ink-soft); max-width: 52ch; }
.hero-kicker { margin-bottom: 22px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  color: var(--ink-dim); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint { animation: hint-fade 2.6s ease-in-out infinite; }
  @keyframes hint-fade { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
}

/* page heroes (subpages) — shorter, same tall-window cap */
.hero.hero-page { min-height: min(62svh, 640px); padding-top: calc(var(--nav-h) + 28px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s, background 0.25s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--lantern-hi), var(--lantern) 55%, #eaa94e);
  color: #241a08;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--glow); color: #241a08; }
.btn-ghost { border-color: var(--hairline-warm); color: var(--lantern); background: transparent; }
.btn-ghost:hover { background: rgba(255, 200, 101, 0.07); }

/* ---------- lantern-glass cards ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--dusk-2), var(--dusk-1));
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 26px 26px 24px;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.card::before { /* warm glass rim that ignites on hover */
  content: ""; position: absolute; inset: -1px; border-radius: 10px; padding: 1px;
  background: linear-gradient(160deg, rgba(255, 200, 101, 0.45), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.card:hover { transform: translateY(-3px); border-color: rgba(255, 200, 101, 0.18); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.22rem; margin: 14px 0 8px; }
.card p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.card .sigil { width: 34px; height: 34px; color: var(--lantern); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- grievances (what broke) ---------- */
.griefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 40px; max-width: 880px; }
@media (max-width: 700px) { .griefs { grid-template-columns: 1fr; } }
.grief {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft); font-size: 1.02rem;
}
.grief .x { color: var(--terracotta); font-family: var(--font-display); font-size: 1.05rem; }

/* ---------- vista bands (full-bleed golden interludes) ---------- */
.band {
  position: relative; min-height: 54vh; display: grid; align-items: center;
  isolation: isolate; overflow: hidden;
}
.band-vista {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.band-vista.is-loaded { opacity: 1; }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(13, 17, 24, 0.88) 8%, rgba(13, 17, 24, 0.42) 46%, rgba(13, 17, 24, 0.12) 78%);
}
.band-fallback {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(80% 90% at 72% 60%, rgba(255, 200, 101, 0.25), transparent 60%),
    linear-gradient(180deg, #1a1c26, #2c2528);
}
.band .wrap { padding-top: 64px; padding-bottom: 64px; }
.band h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 20ch; }
.band p { max-width: 46ch; color: var(--ink-soft); }

/* ---------- promise list ---------- */
.promises { counter-reset: promise; max-width: 880px; }
.promise {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px;
  padding: 26px 0; border-bottom: 1px solid var(--hairline);
}
.promise::before {
  counter-increment: promise;
  content: counter(promise, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 500;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 200, 101, 0.55);
  line-height: 1.15;
}
.promise h3 { font-size: 1.3rem; margin: 0 0 6px; }
.promise p { color: var(--ink-soft); margin: 0; max-width: 62ch; }
@media (max-width: 560px) { .promise { grid-template-columns: 44px 1fr; gap: 14px; } }

/* the ever-line: hard promises get the flame */
/* the display face has no italic; a real drawn one lives in the body face */
.ever { color: var(--lantern); font-style: italic; font-family: var(--font-body); }

/* ---------- the path (phases) ---------- */
.path { position: relative; max-width: 760px; }
.path::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--lantern) 0%, rgba(255, 200, 101, 0.25) 60%, transparent);
}
.phase { position: relative; padding: 0 0 40px 48px; }
.phase:last-child { padding-bottom: 0; }
.phase::before {
  content: ""; position: absolute; left: 6px; top: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--dusk-0);
  border: 1px solid var(--lantern);
  box-shadow: 0 0 12px rgba(255, 200, 101, 0.5);
}
.phase.is-future::before { border-color: var(--ink-dim); box-shadow: none; }
.phase h3 { font-size: 1.28rem; margin-bottom: 6px; }
.phase .tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lantern);
}
.phase p { color: var(--ink-soft); max-width: 58ch; margin: 0; }

/* ---------- waitlist ---------- */
.join-panel {
  position: relative; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 200, 101, 0.14), transparent 55%),
    linear-gradient(180deg, var(--dusk-2), var(--dusk-1));
  border: 1px solid var(--hairline-warm);
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
}
.join-panel h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
.join-panel p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 26px; }
.waitlist {
  display: flex; gap: 10px; max-width: 460px; margin: 0 auto;
}
.waitlist input {
  flex: 1; min-width: 0;
  padding: 14px 18px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(13, 17, 24, 0.6);
  color: var(--ink); font-size: 1rem; font-family: var(--font-body);
}
.waitlist input::placeholder { color: var(--ink-dim); }
.waitlist input:focus { outline: none; border-color: var(--hairline-warm); box-shadow: 0 0 0 3px rgba(255, 200, 101, 0.12); }
@media (max-width: 520px) { .waitlist { flex-direction: column; } }
.form-note { margin-top: 14px; font-size: 0.88rem; color: var(--ink-dim); min-height: 1.4em; }
.form-note.is-error { color: #e2907c; }
.form-note.is-success { color: var(--teal); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 22px 0;
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 560;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  font-family: var(--font-body); font-weight: 300; font-size: 1.5rem;
  color: var(--lantern); transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .answer { padding: 0 0 24px; color: var(--ink-soft); max-width: 66ch; }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 48px 0 40px;
  background: linear-gradient(180deg, var(--dusk-0), #0a0d13);
}
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px;
}
.footer .dim { font-size: 0.88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-links a { white-space: nowrap; }
.footer-links a { color: var(--ink-dim); font-size: 0.9rem; }
.footer-links a:hover { color: var(--ink-soft); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
/* Nothing but site.js ever clears the hidden state, so with scripting off every
   revealed element — including the credits pages' required attribution — would be
   invisible. CSS-only fallback (no inline script: style-src is 'self'). */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal[data-delay="1"].is-visible { transition-delay: 0.08s; }
.reveal[data-delay="2"].is-visible { transition-delay: 0.16s; }
.reveal[data-delay="3"].is-visible { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero-vista.is-loaded, .scroll-hint { animation: none !important; }
}

/* ---------- grain + vignette (subtle, cinematic) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- utility ---------- */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 34px; } .mt-4 { margin-top: 52px; }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- mobile nav (burger) ---------- */
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--ink); border-radius: 6px;
}
.nav-burger svg { width: 22px; height: 22px; display: block; }
.nav-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: color-mix(in srgb, var(--dusk-0) 96%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding: 10px clamp(20px, 5vw, 48px) 18px;
}
.nav-menu a {
  display: block; padding: 12px 2px; color: var(--ink-soft); font-size: 1.05rem;
  border-bottom: 1px solid var(--hairline);
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu-cta { color: var(--lantern) !important; font-weight: 600; }
.nav.menu-open .nav-menu { display: block; }
@media (max-width: 680px) {
  .nav-burger { display: block; }
}

/* ---------- signup success state ---------- */
.join-success {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px 0 2px;
}
.join-success .sigil {
  width: 44px; height: 44px; color: var(--lantern);
  filter: drop-shadow(0 0 14px rgba(255, 200, 101, 0.55));
}
.join-success h3 { font-size: 1.5rem; margin: 0; }
.join-success p { color: var(--ink-soft); margin: 0; max-width: 40ch; }
.form-privacy {
  margin-top: 12px; font-size: 0.82rem; color: var(--ink-dim);
}
.hp { position: absolute; left: -9999px; }

/* CSP-safe hidden sprite sheet (no inline styles allowed) */
.sigil-defs { display: none; }

/* ===================================================================
   CREDITS — the open-source homage (credits.html, credits-icons.html)
   Cards read as plaques on a dark wall: hairline-framed, warm on hover.
   Public-domain gifts get the lantern edge — they asked for nothing.
   =================================================================== */

.wrap.narrow { max-width: var(--w-prose); }
/* The hero anchors content to its bottom edge, so a short hero must still be tall
   enough to clear the fixed nav — otherwise the h1 is clipped off the top. */
/* The nav is fixed and overlays the hero's top edge. Tall heroes have slack; a short
   one does not, so it reserves the nav's height or its heading gets clipped. */
.hero.hero-page.hero-short { min-height: min(46svh, 480px); }

.credits-section + .credits-section { padding-top: 0; }

.credit-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.credit-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 20px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(238, 231, 215, 0.028), rgba(238, 231, 215, 0.008));
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out),
              transform 0.4s var(--ease-out);
}
.credit-card:hover { border-color: var(--hairline-warm); }
.credit-card:focus-within {
  border-color: rgba(255, 200, 101, 0.5);
}
.credit-card:hover,
.credit-card:focus-within {
  background: linear-gradient(180deg, rgba(255, 200, 101, 0.055), rgba(255, 200, 101, 0.012));
  transform: translateY(-2px);
}

/* the gift tell — a lantern seam down the leading edge */
.credit-card.is-gift::before {
  content: ""; position: absolute; left: 8px; top: 16px; bottom: 16px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--lantern) 32%, var(--ember) 100%);
  opacity: 0.75;
}


.credit-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.credit-head h3 {
  font-size: 1.12rem; margin: 0; line-height: 1.25;
  font-family: var(--font-display); font-weight: 500;
  font-variant-numeric: lining-nums;
}
.credit-head h3 a { color: var(--ink); text-decoration: none; }
.credit-head h3 a:hover,
.credit-head h3 a:focus-visible { color: var(--lantern); }

.credit-license {
  flex: none;
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap; font-variant-numeric: lining-nums;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--hairline);
}
.credit-card:hover .credit-license { color: var(--lantern); border-color: var(--hairline-warm); }

.credit-what { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; }

.credit-meta {
  margin: auto 0 0; padding-top: 4px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-size: 0.82rem;
}
.credit-by { color: var(--ink-dim); font-style: italic; }
/* wraps at spaces (nowrap let long link text like "See all 38 icons…" push past
   the card's right edge); the arrow stays glued to its word via   in markup */
.credit-link { color: var(--lantern); text-decoration: none; }
.credit-link:hover, .credit-link:focus-visible { text-decoration: underline; }
.credit-support { color: var(--ember); }

/* ---------- the icon-artist sub-page ---------- */
.artist-list { display: grid; gap: 4px; max-width: 900px; }
.artist { padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.artist:last-child { border-bottom: 0; }

.artist-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.artist-head h3 {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; color: var(--lantern);
  font-variant-numeric: lining-nums;
}
.artist-count {
  font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-dim);
}

.icon-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.icon-chips li {
  font-size: 0.8rem; color: var(--ink-soft);
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(238, 231, 215, 0.022);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.icon-chips a {
  display: block; color: inherit; text-decoration: none;
  margin: -4px -11px; padding: 4px 11px; border-radius: 999px;
}
.icon-chips li:hover, .icon-chips li:focus-within {
  color: var(--lantern); border-color: var(--hairline-warm);
}

@media (max-width: 560px) {
  .credit-grid { grid-template-columns: 1fr; }
  .credit-card { padding: 18px; }

}
@media (prefers-reduced-motion: reduce) {
  .credit-card, .credit-card:hover, .credit-card:focus-within { transform: none; }
}

/* licence nuance, kept out of the badge so long SPDX strings can't swamp a name */
.credit-note {
  margin: -2px 0 0; font-size: 0.82rem; line-height: 1.55;
  color: var(--ink-soft); max-width: 62ch;
}

/* Credits hero: this vista's lit window sits directly behind the copy. A scrim
   bounded to .hero-inner reads as an oval lens laid over the art and still leaves
   the lede thin, so the scrim is full-bleed on the hero itself — it can never be
   viewport-bounded, and the vista survives on the open right-hand side. */
.hero-credits::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg,
              rgba(9, 12, 18, 0.94) 0%, rgba(9, 12, 18, 0.88) 34%,
              rgba(9, 12, 18, 0.62) 58%, rgba(9, 12, 18, 0.18) 82%, transparent 100%);
}
.hero-credits .hero-inner { position: relative; z-index: 1; }

/* visually hidden — gives screen readers the context sighted users get from position */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Prose links carry colour only, which a colourblind reader can't find (WCAG 1.4.1).
   Scoped to running text — the card/meta links have their own affordances. */
.lede a, .credits-note-prose a, .closing-thanks + .dim a, .footer .dim a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* the hero legend that decodes the gold gift-edge */
.hero-legend {
  margin-top: 14px; max-width: 56ch;
  font-size: 0.88rem; line-height: 1.6; color: var(--ink-dim);
}

/* the icon page's closing thank-you, before the small print */
.closing-thanks {
  margin-top: 34px; max-width: 62ch;
  font-size: 1.02rem; color: var(--ink-soft);
}
.artist-list + .closing-thanks { margin-top: 40px; }

/* keep the closing note on the same left rail as every grid above it */
.credits-closing p { max-width: 62ch; }
.credits-section h2, .credits-closing h2 { max-width: 24ch; }

/* ember is reserved for "give these people money"; the internal sub-page link is gold */
.credit-subpage { color: var(--lantern); }

/* ===================================================================
   JUMP NAV — quick section links directly under a hero, on any page
   with multiple content sections. Deliberately NOT sticky/fixed (that
   class of bug already bit the hero once this session — see the FOUT
   fix above); it sits in normal flow, so it can never overlap content.
   =================================================================== */
[id] { scroll-margin-top: 96px; } /* clears the 71px fixed nav + breathing room, for every #anchor site-wide */

.jump-nav {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(238, 231, 215, 0.018);
}
.jump-nav-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px;
  padding: 13px clamp(20px, 5vw, 48px);
  max-width: var(--w-max); margin: 0 auto;
}
.jump-nav-label {
  color: var(--ink-dim); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-right: 6px; flex: none;
}
.jump-nav a {
  color: var(--ink-soft); font-size: 0.86rem; white-space: nowrap;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.jump-nav a:hover, .jump-nav a:focus-visible {
  color: var(--lantern);
  border-color: var(--hairline-warm);
  background: rgba(255, 200, 101, 0.06);
}

/* ===================================================================
   DEVLOG — episode cards (devlog.html, fed by /api/devlog)
   Each card is a lit window onto the work: the frame is ours, the
   art is the episode, and the whole card is one link out to the real
   watch page. Nothing is embedded — no third-party player, no
   third-party request, and a signed-in viewer stays signed in.
   =================================================================== */

.ep-feed { display: grid; gap: 18px; margin-top: 34px; }
/* Below the featured episode, the back catalogue is an index, not a gallery:
   full-width rows never leave a half-empty grid line when the library is
   small, and they stay readable as it grows. */
.ep-list { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .ep-list .ep-card { grid-template-rows: none; grid-template-columns: minmax(0, 292px) minmax(0, 1fr); }
  .ep-list .ep-body { padding: 22px 26px; justify-content: center; }
}

.ep-card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  color: inherit; text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--dusk-2), var(--dusk-1));
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
.ep-card:hover, .ep-card:focus-visible {
  border-color: rgba(255, 200, 101, 0.24);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.ep-card:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; }

/* ---- the art ---- */
.ep-thumb {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(85% 70% at 50% 88%, rgba(255, 200, 101, 0.16), transparent 62%),
    linear-gradient(180deg, #141a25, #1d1b22);
}
.ep-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  /* the site sits at dusk; a raw thumbnail sits brighter than everything around
     it, so it's pulled toward the page and warms back up on hover */
  filter: saturate(0.9) brightness(0.86) contrast(1.03);
  transition: transform 0.7s var(--ease-out), filter 0.45s var(--ease-out);
}
.ep-card:hover .ep-thumb img, .ep-card:focus-visible .ep-thumb img {
  transform: scale(1.045);
  filter: saturate(1) brightness(1) contrast(1);
}
/* dusk pooling at the base, so art and card are one object */
.ep-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 17, 24, 0.28) 0%, transparent 34%,
              transparent 58%, rgba(13, 17, 24, 0.72) 100%);
}

.ep-play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-warm);
  background: rgba(13, 17, 24, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.35s var(--ease-out), background 0.35s, box-shadow 0.35s;
}
.ep-play svg { width: 26px; height: 26px; color: var(--lantern); margin-left: 2px; }
.ep-card:hover .ep-play, .ep-card:focus-visible .ep-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255, 200, 101, 0.14);
  box-shadow: var(--glow);
}
.ep-lead .ep-play { width: 74px; height: 74px; }
.ep-lead .ep-play svg { width: 31px; height: 31px; }

/* ---- the copy ---- */
.ep-body {
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px 22px 22px;
}
.ep-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--lantern);
}
.ep-title {
  font-family: var(--font-display); font-weight: 560; line-height: 1.22;
  font-size: 1.14rem; color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ep-card:hover .ep-title, .ep-card:focus-visible .ep-title { color: var(--lantern-hi); }
.ep-blurb {
  margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ep-cta {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--lantern); font-weight: 600; font-size: 0.9rem;
}
.ep-arrow { transition: transform 0.3s var(--ease-out); }
.ep-card:hover .ep-arrow, .ep-card:focus-visible .ep-arrow { transform: translate(2px, -2px); }

/* ---- the featured episode ---- */
@media (min-width: 900px) {
  .ep-lead { grid-template-rows: none; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ep-lead .ep-body { padding: 34px 34px 32px; justify-content: center; gap: 12px; }
  .ep-lead .ep-title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); -webkit-line-clamp: 4; }
  .ep-lead .ep-blurb { font-size: 1rem; -webkit-line-clamp: 5; }
}

/* ---- loading + empty states ---- */
.ep-skeleton {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: linear-gradient(180deg, var(--dusk-2), var(--dusk-1));
  min-height: 232px;
}
.ep-skeleton-lead { min-height: 300px; }
.ep-skeleton-row { display: grid; gap: 14px; }
.ep-skeleton-row .ep-skeleton { min-height: 148px; }
@media (prefers-reduced-motion: no-preference) {
  .ep-skeleton { animation: ep-breathe 2.4s ease-in-out infinite; }
  @keyframes ep-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
}
/* the devlog hero's vista puts a lit lantern directly under the copy — same
   full-bleed scrim treatment the credits hero uses, for the same reason */
.hero-devlog::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg,
              rgba(9, 12, 18, 0.92) 0%, rgba(9, 12, 18, 0.84) 32%,
              rgba(9, 12, 18, 0.55) 58%, rgba(9, 12, 18, 0.16) 84%, transparent 100%);
}
.hero-devlog .hero-inner { position: relative; z-index: 1; }

.ep-note { color: var(--ink-soft); margin: 6px 0 0; }
.ep-note a { text-decoration: underline; text-underline-offset: 0.18em; }

@media (prefers-reduced-motion: reduce) {
  .ep-card, .ep-card:hover, .ep-thumb img, .ep-card:hover .ep-thumb img,
  .ep-play, .ep-card:hover .ep-play, .ep-arrow { transform: none !important; transition: none; }
}