/* ==========================================================
   J. J. Frank — Gray Hollow
   Dark, atmospheric theme. No build step.
   ========================================================== */
:root {
  --night: #06080f;
  --night-2: #0a0f1c;
  --deep: #0f1626;
  --slate: #161e31;
  --slate-2: #1d2740;
  --line: rgba(160, 170, 210, 0.16);
  --text: #e9ecf4;
  --mute: #a3adc2;
  --fog: #c6cde0;
  --violet: #b9a3ff;
  --violet-2: #8b6cf0;
  --violet-deep: #4b2a9a;
  --glow: rgba(150, 110, 255, 0.45);
  --amber: #ffc46b;
  --amber-2: #f29b38;
  --neon: #ff6fae;
  --teal: #6ff0d8;
  --radius: 14px;
  --wrap: 1180px;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(91, 52, 190, 0.22), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(40, 70, 140, 0.18), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 40%, var(--night) 100%);
  background-color: var(--night);
  min-height: 100vh;
  overflow-x: hidden;
}
/* subtle film grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; margin: 0 0 0.6em; color: #f3f1ff; }
h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--amber); color: #120c02; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(6, 8, 15, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.site-header.scrolled { background: rgba(6, 8, 15, 0.88); border-bottom-color: var(--line); }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--text); }
.brand img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,196,107,0.35), 0 0 18px rgba(255,196,107,0.25); object-fit: cover; }
.brand-name { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.18em; font-weight: 700; }
.site-nav ul { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 999px; color: var(--fog); text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; transition: color .2s, background .2s; }
.site-nav a:hover { color: #fff; background: rgba(185,163,255,0.1); }
.site-nav a[aria-current="page"] { color: #fff; background: rgba(185,163,255,0.14); box-shadow: inset 0 0 0 1px rgba(185,163,255,0.3); }
.site-nav .nav-cta a { background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: #1a1003; font-weight: 700; margin-left: 0.4rem; }
.site-nav .nav-cta a:hover { color: #1a1003; filter: brightness(1.08); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); cursor: pointer; position: relative;
}
.nav-toggle .bar { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .2s, top .3s; }
.nav-toggle .bar:nth-child(1) { top: 15px; }
.nav-toggle .bar:nth-child(2) { top: 22px; }
.nav-toggle .bar:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    background: rgba(8, 10, 20, 0.97);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 1.25rem 1.5rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .25s, visibility 0s .25s;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .25s; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .site-nav a { padding: 0.95rem 1rem; font-size: 1.1rem; border-radius: 12px; }
  .site-nav .nav-cta a { margin: 0.5rem 0 0; text-align: center; }
  .no-js .site-nav { position: static; opacity: 1; visibility: visible; transform: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.75rem 1.35rem;
  border-radius: 999px; border: 1px solid rgba(185,163,255,0.4);
  background: rgba(185,163,255,0.06);
  color: var(--text); font: 600 0.98rem/1.2 var(--body); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .25s, background .25s, border-color .25s, color .2s;
}
.btn:hover { color: #fff; border-color: var(--violet); background: rgba(185,163,255,0.14); box-shadow: 0 0 24px rgba(150,110,255,0.35); transform: translateY(-2px); }
.btn-primary, .btn-ku {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%);
  border-color: transparent; color: #1a1003;
  box-shadow: 0 8px 30px rgba(242,155,56,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover, .btn-ku:hover { color: #1a1003; background: linear-gradient(135deg, #ffd58f, var(--amber)); border-color: transparent; box-shadow: 0 10px 40px rgba(255,196,107,0.45); }
.btn-ku { min-height: 56px; padding: 0.9rem 1.7rem; font-size: 1.05rem; }
.btn-ghost { background: transparent; }
.btn-sm { white-space: nowrap; min-height: 42px; padding: 0.55rem 1rem; font-size: 0.9rem; }
.btn .ico { width: 1.15em; height: 1.15em; flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Labels ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 600 0.78rem/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--violet); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.lede { color: var(--fog); font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 60ch; }
.muted { color: var(--mute); }

/* ---------- Sky / atmosphere ---------- */
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.stars, .stars::after {
  position: absolute; inset: -50% 0 0 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 200px 160px, rgba(220,210,255,.9), transparent 60%),
    radial-gradient(1px 1px at 60px 210px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 260px 40px, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 310px 250px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 160px 300px, rgba(200,220,255,.8), transparent 60%);
  background-size: 340px 340px;
  opacity: .55;
}
.stars::after { content: ""; inset: 0; background-size: 520px 520px; background-position: 90px 140px; opacity: .6; animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .75; } }

.moon {
  position: absolute; top: 12%; right: 9%;
  width: clamp(90px, 14vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, rgba(0,0,0,.10) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 64%, rgba(0,0,0,.08) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 30%, rgba(0,0,0,.07) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 35%, #f6f3ff 0%, #d9d3f2 45%, #a69fc9 100%);
  box-shadow: 0 0 60px 10px rgba(200,185,255,.35), 0 0 180px 60px rgba(140,110,255,.18);
  opacity: .92;
}
.fog { position: absolute; left: -20%; right: -20%; height: 55%; bottom: -5%; pointer-events: none; }
.fog-1 { background: radial-gradient(ellipse 60% 55% at 30% 70%, rgba(150,160,200,.20), transparent 70%), radial-gradient(ellipse 50% 45% at 75% 80%, rgba(140,120,220,.18), transparent 70%); animation: drift 38s ease-in-out infinite alternate; }
.fog-2 { background: radial-gradient(ellipse 55% 50% at 60% 75%, rgba(170,180,215,.16), transparent 70%), radial-gradient(ellipse 45% 40% at 15% 85%, rgba(110,90,200,.15), transparent 70%); animation: drift 54s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.treeline { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(90px, 16vw, 200px); color: #05070d; }

/* ambient light particles */
.moths { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.moth {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff3c4;
  box-shadow: 0 0 8px 2px rgba(255,214,120,.9), 0 0 22px 6px rgba(185,163,255,.45);
  opacity: 0;
  animation: moth-float var(--dur, 16s) ease-in-out var(--delay, 0s) infinite, moth-flicker 2.4s ease-in-out var(--delay, 0s) infinite;
}
@keyframes moth-float {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(var(--dx, 40px), var(--dy, -60px)); }
  90% { opacity: .8; }
  100% { transform: translate(calc(var(--dx, 40px) * -0.6), calc(var(--dy, -60px) * 1.6)); opacity: 0; }
}
@keyframes moth-flicker { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(6rem, 12vw, 9rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
  background:
    radial-gradient(900px 500px at 70% 40%, rgba(110,70,230,.28), transparent 65%),
    radial-gradient(600px 400px at 15% 80%, rgba(255,111,174,.08), transparent 70%),
    linear-gradient(180deg, #05060c 0%, #0b1022 55%, #0a0d18 100%);
  overflow: hidden;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(3rem, 9vw, 6.4rem); margin-bottom: 0.15em; text-shadow: 0 0 40px rgba(150,110,255,.45); }
.hero .series-line { font-family: var(--display); font-size: clamp(1rem, 2.2vw, 1.3rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--violet); margin-bottom: 1.2rem; }
.hero .tagline { font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: #fff; line-height: 1.35; margin-bottom: 1rem; max-width: 30ch; }
.hero .desc { color: var(--fog); max-width: 54ch; margin-bottom: 1.8rem; }
.badge-new { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; font: 700 .74rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #1a1003; background: var(--amber); box-shadow: 0 0 22px rgba(255,196,107,.5); margin-bottom: 1.2rem; }
.ku-note { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; font-size: .95rem; color: var(--mute); }
.ku-note strong { color: var(--fog); font-weight: 600; }
.ku-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); flex: none; }

.hero-cover { position: relative; justify-self: center; width: min(100%, 380px); }
.hero-cover::before {
  content: ""; position: absolute; inset: -12% -18%; z-index: -1;
  background: radial-gradient(closest-side, rgba(150,110,255,.55), rgba(255,111,174,.12) 60%, transparent 75%);
  filter: blur(20px);
  animation: pulse 6s ease-in-out infinite;
}
.hero-cover img { border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(150,110,255,.35); animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 1.4rem; transform: translateX(-50%); color: var(--mute); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--violet), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-grid .copy { order: 2; }
  .hero-cover { order: 1; width: min(62vw, 260px); }
  .hero .tagline, .hero .desc { margin-inline: auto; }
  .hero .btns, .ku-note { justify-content: center; }
  .moon { top: 6%; right: 4%; }
  .scroll-cue { display: none; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(185,163,255,.35), transparent); border: 0; margin: 0; }

/* pitch chips */
.pitch { padding: clamp(2.5rem, 6vw, 4rem) 0; text-align: center; background: linear-gradient(180deg, #05070d, transparent); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.chips li { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--fog); font-size: .9rem; font-weight: 500; }
.chips li span { color: var(--amber); margin-right: .35rem; }
.pitch p { font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.75rem); line-height: 1.45; max-width: 34ch; margin: 0 auto; color: #f1eefc; }
.pitch p em { color: var(--amber); font-style: normal; }

/* ---------- Reading order ---------- */
.order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); counter-reset: book; position: relative; }
.book-step {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(29,39,64,.55), rgba(12,17,30,.75));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 1.25rem 1.25rem 1.5rem;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.book-step:hover { transform: translateY(-6px); border-color: rgba(185,163,255,.45); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(150,110,255,.18); }
.step-num { position: absolute; top: -18px; left: 1.25rem; z-index: 3; font: 700 .78rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #1a1003; background: var(--amber); padding: .5rem .8rem; border-radius: 999px; box-shadow: 0 0 20px rgba(255,196,107,.35); }
.cover-link { display: block; position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 1.25rem; perspective: 800px; }
.cover-frame { position: relative; border-radius: 8px; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.cover-frame img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.cover-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); transform: translateX(-120%); transition: transform .9s; pointer-events: none; }
.cover-link:hover .cover-frame, .cover-link:focus-visible .cover-frame { transform: rotateY(-6deg) rotateX(2deg) scale(1.02); box-shadow: 0 26px 60px rgba(0,0,0,.65), 0 0 50px rgba(150,110,255,.4); }
.cover-link:hover .cover-frame::after { transform: translateX(120%); }
.cover-link:hover img { filter: brightness(1.08) saturate(1.1); }
.book-step .meta { font: 600 .76rem/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--violet); margin-bottom: .5rem; }
.book-step h3 { margin-bottom: .4rem; }
.book-step h3 a { color: inherit; text-decoration: none; }
.book-step h3 a:hover { color: var(--amber); }
.book-step .hook { font-family: var(--display); color: #fff; font-size: 1.02rem; line-height: 1.45; margin-bottom: .75rem; }
.book-step .short { color: var(--mute); font-size: .95rem; margin-bottom: 1.25rem; flex: 1; }
.book-step .btns { gap: .5rem; }
.order-cta { text-align: center; margin-top: clamp(2rem, 5vw, 3rem); }
.order-cta p { color: var(--mute); margin-top: .75rem; font-size: .92rem; }

@media (max-width: 900px) {
  .order-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 2.5rem; }
  .book-step { display: grid; grid-template-columns: 130px 1fr; gap: 0 1.1rem; padding: 1.5rem 1.1rem 1.25rem; }
  .book-step .cover-link { grid-row: span 4; margin-bottom: 0; align-self: start; }
  .book-step .btns { grid-column: 1 / -1; margin-top: 1rem; }
  .book-step .btns .btn { flex: 1; }
  .book-step .short { margin-bottom: 0; }
}
@media (max-width: 900px) {
  .book-step .meta { display: none; }
  .book-step .vhs-rec { font-size: .85rem; top: .35rem; left: .4rem; }
  .book-step .vhs-stamp { font-size: .75rem; bottom: .35rem; right: .4rem; }
  .book-step .vhs-label { font-size: .95rem; }
}
@media (max-width: 420px) {
  .book-step { grid-template-columns: 112px 1fr; }
  .book-step .short { grid-column: 1 / -1; margin-top: .9rem; }
  .book-step .btns { margin-top: .9rem; }
}

/* ---------- VHS styling (The Lost Tapes ONLY) ---------- */
.vhs { --vhs-font: "VT323", ui-monospace, monospace; }
.vhs .cover-frame::before, .vhs-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.vhs-rec { position: absolute; z-index: 3; top: .6rem; left: .7rem; font: 400 1.15rem/1 var(--vhs-font); color: #fff; letter-spacing: .06em; text-shadow: 2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,220,255,.6); display: flex; align-items: center; gap: .35rem; }
.vhs-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: rec 1.2s steps(2, start) infinite; }
@keyframes rec { to { visibility: hidden; } }
.vhs-stamp { position: absolute; z-index: 3; bottom: .6rem; right: .7rem; font: 400 1.05rem/1 var(--vhs-font); color: #fff; text-shadow: 2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,220,255,.6); }
.vhs-label { display: inline-block; font: 400 1.15rem/1 var(--vhs-font); letter-spacing: .08em; color: #111; background: #f1ead2; padding: .3rem .6rem; border-radius: 2px; transform: rotate(-1.5deg); box-shadow: 0 2px 0 rgba(0,0,0,.4); margin-bottom: .6rem; }
.book-step.vhs { background: linear-gradient(180deg, rgba(30,30,40,.7), rgba(10,10,16,.9)); }
.book-step.vhs:hover .cover-frame img { animation: glitch .5s steps(2) 1; }
@keyframes glitch { 0% { transform: translateX(0); } 25% { transform: translateX(-3px) skewX(-2deg); } 50% { transform: translateX(3px); } 75% { transform: translateX(-1px) skewX(1deg); } 100% { transform: translateX(0); } }

/* ---------- KU band ---------- */
.ku-band { position: relative; overflow: hidden; isolation: isolate; border-block: 1px solid var(--line); background: radial-gradient(700px 300px at 20% 50%, rgba(255,196,107,.10), transparent 70%), radial-gradient(800px 400px at 85% 50%, rgba(120,80,240,.25), transparent 70%), #0a0d18; }
.ku-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fan { position: relative; height: clamp(240px, 32vw, 340px); }
.fan img { position: absolute; top: 50%; left: 50%; width: clamp(120px, 15vw, 180px); border-radius: 5px; box-shadow: 0 20px 50px rgba(0,0,0,.6); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fan img:nth-child(1) { transform: translate(-125%, -50%) rotate(-10deg); }
.fan img:nth-child(2) { transform: translate(-50%, -55%); z-index: 2; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 50px rgba(150,110,255,.35); }
.fan img:nth-child(3) { transform: translate(25%, -50%) rotate(10deg); }
.fan:hover img:nth-child(1) { transform: translate(-140%, -52%) rotate(-14deg); }
.fan:hover img:nth-child(3) { transform: translate(40%, -52%) rotate(14deg); }
@media (max-width: 760px) { .ku-grid { grid-template-columns: 1fr; text-align: center; } .ku-grid .eyebrow { justify-content: center; } .ku-grid .btns { justify-content: center; } .fan { order: -1; } }

/* ---------- Meet the kids ---------- */
.crew { text-align: center; }
.crew-names { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.5rem, 2vw, 1rem); list-style: none; margin: 0 0 2rem; padding: 0; }
.crew-names li {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 4.5vw, 2.6rem); letter-spacing: .06em;
  padding: .55em 1em; border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(185,163,255,.07), rgba(255,255,255,.01));
  transition: color .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.crew-names li:hover { color: var(--amber); border-color: rgba(255,196,107,.5); box-shadow: 0 0 30px rgba(255,196,107,.18); transform: translateY(-3px); }
.crew p { max-width: 58ch; margin-inline: auto; color: var(--fog); }
.milo { margin: 2.5rem auto 0; max-width: 640px; display: flex; gap: 1.25rem; align-items: center; text-align: left; padding: 1.4rem 1.6rem; border-radius: 18px; border: 1px solid rgba(255,196,107,.3); background: linear-gradient(135deg, rgba(255,196,107,.08), rgba(150,110,255,.06)); }
.milo svg { width: 64px; height: 64px; flex: none; color: var(--amber); filter: drop-shadow(0 0 10px rgba(255,196,107,.5)); }
.milo h3 { margin: 0 0 .25rem; }
.milo p { margin: 0; color: var(--fog); }

/* ---------- Author teaser ---------- */
.author-teaser { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 900px; margin-inline: auto; }
.lamp-mark { width: clamp(120px, 18vw, 180px); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,196,107,.3), 0 0 60px rgba(255,196,107,.2); }
@media (max-width: 640px) { .author-teaser { grid-template-columns: 1fr; text-align: center; justify-items: center; } .author-teaser .eyebrow { justify-content: center; } }

/* ---------- Newsletter ---------- */
.newsletter { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(4rem, 9vw, 6.5rem) 0; background: radial-gradient(600px 300px at 50% 100%, rgba(150,110,255,.25), transparent 70%), linear-gradient(180deg, transparent, #070a14); border-top: 1px solid var(--line); }
.newsletter .wrap { max-width: 640px; position: relative; z-index: 2; }
.newsletter p { color: var(--fog); }
.signup { margin-top: 1.75rem; }
.signup-row { display: flex; gap: .6rem; padding: .4rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.signup input { flex: 1; min-width: 0; min-height: 48px; padding: 0 1.1rem; border: 0; background: transparent; color: var(--text); font: 500 1rem var(--body); border-radius: 999px; }
.signup input::placeholder { color: #8a93a8; }
.signup input:focus { outline: none; }
.signup-row:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(185,163,255,.25); }
.form-msg { min-height: 1.5em; margin: .9rem 0 0; color: var(--amber); }
.signup-note { font-size: .85rem; color: var(--mute) !important; margin: 0; }
@media (max-width: 480px) { .signup-row { flex-direction: column; border-radius: 18px; } .signup .btn { width: 100%; } }

/* ---------- Page header (inner pages) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) 0 clamp(3rem, 8vw, 5.5rem); margin-top: calc(var(--header-h) * -1); background: radial-gradient(800px 400px at 75% 30%, rgba(110,70,230,.25), transparent 70%), linear-gradient(180deg, #05060c, #0b1022); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { text-shadow: 0 0 40px rgba(150,110,255,.4); }
.page-hero .moon { width: clamp(70px, 9vw, 120px); top: 22%; right: 7%; }

/* ---------- Books page rows ---------- */
.series-rows { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.series-row { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(29,39,64,.5), rgba(10,14,25,.8)); }
.series-row .cover-link { margin: 0; }
.series-row .meta { font: 600 .78rem/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--violet); margin-bottom: .6rem; }
.series-row .hook { font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: #fff; line-height: 1.4; }
.series-row .short { color: var(--fog); max-width: 62ch; }
.series-row .num { font-family: var(--display); font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(185,163,255,.5); float: right; margin-left: 1rem; }
.series-row.vhs { background: linear-gradient(135deg, rgba(36,34,44,.7), rgba(10,10,14,.9)); }
.coming-card { text-align: center; padding: 2.5rem 1.5rem; border-radius: 22px; border: 1px dashed rgba(185,163,255,.35); background: rgba(185,163,255,.04); }
.coming-card .icon { font-size: 1.6rem; color: var(--violet); text-shadow: 0 0 18px var(--violet); }
@media (max-width: 760px) {
  .series-row { grid-template-columns: 1fr; text-align: center; }
  .series-row .cover-link { width: min(60vw, 230px); margin-inline: auto; }
  .series-row .num { float: none; display: block; margin: 0 0 .25rem; }
  .series-row .btns { justify-content: center; }
  .series-row .short { margin-inline: auto; }
}

/* ---------- Book detail ---------- */
.book-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)) 0 clamp(3rem, 8vw, 6rem); background: linear-gradient(180deg, #05060c, #0b1022); }
.book-hero .backdrop { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center 20%; filter: blur(40px) saturate(1.2) brightness(.45); transform: scale(1.1); opacity: .9; }
.book-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,8,15,.4), rgba(6,8,15,.65) 60%, var(--night)); }
.book-detail { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; position: relative; z-index: 2; }
.book-detail .cover-wrap { position: relative; }
.book-detail .cover-wrap::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(closest-side, rgba(150,110,255,.5), transparent 75%); filter: blur(18px); }
.book-detail .cover { border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.book-detail .label { font: 600 .8rem/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--violet); margin-bottom: .75rem; }
.book-detail h1 { margin-bottom: .2em; }
.book-detail .byline { color: var(--mute); margin: 0 0 1.25rem; }
.book-detail .tagline { font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: #fff; line-height: 1.4; margin-bottom: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--amber); }
.blurb p { color: var(--fog); }
.blurb .closing { font-family: var(--display); color: var(--amber); font-size: 1.1rem; }
.book-detail .btns { margin-top: 1.75rem; }
.book-facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.book-facts li { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; color: var(--fog); background: rgba(255,255,255,.03); }
@media (max-width: 760px) {
  .book-detail { grid-template-columns: 1fr; text-align: center; }
  .book-detail .cover-wrap { width: min(62vw, 250px); margin-inline: auto; }
  .book-detail .tagline { border-left: 0; padding-left: 0; }
  .book-detail .btns, .book-facts { justify-content: center; }
  .book-detail .btns .btn { flex: 1 1 100%; }
  .blurb { text-align: left; }
}

/* reading order stepper */
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stepper a, .stepper .current { display: flex; align-items: center; gap: .9rem; padding: .8rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); text-decoration: none; color: var(--text); height: 100%; transition: border-color .3s, background .3s, transform .3s; }
.stepper a:hover { border-color: rgba(185,163,255,.5); background: rgba(185,163,255,.08); transform: translateY(-3px); color: #fff; }
.stepper .current { border-color: rgba(255,196,107,.55); background: rgba(255,196,107,.07); }
.stepper img { width: 54px; border-radius: 3px; box-shadow: 0 6px 16px rgba(0,0,0,.5); flex: none; }
.stepper small { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); }
.stepper .current small { color: var(--amber); }
.stepper strong { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
@media (max-width: 700px) { .stepper { grid-template-columns: 1fr; } }

/* Lost Tapes page (VHS only here) */
.book-hero.vhs::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); }
.book-hero.vhs .tracking { position: absolute; left: 0; right: 0; height: 40px; top: 30%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent); animation: tracking 7s linear infinite; }
@keyframes tracking { from { transform: translateY(-40vh); } to { transform: translateY(80vh); } }
.vhs-cover { position: relative; border-radius: 6px; overflow: hidden; }
.vhs .vhs-h1 { text-shadow: 3px 0 rgba(255,0,80,.55), -3px 0 rgba(0,220,255,.55); }
.vhs .vhs-osd { font: 400 1.25rem/1 var(--vhs-font); letter-spacing: .1em; display: inline-flex; gap: 1rem; margin-bottom: .9rem; color: #fff; text-shadow: 2px 0 rgba(255,0,80,.5), -2px 0 rgba(0,220,255,.5); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-portrait { border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,196,107,.25), 0 30px 70px rgba(0,0,0,.6), 0 0 70px rgba(255,196,107,.12); }
.bio p { color: var(--fog); font-size: 1.1rem; }
.quote-card { margin: 2rem 0 0; padding: 1.4rem 1.6rem; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(150,110,255,.1), rgba(255,196,107,.05)); font-family: var(--display); font-size: 1.15rem; color: #fff; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-portrait { width: min(70vw, 260px); margin-inline: auto; } }

/* ---------- Contact ---------- */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.social-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.75rem 1.5rem; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(29,39,64,.6), rgba(10,14,25,.9)); transition: transform .35s, border-color .35s, box-shadow .35s; }
.social-card::before { content: ""; position: absolute; width: 200px; height: 200px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(closest-side, var(--c, rgba(150,110,255,.3)), transparent); }
.social-card:hover { transform: translateY(-5px); border-color: rgba(185,163,255,.45); box-shadow: 0 0 40px rgba(150,110,255,.15); }
.social-card > * { position: relative; }
.social-card .s-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); margin-bottom: 1rem; color: #fff; }
.social-card .s-ico svg { width: 22px; height: 22px; }
.social-card h3 { margin-bottom: .35rem; }
.social-card p { color: var(--mute); }
.social-card .handle { font-weight: 600; color: var(--fog); margin-top: auto; padding-top: .25rem; word-break: break-all; }
.social-card .btn { margin-top: .5rem; align-self: flex-start; }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); background: #04050a; padding: 3rem 0 2rem; color: var(--mute); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2.25rem; }
.footer-grid h4 { font-size: .8rem; font-family: var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--fog); margin-bottom: .9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-grid a { color: var(--mute); text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-brand .brand-name { display: block; font-size: 1.3rem; color: var(--text); margin-bottom: .5rem; }
.footer-brand p { max-width: 36ch; }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--fog); transition: color .2s, border-color .2s, box-shadow .2s; }
.footer-social a:hover { color: #fff; border-color: var(--violet); box-shadow: 0 0 18px rgba(150,110,255,.35); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .moths { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   v3 additions
   ========================================================== */
.sample-link { margin: 1.25rem 0 0; font-weight: 600; }
.sample-link a { color: var(--amber); }

/* ---------- Sample chapter reader ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--violet-2), var(--amber)); box-shadow: 0 0 12px rgba(255,196,107,.6); }
.sample-hero { padding-bottom: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.sample-hero .eyebrow { justify-content: center; }
.sample-hero .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.sample-hero .lede { margin-inline: auto; }
.ch-num { display: block; font-size: .32em; letter-spacing: .4em; text-transform: uppercase; color: var(--violet); margin-bottom: .5em; }
.reader-wrap { --rfs: 1.18rem; padding: 0 1.25rem clamp(3rem, 8vw, 5rem); transition: background .4s, color .4s; }
.reader-tools { position: sticky; top: calc(var(--header-h) + 10px); z-index: 20; display: flex; justify-content: center; gap: .4rem; margin: 0 auto 2rem; width: max-content; padding: .35rem; border-radius: 999px; background: rgba(10,13,24,.85); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tool { min-width: 44px; min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 0; background: transparent; color: var(--fog); font: 600 .9rem var(--body); cursor: pointer; }
.tool:hover, .tool[aria-pressed="true"] { background: rgba(185,163,255,.16); color: #fff; }
.reader { max-width: 38em; margin: 0 auto; font-family: "Lora", Georgia, "Times New Roman", serif; font-size: var(--rfs); line-height: 1.85; color: #e6e3ee; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem); border-radius: 6px; background: linear-gradient(180deg, rgba(20,26,42,.6), rgba(12,16,28,.6)); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.35); hyphens: auto; -webkit-hyphens: auto; }
.reader p { margin: 0; text-indent: 1.5em; }
.reader p.first, .reader .scene-break + .sr-only + p { text-indent: 0; }
.reader p.first::first-letter { font-family: var(--display); float: left; font-size: 3.6em; line-height: .8; padding: .08em .1em 0 0; color: var(--amber); }
.reader .scene-break { text-indent: 0; text-align: center; letter-spacing: .6em; color: var(--violet); margin: 1.6em 0; font-size: .9em; }
.reader .end-mark { text-align: center; text-indent: 0; color: var(--violet); margin-top: 2em; }
.reader em { font-style: italic; }
.reader-wrap[data-theme="sepia"] { background: #efe4cc; }
.reader-wrap[data-theme="sepia"] .reader { background: #f6eedb; color: #2f2619; border-color: #dccba5; box-shadow: 0 20px 50px rgba(60,40,10,.18); }
.reader-wrap[data-theme="sepia"] .reader p.first::first-letter { color: #8a4b12; }
.reader-wrap[data-theme="sepia"] .reader .scene-break, .reader-wrap[data-theme="sepia"] .reader .end-mark { color: #7a5a2a; }
.reader-wrap[data-theme="sepia"] .keep-reading { background: #2a2118; }
.reader-wrap[data-theme="sepia"] .excerpt-note { color: #5b4a33; }
.reader-wrap[data-theme="sepia"] .reader-tools { background: rgba(246,238,219,.92); border-color: #dccba5; }
.reader-wrap[data-theme="sepia"] .tool { color: #4a3b26; }
.reader-wrap[data-theme="sepia"] .tool:hover, .reader-wrap[data-theme="sepia"] .tool[aria-pressed="true"] { background: rgba(138,75,18,.14); color: #2f2619; }
.keep-reading { max-width: 860px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; display: grid; grid-template-columns: 170px 1fr; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: 22px; border: 1px solid rgba(255,196,107,.35); background: radial-gradient(500px 250px at 85% 0%, rgba(150,110,255,.25), transparent 70%), linear-gradient(135deg, #141a2c, #0b0f1c); color: var(--text); }
.keep-reading img { border-radius: 5px; box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 40px rgba(150,110,255,.3); }
.keep-reading h2 { font-size: clamp(1.45rem, 3.6vw, 2.1rem); }
.keep-reading p { color: var(--fog); }
.keep-reading .fine { font-size: .85rem; color: var(--mute); margin: 1rem 0 0; }
.excerpt-note { text-align: center; color: var(--mute); font-size: .85rem; margin: 2rem 0 0; }
@media (max-width: 640px) {
  .reader-wrap { --rfs: 1.08rem; padding-inline: .75rem; }
  .reader { padding: 1.5rem 1.15rem; line-height: 1.8; }
  .keep-reading { grid-template-columns: 1fr; text-align: center; }
  .keep-reading img { width: 150px; margin-inline: auto; }
  .keep-reading .eyebrow, .keep-reading .btns { justify-content: center; }
  .keep-reading .btn { flex: 1 1 100%; }
}

/* ---------- 404 ---------- */
.lost-hero { text-align: center; }
.lost-copy { position: relative; z-index: 2; max-width: 760px; }
.lost-copy .eyebrow { justify-content: center; }
.lost-copy .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.lost-copy h1 { font-size: clamp(2.2rem, 6.5vw, 4.2rem); text-shadow: 0 0 40px rgba(150,110,255,.45); }
.lost-copy .lede { margin: 0 auto 2rem; }
.lost-copy .btns { justify-content: center; }

/* ---------- Lost Tapes deck (VHS, Lost Tapes page only) ---------- */
.tape-deck-section { background: radial-gradient(700px 400px at 50% 30%, rgba(120,80,240,.18), transparent 70%); }
.deck { max-width: 560px; margin: 0 auto; text-align: center; }
.deck-screen { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: 300px; width: 100%; margin: 0 auto 1.5rem; border-radius: 18px / 22px; background: radial-gradient(ellipse at center, #10162a 0%, #05070d 80%); border: 10px solid #15151b; box-shadow: inset 0 0 60px rgba(0,0,0,.9), 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.deck-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
.osd { position: absolute; top: .8rem; font: 400 1.45rem/1 var(--vhs-font); color: #fff; letter-spacing: .06em; text-shadow: 2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,220,255,.6); z-index: 2; }
.osd-l { left: 1rem; } .osd-r { right: 1rem; }
.deck-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 2.5rem 1.5rem 1rem; margin: 0; font: 400 clamp(1.3rem, 4.5vw, 1.9rem)/1.3 var(--vhs-font); color: #e9e6ff; letter-spacing: .05em; text-shadow: 2px 0 rgba(255,0,80,.55), -2px 0 rgba(0,220,255,.55); z-index: 2; }
.deck-static { position: absolute; inset: -20%; opacity: 0; z-index: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.deck[data-state="rewind"] .deck-static { opacity: .45; animation: static-shift .18s steps(3) infinite; }
.deck[data-state="rewind"] .deck-msg { animation: roll .35s linear infinite; }
.deck[data-state="play"] .deck-static { opacity: .08; }
@keyframes static-shift { 0% { transform: translate(0,0); } 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -3%); } 100% { transform: translate(0,0); } }
@keyframes roll { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
.cassette { display: block; width: min(100%, 360px); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; transition: transform .3s, filter .3s; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.cassette:hover { transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 22px 34px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(150,110,255,.35)); }
.cassette svg { width: 100%; height: auto; display: block; }
.reel { transform-box: fill-box; transform-origin: center; }
.deck[data-state="rewind"] .reel { animation: spin-rev .35s linear infinite; }
.deck[data-state="play"] .reel { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
.deck-hint { margin-top: 1rem; font-size: .92rem; }

/* ---------- Cursor light trail + swarm (easter egg) ---------- */
.trail-moth { position: fixed; z-index: 90; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; background: #fff3c4; box-shadow: 0 0 8px 2px rgba(255,214,120,.85), 0 0 18px 5px rgba(185,163,255,.4); animation: trail-fade 1s ease-out forwards; }
@keyframes trail-fade { from { opacity: .9; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--tx, 0), var(--ty, -24px)) scale(.3); } }
.swarm { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.swarm .moth { opacity: 0; animation: swarm-fly var(--dur, 3.5s) cubic-bezier(.3,.6,.3,1) var(--delay, 0s) forwards, moth-flicker 1.2s ease-in-out infinite; }
@keyframes swarm-fly { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }
.egg-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 96; transform: translateX(-50%); padding: .7rem 1.2rem; border-radius: 999px; background: rgba(10,13,24,.9); border: 1px solid rgba(255,196,107,.45); color: var(--amber); font: 600 .92rem var(--body); box-shadow: 0 0 30px rgba(255,196,107,.25); animation: toast 4s ease forwards; pointer-events: none; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.moon { pointer-events: auto; cursor: default; }
@media (prefers-reduced-motion: reduce) { .trail-moth, .swarm { display: none; } }
/* let the moon receive taps through hero content wrappers */
.hero-grid, .page-hero > .wrap, .lost-copy { pointer-events: none; }
.hero-grid > *, .page-hero > .wrap > *, .lost-copy > * { pointer-events: auto; }
@media (max-width: 640px) {
  .sample-hero .eyebrow::before, .sample-hero .eyebrow::after { display: none; }
  .sample-hero .eyebrow { letter-spacing: .16em; }
  .sample-hero .moon { top: auto; bottom: 12%; right: 5%; width: 54px; }
}

/* ---------- Coming soon: The Lost Tapes, Volume II ---------- */
.cs-ribbon { position: absolute; z-index: 4; top: 26px; right: -52px; width: 200px; transform: rotate(45deg); text-align: center; padding: .55rem 0; font: 700 .72rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #1a1003; background: linear-gradient(180deg, #ffd48a, var(--amber)); box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 22px rgba(255,196,107,.35); pointer-events: none; }
.cs-ribbon.sm { top: 30px; right: -36px; width: 150px; padding: .38rem 0; font-size: .55rem; letter-spacing: .18em; }
.soon-notify { margin: 1.25rem 0 0; }
.soon-notify a { font-weight: 600; color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(255,196,107,.4); padding-bottom: 2px; }
.soon-notify a:hover, .soon-notify a:focus-visible { color: #fff; border-color: #fff; }
.soon-cover .cover-frame img, .soon-cover-lg .cover-frame img { aspect-ratio: 600 / 927; }

/* reading-order entry 04 */
.book-step-soon { grid-column: 1 / -1; display: grid; grid-template-columns: 150px 1fr; gap: 0 1.75rem; align-items: center; max-width: 760px; width: 100%; margin: .75rem auto 0; padding: 1.75rem 1.5rem 1.5rem; border-style: dashed; border-color: rgba(185,163,255,.35); }
.book-step-soon .cover-link { margin-bottom: 0; }
.book-step-soon .short { margin-bottom: 0; }
.book-step-soon h3 { margin-bottom: .4rem; }
@media (max-width: 900px) {
  .book-step-soon { max-width: none; margin-top: 0; grid-template-columns: 130px 1fr; gap: 0 1.1rem; padding: 1.5rem 1.1rem 1.25rem; align-items: start; }
  .book-step-soon .cover-link { grid-row: auto; }
}
@media (max-width: 420px) { .book-step-soon { grid-template-columns: 112px 1fr; } }

/* home section */
.coming-soon { border-top: 1px solid var(--line); background: radial-gradient(700px 360px at 30% 50%, rgba(150,110,255,.16), transparent 70%), linear-gradient(180deg, #0a0d18, var(--night)); }
.soon-grid { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; max-width: 960px; margin-inline: auto; }
.soon-cover-lg { position: relative; }
.soon-cover-lg::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(closest-side, rgba(150,110,255,.45), transparent 75%); filter: blur(18px); }
.soon-text .eyebrow { display: flex; }
.soon-text h2 { margin: .4rem 0 .75rem; }
.soon-text .vhs-label { margin-top: .25rem; }
.soon-text .lede { margin: 0; }
@media (max-width: 760px) {
  .soon-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .soon-cover-lg { width: min(62vw, 260px); }
  .soon-text .eyebrow { justify-content: center; }
  .soon-text .lede { margin-inline: auto; }
}

/* books page row */
.series-row-soon { border-style: dashed; border-color: rgba(185,163,255,.35); }