@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --ink:#1c140d;
  --ink-soft:#2a1f15;
  --parchment:#ece2c6;
  --parchment-dim:#d9cba0;
  --parchment-deep:#c9b787;
  --brass:#b98b3e;
  --brass-bright:#e0b264;
  --ribbon:#7a2430;
  --moss:#445c40;
  --shadow: rgba(0,0,0,.55);
  --radius: 3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse at top, #2a1f15 0%, #1c140d 60%),
    var(--ink);
  color:var(--parchment);
  font-family:'EB Garamond', serif;
  font-size:18px;
  line-height:1.6;
  min-height:100vh;
}

::selection{ background:var(--brass); color:var(--ink); }

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  z-index:2000;
}

h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--brass-bright);
  margin:.2em 0 .5em;
}

.blackletter{
  font-family:'UnifrakturMaguntia', cursive;
  font-weight:400;
  color:var(--brass-bright);
  text-shadow: 0 0 18px rgba(224,178,100,.35);
  line-height:1.3;
}

a{ color:var(--brass-bright); text-decoration:none; border-bottom:1px solid rgba(224,178,100,.35); }
a:hover{ color:var(--parchment); border-bottom-color:var(--parchment); }

img{max-width:100%; display:block;}

/* nav */
.stacks-nav{
  position:sticky; top:0; z-index:500;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(28,20,13,.96) 100%);
  border-bottom:1px solid var(--brass);
  padding:.6em 1em;
  display:flex; flex-wrap:wrap; gap:.3em 1.2em;
  align-items:center;
  justify-content:center;
}
.stacks-nav a{
  font-family:'Cormorant Garamond', serif;
  font-size:1.05em;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:none;
  color:var(--parchment-dim);
  padding:.2em .3em;
  position:relative;
}
.stacks-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--brass-bright);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.stacks-nav a:hover::after,
.stacks-nav a.current::after{ transform:scaleX(1); }
.stacks-nav a.current{ color:var(--brass-bright); }

/* layout */
.page{
  max-width:920px;
  margin:0 auto;
  padding:3em 1.5em 5em;
}
.book-page{
  background:
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dim) 100%);
  color:var(--ink);
  border-radius:2px;
  padding:2.5em 3em;
  box-shadow: 0 20px 50px var(--shadow), inset 0 0 0 1px rgba(0,0,0,.15);
  position:relative;
}
.book-page::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:10px;
  background: repeating-linear-gradient(180deg, var(--ribbon) 0 10px, #5c1c25 10px 20px);
  border-radius:2px 0 0 2px;
}
.book-page h1, .book-page h2, .book-page h3{ color:var(--ribbon); }
.book-page a{ color:var(--moss); border-bottom-color:rgba(68,90,64,.4); }
.book-page a:hover{ color:var(--ribbon); border-bottom-color:var(--ribbon); }

.eyebrow{
  font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:.8em;
  color:var(--brass);
}

.center{ text-align:center; }

footer.bookplate{
  max-width:920px; margin:0 auto; padding:2em 1.5em 4em;
  text-align:center; font-size:.85em; color:var(--parchment-deep);
  border-top:1px solid rgba(185,139,62,.25); margin-top:2em; padding-top:2em;
}

/* index.html entrance */
.entrance-wrap{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:2em 1em;
}
.door{
  width:220px; height:340px; margin:1.5em auto 2em;
  background:linear-gradient(180deg,#3b2818,#20140b);
  border:6px solid var(--brass);
  border-radius:110px 110px 6px 6px;
  position:relative;
  box-shadow: 0 0 60px rgba(224,178,100,.15), 0 25px 60px var(--shadow);
  transition: box-shadow .4s ease, transform .4s ease;
}
.door::before{
  content:""; position:absolute; right:22px; top:50%;
  width:14px; height:14px; border-radius:50%;
  background:var(--brass-bright); box-shadow:0 0 12px var(--brass-bright);
}
.door::after{
  content:""; position:absolute; inset:30px 18px;
  border:2px solid rgba(185,139,62,.5); border-radius:80px 80px 4px 4px;
}
.entrance-wrap:hover .door, .door:hover{
  box-shadow: 0 0 90px rgba(224,178,100,.35), 0 25px 60px var(--shadow);
  transform:translateY(-4px);
}
.enter-btn{
  display:inline-block;
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:.25em;
  background:var(--brass); color:var(--ink);
  padding:.8em 2em; border-radius:2px; border:none;
  cursor:pointer; font-size:1em; margin-top:1em;
  transition:background .25s ease, transform .2s ease;
}
.enter-btn:hover{ background:var(--brass-bright); transform:translateY(-2px); }

/* map + librarian */
.map-wrap{
  display:grid; grid-template-columns: 1.6fr 1fr; gap:2.5em; align-items:start;
}
@media(max-width:900px){ .map-wrap{ grid-template-columns:1fr; } }

.map-svg{
  width:100%; height:auto;
  filter: drop-shadow(0 15px 40px rgba(0,0,0,.5));
}
.map-room{ cursor:pointer; transition:opacity .2s ease, transform .2s ease; transform-origin:center; }
.map-room:hover, .map-room:focus{ opacity:.85; transform:scale(1.015); outline:none; }
.map-room-label{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  font-size:22px;
  fill:#1c140d;
  pointer-events:none;
}
.map-room-sublabel{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:14px;
  fill:#3a2e1c;
  pointer-events:none;
}

.librarian-box{
  background:var(--parchment);
  color:var(--ink);
  border-radius:4px;
  padding:2em;
  box-shadow: 0 15px 40px var(--shadow), inset 0 0 0 2px var(--brass);
  position:relative;
}
.librarian-box::before{
  content:"📖";
  font-size:2em;
  display:block; margin-bottom:.3em;
}
.librarian-box strong{ font-family:'Cormorant Garamond', serif; font-size:1.2em; letter-spacing:.05em; }
#librarian-text{ font-style:italic; font-size:1.15em; min-height:5em; margin-top:.6em; }

.map-pin-number{
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:22px;
  fill:#ece2c6; text-anchor:middle; pointer-events:none;
}
.map-legend{
  margin-top:1.5em; background:var(--parchment); color:var(--ink);
  border-radius:4px; padding:1.5em 2em;
  box-shadow:0 15px 40px var(--shadow), inset 0 0 0 2px var(--brass);
}
.map-legend h3{
  color:var(--ribbon); margin-top:0; font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:.15em; font-size:1em;
  border-bottom:1px solid var(--parchment-deep); padding-bottom:.4em; margin-bottom:.7em;
}
.map-legend ol{ margin:0; padding-left:1.5em; columns:2; column-gap:2em; }
.map-legend li{ margin-bottom:.5em; }
.map-legend a{ color:var(--moss); font-weight:600; }
.map-legend a:hover{ color:var(--ribbon); }

/* radio */
.radio{
  background:linear-gradient(160deg,#3a2a1c,#1c140d);
  border:4px solid var(--brass);
  border-radius:10px;
  padding:1.5em;
  color:var(--parchment);
  box-shadow: 0 20px 50px var(--shadow);
}
.radio h2{ color:var(--brass-bright); margin-top:0; }
.radio-dial{
  display:flex; align-items:center; gap:1em; flex-wrap:wrap;
  background:var(--ink); border-radius:6px; padding:1em; margin-bottom:1em;
}
.radio-dial button{
  background:var(--brass); border:none; color:var(--ink);
  font-family:'Cormorant Garamond', serif; font-size:1em;
  padding:.5em 1em; border-radius:2px; cursor:pointer;
}
.radio-dial button:hover{ background:var(--brass-bright); }
.track-list{ list-style:none; padding:0; margin:0; }
.track-list li{
  padding:.5em .7em; border-bottom:1px dashed rgba(185,139,62,.3);
  cursor:pointer; display:flex; justify-content:space-between;
}
.track-list li:hover, .track-list li.playing{ color:var(--brass-bright); }
.now-playing{ font-family:'Cormorant Garamond', serif; letter-spacing:.05em; margin:0 0 .5em; }

/* tarot */
.tarot-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:1em; margin:2em 0;
}
.card{
  perspective:1000px; height:180px; cursor:pointer;
}
.card-inner{
  position:relative; width:100%; height:100%;
  transition:transform .6s;
  transform-style:preserve-3d;
}
.card.flipped .card-inner{ transform:rotateY(180deg); }
.card-face{
  position:absolute; inset:0;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
  padding:.6em; text-align:center;
  box-shadow: 0 8px 18px var(--shadow);
}
.card-back{
  background:
    repeating-linear-gradient(45deg, var(--ink) 0 8px, var(--ink-soft) 8px 16px);
  border:2px solid var(--brass);
  color:var(--brass-bright);
  font-family:'UnifrakturMaguntia', cursive;
  font-size:1.8em;
}
.card-front{
  background:var(--parchment);
  color:var(--ink);
  border:2px solid var(--ribbon);
  transform:rotateY(180deg);
  flex-direction:column; gap:.2em;
}
.card-front .num{ font-family:'Cormorant Garamond', serif; color:var(--brass); font-size:.8em; }
.card-front .name{ font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.1em; color:var(--brass) }
.card-front .meaning{ font-size:1em; line-height:1.3; color:var(--brass) }

.draw-btn{
  font-family:'Cormorant Garamond', serif; text-transform:uppercase; letter-spacing:.2em;
  background:var(--ribbon); color:var(--brass); border:none;
  padding:.7em 1.6em; border-radius:2px; cursor:pointer; font-size:1em;
}
.draw-btn:hover{ background:#932b39; }
.reading-result{
  margin-top:1.5em; padding:1.2em; border:1px dashed var(--ribbon);
  border-radius:4px; display:none;
}
.reading-result.active{ display:block; }

/* guestbook */
.guestbook-form{ display:grid; gap:.8em; max-width:480px; }
.guestbook-form input, .guestbook-form textarea{
  font-family:'EB Garamond', serif; font-size:1em;
  padding:.6em .7em; border:1px solid var(--parchment-deep);
  background:rgba(255,255,255,.5); border-radius:2px; color:var(--ink);
}
.guestbook-form button{
  justify-self:start;
  background:var(--ribbon); color:var(--parchment); border:none;
  padding:.6em 1.4em; border-radius:2px; cursor:pointer;
  font-family:'Cormorant Garamond', serif; letter-spacing:.1em; text-transform:uppercase;
}
.guestbook-form button:hover{ background:#932b39; }
.gb-entries{ list-style:none; padding:0; margin-top:1.5em; display:grid; gap:.8em; }
.gb-entries li{ border-left:3px solid var(--ribbon); padding:.4em .9em; background:rgba(0,0,0,.03); }
.gb-entries time{ font-size:.75em; color:var(--brass); display:block; }

/* links page */
.links-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1em; }
.links-grid a{
  display:block; border:1px solid rgba(122,36,48,.3); border-radius:3px;
  padding:1em; background:rgba(255,255,255,.15); border-bottom-width:1px;
}
.links-grid a:hover{ background:rgba(255,255,255,.3); }

/* 404 */
.notfound{ text-align:center; padding-top:4em; }
.notfound .blackletter{ font-size:3em; }

@media(max-width:600px){
  .book-page{ padding:2em 1.4em; }
  .door{ width:170px; height:270px; }
}

/* photo map - illustrated map with clickable room hotspots */
.photo-map-wrap{
  position:relative;
  max-width:1150px; margin:1.5em auto 0;
  border-radius:6px; overflow:hidden;
  border:6px solid var(--brass);
  box-shadow: 0 25px 60px var(--shadow);
}
.photo-map-wrap img{ width:100%; height:auto; display:block; }
.level-hotspots{ position:absolute; inset:0; }

.room-hotspot{
  position:absolute;
  display:block;
  border-radius:3px;
  border:2px solid rgba(224,178,100,.55);
  background:rgba(224,178,100,.16);
  box-shadow: 0 0 14px 2px rgba(224,178,100,.35) inset, 0 0 10px rgba(224,178,100,.35);
  animation: hotspot-pulse 2.6s ease-in-out infinite;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.room-hotspot:hover, .room-hotspot:focus-visible{
  background:rgba(224,178,100,.32);
  border-color:var(--brass-bright);
  box-shadow: 0 0 20px 4px rgba(224,178,100,.55) inset, 0 0 18px rgba(224,178,100,.6);
  outline:none;
}
@keyframes hotspot-pulse{
  0%, 100% { opacity:.75; }
  50% { opacity:1; }
}
.room-hotspot-label{
  position:absolute;
  bottom:104%; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--brass-bright);
  padding:.35em .7em; border-radius:3px;
  font-family:'Cormorant Garamond', serif; font-size:.85em; letter-spacing:.03em;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  border:1px solid var(--brass);
  z-index:10;
}
.room-hotspot:hover .room-hotspot-label,
.room-hotspot:focus-visible .room-hotspot-label{ opacity:1; }

.level-switch{
  position:absolute; z-index:20;
  display:flex; flex-direction:column; gap:.4em;
}
.level-switch button{
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,14,8,.75); border:2px solid var(--brass);
  color:var(--brass-bright); font-size:1.4em; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:background .2s ease, transform .2s ease;
}
.level-switch button:hover{ background:rgba(185,139,62,.55); transform:scale(1.05); }
.level-switch button:disabled{ opacity:.3; cursor:default; transform:none; }
.level-switch.top-right{ top:16px; right:16px; }
.level-indicator{
  text-align:center; font-family:'Cormorant Garamond', serif;
  color:var(--brass-bright); font-size:.8em; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(20,14,8,.75);
  border:1px solid var(--brass); border-radius:3px; padding:.2em 0;
}

.map-credit{ font-size:.8em; color:var(--parchment-deep); text-align:center; margin-top:.8em; }