.timeline-subway-shell{
  background:linear-gradient(180deg, rgba(237, 225, 201, 0.95) 0%, rgba(71, 38, 16, 0.95) 100%);
  color:#f6f7fb;
  position:relative;
  --subway-gap:clamp(96px, 12vw, 180px);
  --period-top-padding:clamp(120px, 17vw, 200px);
  --roundel-size:clamp(104px, 11vw, 140px);
}
.timeline-subway-shell.order-ascending{
  background:linear-gradient(180deg, rgba(71, 38, 16, 0.95) 0%, rgba(237, 225, 201, 0.95) 100%);
}
.subway-hero{
  padding-left: clamp(96px, 12vw, 220px);
}
.subway-hero .hero-body{
  max-width: 960px;
}
.subway-hero .hero-body h1{ max-width: 760px; }
.timeline-subway-content{
  padding-top:48px;
}
.timeline-subway-body{
  position:relative;
  padding-bottom:60px;
  display:flex;
  flex-direction:column;
}
.timeline-subway-shell.order-ascending .timeline-subway-body{
  flex-direction:column-reverse;
}
.timeline-subway-body::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  background:linear-gradient(180deg, rgba(244,180,26,0.35), rgba(12,15,24,0.8));
  border-radius:999px;
  z-index:0;
}
.timeline-nav{
  position:fixed;
  left:32px;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.timeline-nav .nav-dots{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.timeline-subway-shell.order-ascending .timeline-nav .nav-dots{
  flex-direction:column-reverse;
}
.timeline-nav .timeline-line{
  position:absolute;
  left:8px;
  top:-40vh;
  bottom:-40vh;
  width:2px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.25) 20%, rgba(255,255,255,0.3) 80%, transparent 100%);
  z-index:-1;
}
.timeline-nav .timeline-label{
  display:none;
  color:rgba(255,255,255,0.7);
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:0.72rem;
  padding:6px 10px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.timeline-nav .nav-dot{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.12);
  cursor:pointer;
  position:relative;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.timeline-nav .nav-dot::after{
  content:attr(data-label);
  position:absolute;
  left:26px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(5,6,8,0.9);
  border:1px solid rgba(255,255,255,0.2);
  color:#f6f7fb;
  padding:4px 8px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  white-space:nowrap;
  font-size:0.8rem;
  font-weight:600;
}
.timeline-nav .nav-dot:hover::after,
.timeline-nav .nav-dot.active::after{
  opacity:1;
}
.timeline-nav .nav-dot:hover,
.timeline-nav .nav-dot.active{
  background:#f4b41a;
  border-color:#f4b41a;
  transform:scale(1.12);
}
.timeline-nav .nav-dot:focus-visible{
  outline:3px solid #f4b41a;
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(244,180,26,0.2);
}
.timeline-nav .nav-dot:focus-visible::after{ opacity:1; }
.hero-nav-row .order-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(5,6,8,0.55);
  color:#f6f7fb;
  border-radius:999px;
  padding:6px 16px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hero-nav-row .order-toggle:hover{ border-color:#f4b41a; color:#f4b41a; }
.hero-nav-row .order-toggle[aria-pressed="true"]{ background:rgba(244,180,26,0.2); border-color:#f4b41a; }
.period-stop{
  position:relative;
  padding:var(--period-top-padding) 0 80px;
}
.period-stop::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:16px;
  height:16px;
  border-radius:50%;
  background:#0b0d14;
  border:4px solid rgba(244,180,26,0.5);
  box-shadow:0 0 18px rgba(244,180,26,0.35);
}
.roundel-pills{
  position:absolute;
  left:50%;
  top:calc(var(--period-top-padding) - (var(--roundel-size) * 0.5));
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:16px;
  z-index:2;
}
.period-roundel{
  width:var(--roundel-size);
  height:var(--roundel-size);
  border-radius:999px;
  background:rgba(12,15,24,0.85);
  border:6px solid #050608;
  box-shadow:0 15px 40px rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.period-roundel img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
}
.roundel-fallback{
  font-size:2.4rem;
  font-weight:700;
  color:#f4b41a;
}
.track-pivot{
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(5,6,8,0.7);
  color:#f6f7fb;
  border-radius:999px;
  padding:8px 14px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.roundel-spurs{
  display:flex;
  align-items:center;
  gap:12px;
}
.horizontal-spur{
  display:inline-flex;
  width:120px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
  box-shadow:0 0 12px rgba(0,0,0,0.4);
}
.spur-pills{
  display:flex;
  gap:10px;
  align-items:center;
}
.train-wrapper{
  position:absolute;
  left:50%;
  top:calc(var(--period-top-padding) - (var(--roundel-size) * 1.6));
  transform:translate(-50%, -50%);
  z-index:1;
  pointer-events:none;
}
.era-train-image{
  width:calc(var(--roundel-size) * 2.2);
  max-width:340px;
  height:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,0.45));
  opacity:0.95;
}
.track-pivot:hover{ border-color:#f4b41a; color:#f4b41a; }
.track-pivot .pill-label{ pointer-events:none; }
.period-panel{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:calc(var(--roundel-size) * 0.5 + 32px) clamp(36px, 5vw, 88px) 0;
  overflow:hidden;
}
.period-header{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  padding:26px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(135deg, rgba(8,10,16,0.92), rgba(20,24,36,0.78));
  box-shadow:0 18px 40px rgba(5,5,5,0.55);
}
.period-header h3{
  margin:0;
  font-size:1.8rem;
}
.period-years{
  margin:4px 0 0;
  color:#c6c9d4;
}
.period-description{
  margin:8px 0 0;
  color:#d9dce6;
}
.period-metrics .chip{
  background:rgba(244,180,26,0.15);
  border-color:rgba(244,180,26,0.45);
}
.period-episodes{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2, minmax(280px, 1fr));
  column-gap:var(--subway-gap);
  row-gap:32px;
  justify-content:center;
  max-width:1100px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.track-panels{
  margin-top:28px;
  display:flex;
  width:300%;
  transition:transform 0.35s ease;
  overflow:hidden;
}
.track-panel{
  flex:0 0 33.3333%;
  max-width:33.3333%;
  padding:0 clamp(24px, 3vw, 36px);
}
.period-panel[data-active-track="episodes"] .track-panels{ transform:translateX(0); }
.period-panel[data-active-track="figures"] .track-panels{ transform:translateX(-33.3333%); }
.period-panel[data-active-track="events"] .track-panels{ transform:translateX(-66.6666%); }
.subway-episode-card{
  background:linear-gradient(140deg, rgba(9,12,18,0.96), rgba(22,28,42,0.88));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 42px rgba(0,0,0,0.55);
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color:#fef9f0;
}
.subway-episode-card:hover{
  transform:translateY(-6px);
  border-color:#f4b41a;
  box-shadow:0 22px 46px rgba(0,0,0,0.6);
}
.subway-episode-card.side-left{
  grid-column:1;
  justify-self:end;
}
.subway-episode-card.side-right{
  grid-column:2;
  justify-self:start;
}
.subway-episode-card h4{
  font-size:1.1rem;
  margin:10px 0 8px;
  color:#fdf4d7;
}
.card-top{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.badge-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
}
.badge-episode{
  background:rgba(244,180,26,0.18);
  border-color:rgba(244,180,26,0.4);
  color:#fdf3cc;
}
.badge-role{
  background:rgba(94,234,212,0.18);
  border-color:rgba(94,234,212,0.45);
  color:#d1fae5;
}
.badge-entity{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.24);
  color:#f6f7fb;
}
.badge-figure{
  color:#fbcfe8;
  border-color:rgba(247,136,202,0.45);
  background:rgba(247,136,202,0.18);
}
.badge-event{
  color:#bfdbfe;
  border-color:rgba(125,190,255,0.45);
  background:rgba(125,190,255,0.18);
}
.card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:0.9rem;
  color:#c6c9d4;
}
.card-desc{
  margin:12px 0 16px;
  color:#f1eee4;
  font-size:0.95rem;
}
.card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:#f4b41a;
  text-decoration:none;
}
.card-link::after{
  content:">";
  font-size:0.9rem;
}
.entity-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(280px, 1fr));
  column-gap:var(--subway-gap);
  row-gap:24px;
  justify-content:center;
  max-width:1100px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:30px;
}
.entity-grid .entity-chip:nth-child(odd){
  grid-column:1;
  justify-self:end;
}
.entity-grid .entity-chip:nth-child(even){
  grid-column:2;
  justify-self:start;
}
.entity-chip{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(150deg, rgba(9,12,18,0.94), rgba(20,24,38,0.85));
  text-decoration:none;
  color:#f6f7fb;
  box-shadow:0 18px 36px rgba(0,0,0,0.45);
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-height:172px;
  width:100%;
}
.entity-chip.is-overflow{ display:none; }
.entity-grid.is-expanded .entity-chip.is-overflow{ display:flex; }
.entity-card-top{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:14px;
}
.entity-chip:hover{
  transform:translateY(-4px);
  border-color:#f4b41a;
  box-shadow:0 22px 42px rgba(0,0,0,0.55);
}
.entity-chip .chip-title{
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
  color:#fdf4d7;
  word-break:break-word;
}
.entity-chip .chip-meta{
  font-size:0.85rem;
  color:#c6c9d4;
  margin-top:10px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.period-empty{
  margin-top:18px;
  padding:16px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,0.2);
  color:#c6c9d4;
}
.period-toggle{
  margin-top:16px;
  border:1px solid rgba(255,255,255,0.3);
  background:transparent;
  color:#f6f7fb;
  border-radius:999px;
  padding:10px 18px;
  font-weight:600;
  cursor:pointer;
}
.period-toggle:hover{
  border-color:#f4b41a;
  color:#f4b41a;
}
.entity-toggle{
  margin-top:14px;
  border:1px solid rgba(255,255,255,0.3);
  background:transparent;
  color:#f6f7fb;
  border-radius:999px;
  padding:9px 16px;
  font-weight:600;
  cursor:pointer;
}
.entity-toggle:hover{
  border-color:#f4b41a;
  color:#f4b41a;
}
.period-stop:not(.is-expanded) .subway-episode-card.is-overflow{
  display:none;
}

@media (max-width: 980px){
  .subway-hero{
    padding-left:8vw;
    padding-right:8vw;
  }
  .period-panel{
    padding:0 4vw 0;
  }
  .timeline-nav{
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  .timeline-nav .nav-dots{
    flex-direction:row;
    gap:12px;
  }
  .timeline-subway-shell.order-ascending .timeline-nav .nav-dots{
    flex-direction:row-reverse;
  }
  .roundel-pills{
    position:static;
    transform:none;
    justify-content:center;
    margin-bottom:16px;
  }
  .track-panel{ padding-right:0; }
  .period-episodes{
    grid-template-columns:1fr;
    column-gap:24px;
    max-width:600px;
  }
  .entity-grid{
    grid-template-columns:1fr;
    column-gap:24px;
    max-width:600px;
  }
  .entity-chip.is-overflow{ display:none; }
  .entity-grid.is-expanded .entity-chip.is-overflow{ display:flex; }
  .subway-episode-card.side-left,
  .subway-episode-card.side-right{
    grid-column:auto;
    justify-self:stretch;
  }
  .entity-grid .entity-chip:nth-child(odd),
  .entity-grid .entity-chip:nth-child(even){
    grid-column:auto;
    justify-self:stretch;
  }
  .timeline-subway-body::before{
    left:calc(50% + 4px);
    opacity:0.25;
  }
  .period-roundel{
    width:96px;
    height:96px;
  }
  .timeline-nav{
    position:sticky;
    top:0;
    transform:none;
    flex-direction:row;
    padding:14px 10px 10px;
    background:rgba(5,6,8,0.92);
    justify-content:center;
    gap:10px;
  }
  .timeline-nav .timeline-line{ display:none; }
  .timeline-nav .timeline-label{ order:-1; margin-right:6px; }
}

@media (max-width: 720px){
  .subway-hero{
    padding-left:6vw;
    padding-right:6vw;
  }
  .timeline-nav{
    position:fixed;
    bottom:12px;
    top:auto;
    left:50%;
    transform:translateX(-50%);
    background:rgba(5,6,8,0.92);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    padding:8px 10px;
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
    flex-direction:column;
    gap:6px;
    z-index:40;
  }
  .timeline-nav .nav-dots{
    flex-direction:row;
    gap:8px;
  }
  .timeline-subway-shell.order-ascending .timeline-nav .nav-dots{
    flex-direction:row-reverse;
  }
  .timeline-nav .timeline-label{
    display:block;
    position:static;
    transform:none;
    border-radius:999px;
    padding:4px 10px;
    text-align:center;
  }
  .timeline-nav .nav-dot::after{
    display:none;
  }
  .hero-nav-row .order-toggle{
    width:100%;
    text-align:center;
    justify-content:center;
  }
  .roundel-pills{
    flex-direction:column;
    gap:10px;
  }
}

@media (max-width: 640px){
  .period-panel{
    padding:0 0 0 0;
  }
  .period-header{
    padding:18px;
  }
  .timeline-intro h2{
    font-size:1.3rem;
  }
}

/* Site theme: Parchment (opt-in via settings) */
html[data-site-theme='parchment'] .timeline-subway-shell{
  background:linear-gradient(180deg, rgba(239,234,221,0.98) 0%, rgba(215,207,184,0.98) 100%);
  color:var(--text);
}
html[data-site-theme='parchment'] .timeline-subway-shell.order-ascending{
  background:linear-gradient(180deg, rgba(215,207,184,0.98) 0%, rgba(239,234,221,0.98) 100%);
}
html[data-site-theme='parchment'] .timeline-subway-body::before{
  background:linear-gradient(180deg, rgba(183,149,11,0.28), rgba(67,50,31,0.18));
}
html[data-site-theme='parchment'] .timeline-nav .timeline-line{
  background:linear-gradient(180deg, transparent 0%, rgba(45,45,45,0.22) 20%, rgba(45,45,45,0.26) 80%, transparent 100%);
}
html[data-site-theme='parchment'] .timeline-nav .timeline-label{
  color:rgba(45,45,45,0.72);
  background:rgba(239,234,221,0.92);
  border-color:rgba(45,45,45,0.14);
}
html[data-site-theme='parchment'] .timeline-nav .nav-dot{
  border-color:rgba(45,45,45,0.18);
  background:rgba(45,45,45,0.10);
}
html[data-site-theme='parchment'] .timeline-nav .nav-dot::after{
  background:rgba(239,234,221,0.98);
  border-color:rgba(45,45,45,0.14);
  color:var(--text);
}
html[data-site-theme='parchment'] .timeline-nav .nav-dot:hover,
html[data-site-theme='parchment'] .timeline-nav .nav-dot.active{
  background:var(--trih-gold);
  border-color:var(--trih-gold);
}
html[data-site-theme='parchment'] .hero-nav-row .order-toggle{
  background:rgba(239,234,221,0.78);
  border-color:rgba(45,45,45,0.18);
  color:var(--text);
}
html[data-site-theme='parchment'] .hero-nav-row .order-toggle:hover{
  border-color:var(--trih-gold);
  color:var(--text);
}
html[data-site-theme='parchment'] .hero-nav-row .order-toggle[aria-pressed="true"]{
  background:rgba(183,149,11,0.14);
  border-color:var(--trih-gold);
}
html[data-site-theme='parchment'] .track-pivot{
  background:rgba(239,234,221,0.78);
  border-color:rgba(45,45,45,0.18);
  color:var(--text);
}
html[data-site-theme='parchment'] .track-pivot:hover{
  border-color:var(--trih-gold);
  color:var(--text);
}
html[data-site-theme='parchment'] .track-pivot[aria-pressed="true"]{
  background:rgba(183,149,11,0.14);
  border-color:var(--trih-gold);
}
html[data-site-theme='parchment'] .period-stop::after{
  background:var(--surface);
  border-color:rgba(183,149,11,0.42);
  box-shadow:0 0 18px rgba(67,50,31,0.18);
}
html[data-site-theme='parchment'] .period-roundel{
  background:rgba(239,234,221,0.92);
  border-color:rgba(45,45,45,0.14);
  box-shadow:0 14px 34px rgba(67,50,31,0.18);
}
html[data-site-theme='parchment'] .horizontal-spur{
  background:linear-gradient(90deg, rgba(45,45,45,0.18), rgba(45,45,45,0.06));
  box-shadow:none;
}
html[data-site-theme='parchment'] .period-header{
  border-color:var(--border);
  background:linear-gradient(135deg, rgba(239,234,221,0.94), rgba(253,246,227,0.86));
  box-shadow:var(--shadow);
}
html[data-site-theme='parchment'] .period-years{ color:var(--muted); }
html[data-site-theme='parchment'] .period-description{ color:var(--text); opacity:0.88; }
html[data-site-theme='parchment'] .period-metrics .chip{
  background:rgba(183,149,11,0.12);
  border-color:rgba(183,149,11,0.28);
  color:var(--text);
}
html[data-site-theme='parchment'] .subway-episode-card,
html[data-site-theme='parchment'] .entity-chip{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow);
  color:var(--text);
}
html[data-site-theme='parchment'] .subway-episode-card:hover,
html[data-site-theme='parchment'] .entity-chip:hover{
  border-color:var(--trih-gold);
  box-shadow:0 16px 36px rgba(67,50,31,0.16);
}
html[data-site-theme='parchment'] .subway-episode-card h4,
html[data-site-theme='parchment'] .entity-chip .chip-title{
  color:var(--text);
}
html[data-site-theme='parchment'] .card-meta,
html[data-site-theme='parchment'] .entity-chip .chip-meta,
html[data-site-theme='parchment'] .period-empty{
  color:var(--muted);
}
html[data-site-theme='parchment'] .card-desc{ color:var(--text); opacity:0.88; }
html[data-site-theme='parchment'] .card-link{ color:var(--accent); }
html[data-site-theme='parchment'] .badge-pill{
  background:rgba(45,45,45,0.05);
  border-color:rgba(45,45,45,0.14);
  color:var(--text);
}
html[data-site-theme='parchment'] .badge-episode{
  background:rgba(183,149,11,0.14);
  border-color:rgba(183,149,11,0.28);
}
html[data-site-theme='parchment'] .badge-role{
  background:rgba(45,45,45,0.06);
  border-color:rgba(45,45,45,0.14);
}
html[data-site-theme='parchment'] .badge-figure{
  color:var(--text);
  border-color:rgba(192,57,43,0.24);
  background:rgba(192,57,43,0.10);
}
html[data-site-theme='parchment'] .badge-event{
  color:var(--text);
  border-color:rgba(37,99,235,0.22);
  background:rgba(37,99,235,0.10);
}
html[data-site-theme='parchment'] .period-empty{
  border-color:var(--border);
  background:rgba(239,234,221,0.6);
}
html[data-site-theme='parchment'] .period-toggle,
html[data-site-theme='parchment'] .entity-toggle{
  border-color:rgba(45,45,45,0.18);
  color:var(--text);
}
html[data-site-theme='parchment'] .period-toggle:hover,
html[data-site-theme='parchment'] .entity-toggle:hover{
  border-color:var(--trih-gold);
  color:var(--text);
  background:rgba(183,149,11,0.14);
}

@media (max-width: 980px){
  html[data-site-theme='parchment'] .timeline-nav{
    background:rgba(239,234,221,0.94);
    border-bottom:1px solid rgba(45,45,45,0.10);
  }
}

@media (max-width: 720px){
  html[data-site-theme='parchment'] .timeline-nav{
    background:rgba(239,234,221,0.96);
    border-color:rgba(45,45,45,0.14);
    box-shadow:0 10px 24px rgba(67,50,31,0.12);
  }
}