/* ============================================================================
   Let Me Tell You a Story — 25 Letters · Ali Al Mokdad
   Concept: "The Light That Travels" — one candle you burn down with a stranger.
   Past = letterpress serifs, ink, ornaments, paper grain
   Present = the living flame, the wick that burns as you read
   Future = WebGL light, the constellation, drifting particles
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
  --ink:        #0b0a09;
  --ink-1:      #100d0b;
  --ink-2:      #15110d;
  --ink-soft:   #1d1813;
  --line:       rgba(216, 176, 114, 0.16);
  --line-soft:  rgba(216, 176, 114, 0.09);

  --gold:       #d8b072;
  --gold-soft:  #c8a878;
  --gold-bright:#f3d9a6;        /* softened from #ffe6b0 — candle-gold without halation on dark */
  --ember:      #ff8a3d;
  --ember-deep: #c0451d;

  --text:       #e8e0d2;        /* softened warm off-white (15:1, ~2x AAA) — less glare for long reading on dark */
  --text-dim:   #dcd2c0;        /* brighter secondary text — clearer */
  --text-faint: #c6baa1;        /* brighter tertiary — readable at small sizes */

  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 37rem;             /* ~66-70 characters per line at the reading size — the book-typography band */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 12vh, 9rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: 1.1s;

  --read: 0;                    /* reading progress 0..1 (set by reader.js) */
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(216,176,114,0.26) transparent; }
/* the scrollbar is on screen for the whole read — keep it in the candlelit field */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(216,176,114,0.22); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(216,176,114,0.4); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

body {
  font-family: var(--serif);
  background: var(--ink);
  color: var(--text);
  line-height: 1.72;
  font-size: clamp(1.12rem, 0.55vw + 1.04rem, 1.27rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;   /* letterpress figures on the serif */
  hanging-punctuation: first last;   /* opening quotes hang into the margin where supported (Safari) — fine book setting for free */
  overflow-x: clip;
  min-height: 100vh;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: rgba(216, 176, 114, 0.30); color: #faf3e6; }       /* warm, not pure white — same eye-comfort rule as the body text */
::-moz-selection { background: rgba(216, 176, 114, 0.30); color: #faf3e6; }  /* Firefox needs the prefixed twin */

/* focus ring — visible, high-contrast, theme-aware (was missing) */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* skip link */
.skip-link {
  position: fixed; top: 0.6rem; left: 0.6rem; z-index: 200;
  background: var(--ink-soft); color: var(--gold-bright);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.7rem 1.1rem; border: 1px solid var(--line);
  transform: translateY(-150%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ----------------------------------------------------- ambient backdrop */
.backdrop {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(216,150,70,0.22), rgba(160,90,40,0.05) 38%, transparent 60%),
    radial-gradient(80% 60% at 50% -10%, rgba(60,52,44,0.5), transparent 55%),
    linear-gradient(180deg, #070605 0%, var(--ink) 40%, #0a0807 100%);
}
.grain {
  position: fixed; inset: -6%; z-index: -2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(2%,1%)}
}


/* ------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }
.reading { max-width: var(--measure); margin-inline: auto; }
.section { padding-block: var(--section); }

/* ---------------------------------------------------------- typography */
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.04; letter-spacing: 0.005em; }
.display { font-family: var(--display); font-weight: 500; font-size: clamp(3.4rem, 12vw, 11rem); line-height: 0.95; letter-spacing: -0.01em; }
.serif-italic { font-style: italic; }

/* literary polish: widow/orphan control, display-type kerning/ligatures, and
   lining figures kept on the mono labels (old-style only on the serif body) */
h1, h2, h3, .display, .hero-title, .about-quote, .lt-epigraph, .letter-title, .inscription, .salutation { text-wrap: balance; }
.letter-body > p, .about-body p, .hero-sub, .lt-note { text-wrap: pretty; }
h1, h2, h3, .display, .letter-title, .about-quote, .salutation { font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; }
.meta, .eyebrow, .nav a, .brand-name, .lt-date, .lt-min, .ln-dir, .foot-fine, .star .st-date { font-variant-numeric: normal; }

.eyebrow { font-family: var(--mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); padding-left: 0.26em; }
.meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

.ornament { color: var(--gold); text-align: center; user-select: none; }
.ornament-floret { font-size: 1.5rem; line-height: 1; }
.rule-orn { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold-soft); margin-block: 2rem; }
.rule-orn::before, .rule-orn::after { content: ""; height: 1px; width: min(7rem, 22vw); background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* --------------------------------------------------------------- header */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); padding-top: max(1.1rem, env(safe-area-inset-top)); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); transition: background var(--slow) var(--ease); }
.site-head.scrolled { background: linear-gradient(180deg, rgba(7,6,5,0.85), rgba(7,6,5,0)); }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 18px; height: 18px; }
.brand-name { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); }
.nav { display: flex; gap: 1.9rem; align-items: center; }
.nav a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); position: relative; padding-block: 0.3rem; transition: color 0.4s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-bright); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--gold); transition: width 0.5s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav-toggle { display: none; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright);
  padding: 1rem 2rem; border: 1px solid var(--line); border-radius: 2px; position: relative; overflow: hidden;
  background: rgba(12,9,7,0.46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.6s var(--ease);
}
.btn:hover { color: #fff; border-color: rgba(216,176,114,0.55); background: rgba(34,20,11,0.6); box-shadow: 0 0 46px rgba(255,138,61,0.28), inset 0 0 26px rgba(255,138,61,0.10); }
.btn .arrow { transition: transform 0.5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; padding-inline: 0.4rem; }
.btn-ghost:hover { background: transparent; box-shadow: none; }

/* download / offline band (letters page) */
.offline-band { text-align: center; padding-block: clamp(2.5rem, 7vh, 5rem) 0; }
.offline-band .eyebrow { display: block; margin-bottom: 1rem; }
.offline-note { font-family: var(--serif); font-style: italic; color: var(--text-dim); max-width: 38ch; margin: 0 auto 2rem; line-height: 1.62; }

/* ============================================================ HOME / hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1.5fr auto 0.42fr; align-items: center; text-align: center; isolation: isolate; }
#candle-canvas { position: absolute; inset: 0 0 auto 0; z-index: -1; width: 100%; height: 80%; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
/* fallback candle is HIDDEN by default so it never flashes behind the WebGL flame
   during three.js load; it only appears when WebGL/motion is genuinely unavailable */
.candle-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -86%); z-index: -1; width: 110px; height: 240px; display: none; }
.no-webgl .candle-fallback, .reduced .candle-fallback { display: block; }
.no-webgl #candle-canvas, .reduced #candle-canvas { display: none; }
/* vintage vibe: a faint vignette (clear centre, gently darkened edges) + a warm pool at the
   bottom, sitting BEHIND the candle canvas (z-index:-2 < -1) so it frames the dark surround and
   can never wash the flame or dim the title. Static, so it is safe under prefers-reduced-motion. */
.hero-vintage { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 44%, transparent 58%, rgba(8,5,4,0.16) 82%, rgba(8,5,4,0.30) 100%),
    radial-gradient(150% 78% at 50% 120%, rgba(150,96,42,0.085), transparent 56%); }

.hero-inner { grid-row: 2; padding-inline: var(--gutter); }
.hero .eyebrow { display: block; margin: 2.4rem 0 0; text-shadow: 0 0 5px rgba(0,0,0,0.88), 0 1px 14px rgba(0,0,0,0.6); }   /* moved below the dedication, just above the CTA */
.hero-title { margin: 0 auto; max-width: 15ch; line-height: 1.0; text-shadow: 0 0 8px rgba(0,0,0,0.92), 0 0 20px rgba(0,0,0,0.68), 0 2px 30px rgba(0,0,0,0.55); }
.hero-title .line { display: block; }
.hero-title .line:first-child { letter-spacing: -0.012em; }
.hero-title .line.serif-italic { color: var(--gold-bright); font-size: 1.16em; letter-spacing: 0.014em; margin-top: 0.08em; text-shadow: 0 0 8px rgba(0,0,0,0.92), 0 0 20px rgba(0,0,0,0.7), 0 2px 30px rgba(255,150,70,0.16), 0 2px 26px rgba(0,0,0,0.6); }
.hero-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.04rem, 2.3vw, 1.34rem); color: var(--text); opacity: 0.9; max-width: 35ch; margin: 2.3rem auto 0; line-height: 1.62; text-shadow: 0 0 6px rgba(6,5,4,0.95), 0 1px 18px rgba(6,5,4,0.9); }
.hero-cta { margin-top: 2.9rem; }
.hero-inner .hero-cta { margin-top: 1.15rem; }   /* the moved eyebrow sits just on top of the CTA on home (home-only) */
.hero-cta .btn { box-shadow: none; border-color: rgba(216,176,114,0.26); background: rgba(12,9,7,0.34); }
.hero-scroll { grid-row: 3; align-self: end; justify-self: center; padding-bottom: max(2rem, calc(1rem + env(safe-area-inset-bottom))); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); text-shadow: 0 1px 12px rgba(0,0,0,0.85); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.hero-scroll .dot { width: 1px; height: 38px; background: linear-gradient(180deg, var(--gold), transparent); animation: fall 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes fall {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  18%  { opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  92%  { opacity: 0; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---- home entrance: the words rise as the candle catches.
   Opt-in via .anim (set by app.js only when motion is allowed); with no JS the
   text is fully visible immediately. Targets are home-only (.hero-* exist only here). */
.anim .hero-inner > .eyebrow,
.anim .hero-title,
.anim .hero-sub,
.anim .hero .hero-cta { opacity: 0; transform: translateY(14px); }
.anim .hero-scroll { opacity: 0; }
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }
.anim .hero-inner > .eyebrow { animation: rise-in 0.9s var(--ease) 0.82s forwards; }   /* reveals after the dedication, with its new bottom position */
.anim .hero-title            { animation: rise-in 1.1s var(--ease) 0.45s forwards; }
.anim .hero-sub              { animation: rise-in 1.0s var(--ease) 0.72s forwards; }
.anim .hero .hero-cta        { animation: rise-in 0.95s var(--ease) 0.92s forwards; }
.anim .hero-scroll           { animation: fade-in 1.0s var(--ease) 1.25s forwards; }

/* ---- the candle catches: a one-shot warm bloom that lifts as the home opens.
   Pure CSS (plays with or without JS); pointer-events:none so it can never trap. */
.hero-veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: #060504; opacity: 1; animation: veil-lift 1.3s var(--ease) forwards; }
.hero-veil::after { content: ""; position: absolute; inset: 0; transform: scale(0.5); transform-origin: 50% 42%; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,182,108,0.55), rgba(255,150,70,0.16) 26%, transparent 52%);
  animation: veil-bloom 1.8s var(--ease) forwards; }
@keyframes veil-lift { 0% { opacity: 1; } 55% { opacity: 0.5; } 100% { opacity: 0; } }
@keyframes veil-bloom { 0% { opacity: 0; transform: scale(0.35); } 28% { opacity: 0.85; } 62% { opacity: 0.4; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.7); } }

/* recenter the lockup when the tall WebGL flame is absent (reduced-motion / no-webgl) */
.no-webgl .hero, .reduced .hero { grid-template-rows: 1fr auto 0.7fr; }
.no-webgl .candle-fallback, .reduced .candle-fallback { top: 30%; }
.reduced .hero-veil { display: none; }

/* ---- lumen: a travelling light carries you between pages (outgoing wipe) ---- */
.lumen { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,196,120,0.96), rgba(255,150,70,0.5) 34%, rgba(8,5,3,0.94) 74%); }
.lumen.out { will-change: opacity, transform; animation: lumen-out 0.62s var(--ease) forwards; }
@keyframes lumen-out { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1.45); } }
.reduced .lumen { display: none; }

/* ============================================================ THE LETTERS (timeline) */
.lt-head { text-align: center; padding-top: clamp(7rem, 14vh, 10rem); }
.lt-epigraph { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 3vw, 2rem); color: var(--gold-bright); max-width: 26ch; margin: 1.6rem auto 0; line-height: 1.4; }
.lt-note { color: var(--text-dim); max-width: 40ch; margin: 1.8rem auto 0; font-style: italic; }

.timeline { position: relative; max-width: 44rem; margin: clamp(3rem,8vh,6rem) auto; padding-left: clamp(2.2rem, 8vw, 4rem); }
.spine { position: absolute; left: clamp(0.8rem, 3.5vw, 1.6rem); top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 40%, var(--ember) 78%, var(--ember-deep) 100%); opacity: 0.5; }
.spine-bead { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gold-bright); box-shadow: 0 0 14px 4px rgba(255,180,90,0.8); will-change: top; }

.lt-bookend { position: relative; padding: 1.4rem 0 1.4rem 0.4rem; }
.lt-bookend .lt-theme { font-size: 1.5rem; }
.lt-part { margin-top: clamp(3.5rem, 8vh, 5.5rem); position: relative; }
.lt-part-head { position: relative; margin-bottom: 1rem; }
.lt-roman { position: absolute; left: -0.2rem; top: -2.4rem; font-family: var(--display); font-style: italic; font-size: clamp(4rem, 12vw, 8rem); color: var(--gold); opacity: 0.08; pointer-events: none; }
.lt-part-head h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); }
.lt-part-head p { color: var(--text-faint); font-style: italic; }

.lt-node { display: grid; grid-template-columns: 4.4rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.05rem 0.4rem; position: relative; border-bottom: 1px solid var(--line-soft); transition: background 0.4s var(--ease); }
.lt-node::before { content: ""; position: absolute; left: calc(-1 * clamp(1.4rem, 4.5vw, 2.4rem)); top: 1.5rem; width: 11px; height: 11px; border-radius: 50%; transform: translateX(-50%); background: var(--ink); border: 1.5px solid var(--ember-deep); transition: all 0.5s var(--ease); }
.lt-node:hover { background: rgba(216,176,114,0.04); }
.lt-node:hover::before { border-color: var(--gold); box-shadow: 0 0 14px 3px rgba(255,180,90,0.55); }
.lt-node.read::before { background: var(--gold); border-color: var(--gold-bright); box-shadow: 0 0 12px 3px rgba(255,180,90,0.6); }
.lt-date { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--gold-soft); text-transform: uppercase; padding-top: 0.35rem; }
.lt-titles .lt-letter { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); display: block; }
.lt-titles .lt-theme { font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--text); }
.lt-node:hover .lt-theme { color: var(--gold-bright); }
.lt-min { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); letter-spacing: 0.08em; white-space: nowrap; padding-top: 0.4rem; }

/* ============================================================ THE READING PAGE */
.reading-body { padding-bottom: 0; }
.wick-rail { position: fixed; left: clamp(0.9rem, 3vw, 2.2rem); top: 18vh; bottom: 18vh; width: 8px; z-index: 30; pointer-events: none; }
.wick-track { position: absolute; inset: 0; width: 2px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--line), var(--line-soft)); }
.wick { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scaleY(calc(1 - var(--read))); transform-origin: top; width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #e9d6b0, #b89a6a); }
.wick-flame { position: absolute; left: 50%; top: calc(var(--read) * 100%); width: 12px; height: 18px; transform: translate(-50%, -80%); border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; background: radial-gradient(ellipse at 50% 75%, #fff 4%, var(--gold-bright) 26%, var(--ember) 60%, transparent 90%); box-shadow: 0 -1px 14px rgba(255,140,60,0.7); animation: flicker 2.6s ease-in-out infinite; }
.wick-rail[hidden] { display: none; }

.letter { max-width: var(--measure); margin: 0 auto; padding: clamp(8rem, 16vh, 11rem) var(--gutter) 4rem; }
.diary-plate { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.diary-plate .eyebrow { padding-left: 0; }
.diary-plate .sep { color: var(--line); }
.letter-title { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.8rem); text-align: center; line-height: 1.02; }
.letter-byline { text-align: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.85rem; }
.letter-byline a { color: var(--gold-soft); border-bottom: 1px solid var(--line-soft); transition: color 0.3s; }
.letter-byline a:hover { color: var(--gold-bright); }
.salutation { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--gold-bright); margin: 2.2rem 0 1.1rem; }   /* sits close to its opening line, as a hand would write it */
.letter-body { font-size: clamp(1.18rem, 0.4vw + 1.06rem, 1.32rem); line-height: 1.72; }   /* the reading page gets its own type scale — never sags on mid-size laptops */
.letter-body > p { margin-bottom: 1.4em; }
.letter-body > .salutation { margin-bottom: 1.1rem; }   /* outranks the generic paragraph spacing — the greeting sits close to its opening line */
.letter-body > p + p { text-indent: 1.15em; }
.letter-body .rule-orn + p { text-indent: 0; }   /* each movement restarts flush */
.letter-body > p.dropcap { text-indent: 0; }      /* the drop-capped opening line aligns flush with its initial, not indented */
.letter-body .farewell { font-style: italic; color: var(--text-dim); text-indent: 0; margin-top: 2.2em; }   /* a real breath before the sign-off */
.letter-body .signature { text-align: right; font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--gold-bright); text-indent: 0; margin-top: 0.7em; letter-spacing: 0.02em; padding-right: 0.4em; }
.letter-body .signature::before { content: ""; display: block; width: 4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); margin: 0 0.4em 1.05rem auto; }
.dropcap::first-letter { font-family: var(--display); float: left; font-size: 3.9em; line-height: 0.72; padding: 0.04em 0.14em 0 0.02em; color: var(--gold); text-shadow: 0 0 26px rgba(255,150,70,0.35); }   /* spans a clean 3 lines, cap-top flush with line 1 */
.letter-end { margin: 3rem 0 1rem; }

.letter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 2.5rem); margin-top: 3.5rem; border-top: 1px solid var(--line-soft); padding-top: 2rem; }
.letter-nav a { display: block; min-width: 0; transition: color 0.4s var(--ease); }
.letter-nav .ln-dir { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 0.4rem; }
.letter-nav .ln-title { font-family: var(--display); font-size: 1.22rem; color: var(--text-dim); }
.letter-nav a:hover .ln-title { color: var(--gold-bright); }
.letter-nav .ln-next { text-align: right; }
.letter-nav .ln-prev:only-child { grid-column: 1; }
.letter-nav .ln-next:only-child { grid-column: 2; }
/* small phones: the two between-letter links stack instead of cramping side by side */
@media (max-width: 560px) {
  .letter-nav { grid-template-columns: 1fr; gap: 1.4rem; }
  .letter-nav .ln-next { text-align: left; border-top: 1px solid var(--line-soft); padding-top: 1.4rem; }
  .letter-nav .ln-prev:only-child, .letter-nav .ln-next:only-child { grid-column: auto; }
  .letter-nav .ln-next:only-child { border-top: 0; padding-top: 0; }
}

/* sparse embers behind the reading column edges (never over text) */
.embers { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px 2px rgba(255,140,60,0.6); opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0%{ transform: translateY(0) translateX(0); opacity:0 } 12%{opacity:0.7} 88%{opacity:0.5} 100%{ transform: translateY(-104vh) translateX(18px); opacity:0 } }

/* ============================================================ THE INDEX (constellation) */
.index-mobile-note { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1rem; min-height: 56vh; padding: 0 var(--gutter); }
.index-mobile-note .ornament-floret { color: var(--gold); font-size: 1.5rem; }
.sky-head { text-align: center; padding-top: clamp(7rem, 14vh, 10rem); }
.sky-wrap { position: relative; max-width: 70rem; margin: clamp(2rem,6vh,4rem) auto 0; padding: 0 var(--gutter) var(--section); overflow: clip; }   /* edge-star hover labels clip at the sky's edge instead of widening the page */
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sky-list { position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 0.9rem; }
.sky-list li { }
.star { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.95rem; border: 1px solid var(--line-soft); border-radius: 100px; background: rgba(13,10,8,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: all 0.45s var(--ease); }
.star .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember-deep); transition: all 0.45s var(--ease); }
.star .st-theme { font-family: var(--display); font-size: 1.14rem; color: var(--text-dim); }
.star .st-date { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--text-faint); text-transform: uppercase; }
.star:hover { border-color: var(--gold); background: rgba(34,22,12,0.6); transform: translateY(-2px); }
.star:hover .dot { background: var(--gold-bright); box-shadow: 0 0 12px 3px rgba(255,180,90,0.7); }
.star:hover .st-theme { color: var(--gold-bright); }
.star.read .dot { background: var(--gold); box-shadow: 0 0 10px 2px rgba(255,180,90,0.6); }
.star.read .st-theme { color: var(--text); }
/* active sky (desktop + JS): the letters become scattered points of light */
.sky-wrap.sky-active { min-height: min(82vh, 720px); }
.sky-active .sky-list { position: absolute; inset: 0; display: block; }
.sky-active .star { position: absolute; transform: translate(-50%, -50%); flex-direction: column; gap: 0.35rem;
  padding: 0.55rem; border: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
.sky-active .star:hover { transform: translate(-50%, -50%); background: none; }
.sky-active .star .dot { width: 7px; height: 7px; background: var(--gold-soft); box-shadow: 0 0 9px 2px rgba(216,176,114,0.3); }
.sky-active .star .st-text { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 15rem; white-space: normal; text-align: center; opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none;
  background: rgba(11,10,9,0.84); padding: 0.3rem 0.6rem; border-radius: 4px; }   /* a faint ink plate so the label reads over the starfield; long titles wrap instead of overflowing */
.sky-active .star:hover .st-text, .sky-active .star:focus-visible .st-text { opacity: 1; }
.sky-active .star:hover .dot { transform: scale(1.45); box-shadow: 0 0 16px 4px rgba(255,180,90,0.75); }
.sky-active .star.read .dot { width: 8px; height: 8px; box-shadow: 0 0 13px 3px rgba(255,180,90,0.75); }

/* ============================================================ ABOUT */
.about-hero { position: relative; min-height: 70svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.lights { position: absolute; inset: 0; z-index: -1; }
.lights i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px 3px rgba(255,180,90,0.5); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ opacity: 0.25; transform: scale(0.8) } 50%{ opacity: 0.9; transform: scale(1.1) } }
.about-hero .about-quote { font-family: var(--display); font-style: italic; font-size: clamp(1.8rem, 5vw, 3.4rem); color: var(--gold-bright); max-width: 18ch; line-height: 1.18; }
.about-hero .about-kicker { display: block; margin-bottom: 1.4rem; }
.about-body { max-width: var(--measure); margin: 0 auto; padding: var(--section) var(--gutter); }
.about-body p { margin-bottom: 1.3em; }
.about-body p + p { text-indent: 1.15em; }
.about-body p a { color: var(--gold); border-bottom: 1px solid var(--line); transition: color 0.3s; }
.about-body p a:hover { color: var(--gold-bright); }

/* iconed "find me elsewhere" link cards */
.about-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 0.7rem; margin: 2.2rem 0 0; }
.al { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--line-soft); border-radius: 5px; background: rgba(13,10,8,0.4); transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease); }
.al:hover { border-color: rgba(216,176,114,0.5); background: rgba(34,22,12,0.5); transform: translateY(-2px); }
.al-ic { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); }
.al-ic svg { width: 22px; height: 22px; }
.al:hover .al-ic { color: var(--gold-bright); }
.al-tx { display: flex; flex-direction: column; line-height: 1.25; }
.al-lb { font-family: var(--serif); font-size: 1.04rem; color: var(--text); }
.al-sb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.25rem; }
.portrait { max-width: 23rem; margin: 0 auto clamp(2.2rem, 5vh, 3.5rem); text-align: center; position: relative; }
.portrait img {
  width: 100%; height: auto; display: block; border-radius: 0;
  filter: contrast(1.08) brightness(0.9) saturate(0.78) sepia(0.16);
  -webkit-mask-image: radial-gradient(78% 90% at 50% 40%, #000 44%, transparent 86%);
  mask-image: radial-gradient(78% 90% at 50% 40%, #000 44%, transparent 86%);
}
.portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 50% at 40% 30%, rgba(255,170,90,0.16), transparent 70%); mix-blend-mode: screen;
}
.portrait figcaption { margin-top: 1.2rem; }
.portrait .pc-name { font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--gold-bright); }
.inscription { text-align: center; font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--text); max-width: 28ch; margin: 0 auto; padding: var(--section) var(--gutter); line-height: 1.4; }
.inscription .ornament-floret { display: block; margin-bottom: 1.4rem; }

/* --------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--line-soft); padding-block: clamp(2.4rem, 5vh, 3.4rem) 2.6rem; text-align: center; color: var(--text-faint); }
.site-foot .ornament-floret { margin-bottom: 1rem; }
.foot-line { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--text-faint); max-width: 44ch; margin: 0 auto 1.3rem; line-height: 1.65; }
.foot-aside { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--text-faint); opacity: 0.82; max-width: 42ch; margin: 0 auto 1.2rem; line-height: 1.6; }
.foot-fine { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--text-faint); opacity: 0.8; }   /* fine print that is still comfortably legible */

/* one-time note (letters page): the "short version" notice — gentle, dismissible, remembers via localStorage */
.note-toast { position: fixed; left: 50%; bottom: clamp(1rem, 4vh, 2.2rem); transform: translateX(-50%) translateY(0.8rem); z-index: 80; width: min(92vw, 30rem); opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.note-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.note-in { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.15rem; background: rgba(14, 11, 8, 0.96); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 55px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.note-orn { flex-shrink: 0; color: var(--gold); font-size: 1.05rem; line-height: 1.5; }
.note-text { flex: 1; margin: 0; font-family: var(--serif); font-style: italic; font-size: 0.98rem; line-height: 1.6; color: var(--text-dim); }
.note-x { flex-shrink: 0; align-self: center; cursor: pointer; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); background: none; border: 1px solid var(--line-soft); border-radius: 100px; padding: 0.45rem 0.8rem; transition: color 0.3s, border-color 0.3s; }
.note-x:hover, .note-x:focus-visible { color: var(--gold-bright); border-color: var(--gold); outline: none; }
@media (max-width: 600px) { .note-toast { left: 0.7rem; right: 0.7rem; width: auto; transform: translateY(0.8rem); } .note-toast.in { transform: translateY(0); } }

/* --------------------------------------------------------- reveal motion */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-delay="2"] { transition-delay: 0.24s; }
[data-reveal][data-delay="3"] { transition-delay: 0.36s; }

/* --------------------------------------------------------- CSS fallback candle */
.cf-glow { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 230px; height: 264px; border-radius: 50%;
  background: radial-gradient(60% 52% at 50% 38%, rgba(255,228,184,0.50) 2%, rgba(255,176,92,0.40) 24%, rgba(255,120,50,0.12) 52%, transparent 74%); filter: blur(8px); }
.cf-body { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 170px; border-radius: 6px 6px 3px 3px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,170,90,0.45), transparent 60%), linear-gradient(180deg, #f3e7cb, #d3c099 35%, #b0986f);
  box-shadow: inset -10px 0 18px rgba(0,0,0,0.3), inset 8px 0 14px rgba(255,255,255,0.18), 0 0 22px rgba(255,150,70,0.18); }
.cf-flame { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); width: 24px; height: 66px; transform-origin: 50% 92%;
  border-radius: 50% 50% 50% 50% / 78% 78% 38% 38%;
  background: radial-gradient(ellipse at 50% 74%, #ffe7bd 8%, var(--gold-bright) 24%, var(--ember) 56%, var(--ember-deep) 84%, transparent 95%);
  box-shadow: 0 -2px 26px rgba(255,140,60,0.5), 0 -1px 10px rgba(255,200,120,0.5); animation: cf-flicker 3.4s ease-in-out infinite; }
.cf-flame::before { content: ""; position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: 52%; height: 52%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 38%, #fff7e6 0%, #ffd89a 45%, transparent 78%); filter: blur(0.5px); opacity: 0.92; }
.cf-flame::after { content: ""; position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: 30%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(120,150,255,0.55), transparent 75%); }
@keyframes flicker { 0%,100%{transform:translateX(-50%) scale(1) rotate(-1deg)} 25%{transform:translateX(-51%) scale(1.04,0.97) rotate(1deg)} 50%{transform:translateX(-49%) scale(0.97,1.05) rotate(-1deg)} 75%{transform:translateX(-50%) scale(1.02,0.99) rotate(1deg)} }
@keyframes cf-flicker {
  0%,100%{ transform: translateX(-50%) scale(1) rotate(-1deg) }
  30%{ transform: translateX(-50.5%) scale(1.03,0.98) rotate(1.4deg) }
  55%{ transform: translateX(-49.5%) scale(0.98,1.04) rotate(-0.6deg) }
  78%{ transform: translateX(-50%) scale(1.02,0.99) rotate(0.8deg) }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
  .grain, .cf-flame, .cf-glow, .hero-scroll .dot, .wick-flame, .embers i, .lights i { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .embers { display: none; }
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 720px) {
  .nav { position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); background: rgba(10,8,7,0.97); flex-direction: column; justify-content: center; gap: 2rem; transform: translateX(100%); transition: transform 0.6s var(--ease); z-index: 60; }
  .nav.open { transform: none; }
  .nav a { font-size: 0.9rem; }
  .nav-toggle { display: block; z-index: 70; width: 44px; height: 44px; padding: 13px 9px; box-sizing: border-box; position: relative; }
  .nav-toggle span { position: absolute; left: 9px; width: 26px; height: 1.5px; background: var(--gold); transition: 0.4s var(--ease); }
  .nav-toggle span:nth-child(1){ top: 14px; } .nav-toggle span:nth-child(2){ top: 22px; } .nav-toggle span:nth-child(3){ top: 30px; }
  .nav-toggle.open span:nth-child(1){ top: 22px; transform: rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity: 0; }
  .nav-toggle.open span:nth-child(3){ top: 22px; transform: rotate(-45deg); }
  /* reading: wick becomes a top hairline */
  .wick-rail { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; }
  .wick-track { inset: 0; width: 100%; height: 3px; left: 0; transform: none; }
  .wick { top: 0; left: 0; width: calc(var(--read) * 100%); height: 3px; transform: none; background: linear-gradient(90deg, var(--gold-bright), var(--ember)); }
  .wick-flame { display: none; }
  .lt-node { grid-template-columns: 3.6rem 1fr; }
  .lt-min { display: none; }
  .hero { grid-template-rows: 1.8fr auto 0.4fr; }
  #candle-canvas { height: 72%; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
  .candle-fallback { top: 34%; transform: translate(-50%, -100%); width: 88px; height: 188px; }
  /* Index is desktop-only: hide its nav link + the constellation; show the phone note */
  .nav-desktop-only { display: none !important; }
  .sky-head, .sky-wrap { display: none; }
  .index-mobile-note { display: flex; }
  /* HOME phone only: hide the faint scroll dot, let the footer rise gently into the dark
     band below the CTA (it becomes the scroll cue), and compact the footer's own spacing.
     Scoped to body.home so the letters/about/reading-page footers are untouched. */
  .hero-scroll { display: none; }
  body.home .site-foot { margin-top: -4vh; padding-block: 1.4rem 1.9rem; }
  body.home .site-foot .ornament-floret { margin-bottom: 0.55rem; }
  body.home .foot-line { margin-bottom: 0.8rem; font-size: 0.98rem; }
  body.home .foot-aside { margin-bottom: 0.8rem; }
}

/* Landscape phones / very short viewports: cap the title to viewport-height so the
   lockup fits without overflow, reclaim spacing, drop the cue */
@media (max-height: 600px) {
  .hero { grid-template-rows: 1fr auto 1fr; }
  #candle-canvas { height: 100%; }
  .hero-title .line { font-size: clamp(2rem, 8vh, 2.7rem); }
  .hero-title .line.serif-italic { font-size: 1.06em; }
  .hero .eyebrow { margin: 1.2rem 0 0; }
  .hero-sub { margin-top: 0.9rem; font-size: clamp(0.95rem, 2.2vw, 1.1rem); max-width: 46ch; }
  .hero-cta { margin-top: 1.2rem; }
  .hero-scroll { display: none; }
}

/* Smallest phones: keep each title line whole (no mid-phrase orphan) */
@media (max-width: 380px) {
  .hero-title { max-width: 100%; }
  .hero-title .line { font-size: clamp(2.9rem, 13vw, 3.4rem); }
  .hero-title .line.serif-italic { font-size: 1.0em; }
}