*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#050403}body{overflow:hidden}
.veil-room{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#050403;color:#ead8b8}
.veil-background{position:absolute;inset:0;background:url("../assets/images/veil-of-ages.jpg") center/cover no-repeat;transition:filter .8s ease,transform 1.2s ease}
.veil-dim{position:absolute;inset:0;z-index:2;background:rgba(2,1,4,.52);opacity:0;pointer-events:none;transition:opacity .7s ease}
/* 1640×920 artwork geometry, matched to center/cover so hotspots remain attached to the room. */
.veil-hotspot-layer{position:absolute;z-index:6;left:50%;top:50%;width:max(100vw,178.26087vh);aspect-ratio:41/23;transform:translate(-50%,-50%);pointer-events:none}
.veil-hotspot{position:absolute;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#f0dfc4;border-radius:22px;outline:none;pointer-events:auto}
.veil-hotspot::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(circle,rgba(220,171,255,.34),rgba(132,55,190,.12) 58%,transparent 78%);box-shadow:0 0 32px rgba(192,111,255,.55),inset 0 0 24px rgba(244,224,255,.12);transition:opacity .22s ease,transform .25s ease}
.veil-hotspot i{position:absolute;width:10px;height:10px;border-radius:50%;background:#c577ff;box-shadow:0 0 7px #d99cff,0 0 16px rgba(174,74,255,.9);animation:dotPulse 2.4s ease-in-out infinite;z-index:3}
.veil-hotspot span{position:relative;z-index:4;opacity:0;transform:translateY(7px);min-width:185px;padding:.52rem .7rem;background:rgba(7,4,9,.82);border:1px solid rgba(220,174,255,.48);border-radius:5px;text-align:center;text-shadow:0 2px 8px #000;box-shadow:0 0 18px rgba(151,70,207,.3);transition:.22s;pointer-events:none}
.veil-hotspot b{display:block;font:400 clamp(.72rem,.9vw,.98rem)/1.05 "Rye",Georgia,serif;letter-spacing:.08em;color:#ead5fa}.veil-hotspot small{display:block;margin-top:.24rem;font:italic 600 clamp(.58rem,.7vw,.76rem)/1.15 Georgia,serif;color:#dfcfb8;white-space:nowrap}
.veil-hotspot:hover::before,.veil-hotspot:focus-visible::before{opacity:1;transform:scale(1.035)}.veil-hotspot:hover span,.veil-hotspot:focus-visible span{opacity:1;transform:translateY(0)}
@keyframes dotPulse{0%,100%{opacity:.65;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
/* Landmarks selected from the approved Veil artwork. */
.watch{left:14.4%;top:26.5%;width:15%;height:19%}.watch i{left:50%;top:49%}
.explore{left:72.5%;top:15.5%;width:18%;height:22%}.explore i{left:48%;top:56%}
.examine{left:4.5%;top:66%;width:22%;height:25%}.examine i{left:59%;top:45%}
.discover{left:75%;top:62%;width:20%;height:28%}.discover i{left:42%;top:47%}
.veil-core{position:absolute;pointer-events:auto;left:34.4%;top:10.5%;width:32.4%;height:76%;border:0;border-radius:50%;background:transparent;cursor:pointer;outline:none;color:#eee0c9}
.veil-core::before{content:"";position:absolute;inset:3%;border-radius:50%;opacity:0;box-shadow:0 0 36px rgba(199,119,255,.55),inset 0 0 50px rgba(151,74,199,.22);background:radial-gradient(circle,transparent 52%,rgba(157,75,211,.13) 72%,transparent 78%);transition:opacity .45s ease}
.veil-core-copy{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-42%);padding:1rem;opacity:0;background:rgba(4,3,5,.68);border:1px solid rgba(220,181,244,.28);box-shadow:0 0 30px rgba(0,0,0,.55);text-align:center;text-shadow:0 2px 10px #000;transition:.3s}
.veil-core-copy b{display:block;font:400 clamp(1rem,1.65vw,1.55rem)/1.1 "Rye",Georgia,serif;letter-spacing:.06em;color:#f0dff7}.veil-core-copy em{display:block;margin:.55rem 0 .75rem;font:italic 600 clamp(.72rem,.95vw,.92rem)/1.45 Georgia,serif;color:#eadcc8}.veil-core-copy strong{display:block;font:700 clamp(.62rem,.75vw,.76rem)/1 Georgia,serif;letter-spacing:.16em;color:#c88cf0}
.veil-core:hover::before,.veil-core:focus-visible::before{opacity:1}.veil-core:hover .veil-core-copy,.veil-core:focus-visible .veil-core-copy{opacity:1;transform:translate(-50%,-50%)}
.time-echoes{position:absolute;z-index:5;inset:0;pointer-events:none}.time-echoes span{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.8);font:400 clamp(1.1rem,2.2vw,2.2rem)/1 "Rye",Georgia,serif;letter-spacing:.12em;color:#e5c7f7;text-shadow:0 0 16px #7f31ad,0 3px 12px #000}
.veil-ending{position:absolute;z-index:9;left:50%;top:51%;transform:translate(-50%,-50%);width:min(700px,70vw);opacity:0;pointer-events:none;padding:1.15rem 1.4rem;text-align:center;background:rgba(5,3,6,.78);border:1px solid rgba(218,174,246,.3);font:italic 700 clamp(.95rem,1.35vw,1.35rem)/1.5 Georgia,serif;color:#eadcc9;text-shadow:0 2px 9px #000;transition:opacity .8s ease}
.veil-room.awake .veil-dim{opacity:1}.veil-room.awake .veil-background{filter:contrast(1.08) brightness(.72);transform:scale(1.012)}.veil-room.awake .veil-core::before{opacity:1;animation:veilThrob 1.1s ease-in-out infinite}.veil-room.awake .veil-core-copy,.veil-room.awake .veil-hotspot{opacity:0;pointer-events:none}
.veil-room.awake .time-echoes span{animation:echo 7.2s ease-in-out forwards}.veil-room.awake .time-echoes span:nth-child(2){animation-delay:1s}.veil-room.awake .time-echoes span:nth-child(3){animation-delay:2s}.veil-room.awake .time-echoes span:nth-child(4){animation-delay:3s}.veil-room.awake .time-echoes span:nth-child(5){animation-delay:4s}.veil-room.awake .time-echoes span:nth-child(6){animation-delay:5s}
.veil-room.ending .veil-ending{opacity:1}.veil-room.restored .veil-ending{opacity:0}
@keyframes veilThrob{50%{box-shadow:0 0 65px rgba(207,129,255,.78),inset 0 0 80px rgba(170,88,220,.34)}}@keyframes echo{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}10%,20%{opacity:.88;transform:translate(-50%,-50%) scale(1.04)}30%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
.veil-back{z-index:20}
@media(max-width:700px){.veil-hotspot span{min-width:145px}.veil-hotspot small{white-space:normal}.veil-core-copy{width:92%}}
@media(prefers-reduced-motion:reduce){.veil-hotspot i,.veil-room.awake .veil-core::before,.veil-room.awake .time-echoes span{animation:none}.veil-room.awake .time-echoes span{display:none}}
.history-destination{position:relative;width:100vw;height:100vh;height:100svh;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 50% 42%,#211326 0,#0d0910 42%,#050405 78%);color:#eadcc9;text-align:center}.destination-card{width:min(760px,92vw);padding:clamp(1.5rem,4vw,3rem);border:1px solid rgba(208,157,239,.32);background:rgba(8,5,9,.78);box-shadow:0 0 45px rgba(117,50,155,.24)}.destination-kicker{font:700 .7rem/1 Georgia,serif;letter-spacing:.2em;color:#bc8bd5}.destination-card h1{margin:.55rem 0 .15rem;font:400 clamp(2rem,5vw,4.4rem)/1 "Rye",Georgia,serif;color:#ead4f6;text-shadow:0 0 18px rgba(155,79,199,.4)}.destination-card h2{margin:.2rem 0 1.3rem;font:italic 700 clamp(.95rem,1.8vw,1.35rem)/1.3 Georgia,serif;color:#d8c7ae}.destination-rule{height:1px;width:58%;margin:0 auto 1.35rem;background:linear-gradient(90deg,transparent,#9f66bc,transparent)}.destination-card h3{margin:.4rem 0 .65rem;font:400 clamp(1rem,1.7vw,1.35rem)/1.2 "Rye",Georgia,serif;letter-spacing:.04em}.destination-card p{margin:0 auto 1.5rem;max-width:580px;font:italic 600 .95rem/1.55 Georgia,serif;color:#cbbda9}.destination-card a{display:inline-block;padding:.6rem .85rem;border:1px solid rgba(205,155,236,.42);color:#ddc7eb;text-decoration:none;font:700 .72rem/1 Georgia,serif;letter-spacing:.09em}.destination-card a:hover{box-shadow:0 0 18px rgba(190,105,240,.42)}


/* ============================================================
   EXPLORE — THE HALLOWEEN TIMELINE
   This section is intentionally namespaced with "timeline-"
   so it does not alter THE VEIL OF AGES.
   ============================================================ */
.timeline-room{
 position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;
 color:#eee1ce;background:#070508;
 font-family:Georgia,serif
}
.timeline-room::before{
 content:"";position:absolute;inset:0;
 background:
   linear-gradient(rgba(4,2,6,.83),rgba(4,2,6,.9)),
   url("../assets/images/veil-of-ages.jpg") center/cover no-repeat;
 filter:saturate(.72) blur(1px);transform:scale(1.01)
}
.timeline-shell{
 position:relative;z-index:2;width:min(1180px,94vw);height:calc(100vh - 150px);
 height:calc(100svh - 150px);min-height:560px;margin:92px auto 58px;
 display:grid;grid-template-rows:auto 1fr auto;
 border:1px solid rgba(211,164,239,.34);border-radius:10px;
 background:linear-gradient(180deg,rgba(20,12,23,.94),rgba(7,5,9,.97));
 box-shadow:0 0 44px rgba(130,60,166,.28),0 24px 70px rgba(0,0,0,.66);
 overflow:hidden
}
.timeline-heading{
 position:relative;padding:1rem 3.8rem .9rem 1.35rem;
 border-bottom:1px solid rgba(214,170,240,.18);
 background:linear-gradient(90deg,rgba(83,38,104,.2),rgba(20,10,23,.04))
}
.timeline-kicker{font:700 .64rem/1 Georgia,serif;letter-spacing:.19em;color:#c398da}
.timeline-heading h1{margin:.28rem 0 .15rem;font:400 clamp(1.4rem,2.7vw,2.2rem)/1.05 "Rye",Georgia,serif;letter-spacing:.055em;color:#efdcbc}
.timeline-heading p{margin:0;color:#c8baa6;font:italic .8rem/1.35 Georgia,serif}
.timeline-close{
 position:absolute;right:.72rem;top:.72rem;padding:.52rem .72rem;
 border:1px solid rgba(213,170,238,.34);background:rgba(27,14,32,.82);
 color:#dbc5e8;text-decoration:none;font:700 .64rem/1 Georgia,serif;
 letter-spacing:.08em;border-radius:4px
}
.timeline-close:hover,.timeline-close:focus-visible{box-shadow:0 0 17px rgba(197,119,241,.48);outline:none}

.timeline-stage{min-height:0;display:grid;grid-template-columns:minmax(270px,38%) 1fr}
.timeline-image-pane{
 position:relative;min-height:0;background:#080609;border-right:1px solid rgba(214,170,240,.16);
 display:flex;align-items:center;justify-content:center;padding:1rem
}
.timeline-image-frame{
 position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;
 border:1px solid rgba(225,190,155,.3);border-radius:5px;background:#040304;
 box-shadow:inset 0 0 30px rgba(0,0,0,.55)
}
.timeline-image-frame img{width:100%;height:100%;object-fit:contain;display:block;background:rgba(0,0,0,.22)}
.timeline-era-mark{
 position:absolute;left:1.45rem;bottom:1.35rem;z-index:2;
 min-width:62px;padding:.45rem .6rem;border:1px solid rgba(224,186,244,.45);
 background:rgba(8,4,10,.86);color:#d6a9ed;text-align:center;
 font:400 1.1rem/1 "Rye",Georgia,serif;letter-spacing:.09em;
 box-shadow:0 0 15px rgba(162,80,205,.25)
}
.timeline-copy-pane{min-height:0;overflow:auto;padding:1.25rem 1.45rem 1.75rem;scrollbar-color:#744291 #100c12}
.timeline-entry-label{font:700 .62rem/1 Georgia,serif;letter-spacing:.17em;color:#bf8bd8}
.timeline-copy-pane h2{margin:.4rem 0 .25rem;font:400 clamp(1.25rem,2.1vw,1.85rem)/1.12 "Rye",Georgia,serif;letter-spacing:.025em;color:#f0ddbd}
.timeline-copy-pane h3{margin:0 0 1.05rem;font:italic 700 .9rem/1.35 Georgia,serif;color:#d0c0aa}
.timeline-body p{margin:.7rem 0;font:400 .9rem/1.58 Georgia,serif;color:#ede2d3}
.timeline-body strong{color:#f0dfc6}
.timeline-swingali,.timeline-sources{
 margin-top:1.25rem;padding:.9rem 1rem;border:1px solid rgba(206,157,234,.2);
 border-radius:5px;background:rgba(255,255,255,.025)
}
.timeline-swingali{border-color:rgba(205,151,239,.31);background:rgba(94,42,114,.15)}
.timeline-swingali h4,.timeline-sources h4{margin:0 0 .55rem;font:700 .64rem/1 Georgia,serif;letter-spacing:.14em;color:#c799df}
.timeline-swingali blockquote{margin:0;font:italic 700 .94rem/1.52 Georgia,serif;color:#efdfca}
.timeline-sources ol{margin:.2rem 0 0;padding-left:1.2rem}
.timeline-sources li{margin:.48rem 0;font:.72rem/1.38 Georgia,serif;color:#ac9cac}
.timeline-sources a{color:#d6b4e8;text-underline-offset:2px}
.timeline-sources a:hover{color:#f0dbff}
.timeline-source-note{margin:.65rem 0 0!important;font:italic .66rem/1.35 Georgia,serif!important;color:#887d8c!important}

.timeline-nav{
 display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
 padding:.78rem 1rem .88rem;border-top:1px solid rgba(214,170,240,.18);
 background:rgba(12,8,14,.96)
}
.timeline-arrow{
 min-width:92px;padding:.56rem .62rem;border:1px solid rgba(207,160,236,.28);
 border-radius:4px;background:rgba(74,35,91,.22);color:#d9c5e5;
 font:700 .65rem/1 Georgia,serif;letter-spacing:.08em;cursor:pointer
}
.timeline-arrow:hover:not(:disabled),.timeline-arrow:focus-visible:not(:disabled){box-shadow:0 0 16px rgba(188,106,235,.42);outline:none}
.timeline-arrow:disabled{opacity:.25;cursor:default}
.timeline-nodes{display:grid;grid-template-columns:repeat(9,1fr);gap:.32rem;align-items:center}
.timeline-node{
 position:relative;height:38px;border:0;background:transparent;color:#8e8091;
 font:700 .65rem/1 Georgia,serif;cursor:pointer
}
.timeline-node::before{
 content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
 transform:translate(-50%,-50%);background:#7c4b91;
 box-shadow:0 0 7px rgba(178,99,220,.42);transition:.18s
}
.timeline-node::after{
 content:"";position:absolute;left:calc(50% + 7px);right:calc(-50% + 7px);top:50%;
 height:1px;background:rgba(164,106,190,.24)
}
.timeline-node:last-child::after{display:none}
.timeline-node span{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);white-space:nowrap}
.timeline-node:hover::before,.timeline-node:focus-visible::before,.timeline-node.active::before{
 width:13px;height:13px;background:#c27af0;box-shadow:0 0 8px #d69aff,0 0 20px rgba(174,76,232,.74)
}
.timeline-node.active{color:#d8b7e8}
.timeline-node:focus-visible{outline:none}

@media(max-width:820px){
 .timeline-shell{height:calc(100svh - 130px);margin:80px auto 50px}
 .timeline-stage{grid-template-columns:1fr;grid-template-rows:minmax(190px,38%) 1fr}
 .timeline-image-pane{border-right:0;border-bottom:1px solid rgba(214,170,240,.16);padding:.7rem}
 .timeline-image-frame{min-height:180px}
 .timeline-copy-pane{padding:1rem}
 .timeline-nav{grid-template-columns:68px 1fr 68px;gap:.35rem;padding:.6rem}
 .timeline-arrow{min-width:0;padding:.5rem .3rem;font-size:.58rem}
 .timeline-node span{display:none}
}
@media(max-width:520px){
 .timeline-shell{width:96vw;height:calc(100svh - 114px);margin:70px auto 44px}
 .timeline-heading{padding:.8rem 3.4rem .7rem .9rem}
 .timeline-heading p{font-size:.7rem}
 .timeline-image-pane{display:none}
 .timeline-stage{grid-template-columns:1fr;grid-template-rows:1fr}
 .timeline-copy-pane h2{font-size:1.18rem}
 .timeline-copy-pane h3{font-size:.8rem}
 .timeline-body p{font-size:.83rem}
}


/* ============================================================
   EXPLORE ONLY — MOVE PERMANENT AMBIENCE BAR ABOVE THE TIMELINE
   Keeps the shared ambience controls clear of the I–IX timeline
   navigation while leaving every other room's ambience position
   unchanged.
   ============================================================ */
body[data-location="EXPLORE — The Halloween Timeline"].has-site-shell .ambience-bar{
  top:calc(var(--shell-height) + 8px);
  bottom:auto;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(500px,42vw);
}

@media(max-width:900px){
  body[data-location="EXPLORE — The Halloween Timeline"].has-site-shell .ambience-bar{
    top:calc(var(--shell-height) + 7px);
    left:50%;
    right:auto;
    bottom:auto;
    transform:translateX(-50%);
    width:min(390px,56vw);
  }
}

@media(max-width:650px){
  body[data-location="EXPLORE — The Halloween Timeline"].has-site-shell .ambience-bar{
    top:calc(var(--shell-height) + 6px);
    left:50%;
    right:auto;
    bottom:auto;
    transform:translateX(-50%);
    width:calc(100vw - 20px);
  }
}


/* ============================================================
   RECOVERY RECONCILIATION — VEIL OF AGES MARKERS
   ============================================================ */
.veil-hotspot i{
  width:clamp(18px,1.35vw,24px) !important;
  height:clamp(18px,1.35vw,24px) !important;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,#efc9ff 9% 22%,#c36df2 42%,#681b8c 72%,
      rgba(77,10,107,.28) 78%,transparent 80%) !important;
  border:1px solid rgba(247,226,255,.98);
  box-shadow:
    0 0 7px rgba(246,223,255,.98),
    0 0 17px rgba(205,105,255,.98),
    0 0 31px rgba(142,43,205,.82) !important;
  animation:veilUxPulse 1.8s ease-in-out infinite,
            veilUxTurn 4.6s linear infinite !important;
}
@keyframes veilUxPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes veilUxTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}
@media(prefers-reduced-motion:reduce){
  .veil-hotspot i{animation:none !important}
}


/* ============================================================
   VEIL OF AGES — CENTER PORTAL MARKER RESTORATION
   Marker is decorative; the entire center portal remains clickable.
   ============================================================ */
.veil-core::after{
  content:"";
  position:absolute;
  z-index:12;
  right:9%;
  top:9%;
  width:clamp(20px,1.5vw,27px);
  height:clamp(20px,1.5vw,27px);
  border:1px solid rgba(247,226,255,.98);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,
      #efc9ff 9% 22%,
      #c36df2 42%,
      #681b8c 72%,
      rgba(77,10,107,.28) 78%,
      transparent 80%);
  box-shadow:
    0 0 7px rgba(246,223,255,.98),
    0 0 17px rgba(205,105,255,.98),
    0 0 31px rgba(142,43,205,.82);
  pointer-events:none;
  transform-origin:center;
  animation:
    veilCoreMarkerPulse 1.8s ease-in-out infinite,
    veilCoreMarkerTurn 4.6s linear infinite;
}
.veil-core:hover::after,
.veil-core:focus-visible::after{
  filter:brightness(1.2);
  box-shadow:
    0 0 9px rgba(255,242,255,1),
    0 0 23px rgba(220,139,255,1),
    0 0 40px rgba(155,51,221,.96);
}
@keyframes veilCoreMarkerPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes veilCoreMarkerTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}
@media(prefers-reduced-motion:reduce){
  .veil-core::after{animation:none}
}