/* timeline.css — FUMC 175 interactive timeline · immersive scroll-through-time */
:root{
  --tl-paper:#f7f2e7;
  --tl-espresso:#221a10;
  --tl-ink:#241d13;
  --tl-ink-soft:#5d5343;
  --tl-ink-faint:#8a7e6a;
  --tl-brass:#c8993f;
  --tl-brass-dk:#8a6420;
  --tl-cream:#f7f1e4;
  --tl-line:rgba(36,29,19,.14);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--tl-paper);
  color:var(--tl-ink);
  font-family:"Spectral",Georgia,serif;
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── header / hero ─────────────────────────────────────── */
.tl-hero{
  background:var(--tl-espresso);color:var(--tl-cream);
  padding:64px 24px 56px;text-align:center;
  border-top:6px solid var(--tl-brass);
}
.tl-hero-kicker{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tl-brass);
}
.tl-hero h1{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(64px,12vw,150px);line-height:.95;margin:16px 0 12px;
  letter-spacing:-.02em;
}
.tl-hero p{
  font-size:clamp(17px,2.4vw,21px);color:rgba(247,241,228,.78);
  max-width:34em;margin:0 auto;font-style:italic;
}
.tl-hero-years{
  display:flex;justify-content:center;gap:18px;align-items:center;
  margin-top:26px;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.18em;color:var(--tl-brass);
}
.tl-hero-years::before,.tl-hero-years::after{
  content:"";height:2px;width:56px;background:var(--tl-brass);
}

/* ── sticky control bar ────────────────────────────────── */
.tl-controls{
  position:sticky;top:0;z-index:40;
  background:rgba(247,242,231,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--tl-line);
  padding:12px 18px;
}
.tl-controls-inner{
  max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:10px;
}
.tl-searchrow{display:flex;gap:10px;align-items:stretch;position:relative;}
.tl-searchrow .tl-search{flex:1;}
.tl-suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:116px;z-index:60;
  background:#fffdf8;border:1.5px solid var(--tl-line);
  box-shadow:0 14px 34px rgba(36,29,19,.18);
  max-height:290px;overflow-y:auto;
}
.tl-suggest-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  width:100%;min-height:42px;padding:9px 15px;border:none;background:none;
  cursor:pointer;font-family:"Archivo",sans-serif;text-align:left;
}
.tl-suggest-item:hover{background:rgba(200,153,63,.13);}
.tl-suggest-v{font-weight:800;font-size:16px;color:var(--tl-ink);}
.tl-suggest-v.dec{color:var(--tl-brass-dk);}
.tl-suggest-n{font-size:12px;color:var(--tl-ink-faint);letter-spacing:.04em;}
body.tl-dusk .tl-suggest{background:#262017;border-color:rgba(247,241,228,.16);}
body.tl-dusk .tl-suggest-item:hover{background:rgba(200,153,63,.18);}
body.tl-dusk .tl-suggest-v.dec{color:var(--tl-brass);}
.tl-modebtn{
  flex:0 0 auto;width:48px;min-height:44px;cursor:pointer;
  border:1.5px solid var(--tl-line);background:#fffdf8;color:var(--tl-brass-dk);
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .15s ease;
}
.tl-modebtn:hover{border-color:var(--tl-brass);}
body.tl-dusk .tl-modebtn{background:#262017;color:var(--tl-brass);}
.tl-search{
  width:100%;padding:11px 15px;
  font-family:"Archivo",sans-serif;font-size:15px;
  border:1.5px solid var(--tl-line);background:#fffdf8;color:var(--tl-ink);
  outline:none;
}
.tl-search:focus{border-color:var(--tl-brass);}
.tl-chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tl-chiplabel{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tl-ink-faint);
  margin-right:2px;
}
.tl-chip{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:13px;
  padding:7px 14px;border:1.5px solid var(--tl-line);background:transparent;
  color:var(--tl-ink-soft);cursor:pointer;letter-spacing:.02em;
  min-height:34px;transition:all .15s ease;
}
.tl-chip:hover{border-color:var(--tl-ink-soft);}
.tl-chip.on{
  background:var(--chip-c,var(--tl-ink));border-color:var(--chip-c,var(--tl-ink));
  color:var(--tl-cream);
}

/* ── era sections ──────────────────────────────────────── */
.tl-flow{position:relative;max-width:880px;margin:0 auto;padding:0 18px 90px;}
/* the brass thread — runs the entire length of time */
.tl-flow::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(18px + 46px);
  width:4px;background:var(--tl-brass);opacity:.9;
}
.tl-era{padding-top:44px;}
.tl-era-banner{
  position:relative;margin-left:92px;
  background:var(--era-c);color:var(--tl-cream);
  padding:26px 30px 24px;
}
.tl-era-banner::before{ /* node on the thread — centered via translate */
  content:"";position:absolute;left:-44px;top:34px;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;
  background:var(--tl-brass);border:4px solid var(--tl-paper);
}
.tl-era-roman{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--tl-brass);
}
.tl-era-banner h2{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(26px,4.6vw,40px);margin:6px 0 2px;line-height:1;
  letter-spacing:-.01em;
}
.tl-era-years{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.14em;color:rgba(247,241,228,.75);
}

/* ── entries ───────────────────────────────────────────── */
.tl-entry{
  position:relative;margin:26px 0 26px 92px;
  background:#fffdf8;border:1px solid var(--tl-line);
  cursor:pointer;display:block;width:calc(100% - 92px);text-align:left;
  padding:0;font:inherit;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tl-entry:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(36,29,19,.14);
}
.tl-entry:focus-visible{outline:3px solid var(--tl-brass);outline-offset:2px;}
.tl-entry::before{ /* tick connecting to thread — centered on the year row */
  content:"";position:absolute;left:-46px;top:42px;height:2px;width:46px;
  transform:translateY(-50%);
  background:var(--tl-brass);opacity:.55;
}
.tl-entry::after{ /* node — centered on the thread and the year row */
  content:"";position:absolute;left:-44px;top:42px;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--era-c);border:3px solid var(--tl-paper);
  box-shadow:0 0 0 2px var(--tl-brass);
  transition:transform .18s ease, background .18s ease;
}
.tl-entry:hover::after{ /* marker answers the hover — grows and fills brass */
  transform:translate(-50%,-50%) scale(1.6);
  background:var(--tl-brass);
}
.tl-entry:hover::before{opacity:.95;}
.tl-entry-inner{display:block;padding:22px 26px 20px 30px;} /* block so the inset actually applies; left matches era banner (30px) */
.tl-entry-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tl-entry-year{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:40px;
  line-height:1;color:var(--era-c);letter-spacing:-.01em;
}
.tl-entry-cat{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tl-brass-dk);
  border:1px solid rgba(138,100,32,.35);padding:4px 9px;
}
.tl-entry h3{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:23px;
  margin:10px 0 6px;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;
}
.tl-entry-sum{margin:0;color:var(--tl-ink-soft);font-size:16.5px;text-wrap:pretty;}
.tl-entry-media{
  display:flex;gap:14px;margin-top:14px;
  font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.05em;color:var(--tl-ink-faint);
}
.tl-entry-media span{display:flex;align-items:center;gap:5px;}
.tl-empty{
  margin:60px 0 0 92px;color:var(--tl-ink-faint);font-style:italic;
}

/* entrance animation */
@media (prefers-reduced-motion: no-preference){
  .tl-entry.is-new{animation:tlIn .5s ease backwards;}
  @keyframes tlIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
}

/* ── era jump rail (fixed right) ───────────────────────── */
.tl-rail{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;gap:6px;
}
.tl-rail button{
  width:14px;height:44px;border:none;cursor:pointer;padding:0;
  background:var(--rail-c);opacity:.3;transition:opacity .2s, width .2s;
}
.tl-rail button.on{opacity:1;width:20px;}
.tl-rail button:hover{opacity:.75;}
@media (max-width:700px){ .tl-rail{display:none;} }

/* ── virtual card overlay ──────────────────────────────── */
.vc-backdrop{
  position:fixed;inset:0;z-index:100;
  background:var(--tl-paper);
  overflow-y:auto;padding:0;
}
@media (prefers-reduced-motion: no-preference){
  .vc-backdrop{animation:vcFade .25s ease;}
  .vc-card{animation:vcUp .35s cubic-bezier(.2,.8,.25,1);}
  @keyframes vcFade{from{opacity:0;}to{opacity:1;}}
  @keyframes vcUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
}
.vc-card{
  background:transparent;width:100%;min-height:100%;
  display:flex;flex-direction:column;
}
/* persistent way back — sticky bar, always in reach */
.vc-bar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--era-c);border-top:5px solid var(--tl-brass);
  padding:8px 14px;box-shadow:0 2px 16px rgba(20,15,8,.3);
}
.vc-back{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:none;cursor:pointer;background:rgba(247,241,228,.14);color:var(--tl-cream);
  font-family:"Archivo",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
}
.vc-back:hover{background:rgba(247,241,228,.28);}
.vc-bar-era{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tl-brass);
  text-align:right;
}
.vc-head{
  background:var(--era-c);color:var(--tl-cream);
  padding:40px max(24px,calc((100% - 720px)/2)) 38px;
}
.vc-close{
  position:absolute;top:14px;right:14px;width:44px;height:44px;
  border:none;background:rgba(247,241,228,.12);color:var(--tl-cream);
  font-size:20px;cursor:pointer;font-family:"Archivo",sans-serif;
}
.vc-close:hover{background:rgba(247,241,228,.25);}
.vc-era{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tl-brass);
}
.vc-year{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(64px,11vw,104px);line-height:.95;margin:10px 0 4px;
  color:var(--tl-cream);letter-spacing:-.02em;
}
.vc-title{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(24px,4.4vw,34px);line-height:1.1;margin:6px 0 0;
  letter-spacing:-.01em;text-wrap:balance;
}
.vc-subtitle{font-style:italic;font-size:19px;color:rgba(247,241,228,.8);margin:10px 0 0;}
.vc-body{padding:36px max(24px,calc((100% - 720px)/2)) 70px;flex:1;}
@media (max-width:540px){ .vc-head{padding-top:28px;padding-bottom:26px;} }
.vc-lede{font-size:20px;line-height:1.5;color:var(--tl-ink-soft);margin:0 0 18px;}
.vc-body p{text-wrap:pretty;}
.vc-body .wc-placeholder{
  color:var(--tl-ink-faint);font-style:italic;
  border-left:3px solid var(--tl-line);padding-left:14px;
}
.vc-label{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;margin:30px 0 12px;
  color:var(--era-c);
}
.vc-quote{margin:26px 0;padding-left:18px;border-left:3px solid var(--era-c);}
.vc-quote p{
  font-family:"Archivo",sans-serif;font-weight:700;font-style:italic;
  font-size:21px;line-height:1.35;margin:0 0 6px;
}
.vc-quote cite{
  font-family:"Archivo",sans-serif;font-style:normal;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-ink-faint);
}
.vc-media{margin:0 0 16px;}
.vc-media-ph{
  background:repeating-linear-gradient(135deg,rgba(36,29,19,.08) 0 10px,rgba(36,29,19,.02) 10px 20px),#efe8d8;
  border:1px solid var(--tl-line);min-height:180px;
  display:flex;align-items:center;justify-content:center;
}
.vc-media-ph span{font-family:"Archivo",sans-serif;font-size:12px;color:var(--tl-ink-faint);}
.vc-media-img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#efe8d8;border:1px solid var(--tl-line);}
.vc-credit{font-style:normal;font-family:"Archivo",sans-serif;font-size:12px;color:var(--tl-ink-faint);}
.vc-media figcaption{font-size:14px;font-style:italic;color:var(--tl-ink-soft);margin-top:7px;}
.vc-audio{
  display:flex;gap:14px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--tl-line);
}
.vc-audio-btn{
  width:44px;height:44px;border-radius:50%;border:none;flex:0 0 auto;
  background:var(--era-c);color:var(--tl-cream);font-size:13px;cursor:pointer;
}
.vc-audio-t{font-family:"Archivo",sans-serif;font-weight:600;font-size:15px;}
.vc-audio-p{font-family:"Archivo",sans-serif;font-size:11px;color:var(--tl-ink-faint);}
.vc-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.vc-people strong{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;}
.vc-people span{color:var(--tl-ink-soft);}
.vc-people a{color:inherit;text-decoration:underline;text-decoration-color:var(--era-c);text-underline-offset:3px;}
.vc-people a:hover{color:var(--era-c);}
.vc-sources{
  font-family:"Archivo",sans-serif;font-size:11.5px;letter-spacing:.04em;
  color:var(--tl-ink-faint);margin-top:32px;
}
.vc-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  border-top:1px solid var(--tl-line);margin-top:30px;padding-top:20px;
}
.vc-nav button{
  background:none;border:none;cursor:pointer;padding:6px 0;text-align:left;
  display:flex;flex-direction:column;gap:3px;min-height:44px;font:inherit;
}
.vc-nav button.right{text-align:right;align-items:flex-end;}
.vc-nav .dir{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tl-brass-dk);
}
.vc-nav .ttl{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:14px;
  color:var(--tl-ink);line-height:1.3;
}

/* ════════════════════════════════════════════════════════
   TWEAK MODES — expressive reshapes, driven by body classes
   ════════════════════════════════════════════════════════ */

/* ── Mood: Candlelight (dark reading mode) ─────────────── */
body.tl-dusk{
  --tl-paper:#1c150c;
  --tl-ink:#f0e9d9;
  --tl-ink-soft:#c4b89e;
  --tl-ink-faint:#8d8169;
  --tl-line:rgba(247,241,228,.16);
}
body.tl-dusk .tl-controls{background:rgba(28,21,12,.94);}
body.tl-dusk .tl-search{background:#262017;color:var(--tl-ink);}
body.tl-dusk .tl-chip{color:var(--tl-ink-soft);}
body.tl-dusk .tl-chip:hover{border-color:var(--tl-ink-soft);}
body.tl-dusk .tl-chip.on{background:var(--chip-c,var(--tl-cream));border-color:var(--chip-c,var(--tl-cream));color:#1c150c;}
body.tl-dusk .tl-entry{background:#262017;border-color:rgba(247,241,228,.12);}
body.tl-dusk .tl-entry:hover{box-shadow:0 10px 28px rgba(0,0,0,.5);}
body.tl-dusk .tl-entry-year{filter:brightness(1.65) saturate(.85);}
body.tl-dusk .tl-era-banner{box-shadow:0 0 60px rgba(200,153,63,.12);}
body.tl-dusk .tl-entry::after{border-color:#1c150c;}
body.tl-dusk .tl-era-banner::before{border-color:#1c150c;}
body.tl-dusk .vc-card{background:transparent;}
body.tl-dusk .vc-media-ph{background:repeating-linear-gradient(135deg,rgba(247,241,228,.06) 0 10px,rgba(247,241,228,.015) 10px 20px),#2e2719;}
body.tl-dusk .vc-label{filter:brightness(1.65) saturate(.85);}
body.tl-dusk .vc-nav .ttl{color:var(--tl-ink);}
body.tl-dusk .tl-hero,body.tl-dusk .tl-foot{background:#120d06;}

/* ── Pacing: Index (compact scan mode) ─────────────────── */
body.tl-index .tl-entry{margin:10px 0 10px 92px;}
body.tl-index .tl-entry-inner{padding:14px 20px 13px 24px;} /* matches index era banner (24px) */
body.tl-index .tl-entry-top{gap:10px;}
body.tl-index .tl-entry-year{font-size:24px;}
body.tl-index .tl-entry h3{font-size:18px;margin:4px 0 0;}
body.tl-index .tl-entry-sum{display:none;}
body.tl-index .tl-entry-media{display:none;}
body.tl-index .tl-entry::before{top:26px;}
body.tl-index .tl-entry::after{top:26px;}
body.tl-index .tl-era{padding-top:30px;}
body.tl-index .tl-era-banner{padding:18px 24px 16px;}
body.tl-index .tl-era-banner h2{font-size:clamp(22px,3.6vw,30px);}

/* ── Gilding: rich brass presence ──────────────────────── */
body.tl-gilded .tl-flow::before{left:calc(18px + 44.5px);width:7px;box-shadow:0 0 18px rgba(200,153,63,.45);}
body.tl-gilded .tl-entry{border-top:4px solid var(--tl-brass);}
body.tl-gilded .tl-entry::before{height:3px;opacity:.9;}
body.tl-gilded .tl-entry::after{width:13px;height:13px;}
body.tl-gilded .tl-era-banner{border-bottom:5px solid var(--tl-brass);}
body.tl-gilded .tl-era-banner::before{width:24px;height:24px;}
/* gold-leaf hero — always in Candlelight mood; Gallery keeps the light cream title */
body.tl-dusk .tl-hero h1{
  color:transparent;background:linear-gradient(165deg,#e8c478 20%,#c8993f 55%,#9a712a 90%);
  -webkit-background-clip:text;background-clip:text;
}
body.tl-gilded .vc-bar{border-top-width:9px;}

/* footer */
.tl-foot{
  background:var(--tl-espresso);color:rgba(247,241,228,.6);
  text-align:center;padding:30px 20px;
  font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:6px solid var(--tl-brass);
}

/* ── story layout: main story + expandable sub-stories ── */
.st-main p{font-size:20px;line-height:1.55;margin:0 0 16px;}
.st-main p:first-child{font-size:22px;}
.st-subs{margin-top:34px;}
.st-sub{border-top:1px solid var(--tl-line);}
.st-subs .st-sub:last-child{border-bottom:1px solid var(--tl-line);}
.st-sub-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 2px;min-height:60px;background:none;border:none;cursor:pointer;text-align:left;color:inherit;font:inherit;}
.st-sub-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.st-sub-t{font-family:"Archivo",sans-serif;font-weight:700;font-size:18px;line-height:1.25;color:var(--tl-ink);}
.st-sub-tz{font-size:16px;font-style:italic;color:var(--tl-ink-soft);line-height:1.35;}
.st-sub-ic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--era-c);color:var(--era-c);
  display:flex;align-items:center;justify-content:center;font-family:"Archivo",sans-serif;font-size:20px;font-weight:600;transition:transform .2s ease;}
.st-sub.open .st-sub-ic{transform:rotate(45deg);background:var(--era-c);color:var(--tl-cream);}
.st-sub-h:hover .st-sub-t{color:var(--era-c);}
.st-sub-h:focus-visible{outline:3px solid var(--tl-brass);outline-offset:2px;}
.st-sub-b{padding:0 2px 20px;}
.st-sub-b .vc-media{margin:4px 0 18px;}
.st-sub-b p{margin:0 0 14px;}
.st-see{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px;padding:12px 14px;min-height:44px;width:100%;
  background:transparent;border:1.5px solid var(--tl-line);cursor:pointer;text-align:left;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;color:var(--tl-ink);}
.st-see span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--era-c);}
.st-see:hover{border-color:var(--era-c);}
.st-extras{margin-top:34px;border-bottom:1px solid var(--tl-line);}
.st-extras .st-sub-t{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-ink-soft);}
body.tl-dusk .st-sub-t{color:var(--tl-cream);}
body.tl-dusk .st-sub,body.tl-dusk .st-subs .st-sub:last-child,body.tl-dusk .st-extras{border-color:rgba(247,241,228,.14);}
body.tl-dusk .st-see{color:var(--tl-cream);border-color:rgba(247,241,228,.16);}