:root{
  --bg:#0e0a08; --ink:#f5f5f5; --gold:rgba(255,210,160,.75); --gold-hi:#ffd9ae; --cream:rgba(255,250,240,.96);
  --warm:rgba(255,235,215,.65); --line:rgba(255,210,140,.4);
  --serif:"Playfair Display","Noto Sans Runic",Georgia,serif; --sans:Inter,"Noto Sans Runic",system-ui,sans-serif;
  --script:Caveat,"Bad Script",cursive; --fell:"IM Fell English SC","IM Fell English",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);min-height:100%}
body{font-family:var(--sans);overflow:hidden;height:100vh;height:100dvh;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:rgba(255,200,140,.35);color:#fff}
:focus-visible{outline:1px solid var(--gold-hi);outline-offset:4px;border-radius:2px}

.nave{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* cinematic bars + grain */
.cinematic{position:fixed;inset:0;pointer-events:none;z-index:3}
.bar{position:absolute;left:0;right:0;height:45px;background:linear-gradient(#000,rgba(0,0,0,.85))}
.bar-top{top:0;transform:translateY(-100%);animation:barIn 1.4s var(--ease) .1s forwards}
.bar-bottom{bottom:0;transform:translateY(100%);background:linear-gradient(rgba(0,0,0,.85),#000);animation:barIn 1.4s var(--ease) .1s forwards}
@keyframes barIn{to{transform:translateY(0)}}
.grain{position:absolute;inset:-10%;opacity:0;animation:grainIn 2s ease .4s forwards,grainShift .9s steps(6) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grainIn{to{opacity:.09}}
@keyframes grainShift{0%{transform:translate(0)}20%{transform:translate(-2%,2%)}40%{transform:translate(2%,-1%)}60%{transform:translate(-1%,3%)}80%{transform:translate(1%,-2%)}100%{transform:translate(0)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 60% 58% at 50% 46%,rgba(14,10,8,.62) 0%,rgba(14,10,8,.35) 45%,rgba(0,0,0,0) 70%),radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.75) 100%)}
.flash{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 20%,rgba(220,230,255,.18),rgba(0,0,0,0) 70%);opacity:0}
.ripples{position:fixed;inset:0;pointer-events:none;z-index:9}
.ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid rgba(255,215,170,.7);animation:ripple .9s var(--ease) forwards}
@keyframes ripple{to{transform:scale(9);opacity:0}}

/* header */
.header{position:fixed;top:0;left:0;z-index:6;display:flex;align-items:center;gap:.7rem;padding:.55rem 1.8rem;height:45px;
  font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;opacity:0;animation:fadeDown .9s var(--ease) .6s forwards}
.mark{color:rgba(255,255,255,.55);text-decoration:none;padding:.4rem;margin:0 -.4rem;transition:color .25s}
.mark:hover{color:#fff}
.separator{color:rgba(255,255,255,.3)}
.crumb{color:rgba(255,255,255,.9)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.key-btn{position:fixed;top:2px;right:22px;z-index:6;width:42px;height:42px;padding:3px;border:0;background:none;cursor:pointer;color:rgba(255,220,180,.85);
  opacity:0;animation:fadeDown .9s var(--ease) .7s forwards;transition:transform .6s var(--ease),color .3s}
.key-btn svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px rgba(255,190,120,.35))}
.key-btn:hover{transform:rotate(45deg);color:#fff}

/* shrine */
.shrine{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.content{width:min(1000px,92vw);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.6rem,4.2vh,2.8rem);padding:9vh 0 10vh}
.content>*{opacity:0}
body.ready .head{animation:contentIn 1.4s var(--ease) .5s forwards}
body.ready .bottom{animation:contentIn 1.4s var(--ease) .8s forwards}
@keyframes contentIn{from{opacity:0;filter:blur(4px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
.caption{font-size:.66rem;letter-spacing:.6em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;padding-left:.6em}
.title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.9rem,6vw,5.4rem);line-height:1.04;letter-spacing:.04em;margin:0;color:var(--cream);
  text-shadow:0 0 28px rgba(255,200,140,.25),0 0 60px rgba(0,0,0,.6)}
body.ready .title{animation:titleIn 2.2s var(--ease) .5s both}
@keyframes titleIn{from{letter-spacing:.24em;filter:blur(6px);opacity:0}to{letter-spacing:.04em;filter:blur(0);opacity:1}}
.lead{font-family:var(--serif);font-style:italic;font-size:.96rem;letter-spacing:.04em;color:var(--warm);margin:.9rem 0 0}

.bottom{display:flex;flex-direction:column;align-items:center;gap:clamp(1.2rem,3.4vh,2.1rem);width:100%}
.columns{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));width:100%;max-width:880px}
.column{position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:0 1.2rem}
.column+.column::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(rgba(0,0,0,0),var(--line),rgba(0,0,0,0))}
.numeral{font-family:var(--fell);font-size:1.45rem;color:rgba(255,215,170,.85);text-shadow:0 0 14px rgba(255,170,90,.45);line-height:1}
.col-latin{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,235,210,.62);padding-left:.42em}
.handle{display:inline-block;font-variant-numeric:lining-nums;font-family:var(--serif);font-size:1.13rem;letter-spacing:.01em;color:#fff;text-decoration:none;white-space:nowrap;padding:.2rem .3rem;
  position:relative;transition:color .3s,text-shadow .3s;will-change:transform}
.handle::after{content:"";position:absolute;left:.3rem;right:.3rem;bottom:0;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0),var(--gold-hi),rgba(0,0,0,0));transform:scaleX(0);transition:transform .7s var(--ease)}
.handle:hover,.handle:focus-visible{color:var(--gold-hi);text-shadow:0 0 18px rgba(255,190,120,.55)}
.handle:hover::after,.handle:focus-visible::after{transform:scaleX(1)}
.handle .ch{display:inline-block;min-width:.25em}
.handle .ch.rune{color:rgba(255,200,140,.9);font-family:"Noto Sans Runic",var(--serif)}
.note{font-family:var(--script);font-size:1.12rem;color:rgba(255,220,180,.58);white-space:nowrap}
.ink{-webkit-mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,0) 55%);mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,0) 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
body.ready .ink{animation:inkWrite 1.6s cubic-bezier(.45,.05,.3,1) calc(var(--ink-delay) + .6s) forwards}
@keyframes inkWrite{to{-webkit-mask-position:0 0;mask-position:0 0}}

.meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,235,210,.5)}
.meta .div{color:rgba(255,210,150,.6);letter-spacing:0;font-family:var(--serif);font-size:.9rem}
.meta b{font-weight:400;color:rgba(255,235,210,.85);letter-spacing:.2em}
.visits{display:flex;align-items:baseline;gap:.6rem;font-family:var(--serif);font-style:italic;color:rgba(255,220,180,.6);font-size:.92rem}
.v-num{font-variant-numeric:lining-nums;font-size:1.6rem;color:var(--gold-hi);text-shadow:0 0 16px rgba(255,170,90,.5);font-style:normal;font-family:var(--fell)}
.exits{display:flex;gap:2.2rem;flex-wrap:wrap;justify-content:center}
.exit-link{display:inline-flex;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,235,210,.65);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:.45rem .2rem;transition:color .3s,letter-spacing .6s var(--ease)}
.exit-link .arr{display:inline-block;transition:transform .6s var(--ease);font-size:.95rem;letter-spacing:0}
.exit-link:hover{color:#fff;letter-spacing:.36em}
.exit-link:hover .arr{transform:translateX(-4px)}
.letter-open:hover .arr{transform:rotate(-12deg) translateY(-2px)}

/* footer */
.footer{position:fixed;left:0;right:0;bottom:0;height:45px;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 1.8rem;
  opacity:0;animation:fadeIn 1.2s ease 1.4s forwards}
@keyframes fadeIn{to{opacity:1}}
.made{margin:0;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(239,228,210,.66)}
.also{display:flex;gap:1.3rem}
.also a{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(239,228,210,.5);text-decoration:none;transition:color .25s}
.also a:hover{color:#fff}

/* dialogs */
.letter,.map{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.letter[hidden],.map[hidden]{display:none}
.letter-backdrop,.map-backdrop{position:absolute;inset:0;background:rgba(6,4,3,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .5s ease}
.open .letter-backdrop,.open .map-backdrop{opacity:1}
.x{position:absolute;top:.6rem;right:.9rem;border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:inherit;opacity:.7;padding:.3rem .5rem;transition:transform .5s var(--ease),opacity .3s}
.x:hover{opacity:1;transform:rotate(90deg)}

.letter-card{position:relative;width:min(540px,100%);max-height:92vh;overflow:auto;text-align:center;padding:2.6rem clamp(1.3rem,4vw,2.8rem) 2rem;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,180,110,.12),rgba(0,0,0,0) 60%),rgba(20,14,11,.94);
  border:1px solid rgba(255,210,150,.22);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 60px rgba(255,170,90,.05);
  opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.letter.open .letter-card{opacity:1;transform:none;filter:none}
.l-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,2.8rem);margin:0;color:var(--cream);text-shadow:0 0 24px rgba(255,200,140,.25)}
.letter .caption{margin-bottom:.8rem}
.letter .lead{margin:.6rem 0 1.4rem;font-size:.9rem}
.field{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;margin:0 0 1.05rem;text-align:left}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,210,150,.28);color:#fff;
  font-family:var(--serif);font-size:1.05rem;padding:.45rem 0;outline:none;resize:vertical;transition:border-color .3s}
.field input::placeholder,.field textarea::placeholder{font-style:italic;color:rgba(255,220,180,.35)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--gold-hi)}
.field.bad input,.field.bad textarea{border-bottom-color:#e2725b}
.status{min-height:1.2em;margin:.2rem 0 1rem;font-family:var(--script);font-size:1.1rem;color:rgba(255,215,170,.85)}
.seal{position:relative;overflow:hidden;cursor:pointer;background:transparent;color:#fff;border:1px solid rgba(255,210,150,.5);padding:.95rem 2.4rem;
  font-size:.68rem;letter-spacing:.38em;text-transform:uppercase;transition:color .4s,border-color .4s}
.seal::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#c8894d,#ffd2a0);transform:translateY(101%);transition:transform .6s var(--ease)}
.seal span{position:relative}
.seal:hover{color:#1a110b;border-color:#ffd2a0}
.seal:hover::before{transform:none}
.fine{margin:1.2rem 0 0;font-size:.78rem;color:rgba(255,235,210,.5)}
.fine a{color:rgba(255,220,180,.85)}

/* the map: parchment */
.parchment{position:relative;width:min(1020px,100%);max-height:92vh;overflow:auto;color:#3a2614;text-align:center;padding:2.2rem clamp(1rem,3.5vw,2.8rem) 1.6rem;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,240,205,0) 40%,rgba(120,72,30,.35) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(135deg,#e9d6b0,#dcc292 50%,#e6cfa2);
  box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 0 50px rgba(110,62,20,.45);border-radius:3px;
  opacity:0;transform:scale(.96) rotate(-.4deg);filter:blur(3px);transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease)}
.map.open .parchment{opacity:1;transform:none;filter:none}
.parchment .x{color:#5a3a1e}
.compass{position:relative;width:64px;height:64px;margin:0 auto .5rem;color:#6b4423}
.compass svg{width:100%;height:100%;animation:spin 40s linear infinite}
.compass span{position:absolute;font-family:var(--fell);font-size:.72rem}
.compass .n{top:-14px;left:50%;transform:translateX(-50%)}.compass .s{bottom:-14px;left:50%;transform:translateX(-50%)}
.compass .e{right:-14px;top:50%;transform:translateY(-50%)}.compass .w{left:-14px;top:50%;transform:translateY(-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.m-title{font-family:var(--fell);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:.24em;text-transform:uppercase;margin:.9rem 0 .2rem;color:#4a2e16}
.m-sub{font-family:"IM Fell English",var(--serif);font-style:italic;margin:0 0 1.4rem;color:#6b4a2a}
.rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.rooms a{display:flex;flex-direction:column;gap:.25rem;padding:.9rem .5rem;border:1px solid rgba(90,55,25,.45);text-decoration:none;color:#3a2614;
  background:rgba(255,245,220,.18);transition:background .35s,transform .5s var(--ease),box-shadow .35s}
.rooms a:hover,.rooms a:focus-visible{background:rgba(120,70,25,.14);transform:translateY(-2px);box-shadow:0 6px 18px rgba(90,50,20,.18)}
.rooms b{font-family:var(--fell);font-weight:400;font-size:1rem;letter-spacing:.14em;text-transform:uppercase}
.rooms i{font-family:"IM Fell English",var(--serif);font-size:.82rem;color:#6b4a2a}
.rooms .here a{background:rgba(90,50,20,.82);color:#f3e2bf;border-color:rgba(90,50,20,.9)}
.rooms .here i{color:#e3c797}
.m-keys{margin:1.3rem 0 0;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:#6b4a2a}
.m-keys span{margin:0 .5rem}

/* cursor */
.cursor,.trail{position:fixed;inset:0;pointer-events:none;z-index:50}
.c-dot,.c-ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.c-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#ffe2c0;box-shadow:0 0 10px 2px rgba(255,180,100,.7)}
.c-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,220,180,.45);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),border-color .3s,background .3s}
.cursor.hover .c-ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(255,220,180,.8);background:rgba(255,190,120,.06)}
.cursor.down .c-ring{width:24px;height:24px;margin:-12px 0 0 -12px}
.t-node{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(255,200,140,.55);box-shadow:0 0 6px rgba(255,170,90,.6);will-change:transform}
.cursor,.trail{display:none}
@media (hover:hover) and (pointer:fine){
  .has-cursor,.has-cursor a,.has-cursor button,.has-cursor input,.has-cursor textarea{cursor:none}
  .has-cursor .cursor,.has-cursor .trail{display:block}
}

/* responsive */
@media (max-width:720px){
  body{overflow:auto;height:auto}
  .shrine{position:relative;inset:auto;min-height:100dvh;overflow:visible}
  .vignette{position:fixed;background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(14,10,8,.55),rgba(0,0,0,0) 80%),radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.75) 100%)}
  .content{min-height:100dvh;padding:calc(9vh + 20px) 5vw calc(9vh + 40px);gap:1.8rem}
  .header{padding:.55rem 1rem;font-size:.6rem;letter-spacing:.24em;gap:.45rem}
  .key-btn{right:8px}
  .columns{grid-template-columns:1fr;gap:2rem}
  .column+.column::before{display:none}
  .column+.column::after{content:"";position:absolute;top:-1rem;left:25%;right:25%;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0),var(--line),rgba(0,0,0,0))}
  .caption{letter-spacing:.45em}
  .meta{gap:.6rem;letter-spacing:.3em}
  .exits{flex-direction:column;gap:.6rem;align-items:center}
  .footer{position:relative;flex-direction:column;justify-content:center;gap:.6rem;height:auto;padding:1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom));background:linear-gradient(rgba(0,0,0,0),#000)}
  .made{letter-spacing:.24em;font-size:.6rem;text-align:center}
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar{height:30px}
}
@media (max-width:380px){ .handle{font-size:1.02rem} }
@media (max-height:700px) and (min-width:721px){ .content{gap:1.2rem;padding:7vh 0 8vh} .title{font-size:clamp(2.4rem,5vw,4rem)} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .content>*{opacity:1}.ink{-webkit-mask:none;mask:none}
}