*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#080604}
body{overflow:hidden}
.archives-room{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#080604}
.archives-background{position:absolute;inset:0;background:url("../assets/images/great-swingali-archives.png") center/cover no-repeat}
.realm-title{
 position:absolute;z-index:5;top:1.8%;left:50%;transform:translateX(-50%);margin:0;
 width:max-content;max-width:90vw;color:#ead8b8;
 font:400 clamp(1.15rem,1.75vw,1.85rem)/1.05 "Rye",Georgia,serif;
 letter-spacing:.055em;text-align:center;
 text-shadow:0 3px 10px rgba(0,0,0,.98),0 0 12px rgba(167,99,232,.20);
 pointer-events:none
}
.archive-hotspot{
 position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;
 text-decoration:none;color:#f1ddbc;border-radius:18px;outline:none;cursor:pointer
}
.archive-hotspot::before{
 content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
 background:radial-gradient(circle,rgba(220,171,255,.36),rgba(145,76,205,.12) 62%,transparent 80%);
 box-shadow:0 0 28px rgba(210,153,255,.62),inset 0 0 24px rgba(246,226,255,.18);
 transition:opacity .22s ease,transform .25s ease
}
.archive-hotspot span{
 position:relative;z-index:2;opacity:0;transform:translateY(6px);padding:.48rem .72rem;
 background:rgba(7,5,5,.70);border:1px solid rgba(227,196,157,.34);border-radius:4px;
 font:700 clamp(.72rem,.9vw,.98rem)/1.1 Georgia,serif;letter-spacing:.07em;text-align:center;
 text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 8px #000;
 box-shadow:0 0 12px rgba(0,0,0,.42);transition:opacity .22s ease,transform .22s ease;pointer-events:none
}


.archive-hotspot:hover::before,.archive-hotspot:focus-visible::before{opacity:1;transform:scale(1.035)}
.archive-hotspot:hover span,.archive-hotspot:focus-visible span{opacity:1;transform:translateY(0)}
/* The four section hotspots are positioned in a 3:2 layer that uses the
   exact same CENTER/COVER geometry as the 1536×1024 Archives artwork.
   This keeps each glow directly over its burned-in sign text on different
   screen shapes without resizing or altering the room image. */
.archive-sign-hotspot-layer{
 position:absolute;
 z-index:6;
 left:50%;
 top:50%;
 width:max(100vw,150vh);
 aspect-ratio:3/2;
 transform:translate(-50%,-50%);
 pointer-events:none
}
.archive-sign-hotspot-layer .archive-hotspot{pointer-events:auto}

/* Precisely aligned to the lettering on the left-hand Archives sign. */
.history{left:25.45%;top:28.85%;width:8.05%;height:2.75%}
.lore{left:25.20%;top:31.05%;width:8.55%;height:2.85%}
.strange{left:25.05%;top:33.30%;width:8.85%;height:2.90%}
.hauntings{left:25.05%;top:37.55%;width:8.90%;height:5.20%}
.forbidden{left:2%;top:20%;width:16%;height:28%}
.return-link{
 position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:7;
 padding:.48rem .8rem;color:rgba(239,220,185,.60);font:600 .72rem/1.1 Georgia,serif;
 letter-spacing:.08em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 7px #000;
 opacity:.22;transition:.2s
}
.return-link:hover,.return-link:focus-visible{opacity:1;text-shadow:0 0 12px rgba(183,117,255,.85),0 2px 7px #000}


.forbidden-message{
 position:absolute;
 z-index:9;
 left:10.2%;
 top:51%;
 transform:translate(-50%,-50%) scale(.96);
 width:min(320px,28vw);
 padding:.85rem 1rem;
 opacity:0;
 pointer-events:none;
 color:#ecd9ff;
 background:rgba(9,5,12,.88);
 border:1px solid rgba(218,171,255,.52);
 border-radius:6px;
 font:italic 700 clamp(.82rem,1vw,1.05rem)/1.35 Georgia,serif;
 text-align:center;
 text-shadow:0 2px 8px #000,0 0 12px rgba(183,103,255,.55);
 box-shadow:0 0 26px rgba(182,101,255,.42);
 transition:opacity .2s ease,transform .2s ease;
}
.forbidden-message.is-visible{
 opacity:1;
 transform:translate(-50%,-50%) scale(1);
 pointer-events:auto;
}

.forbidden-message{
  max-height:76vh;
  overflow:auto;
}
.forbidden-message strong,
.forbidden-message em{display:block}
.forbidden-message em{margin-top:.35rem}
.open-tome{
  display:block;
  margin:.85rem auto .15rem;
  padding:.58rem .9rem;
  border:1px solid rgba(225,187,255,.7);
  background:rgba(66,23,91,.82);
  color:#f4e7ff;
  font:700 .8rem/1 Georgia,serif;
  letter-spacing:.08em;
  cursor:pointer;
  transition:opacity .25s ease,box-shadow .2s ease;
}
.open-tome:hover{box-shadow:0 0 18px rgba(210,153,255,.72)}
.tome-result{margin-top:1rem;text-align:left}
.tome-result .tome-kind{font-size:.62rem;letter-spacing:.12em;color:#cda8e5;text-align:center}
.tome-result h2{margin:.4rem 0 .15rem;text-align:center;font:400 1.18rem/1.1 "Rye",Georgia,serif}
.tome-result h3{margin:0 0 .65rem;text-align:center;font:italic 700 .82rem/1.2 Georgia,serif;color:#d8c5aa}
.tome-result p{margin:.5rem 0;font:400 .8rem/1.42 Georgia,serif;color:#efe5d7}
.tome-result blockquote{margin:.75rem 0 0;padding:.55rem .65rem;border-left:2px solid rgba(210,153,255,.7);font:italic 700 .76rem/1.35 Georgia,serif;color:#e4c9f6}

.tome-close{
  position:absolute;
  top:.4rem;
  right:.55rem;
  width:1.8rem;
  height:1.8rem;
  padding:0;
  border:0;
  background:transparent;
  color:#e8d4f7;
  font:700 1.45rem/1 Georgia,serif;
  cursor:pointer;
  opacity:.65;
  text-shadow:0 0 10px rgba(194,120,255,.65);
}
.tome-close:hover,
.tome-close:focus-visible{
  opacity:1;
}
.forbidden-message{
  cursor:pointer;
}
.forbidden-message button,
.forbidden-message a{
  cursor:pointer;
}

.tome-close{
  z-index:20;
}


/* ===== STRANGE BUT TRUE — VERIFIED TEXT ARCHIVE ===== */
.strange-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.5rem);background:rgba(2,1,3,.82);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.strange-modal.is-visible{opacity:1;pointer-events:auto}
.strange-card{position:relative;width:min(920px,94vw);height:min(84vh,860px);overflow:hidden;border:1px solid rgba(210,153,255,.5);border-radius:10px;background:linear-gradient(180deg,rgba(22,14,25,.98),rgba(10,7,11,.99));box-shadow:0 0 42px rgba(145,76,205,.38),0 20px 80px #000;color:#eee2d1;font-family:Georgia,serif}
.strange-close{position:absolute;z-index:4;right:.65rem;top:.55rem;width:2.35rem;height:2.35rem;border:1px solid rgba(226,193,255,.38);border-radius:50%;background:rgba(25,11,31,.92);color:#ead7f8;font:700 1.65rem/1 Georgia,serif;cursor:pointer;box-shadow:0 0 14px rgba(183,103,255,.28)}
.strange-close:hover,.strange-close:focus-visible{box-shadow:0 0 22px rgba(211,158,255,.72);outline:none}
.strange-header{padding:1.15rem 4rem .9rem 1.5rem;border-bottom:1px solid rgba(226,193,255,.18);background:rgba(45,24,53,.28)}
.strange-kicker{font:700 .66rem/1.1 Georgia,serif;letter-spacing:.18em;color:#cba7df}
.strange-header h2{margin:.25rem 0 .25rem;color:#f0ddbc;font:400 clamp(1.35rem,2.4vw,2rem)/1.05 "Rye",Georgia,serif;letter-spacing:.06em}
.strange-header p{margin:0;max-width:720px;color:#cdbfae;font:italic .82rem/1.35 Georgia,serif}
.strange-view{height:calc(100% - 104px);overflow:auto;padding:1.15rem 1.35rem 1.7rem;scrollbar-color:#6e3c88 #120c14}
.strange-index-intro{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin:0 0 .85rem;padding:.1rem .15rem .7rem;border-bottom:1px solid rgba(220,190,245,.16)}
.strange-index-intro strong{font-size:.72rem;letter-spacing:.13em;color:#d5b6e8}.strange-index-intro span{font-size:.74rem;color:#aa9aab}
.strange-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.strange-file{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:.75rem;min-height:58px;padding:.7rem .8rem;text-align:left;border:1px solid rgba(216,181,241,.18);border-radius:5px;background:rgba(255,255,255,.025);color:#eadfce;cursor:pointer;transition:.18s}
.strange-file:hover,.strange-file:focus-visible{transform:translateY(-1px);border-color:rgba(218,171,255,.58);background:rgba(128,64,157,.16);box-shadow:0 0 18px rgba(181,100,224,.18);outline:none}
.strange-file b{font-size:.68rem;letter-spacing:.1em;color:#bd8bd7}.strange-file span{font-size:.83rem;line-height:1.22}
.strange-article{max-width:760px;margin:0 auto;padding:.15rem .2rem 1rem}
.strange-back{margin:0 0 1rem;padding:.48rem .68rem;border:1px solid rgba(214,178,239,.25);background:rgba(84,41,103,.25);color:#d9c3e8;font:700 .67rem/1 Georgia,serif;letter-spacing:.08em;cursor:pointer}
.strange-file-number{font:700 .67rem/1.2 Georgia,serif;letter-spacing:.17em;color:#bd8bd7}
.strange-article>h2{margin:.42rem 0 .3rem;color:#f2dfbd;font:400 clamp(1.35rem,2.3vw,2rem)/1.1 "Rye",Georgia,serif;letter-spacing:.025em}
.strange-article>h3{margin:0 0 1.1rem;color:#cbbca8;font:italic 700 .92rem/1.4 Georgia,serif}
.strange-body p,.strange-did p{margin:.78rem 0;color:#eee4d6;font:400 .93rem/1.62 Georgia,serif}
.strange-body p:first-child{margin-top:0}
.strange-did,.strange-swingali,.strange-sources{margin-top:1.35rem;padding:1rem 1.05rem;border:1px solid rgba(213,177,237,.18);border-radius:5px;background:rgba(255,255,255,.025)}
.strange-did h4,.strange-swingali h4,.strange-sources h4{margin:0 0 .55rem;color:#c79cdf;font:700 .69rem/1 Georgia,serif;letter-spacing:.14em}
.strange-swingali{background:rgba(87,40,107,.17);border-color:rgba(205,151,239,.3)}
.strange-swingali blockquote{margin:0;color:#f0dfc8;font:italic 700 .98rem/1.55 Georgia,serif}
.strange-sources ol{margin:.3rem 0 0;padding-left:1.3rem}.strange-sources li{margin:.55rem 0;color:#a99bad;font-size:.76rem;line-height:1.4}.strange-sources a{color:#d7b6e9;text-decoration:underline;text-underline-offset:2px}.strange-sources a:hover{color:#f0dcff}
.source-note{margin:.8rem 0 0;color:#8f818f;font:italic .68rem/1.35 Georgia,serif}
body.strange-open{overflow:hidden}
@media(max-width:700px){.strange-card{width:96vw;height:88vh}.strange-header{padding-left:1rem}.strange-view{padding:1rem}.strange-index{grid-template-columns:1fr}.strange-index-intro{align-items:flex-start;flex-direction:column}.strange-file{grid-template-columns:72px 1fr}.strange-body p,.strange-did p{font-size:.9rem}}


/* ============================================================
   ARCHIVES — FIRST-VISIT UX / READABILITY BATCH
   Room-scoped only. Existing hotspot geometry and behavior remain intact.
   ============================================================ */

.archive-hotspot{
  --archive-marker-size:clamp(14px,1.1vw,19px);
  --archive-marker-x:calc(100% + 11px);
  --archive-marker-y:50%;
}

/* Separate Portal-purple marker; positioned beside the sign/object,
   never over the burned-in sign lettering. */
.archive-hotspot::after{
  content:"";
  position:absolute;
  z-index:5;
  left:var(--archive-marker-x);
  top:var(--archive-marker-y);
  width:var(--archive-marker-size);
  height:var(--archive-marker-size);
  margin-left:calc(var(--archive-marker-size)/-2);
  margin-top:calc(var(--archive-marker-size)/-2);
  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:archiveMarkerPulse 1.8s ease-in-out infinite,
            archiveMarkerTurn 4.6s linear infinite;
}
.archive-hotspot:hover::after,
.archive-hotspot: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 archiveMarkerPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes archiveMarkerTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}

/* Individual placement keeps dots beside text/objects and clear of other hotspots. */
.archive-hotspot.history{--archive-marker-x:calc(100% + 11px);--archive-marker-y:50%}
.archive-hotspot.lore{--archive-marker-x:calc(100% + 11px);--archive-marker-y:50%}
.archive-hotspot.strange{--archive-marker-x:calc(100% + 11px);--archive-marker-y:50%}
.archive-hotspot.hauntings{--archive-marker-x:calc(100% + 11px);--archive-marker-y:32%}
.archive-hotspot.forbidden{
  --archive-marker-x:92%;
  --archive-marker-y:10%;
  --archive-marker-size:clamp(15px,1.25vw,21px);
}

/* STRANGE BUT TRUE readability: larger panel, larger body/captions, stronger contrast. */
.strange-card{
  width:min(1080px,95vw);
  height:min(88vh,900px);
}
.strange-header{padding:1.35rem 4.4rem 1.05rem 1.8rem}
.strange-header h2{font-size:clamp(1.55rem,2.7vw,2.35rem)}
.strange-header p{
  max-width:820px;
  color:#ddd0bd;
  font-size:clamp(.9rem,1vw,1.02rem);
  line-height:1.5;
}
.strange-view{
  padding:1.35rem 1.6rem 2rem;
  scrollbar-width:auto;
  scrollbar-color:#a861cf #120c14;
}
.strange-view::-webkit-scrollbar{width:12px}
.strange-view::-webkit-scrollbar-track{background:#120c14}
.strange-view::-webkit-scrollbar-thumb{
  border:2px solid #120c14;
  border-radius:8px;
  background:linear-gradient(#bd78e5,#75428f);
}
.strange-file{
  min-height:70px;
  grid-template-columns:92px 1fr;
  padding:.85rem 1rem;
}
.strange-file b{font-size:clamp(.72rem,.78vw,.82rem)}
.strange-file span{font-size:clamp(.94rem,1vw,1.05rem);line-height:1.35}
.strange-article{max-width:850px}
.strange-article>h2{font-size:clamp(1.55rem,2.6vw,2.25rem)}
.strange-article>h3{font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.5}
.strange-body p,.strange-did p{
  color:#f1e8dc;
  font-size:clamp(1rem,1.08vw,1.13rem);
  line-height:1.72;
}
.strange-swingali blockquote{
  font-size:clamp(1rem,1.08vw,1.12rem);
  line-height:1.62;
}
.strange-sources li{
  color:#c5b6c6;
  font-size:clamp(.84rem,.9vw,.94rem);
  line-height:1.5;
}

/* Forbidden Tome is also an information panel, so it receives the same
   first-visit readability standard without changing its interaction. */
.forbidden-message{
  width:min(460px,36vw);
  padding:1.1rem 1.2rem;
  font-size:clamp(.95rem,1.08vw,1.12rem);
  line-height:1.5;
}
.tome-result h2{font-size:clamp(1.25rem,1.55vw,1.55rem)}
.tome-result h3{font-size:clamp(.9rem,1vw,1.02rem)}
.tome-result p{font-size:clamp(.92rem,1vw,1.04rem);line-height:1.58}
.tome-result blockquote{font-size:clamp(.88rem,.96vw,1rem);line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .archive-hotspot::after{animation:none}
}


/* ============================================================
   RECOVERY RECONCILIATION — ARCHIVES
   ============================================================ */

/* Enlarged Forbidden Tome must stay fully inside the viewport. */
.forbidden-message{
  left:24% !important;
  width:min(470px,42vw) !important;
  max-width:calc(100vw - 40px) !important;
  top:52% !important;
}
@media(max-width:900px){
  .forbidden-message{
    left:50% !important;
    width:min(520px,88vw) !important;
  }
}

/* Keep the Strange But True internal return control unmistakably visible. */
.strange-back{
  display:inline-flex !important;
  align-items:center;
  min-height:38px;
  padding:.62rem .82rem !important;
  border-color:rgba(220,171,255,.58) !important;
  background:rgba(106,45,132,.42) !important;
  color:#f0ddfb !important;
  font-size:clamp(.74rem,.82vw,.88rem) !important;
  box-shadow:0 0 12px rgba(190,105,240,.18);
}
.strange-back:hover,.strange-back:focus-visible{
  box-shadow:0 0 20px rgba(211,158,255,.55) !important;
  outline:none;
}