.era-shell{
  background: #050608;
  color: #f6f7fb;
  min-height: 100vh;
}
.era-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 8vw 54px;
  background:
    linear-gradient(rgba(5,6,8,0.84), rgba(5,6,8,0.84)),
    var(--hero-image, linear-gradient(135deg, #0f172a, #111827));
  background-size: cover;
  background-position:center;
}
.era-hero::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 10% 20%, rgba(244,180,26,0.14), transparent 52%),
             radial-gradient(120% 120% at 80% -10%, rgba(255,255,255,0.06), transparent 45%);
  pointer-events:none;
}
.era-hero .hero-body{ position:relative; z-index:1; max-width: 1080px; }
.era-hero h1{ font-family:'Playfair Display', serif; font-size: clamp(2.4rem, 4vw, 3.4rem); margin:0 0 12px; line-height:1.05; color:#f6f7fb; }
.era-hero .eyebrow{ letter-spacing:0.2em; text-transform:uppercase; font-weight:700; font-size:0.78rem; color:#c6c9d4; margin-bottom: 8px; }
.era-hero .meta-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:#c6c9d4; }
.era-hero .chip{ background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:6px 12px; font-weight:600; color:#f6f7fb; }
.era-hero .lead{ color:#d9dce6; max-width: 900px; margin: 8px 0 0; }
.era-hero .cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.btn-gold{ background:#f4b41a; color:#0b0d14; border:none; border-radius:10px; padding:10px 14px; font-weight:700; text-decoration:none; }
.btn-outline-light{ color:#f6f7fb; border:1px solid rgba(255,255,255,0.25); border-radius:10px; padding:10px 14px; text-decoration:none; }
.btn-outline-light:hover{ border-color:#f4b41a; color:#f4b41a; }
.btn-modern-outline{ display:inline-flex; align-items:center; justify-content:center; color:#f6f7fb; border:1px solid rgba(255,255,255,0.25); border-radius:10px; padding:10px 14px; text-decoration:none; background:transparent; font-weight:600; }
.btn-modern-outline:hover{ border-color:#f4b41a; color:#f4b41a; }
.btn-modern-outline.black{ background:#0b0d14; color:#f6f7fb; border-color:#0b0d14; }
.btn-modern-outline.black:hover{ background:#f4b41a; color:#0b0d14; border-color:#f4b41a; }
.primary-cta{ background: #f4b41a; color:#0b0d14; border:none; border-radius:14px; padding:12px 18px; font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(244,180,26,0.25); display:inline-block; }
.primary-cta:hover{ filter:brightness(1.05); color:#0b0d14; }

.era-content{ padding: 34px 8vw 72px; }
.section-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-bottom:14px; padding:10px 12px; border-radius:12px; background: linear-gradient(90deg, rgba(15,23,42,0.7), rgba(15,23,42,0.35)); border:1px solid rgba(255,255,255,0.12); box-shadow:0 8px 22px rgba(0,0,0,0.25); }
.section-header h2{ margin:0; font-size:1.2rem; color:#f6f7fb; }
.section-header .count{ color:#c6c9d4; font-size:0.9rem; }
.toc-links{ display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 4px; }
.toc-links a{ color:#f6f7fb; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:10px; padding:6px 10px; text-decoration:none; font-size:0.9rem; }
.toc-links a:hover{ border-color:#f4b41a; color:#f4b41a; }
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 280px));
  justify-content: start;
  gap: 14px;
}
.card-dark{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:14px; box-shadow:0 12px 32px rgba(0,0,0,0.28); color:#f6f7fb; text-decoration:none; }
.card-dark:hover{ border-color:#f4b41a; box-shadow:0 12px 36px rgba(0,0,0,0.36); }
.card-dark h3{ margin:0 0 6px; font-size:1rem; }
.card-dark .meta{ color:#c6c9d4; font-size:0.9rem; }
.pill-date{ background: rgba(37,99,235,0.18); border:1px solid rgba(37,99,235,0.35); border-radius:10px; padding:4px 8px; color:#e7f0ff; display:inline-block; }
.chip-series{ background: rgba(244,180,26,0.16); border:1px solid rgba(244,180,26,0.35); border-radius:10px; padding:4px 8px; color:#fdf3cc; display:inline-block; }
.chip-number{ background: rgba(16,185,129,0.18); border:1px solid rgba(16,185,129,0.35); border-radius:10px; padding:4px 8px; color:#d1fae5; display:inline-block; font-weight:700; letter-spacing:0.01em; }
.card-topline{ min-height: 20px; display:flex; gap:6px; align-items:center; }
.pill{ display:inline-block; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:4px 10px; font-size:0.82rem; color:#f6f7fb; }
.card-dark p{ color:#d9dce6; margin:6px 0 0; }
.pill-small{ display:inline-block; margin-right:6px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); font-size:0.78rem; color:#f6f7fb; }
.empty-state{ border:1px dashed rgba(255,255,255,0.22); border-radius:14px; padding:16px; color:#c6c9d4; }
.episodes-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.episode-card{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:14px; box-shadow:0 12px 32px rgba(0,0,0,0.28); color:#f6f7fb; text-decoration:none; display:flex; flex-direction:column; gap:8px; }
.episode-card:hover{ border-color:#f4b41a; box-shadow:0 14px 36px rgba(0,0,0,0.32); }
.card-meta{ color:#c6c9d4; font-size:0.9rem; }

@media(max-width: 720px){
  .era-hero{ padding: 82px 6vw 42px; }
  .era-content{ padding: 28px 6vw 64px; }
}

/* Site theme: Parchment (opt-in via settings) */
html[data-site-theme='parchment'] .era-shell:not(.timeline-subway-shell){
  background:#F6EED6; /* distinct from site canvas */
  color:var(--text);
}
html[data-site-theme='parchment'] .era-hero{
  background:
    linear-gradient(rgba(253,246,227,0.56), rgba(253,246,227,0.72)),
    var(--hero-image, linear-gradient(135deg, #efeadd, #d7cfb8));
  background-size:cover;
  background-position:center;
}
html[data-site-theme='parchment'] .era-hero::after{
  background:
    radial-gradient(120% 120% at 10% 20%, rgba(183,149,11,0.12), transparent 55%),
    radial-gradient(120% 120% at 80% -10%, rgba(192,57,43,0.08), transparent 52%);
}
html[data-site-theme='parchment'] .era-hero h1{ color:var(--text); }
html[data-site-theme='parchment'] .era-hero .eyebrow{ color:rgba(45,45,45,0.82); }
html[data-site-theme='parchment'] .era-hero .meta-row{ color:rgba(45,45,45,0.78); }
html[data-site-theme='parchment'] .era-hero .chip{
  background:rgba(183,149,11,0.12);
  border-color:rgba(183,149,11,0.28);
  color:var(--text);
}
html[data-site-theme='parchment'] .era-hero .lead,
html[data-site-theme='parchment'] .era-hero .meta{
  color:var(--text);
  opacity:0.9;
}
html[data-site-theme='parchment'] .section-header{
  background:linear-gradient(90deg, rgba(239,234,221,0.92), rgba(253,246,227,0.86));
  border-color:var(--border);
  box-shadow:var(--shadow);
}
html[data-site-theme='parchment'] .section-header h2,
html[data-site-theme='parchment'] .section-header h3{ color:var(--text); }
html[data-site-theme='parchment'] .section-header .count{ color:var(--muted); }
html[data-site-theme='parchment'] .toc-links a{
  color:var(--text);
  background:rgba(183,149,11,0.10);
  border-color:rgba(183,149,11,0.22);
}
html[data-site-theme='parchment'] .toc-links a:hover{
  border-color:var(--trih-gold);
  color:var(--text);
  background:rgba(183,149,11,0.16);
}
html[data-site-theme='parchment'] .card-dark,
html[data-site-theme='parchment'] .episode-card{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow);
  color:var(--text);
}
html[data-site-theme='parchment'] .card-dark:hover,
html[data-site-theme='parchment'] .episode-card:hover{
  border-color:var(--trih-gold);
  box-shadow:0 14px 34px rgba(67, 50, 31, 0.16);
}
html[data-site-theme='parchment'] .card-dark h3{ color:var(--text); }
html[data-site-theme='parchment'] .card-dark .meta,
html[data-site-theme='parchment'] .card-meta,
html[data-site-theme='parchment'] .card-dark p{
  color:var(--muted);
}
html[data-site-theme='parchment'] .pill-date{
  background:rgba(183,149,11,0.12);
  border-color:rgba(183,149,11,0.28);
  color:var(--text);
}
html[data-site-theme='parchment'] .chip-series{
  background:rgba(192,57,43,0.10);
  border-color:rgba(192,57,43,0.24);
  color:var(--text);
}
html[data-site-theme='parchment'] .chip-number{
  background:rgba(45,45,45,0.06);
  border-color:rgba(45,45,45,0.14);
  color:var(--text);
}
html[data-site-theme='parchment'] .pill,
html[data-site-theme='parchment'] .pill-small{
  background:rgba(45,45,45,0.05);
  border-color:rgba(45,45,45,0.14);
  color:var(--text);
}
html[data-site-theme='parchment'] .empty-state{
  border-color:var(--border);
  color:var(--muted);
}
html[data-site-theme='parchment'] .btn-outline-light{
  color:var(--text);
  border-color:var(--border);
  background:rgba(239,234,221,0.7);
}
html[data-site-theme='parchment'] .btn-outline-light:hover{
  border-color:var(--trih-gold);
  color:var(--text);
  background:rgba(183,149,11,0.14);
}
html[data-site-theme='parchment'] .btn-gold{
  background:var(--trih-gold);
  color:var(--text);
}
html[data-site-theme='parchment'] .btn-gold:hover{ filter:brightness(1.02); }
html[data-site-theme='parchment'] .btn-modern-outline{
  color:var(--text);
  border-color:var(--border);
}
html[data-site-theme='parchment'] .btn-modern-outline:hover{
  border-color:var(--trih-gold);
  color:var(--text);
  background:rgba(183,149,11,0.14);
}
html[data-site-theme='parchment'] .btn-modern-outline.black{
  background:rgba(239,234,221,0.9);
  color:var(--text);
  border-color:var(--border);
}
html[data-site-theme='parchment'] .btn-modern-outline.black:hover{
  background:rgba(183,149,11,0.16);
  border-color:var(--trih-gold);
  color:var(--text);
}