*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --cream: #FDF6EC;
  --amber: #E8874A;
  --amber-deep: #C45D1E;
  --gold: #C9963C;
  --night: #0F1322;
  --star: #F5D782;
  --muted: rgba(253,246,236,0.55);
  --border: rgba(253,246,236,0.1);
}
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}

/* Starfield */
#stars { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.star {
  position:absolute; border-radius:50%; background:var(--star);
  animation: twinkle var(--d,3s) ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity:0.1; transform:scale(0.8); }
  to   { opacity:var(--o,0.7); transform:scale(1.2); }
}

/* Moon */
.moon {
  position:fixed; top:36px; right:60px;
  width:80px; height:80px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFF4CC, #F5D782, #C9963C);
  box-shadow: 0 0 50px 15px rgba(245,215,130,0.25);
  z-index:1;
  animation: moonGlow 5s ease-in-out infinite alternate;
}
@keyframes moonGlow {
  from { box-shadow: 0 0 50px 15px rgba(245,215,130,0.2); }
  to   { box-shadow: 0 0 80px 30px rgba(245,215,130,0.4); }
}

/* Hills */
.hills { position:fixed; bottom:0; left:0; width:100%; height:180px; z-index:1; pointer-events:none; }

/* Layout */
.wrap { position:relative; z-index:10; max-width:860px; margin:0 auto; padding:0 24px 200px; }

/* Hero */
.hero { text-align:center; padding:56px 0 28px; }
.now-playing {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,150,60,0.12); border:1px solid rgba(201,150,60,0.35);
  border-radius:50px; padding:7px 18px;
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:40px;
}
.pulse { width:7px; height:7px; border-radius:50%; background:var(--amber); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.6)} }

.eyebrow { font-family:'Lora',serif; font-style:italic; font-size:17px; color:var(--gold); margin-bottom:14px; }
h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(40px,8vw,72px);
  font-weight:900; line-height:0.95; letter-spacing:-2px;
}
h1 .accent { color:var(--amber); font-style:italic; display:block; }
.tagline {
  font-family:'Lora',serif; font-size:clamp(15px,2.2vw,18px);
  color:var(--muted); line-height:1.8; max-width:520px; margin:24px auto 0;
}

/* Cover + CTA */
.cover-cta { text-align:center; margin-top:0; }
.cover-wrap {
  width:100%; max-width:540px; aspect-ratio:1/1;
  border-radius:28px; overflow:hidden; margin:0 auto 40px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08),
              0 0 120px 20px rgba(201,150,60,0.12);
  position:relative;
}
.cover-wrap img { width:100%; height:100%; object-fit:cover; display:block; }

/* Buttons */
.cta-group { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:0; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--amber); color:#1A0A00;
  font-weight:600; font-size:15px; padding:14px 28px; border-radius:50px;
  text-decoration:none; border:none; cursor:pointer; transition:all 0.22s;
}
.btn-primary:hover { background:var(--amber-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(232,135,74,0.4); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--cream); font-weight:500; font-size:15px;
  padding:14px 24px; border-radius:50px; text-decoration:none;
  border:1.5px solid rgba(253,246,236,0.22); cursor:pointer; transition:all 0.22s;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* Listen on strip */
.listen-strip {
  margin-top:36px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.listen-label {
  width:100%; text-align:center;
  font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
  color:rgba(253,246,236,0.3); margin-bottom:4px;
}
.platform-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:50px; padding:10px 18px; font-size:13px; font-weight:500;
  color:rgba(253,246,236,0.7); text-decoration:none; transition:all 0.2s;
}
.platform-pill:hover { background:rgba(255,255,255,0.1); color:var(--cream); border-color:rgba(201,150,60,0.4); transform:translateY(-1px); }
.platform-pill .picon { font-size:16px; }

/* Community strip */
.community-strip {
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.community-label {
  width:100%; text-align:center;
  font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
  color:rgba(253,246,236,0.3); margin-bottom:4px;
}

/* Divider */
.divider { height:1px; background:var(--border); margin:60px 0; position:relative; }
.divider::after {
  content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--night); padding:0 12px; color:var(--gold); font-size:12px;
}

/* About / Story section */
.story-section {
  background:rgba(45,74,62,0.18); border:1px solid rgba(45,74,62,0.45);
  border-radius:24px; padding:48px 44px; margin-bottom:0;
}
.story-section h2 {
  font-family:'Playfair Display',serif; font-size:clamp(22px,3.5vw,30px);
  font-weight:700; margin-bottom:20px;
}
.story-section p {
  font-family:'Lora',serif; font-size:clamp(14px,1.8vw,16px);
  line-height:1.85; color:rgba(253,246,236,0.75); margin-bottom:16px;
}
.story-section p:last-child { margin-bottom:0; }
.story-highlight {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;
}
.story-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(201,150,60,0.1); border:1px solid rgba(201,150,60,0.25);
  border-radius:50px; padding:8px 16px; font-size:13px; color:var(--gold);
}

/* Episodes */
.section-title { font-family:'Playfair Display',serif; font-size:clamp(24px,4vw,34px); font-weight:700; margin-bottom:6px; text-align:center; }
.section-sub { text-align:center; color:var(--muted); font-size:14px; margin-bottom:36px; }
.episodes-loading { text-align:center; padding:48px 0; color:var(--muted); font-family:'Lora',serif; font-style:italic; }
@keyframes dots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} 100%{content:''} }
.loading-dots::after { content:'.'; animation: dots 1.5s infinite; }
.episodes-grid { display:flex; flex-direction:column; gap:14px; }
.ep-card {
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:16px; padding:22px 26px;
  display:flex; align-items:flex-start; gap:18px;
  transition:all 0.2s; text-decoration:none; color:inherit;
}
.ep-card:hover { background:rgba(201,150,60,0.07); border-color:rgba(201,150,60,0.25); transform:translateY(-2px); }
.ep-card.latest { border-color:rgba(232,135,74,0.35); background:rgba(232,135,74,0.06); }
.ep-num { font-family:'Playfair Display',serif; font-size:26px; font-weight:900; color:rgba(253,246,236,0.12); line-height:1; min-width:34px; padding-top:2px; }
.ep-card.latest .ep-num { color:rgba(232,135,74,0.35); }
.ep-body { flex:1; min-width:0; }
.ep-meta { display:flex; align-items:center; gap:10px; margin-bottom:5px; flex-wrap:wrap; }
.ep-badge { font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; background:var(--amber); color:#1A0A00; padding:3px 10px; border-radius:50px; }
.ep-date { font-size:12px; color:rgba(253,246,236,0.35); }
.ep-title { font-family:'Playfair Display',serif; font-size:clamp(15px,2.2vw,19px); font-weight:700; line-height:1.3; margin-bottom:6px; }
.ep-desc { font-size:13px; line-height:1.65; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ep-play { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--amber); color:#1A0A00; font-size:15px; flex-shrink:0; margin-top:2px; transition:all 0.2s; }
.ep-card:hover .ep-play { background:var(--amber-deep); transform:scale(1.08); }
.ep-error { text-align:center; padding:40px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:16px; }
.ep-error p { color:var(--muted); font-size:14px; margin-bottom:16px; }

/* Footer */
footer { position:relative; z-index:10; text-align:center; padding:40px 24px; font-size:12px; color:rgba(253,246,236,0.22); letter-spacing:0.05em; }

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.fade1 { animation: fadeUp 0.7s 0.0s ease both; }
.fade2 { animation: fadeUp 0.7s 0.15s ease both; }
.fade3 { animation: fadeUp 0.7s 0.3s ease both; }
.fade4 { animation: fadeUp 0.7s 0.45s ease both; }
.fade5 { animation: fadeUp 0.7s 0.6s ease both; }

@media(max-width:600px) {
  .moon { width:55px; height:55px; top:20px; right:20px; }
  .story-section { padding:32px 24px; }
  .cover-wrap { max-width:92vw; }
}

/* ============================================================
   Multi-page additions (same tokens, cards and pills as above)
   ============================================================ */
html { scroll-padding-top: 24px; }
img { max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-60px; z-index:100; background:var(--amber); color:#1A0A00; padding:10px 18px; border-radius:50px; font-weight:600; text-decoration:none; }
.skip-link:focus { top:12px; }
a:focus-visible, button:focus-visible, iframe:focus-visible { outline:2px solid var(--star); outline-offset:3px; border-radius:12px; }
.btn-primary:focus-visible, .btn-outline:focus-visible, .platform-pill:focus-visible, .nav-link:focus-visible { border-radius:50px; }

/* Site navigation */
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 0; }
.nav-brand { display:inline-flex; align-items:center; gap:0.28em; min-height:40px; font-family:'Playfair Display',serif; font-weight:700; font-size:17px; color:var(--cream); text-decoration:none; white-space:nowrap; }
.nav-brand span { color:var(--gold); }
.nav-links { display:flex; gap:6px; list-style:none; flex-wrap:wrap; }
.nav-link { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:50px; font-size:14px; font-weight:500; color:rgba(253,246,236,0.7); text-decoration:none; border:1px solid transparent; transition:all 0.2s; }
.nav-link:hover { color:var(--cream); background:rgba(255,255,255,0.05); border-color:rgba(201,150,60,0.35); }
.nav-link[aria-current] { color:var(--gold); background:rgba(201,150,60,0.12); border-color:rgba(201,150,60,0.35); }

/* Homepage: "Start with a story for..." */
.choice-section { text-align:center; }
.choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:8px; text-align:left; }
.choice-card { display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:16px; padding:20px 22px; text-decoration:none; color:inherit; transition:all 0.2s; }
.choice-card:hover { background:rgba(201,150,60,0.07); border-color:rgba(201,150,60,0.3); transform:translateY(-2px); }
.choice-icon { font-size:22px; line-height:1.2; flex-shrink:0; }
.choice-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; margin-bottom:4px; }
.choice-cue { font-family:'Lora',serif; font-size:14px; line-height:1.6; color:var(--muted); }
.choice-more { margin-top:26px; }

/* Page header for inner pages */
.page-head { text-align:center; padding:48px 0 12px; }
.page-head h1 { font-size:clamp(38px,7vw,60px); }
.page-intro { font-family:'Lora',serif; font-size:clamp(15px,2.2vw,17px); color:var(--muted); line-height:1.8; max-width:560px; margin:20px auto 0; }

/* Archive */
.jump-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px; }
.shelf { margin-top:56px; scroll-margin-top:24px; }
.shelf-head { display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.shelf h2 { font-family:'Playfair Display',serif; font-size:clamp(24px,4vw,32px); font-weight:700; }
.shelf-note { font-family:'Lora',serif; font-style:italic; color:var(--gold); font-size:15px; margin-bottom:20px; }
.shelf .episodes-grid { gap:12px; }
.story-card .ep-desc { -webkit-line-clamp:unset; display:block; font-family:'Lora',serif; font-size:14px; }
.story-card .ep-title { margin-bottom:6px; }
.story-card .ep-play { margin-top:0; align-self:center; }

/* Story page */
.story-page { padding-top:44px; }
.story-eyebrow { display:inline-flex; align-items:center; gap:8px; min-height:40px; background:rgba(201,150,60,0.12); border:1px solid rgba(201,150,60,0.35); border-radius:50px; padding:7px 18px; font-size:13px; font-weight:500; color:var(--gold); text-decoration:none; }
.story-eyebrow:hover { background:rgba(201,150,60,0.2); }
.story-page h1 { font-size:clamp(36px,7vw,60px); line-height:1.02; letter-spacing:-1.5px; margin:22px 0 22px; }
.story-desc { font-family:'Lora',serif; font-size:clamp(16px,2.2vw,18px); line-height:1.85; color:rgba(253,246,236,0.8); max-width:640px; }
.story-facts { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 30px; list-style:none; }
.story-actions { display:flex; flex-wrap:wrap; gap:12px; }
.player { margin-top:34px; border-radius:16px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.5); background:rgba(255,255,255,0.04); }
.player iframe { display:block; width:100%; height:232px; border:0; }
.player-note { font-size:12px; color:rgba(253,246,236,0.35); margin-top:10px; }
.browse-show { margin-top:44px; padding-top:28px; border-top:1px solid var(--border); }
.browse-show h2 { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; margin-bottom:6px; }
.browse-show p { font-size:14px; color:var(--muted); margin-bottom:14px; }
.browse-show .pills { display:flex; flex-wrap:wrap; gap:10px; }
.back-link { display:inline-flex; align-items:center; gap:8px; margin-top:40px; font-size:15px; font-weight:500; color:var(--gold); text-decoration:none; padding:10px 0; }
.back-link:hover { color:var(--star); text-decoration:underline; text-underline-offset:4px; }

/* Footer nav */
.footer-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin-bottom:12px; list-style:none; }
.footer-nav a { display:inline-block; padding:10px 4px; color:rgba(253,246,236,0.55); text-decoration:none; font-size:13px; }
.footer-nav a:hover { color:var(--gold); }

@media(max-width:600px) {
  .site-nav { padding-right:66px; }  /* keep links clear of the moon */
  .nav-brand { display:none; }
  .nav-link { padding:8px 13px; font-size:13.5px; }
  .choice-grid { grid-template-columns:1fr; }
  .ep-card { padding:18px 18px; gap:14px; }
  .story-actions a { flex:1 1 100%; justify-content:center; }
}

/* Reduced motion: stop twinkle, glow, pulse and entrance animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .star { opacity:0.5; }
}

/* ============================================================
   Phase 2: theme shelves on /stories/ and related stories
   ============================================================ */
.jump-count { font-size:11px; color:rgba(253,246,236,0.4); }
.theme-shelf { margin-top:72px; scroll-margin-top:24px; }
.theme-head { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center; margin-bottom:24px; }
.theme-shelf.no-art .theme-head { grid-template-columns:1fr; border-left:3px solid var(--gold); padding-left:20px; }
.theme-art { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; border-radius:24px; display:block;
  box-shadow:0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), 0 0 70px 8px rgba(201,150,60,0.1); }
.theme-text h2 { font-family:'Playfair Display',serif; font-size:clamp(28px,4.5vw,38px); font-weight:700; line-height:1.1; }
.theme-sub { font-family:'Lora',serif; font-style:italic; font-size:clamp(15px,2vw,17px); line-height:1.6; color:var(--gold); margin-top:10px; max-width:440px; }
.theme-count { font-size:13px; color:rgba(253,246,236,0.4); margin-top:12px; }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.theme-grid .ep-card { padding:18px 20px; align-items:center; }
.story-card .ep-date { display:block; margin:0 0 4px; font-size:12px; color:rgba(253,246,236,0.45); }
.story-card .ep-title { font-size:17px; margin-bottom:4px; }
.bundle-label { display:inline-block; margin:-8px 0 18px; font-size:13px; font-weight:500; color:var(--star); border:1px dashed rgba(245,215,130,0.45); border-radius:50px; padding:5px 14px; }
.more-stories { margin-top:48px; }
.more-stories h2 { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; margin-bottom:16px; }
.more-stories .btn-outline { margin-top:18px; }
@media(max-width:600px) {
  .theme-shelf { margin-top:60px; }
  .theme-head { grid-template-columns:1fr; text-align:center; gap:20px; }
  .theme-art { max-width:280px; margin:0 auto; }
  .theme-sub { margin-left:auto; margin-right:auto; }
  .theme-shelf.no-art .theme-head { text-align:left; }
  .theme-grid { grid-template-columns:1fr; }
}

/* Homepage: theme cards */
.themes-section { text-align:center; }
.theme-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:8px; text-align:left; }
.theme-card { display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:16px; padding:14px 14px 18px; text-decoration:none; color:inherit; transition:all 0.2s; }
.theme-card:hover { background:rgba(201,150,60,0.07); border-color:rgba(201,150,60,0.3); transform:translateY(-2px); }
.theme-card-art { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; border-radius:12px; display:block; box-shadow:0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05); }
.theme-card-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; text-align:center; }
.theme-card-sub { font-family:'Lora',serif; font-style:italic; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center; }
@media(max-width:600px) {
  .theme-card-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .theme-card-title { font-size:15px; }
  .theme-card-sub { font-size:11.5px; }
}