/* Arhden "scribe's desk" theme (Oct 31, 2026): wood desk, candle, old map, unrolling scroll */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Uncial+Antiqua&family=Noto+Sans+Runic&display=swap');

body{
  background:#120a05 url(/assets/img/desk/desk_wood.webp) center top / cover fixed;
  color:#f0e2c4;
}
body::before{ /* candlelight falling across the desk */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 55% 60% at 14% 62%, rgba(255,170,70,.20), transparent 70%),
             radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.55));
  animation:candleglow 3.2s ease-in-out infinite alternate;
}
@keyframes candleglow{ 0%{opacity:.85} 40%{opacity:1} 70%{opacity:.9} 100%{opacity:.97} }

.hero--banner{background:transparent}
.navwrap, footer{position:relative; z-index:2}
.navwrap{background:linear-gradient(180deg,rgba(28,14,6,.92),rgba(52,28,12,.92)); border-top:1px solid rgba(207,175,86,.35); border-bottom:1px solid rgba(207,175,86,.35); box-shadow:0 8px 20px rgba(0,0,0,.45)}
.nav a, .nav__btn{background:transparent !important; border:1px solid rgba(207,175,86,.35) !important; color:#e8c77a !important; font-size:1rem !important}
.nav a:hover, .nav__btn:hover{background:rgba(207,175,86,.12) !important}
.nav__menu{background:#2a1608 !important; border:1px solid rgba(207,175,86,.4) !important}
.nav a, .nav__btn{font-family:'Uncial Antiqua',Cinzel,serif; letter-spacing:.02em}
footer{color:#d9c39a; text-shadow:0 1px 2px #000}
footer a{color:#e8c77a}

/* ---------- desk layout ---------- */
.desk{position:relative; z-index:1; max-width:1500px; margin:10px auto 40px; padding:0 16px; min-height:70vh}

/* old map lying on the desk, right side */
.desk-map{position:absolute; right:-20px; top:30px; width:min(520px,34vw); transform:rotate(6deg);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.6)) sepia(.15); pointer-events:none; opacity:.97}

/* heavily melted candle, left side */
.candle{position:absolute; left:3%; top:90px; width:150px; height:300px; pointer-events:none}
.candle .dish{position:absolute; bottom:0; left:0; width:150px; height:34px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%, #b8913f, #6d4c1a 60%, #2b1a07); box-shadow:0 12px 16px rgba(0,0,0,.6)}
.candle .pool{position:absolute; bottom:12px; left:22px; width:106px; height:22px; border-radius:50%;
  background:radial-gradient(ellipse at 45% 40%, #fff4dc, #e6d2a8 70%, #c9b186)}
.candle .wax{position:absolute; bottom:22px; left:46px; width:58px; height:150px; border-radius:6px 6px 10px 10px;
  background:linear-gradient(90deg,#d8c39a,#fbf0d8 40%,#efdfbd 65%,#c9b086)}
.candle .wax::before,.candle .wax::after{content:""; position:absolute; background:linear-gradient(90deg,#e2cfa6,#fbf1dc,#dcc69c); border-radius:0 0 10px 10px}
.candle .wax::before{left:-6px; top:8px; width:16px; height:110px}
.candle .wax::after{right:-5px; top:2px; width:13px; height:70px}
.candle .lip{position:absolute; bottom:166px; left:40px; width:70px; height:16px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%, #8a6a3a, #e9d6ad 55%, #f8eccf)}
.candle .wick{position:absolute; bottom:176px; left:74px; width:3px; height:14px; background:#1b120a; border-radius:2px}
.candle .flame{position:absolute; bottom:186px; left:64px; width:22px; height:52px; border-radius:50% 50% 45% 45% / 65% 65% 35% 35%;
  background:radial-gradient(ellipse at 50% 80%, #fff 0 18%, #ffe39a 35%, #ffad3b 60%, rgba(255,120,30,0) 75%);
  transform-origin:50% 100%; animation:flicker 1.6s infinite ease-in-out;
  box-shadow:0 0 40px 18px rgba(255,170,60,.35)}
@keyframes flicker{0%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.92,1.08) rotate(2deg)}50%{transform:scale(1.04,.95) rotate(-2deg)}75%{transform:scale(.96,1.05) rotate(1deg)}100%{transform:scale(1,1) rotate(-1deg)}}

/* ---------- the scroll ---------- */
.scroll{position:relative; width:min(860px,94vw); margin:0 auto; z-index:3}
.rod{position:relative; height:38px; margin:0 -26px; border-radius:19px; z-index:2;
  background:linear-gradient(180deg,#1c0e05 0%,#5c3517 18%,#a8703b 40%,#d39c5e 48%,#8a5527 64%,#3f2210 86%,#170b03 100%);
  box-shadow:0 10px 18px rgba(0,0,0,.55)}
.rod::before,.rod::after{content:""; position:absolute; top:-9px; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff0b0 0 6%,#e2b552 20%,#a7751f 45%,#5b3b0a 75%,#2b1b04);
  box-shadow:0 6px 12px rgba(0,0,0,.6), inset 0 0 0 4px rgba(60,35,5,.5)}
.rod::before{left:-30px} .rod::after{right:-30px}

.sheet{position:relative; overflow:hidden; margin:-6px 0;
  background:#e7d3a7 url(/assets/img/desk/parchment.webp) 0 0 / 1024px auto repeat;
  box-shadow:inset 0 0 70px rgba(110,62,20,.55), inset 0 18px 22px -12px rgba(40,20,5,.55), inset 0 -18px 22px -12px rgba(40,20,5,.55), 0 20px 40px rgba(0,0,0,.5);
  transition:max-height 1.5s cubic-bezier(.45,.05,.25,1)}
.sheet::before,.sheet::after{content:""; position:absolute; top:0; bottom:0; width:14px; pointer-events:none;
  background:linear-gradient(90deg,rgba(90,50,15,.35),transparent)}
.sheet::before{left:0} .sheet::after{right:0; transform:scaleX(-1)}
.scroll.closed .sheet{max-height:0 !important}

.sheet-inner{padding:42px 64px 50px; color:#2e1a0a; font-family:'IM Fell English',Georgia,serif; font-size:1.18rem; line-height:1.6;
  transition:opacity .5s ease .9s}
.scroll.closed .sheet-inner{opacity:0; transition-delay:0s}
.sheet-inner h1,.sheet-inner h2,.sheet-inner h3{font-family:'Uncial Antiqua',serif; color:#4a230b; font-weight:normal; letter-spacing:.02em}
.sheet-inner h1{font-size:2.1rem; text-align:center; margin:.2em 0 .6em}
.sheet-inner h1::after{content:"✦ ❧ ✦"; display:block; font-family:Georgia,serif; font-size:1rem; color:#8a5a2b; margin-top:.3em}
.sheet-inner p:first-of-type::first-letter{font-family:'Uncial Antiqua',serif; float:left; font-size:3.4em; line-height:.85; padding:.06em .1em 0 0; color:#7a2810}
.sheet-inner a{color:#7a2810; text-decoration-color:rgba(122,40,16,.4)}
.sheet-inner .breadcrumb{font-size:.95rem; color:#6d4a26; text-align:center; font-style:italic}
.sheet-inner .panel{background:none; border:0; box-shadow:none; padding:0; margin:0 0 1.6em; color:inherit}
.sheet-inner .muted{color:#6d4a26}
.sheet-inner .featuregrid{gap:14px}
.sheet-inner .card{background:rgba(120,72,30,.07); border:1px solid rgba(110,62,20,.35); border-radius:4px; color:inherit; box-shadow:none}
.sheet-inner .card:hover{background:rgba(120,72,30,.14)}
.sheet-inner .card h3{margin:.2em 0}
.sheet-inner .bar{background:rgba(110,62,20,.18); border:1px solid rgba(110,62,20,.35)}
.sheet-inner .bar i{background:linear-gradient(90deg,#7a2810,#b0602a)}
.sheet-inner .badge{background:rgba(122,40,16,.12); color:#7a2810; border:1px solid rgba(122,40,16,.35)}
.sheet-inner .rm-num{background:#7a2810; color:#f6e7c6}
.sheet-inner .rm-item.now{background:rgba(122,40,16,.07)}

@media (max-width:1100px){ .candle{display:none} .desk-map{opacity:.35; width:46vw} }
@media (max-width:640px){ .sheet-inner{padding:30px 22px 36px; font-size:1.06rem} .rod{margin:0 -10px} .rod::before{left:-14px} .rod::after{right:-14px} .desk-map{display:none} }
@media (prefers-reduced-motion:reduce){ .sheet,.sheet-inner{transition:none} .candle .flame,body::before{animation:none} }


/* Header strip: 1/8 of the screen tall, full width (Oct 31) */
.hero--banner{padding:0}
.hero__banner{width:100%; max-width:none; height:clamp(80px,12.5vh,170px); aspect-ratio:auto; object-fit:cover; object-position:50% 50%;
  -webkit-mask-image:none; mask-image:none; border-bottom:1px solid rgba(207,175,86,.35)}
/* the tagline as a line of runes: "Where every path is yours..." (an Easter egg for those who decipher it) */
.hero__runes{margin:0; padding:5px 12px 6px; text-align:center; color:#e8c77a; font-family:'Noto Sans Runic','Segoe UI Historic','Segoe UI Symbol',serif;
  font-size:clamp(14px,1.2vw,19px); letter-spacing:.32em; text-shadow:0 1px 2px #000;
  background:linear-gradient(180deg,rgba(28,14,6,.92),rgba(40,22,10,.92)); border-bottom:1px solid rgba(207,175,86,.25)}


/* Oct 31: map and candle sit ON the table (fixed like the desk), the scroll moves over them */
.desk-map{position:fixed; right:-6vw; top:18vh; width:min(1100px,58vw); transform:rotate(6deg); z-index:0;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.65)) drop-shadow(-6px -4px 10px rgba(0,0,0,.35)); opacity:1}
.candle{position:fixed; left:3vw; top:auto; bottom:6vh; z-index:1}
.scroll{z-index:3}
@media (max-width:1100px){ .desk-map{opacity:.45; width:80vw; right:-20vw} }
@media (max-width:640px){ .desk-map{display:none} }