/* ============================================================
   THE GREAT SWINGALI — EXPLORE: THE HALLOWEEN TIMELINE
   The permanent site shell, ambience bar and Back to Foyer control
   remain separate from this room.
   ============================================================ */

*{box-sizing:border-box}

.timeline-room{
  position:relative;
  width:100%;
  height:calc(100vh - var(--shell-height,72px));
  height:calc(100svh - var(--shell-height,72px));
  overflow:hidden;
  color:#eadbc5;
  font-family:Georgia,serif;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(113,78,39,.22),transparent 32%),
    radial-gradient(ellipse at 50% 68%,rgba(75,38,84,.12),transparent 42%),
    linear-gradient(180deg,#17130e 0%,#0c0a08 54%,#060606 100%);
  isolation:isolate;
}

/* Old haunted archive architecture built entirely in CSS, so there are
   no additional baked-in menus, titles or controls. */
.timeline-room::before{
  content:"";
  position:absolute;
  z-index:-4;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/74px 74px,
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px) 0 0/74px 74px,
    radial-gradient(ellipse at 50% 0,rgba(187,145,87,.10),transparent 46%);
  opacity:.72;
}
.timeline-room::after{
  content:"";
  position:absolute;
  z-index:-3;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),transparent 8%,transparent 92%,rgba(0,0,0,.82)),
    linear-gradient(180deg,transparent 70%,rgba(0,0,0,.55));
}

.timeline-atmosphere,.archive-vignette{position:absolute;inset:0;pointer-events:none}
.timeline-atmosphere{z-index:20;overflow:hidden}
.archive-vignette{box-shadow:inset 0 0 100px rgba(0,0,0,.88)}
.dust{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#e4cda4;opacity:.18;box-shadow:0 0 7px #d2a96e;
  animation:dustFloat 11s ease-in-out infinite;
}
.dust-a{left:18%;top:31%;animation-delay:-2s}
.dust-b{left:72%;top:26%;animation-delay:-6s}
.dust-c{left:54%;top:72%;animation-delay:-9s}
@keyframes dustFloat{50%{transform:translate(22px,-44px);opacity:.42}}

/* Title is deliberately below the shared top shell. */
.timeline-heading{
  position:relative;
  z-index:5;
  width:min(1080px,76vw);
  margin:0 auto;
  padding:17px 24px 9px;
  text-align:center;
}
.timeline-kicker{
  font:700 .56rem/1 Georgia,serif;
  letter-spacing:.22em;color:#a778bf;
}
.timeline-heading h1{
  margin:.34rem 0 .28rem;
  font:400 clamp(1.42rem,2.35vw,2.28rem)/1 "Rye",Georgia,serif;
  letter-spacing:.055em;color:#edd9b6;
  text-shadow:0 2px 5px #000,0 0 13px rgba(197,137,222,.13);
}
.timeline-heading p{
  margin:0 auto;max-width:790px;
  font:italic .75rem/1.35 Georgia,serif;color:#bfae97;
}

/* Main museum timeline. */
.timeline-gallery{
  position:relative;
  z-index:4;
  width:min(1450px,96vw);
  height:calc(100% - 145px);
  min-height:430px;
  margin:0 auto;
  padding:10px 7px 66px;
}
.timeline-cards{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:6px;
  height:100%;
  align-items:stretch;
}
.timeline-rail{
  position:absolute;z-index:4;
  left:1.2%;right:1.2%;
  bottom:60px;height:5px;
  border:1px solid rgba(204,160,90,.66);
  background:
    linear-gradient(180deg,#5e4527 0%,#1b120c 42%,#7e5a30 58%,#24160c 100%);
  box-shadow:0 1px 0 rgba(229,188,112,.42),0 3px 13px #000;
}
.timeline-rail::before,.timeline-rail::after{
  content:"";position:absolute;top:50%;width:29px;height:29px;
  transform:translateY(-50%) rotate(45deg);
  border:1px solid rgba(210,168,93,.72);
  background:#1c110c;
}
.timeline-rail::before{left:-15px}
.timeline-rail::after{right:-15px}

.timeline-card{
  position:relative;
  min-width:0;height:100%;
  display:flex;flex-direction:column;
  border:1px solid rgba(179,139,83,.32);
  border-radius:4px 4px 0 0;
  background:rgba(8,7,6,.66);
  box-shadow:
    inset 0 0 0 1px rgba(69,48,27,.65),
    0 8px 20px rgba(0,0,0,.40);
  overflow:visible;
  transition:transform .18s ease,border-color .18s ease,filter .18s ease;
}
.timeline-card::before{
  content:"";position:absolute;z-index:2;inset:0;
  background:linear-gradient(180deg,rgba(28,18,9,.03),transparent 56%,rgba(4,3,3,.76));
  pointer-events:none;
}
.timeline-card:hover,.timeline-card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(205,160,99,.72);
  filter:brightness(1.05);
}
.timeline-era-image{
  position:absolute;inset:0 0 0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:sepia(.24) saturate(.80) brightness(.76) contrast(1.04);
  transition:filter .22s ease,transform .32s ease;
}
.timeline-card:hover .timeline-era-image,
.timeline-card:focus-within .timeline-era-image{
  filter:sepia(.13) saturate(.95) brightness(.94) contrast(1.02);
  transform:scale(1.025);
}

/* Separate real text: hidden until hover/focus, never baked into artwork. */
.timeline-hover-title{
  position:absolute;z-index:8;
  left:50%;bottom:106px;
  width:min(210px,155%);
  transform:translate(-50%,8px);
  padding:.46rem .55rem;
  border:1px solid rgba(209,161,238,.52);
  border-radius:4px;
  background:rgba(8,5,9,.94);
  box-shadow:0 0 20px rgba(177,70,231,.34),0 8px 20px #000;
  opacity:0;visibility:hidden;
  transition:.18s ease;
  pointer-events:none;
  text-align:center;
}
.timeline-hover-title strong{
  display:block;
  font:400 clamp(.61rem,.72vw,.78rem)/1.18 "Rye",Georgia,serif;
  color:#ecd8b8;
}
.timeline-hover-title small{
  display:block;margin-top:.25rem;
  font:italic .58rem/1.2 Georgia,serif;color:#b995c9;
}
.timeline-card:hover .timeline-hover-title,
.timeline-card:focus-within .timeline-hover-title{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}

/* Purple ball-of-fire markers. */
.timeline-orb{
  position:absolute;z-index:9;
  left:50%;bottom:34px;
  width:54px;height:54px;
  transform:translateX(-50%);
  display:grid;place-items:center;
  padding:0;border-radius:50%;
  border:1px solid rgba(215,175,238,.7);
  background:
    radial-gradient(circle at 42% 35%,#deabff 0 6%,#8f44b8 15%,#37154b 48%,#0b0810 73%);
  color:#f3e2fb;
  font:400 1.05rem/1 "Rye",Georgia,serif;
  text-shadow:0 0 9px #fff,0 0 15px #c47be9;
  box-shadow:
    inset 0 0 11px rgba(255,255,255,.18),
    0 0 7px rgba(211,148,242,.45),
    0 0 15px rgba(150,53,200,.30);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.timeline-orb::before,.timeline-orb::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  opacity:0;transform:scale(.72);
}
.timeline-orb::before{
  background:
    conic-gradient(from 0deg,
      transparent 0 9%,rgba(190,88,242,.9) 10% 14%,transparent 15% 25%,
      rgba(224,158,255,.82) 26% 30%,transparent 31% 45%,
      rgba(143,48,204,.90) 46% 52%,transparent 53% 68%,
      rgba(223,148,255,.88) 69% 73%,transparent 74%);
  filter:blur(2px);
}
.timeline-orb::after{
  inset:-15px;
  border:1px solid rgba(198,116,236,.28);
  box-shadow:0 0 17px rgba(192,85,236,.48);
}
.timeline-card:hover .timeline-orb,
.timeline-orb:focus-visible{
  transform:translateX(-50%) scale(1.12);
  outline:none;
  filter:brightness(1.28);
  box-shadow:
    inset 0 0 13px rgba(255,255,255,.32),
    0 0 8px #f3ddff,
    0 0 22px #ca75f2,
    0 0 42px #8e2fcb,
    0 -18px 32px rgba(178,66,227,.36);
  animation:orbFirePulse .72s ease-in-out infinite alternate;
}
.timeline-card:hover .timeline-orb::before,
.timeline-orb:focus-visible::before{
  opacity:.95;
  animation:purpleFlameSpin 1.5s linear infinite;
}
.timeline-card:hover .timeline-orb::after,
.timeline-orb:focus-visible::after{
  opacity:1;
  animation:fireHalo 1s ease-in-out infinite alternate;
}
@keyframes orbFirePulse{
  to{box-shadow:inset 0 0 17px rgba(255,255,255,.38),0 0 11px #fff,0 0 27px #dd8cff,0 0 52px #9c37d8,0 -25px 42px rgba(189,72,235,.56)}
}
@keyframes purpleFlameSpin{to{transform:rotate(360deg) scale(1.05)}}
@keyframes fireHalo{to{transform:scale(1.22);opacity:.52}}

.timeline-orb-stand{
  position:absolute;z-index:8;
  left:50%;bottom:2px;width:1px;height:35px;
  transform:translateX(-50%);
  background:linear-gradient(#d3ad70,#5a3d22);
  box-shadow:0 0 3px rgba(206,161,92,.35);
}
.timeline-orb-stand::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);
  border:1px solid rgba(194,144,77,.72);background:#17100b;
}

/* Instruction lives above permanent ambience bar and away from Back to Foyer. */
.timeline-instruction{
  position:absolute;z-index:8;
  left:50%;bottom:45px;transform:translateX(-50%);
  display:flex;align-items:center;gap:.55rem;
  max-width:570px;padding:.38rem .75rem;
  border:1px solid rgba(177,137,82,.34);
  border-radius:4px;
  background:rgba(7,6,6,.86);
  color:#baa789;
  font:700 .55rem/1 Georgia,serif;letter-spacing:.11em;
  pointer-events:none;
}
.instruction-symbol{color:#a960ce;text-shadow:0 0 8px #b26cdb}

/* Keep the shared Back to Foyer clear of the shared ambience bar. */
.timeline-room .gs-back-foyer{
  bottom:45px !important;
  z-index:10003 !important;
}

/* Modal chapter. */
.timeline-modal{
  position:fixed;z-index:12020;inset:0;
  display:grid;place-items:center;
  padding:calc(var(--shell-height,72px) + 16px) 18px 48px;
  background:rgba(1,1,2,.82);
  backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:.2s ease;
}
.timeline-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.timeline-chronicle{
  position:relative;
  width:min(1180px,94vw);
  height:min(720px,calc(100svh - var(--shell-height,72px) - 70px));
  display:grid;
  grid-template-columns:minmax(300px,39%) minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(184,143,84,.62);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(16,11,9,.98),rgba(12,9,8,.99));
  box-shadow:
    inset 0 0 0 1px rgba(73,47,25,.76),
    0 25px 80px rgba(0,0,0,.88),
    0 0 24px rgba(151,72,186,.18);
}
.timeline-chronicle::before{
  content:"";position:absolute;inset:8px;pointer-events:none;z-index:10;
  border:1px solid rgba(188,148,87,.13);border-radius:5px;
}
.timeline-modal-close{
  position:absolute;z-index:30;right:11px;top:10px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(219,170,239,.42);
  background:rgba(28,12,31,.9);color:#e4cbed;
  font:400 1.3rem/1 Georgia,serif;cursor:pointer;
}
.timeline-modal-close:hover,.timeline-modal-close:focus-visible{
  outline:none;box-shadow:0 0 19px rgba(190,91,233,.52);color:#fff
}
.chronicle-image{
  position:relative;min-height:0;overflow:hidden;
  border-right:1px solid rgba(185,144,84,.38);
  background:#050404;
}
.chronicle-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(3,2,3,.76));
  pointer-events:none;
}
.chronicle-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:sepia(.15) saturate(.90) contrast(1.03);
}
.chronicle-era{
  position:absolute;z-index:4;left:22px;bottom:20px;
  min-width:68px;padding:.55rem .7rem;text-align:center;
  border:1px solid rgba(218,163,242,.56);
  background:rgba(13,7,15,.91);border-radius:50%;
  color:#e0b2f5;font:400 1.3rem/1 "Rye",Georgia,serif;
  box-shadow:0 0 20px rgba(176,72,224,.34);
}
.chronicle-copy{
  position:relative;min-height:0;overflow:auto;
  padding:26px 31px 34px;
  scrollbar-color:#6d3f86 #0b080d;
}
.chronicle-kicker{
  color:#9e6cb7;font:700 .58rem/1 Georgia,serif;letter-spacing:.18em
}
.chronicle-copy h2{
  margin:.45rem 2.7rem .22rem 0;
  color:#efd9b7;font:400 clamp(1.25rem,2.1vw,1.92rem)/1.12 "Rye",Georgia,serif;
}
.chronicle-copy h3{
  margin:0 0 1rem;color:#c3ad92;
  font:italic 700 .86rem/1.3 Georgia,serif
}
.chronicle-body p{
  margin:.68rem 0;color:#e9ded0;font:.89rem/1.55 Georgia,serif
}
.chronicle-swingali,.chronicle-sources{
  margin-top:1.15rem;padding:.86rem 1rem;
  border:1px solid rgba(194,146,220,.24);
  border-radius:5px;background:rgba(255,255,255,.023);
}
.chronicle-swingali{
  border-color:rgba(196,137,228,.38);
  background:linear-gradient(90deg,rgba(91,36,112,.18),rgba(22,14,25,.30));
}
.chronicle-swingali h4,.chronicle-sources h4{
  margin:0 0 .52rem;color:#bd89d4;
  font:700 .62rem/1 Georgia,serif;letter-spacing:.15em
}
.chronicle-swingali blockquote{
  margin:0;color:#efdcc4;
  font:italic 700 .91rem/1.52 Georgia,serif
}
.chronicle-sources ol{margin:.15rem 0;padding-left:1.2rem}
.chronicle-sources li{margin:.48rem 0;color:#b5a5b8;font:.71rem/1.4 Georgia,serif}
.chronicle-sources a{color:#d5ade8;text-underline-offset:3px}
.chronicle-sources a:hover,.chronicle-sources a:focus-visible{color:#fff;outline:none}
.chronicle-sources p{margin:.65rem 0 0;color:#837889;font:italic .64rem/1.35 Georgia,serif}
.chronicle-nav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:.55rem;
  margin-top:1.15rem;padding-top:.9rem;
  border-top:1px solid rgba(178,138,80,.20)
}
.chronicle-nav button{
  padding:.58rem .65rem;border:1px solid rgba(187,140,214,.30);
  border-radius:4px;background:rgba(62,27,74,.20);
  color:#d7c2df;font:700 .61rem/1 Georgia,serif;letter-spacing:.07em;cursor:pointer
}
.chronicle-nav button:last-child{justify-self:stretch}
.chronicle-nav button:hover:not(:disabled),.chronicle-nav button:focus-visible:not(:disabled){
  outline:none;box-shadow:0 0 15px rgba(181,88,222,.38)
}
.chronicle-nav button:disabled{opacity:.26;cursor:default}

@media(max-width:1000px){
  .timeline-heading{width:85vw;padding-top:13px}
  .timeline-gallery{width:98vw;padding-left:3px;padding-right:3px}
  .timeline-cards{gap:3px}
  .timeline-orb{width:46px;height:46px;font-size:.9rem}
  .timeline-hover-title{bottom:98px;width:170%}
}
@media(max-width:820px){
  .timeline-room{overflow:auto;padding-bottom:100px}
  .timeline-heading{width:95vw}
  .timeline-gallery{height:auto;min-height:650px;padding-bottom:84px;overflow-x:auto;overflow-y:hidden}
  .timeline-cards{width:1220px;height:540px;grid-template-columns:repeat(9,130px);gap:6px}
  .timeline-rail{width:1200px;right:auto}
  .timeline-instruction{position:fixed;bottom:46px;max-width:56vw}
  .timeline-chronicle{grid-template-columns:1fr;height:min(780px,calc(100svh - 120px))}
  .chronicle-image{height:225px;border-right:0;border-bottom:1px solid rgba(185,144,84,.38)}
  .chronicle-copy{padding:20px 19px 28px}
}
@media(max-width:650px){
  .timeline-heading p{font-size:.68rem}
  .timeline-instruction{display:none}
  .timeline-room .gs-back-foyer{bottom:48px!important}
  .timeline-modal{padding:calc(var(--shell-height,86px) + 7px) 7px 8px}
  .timeline-chronicle{width:98vw;height:calc(100svh - var(--shell-height,86px) - 18px)}
  .chronicle-image{height:175px}
  .chronicle-nav{grid-template-columns:1fr 1fr}
  #timelineAnother{grid-column:1 / 3;grid-row:2}
}

@media(prefers-reduced-motion:reduce){
  .dust,.timeline-card:hover .timeline-orb,.timeline-orb:focus-visible,
  .timeline-card:hover .timeline-orb::before,.timeline-orb:focus-visible::before,
  .timeline-card:hover .timeline-orb::after,.timeline-orb:focus-visible::after{
    animation:none!important
  }
}


/* ============================================================
   RECOVERY RECONCILIATION — HALLOWEEN TIMELINE
   ============================================================ */

/* Entire era panel is now an obvious clickable hotspot. */
.timeline-card{
  cursor:pointer;
}
.timeline-card:hover,
.timeline-card:focus,
.timeline-card:focus-within{
  border-color:rgba(218,142,255,.94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(228,190,255,.28),
    0 0 18px rgba(193,116,241,.54),
    0 8px 24px rgba(0,0,0,.48) !important;
  outline:none;
}

/* Era orb remains a large, unmistakable secondary target. */
.timeline-orb{
  width:clamp(58px,4.4vw,68px) !important;
  height:clamp(58px,4.4vw,68px) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.20),
    0 0 9px rgba(221,161,255,.82),
    0 0 22px rgba(171,72,227,.62) !important;
}

/* The chronicle itself is substantially larger and readable. */
.timeline-modal{
  padding:calc(var(--shell-height,86px) + 12px) 18px 18px !important;
}
.timeline-chronicle{
  width:min(1320px,96vw) !important;
  height:min(850px,calc(100svh - var(--shell-height,86px) - 34px)) !important;
}
.chronicle-copy{
  padding:clamp(24px,3vw,42px) clamp(24px,3.6vw,52px) 34px !important;
  scrollbar-width:auto;
  scrollbar-color:#a861cf #100b12;
}
.chronicle-copy::-webkit-scrollbar{width:12px}
.chronicle-copy::-webkit-scrollbar-track{background:#100b12}
.chronicle-copy::-webkit-scrollbar-thumb{
  border:2px solid #100b12;
  border-radius:8px;
  background:linear-gradient(#bd78e5,#75428f);
}
.chronicle-copy h2{
  font-size:clamp(1.75rem,3vw,2.7rem) !important;
  line-height:1.1 !important;
}
.chronicle-copy h3{
  font-size:clamp(1.03rem,1.35vw,1.24rem) !important;
  line-height:1.5 !important;
}
.chronicle-body p{
  font-size:clamp(1rem,1.08vw,1.13rem) !important;
  line-height:1.72 !important;
  color:#f0e7db !important;
}
.chronicle-swingali blockquote{
  font-size:clamp(1rem,1.06vw,1.12rem) !important;
  line-height:1.62 !important;
}
.chronicle-sources li{
  font-size:clamp(.84rem,.9vw,.95rem) !important;
  line-height:1.5 !important;
}

/* Previous / Return / Next controls are always a real visible row. */
.chronicle-nav{
  position:sticky;
  bottom:0;
  z-index:5;
  display:grid !important;
  grid-template-columns:minmax(150px,1fr) minmax(180px,1.2fr) minmax(150px,1fr) !important;
  gap:12px !important;
  padding:14px 0 2px !important;
  background:linear-gradient(180deg,rgba(15,9,16,0),rgba(15,9,16,.98) 34%);
}
.chronicle-nav button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:44px;
  visibility:visible !important;
  opacity:1;
  border:1px solid rgba(218,171,255,.52) !important;
  background:rgba(82,35,100,.38) !important;
  color:#ead8f5 !important;
  font-size:clamp(.72rem,.8vw,.86rem) !important;
}
.chronicle-nav button:disabled{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:.34 !important;
}

@media(max-width:700px){
  .chronicle-nav{
    grid-template-columns:1fr 1fr !important;
  }
  #timelineAnother{grid-column:1/-1;grid-row:2}
}