:root{--ink:#2a1a0d;--ink2:#58402a;--gold:#e0bb73;--gold2:#a97f3e;--cream:#efe2c6;--wax:#6a0d14;--bk:#040202;--sa:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bk);color:var(--cream);font:500 18px/1.45 "Cormorant Garamond",Georgia,serif;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline:0}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 48%,transparent 50%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.9) 100%);z-index:2}
#fade{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:30;background:#ffbf70}
/* loader */
#loader{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bk);transition:opacity .9s;gap:16px}
#loader.out{opacity:0;pointer-events:none}
.sealmark{width:92px;height:92px;border-radius:47% 53% 50% 50%/52% 48% 54% 46%;background:radial-gradient(circle at 36% 30%,#a51d28 0,#6a0d14 46%,#2f0407 100%);box-shadow:0 8px 26px rgba(0,0,0,.8),inset 0 0 0 7px rgba(0,0,0,.16),inset 0 2px 3px rgba(255,180,180,.25);display:flex;align-items:center;justify-content:center;animation:pulse 2.4s infinite ease-in-out}
.sealmark span{font:700 54px/1 "UnifrakturCook",serif;color:#2c0306;text-shadow:0 1px 0 rgba(255,150,150,.3)}
@keyframes pulse{50%{transform:scale(1.04);filter:brightness(1.18)}}
#loadmsg{margin:0;font:italic 400 20px "IM Fell English",serif;color:var(--gold);letter-spacing:.02em}
.bar{width:200px;height:2px;background:rgba(224,187,115,.18)}.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s}
/* brass */
.brass{position:relative;display:inline-block;padding:11px 24px 10px;border-radius:3px;font:700 15px/1.1 "Cinzel Decorative",serif;letter-spacing:.06em;color:#2a1908;background:linear-gradient(180deg,#f2d797 0,#d9b367 16%,#c29a51 52%,#a78041 86%,#8b6a33 100%);border:1px solid #5a4018;box-shadow:inset 0 1px 0 rgba(255,246,214,.75),inset 0 -1px 0 rgba(60,36,8,.5),0 3px 10px rgba(0,0,0,.65);text-shadow:0 1px 0 rgba(255,240,200,.45);text-decoration:none;text-align:center;transition:filter .15s,transform .1s}
.brass:hover{filter:brightness(1.1)}.brass:active{transform:translateY(1px);filter:brightness(.94)}
.brass.big{font-size:20px;padding:15px 44px 14px}
.brass[disabled]{opacity:.6}
/* splash */
#splash{position:fixed;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:calc(var(--st) + 28px) 22px calc(var(--sa) + 30px);transition:opacity .6s}
#splash.out{opacity:0}
.sp-top p{margin:0;font:italic 400 clamp(20px,3vw,27px)/1.3 "IM Fell English",serif;color:var(--cream);text-shadow:0 2px 12px #000;max-width:24em}
.sp-bot{display:flex;flex-direction:column;align-items:center;gap:10px}
#unclasp{pointer-events:auto;animation:glow 2.6s infinite ease-in-out}
@keyframes glow{50%{box-shadow:inset 0 1px 0 rgba(255,246,214,.75),inset 0 -1px 0 rgba(60,36,8,.5),0 0 34px rgba(255,190,110,.55)}}
.hint{margin:0;font:italic 400 15px "IM Fell English",serif;color:#c9b38d}
/* hud */
#hud{position:fixed;inset:0;z-index:12;pointer-events:none;animation:fadein 1.2s both .25s}
@keyframes fadein{from{opacity:0}}
#hud header{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;align-items:center;padding:calc(var(--st) + 10px) 14px 26px;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.mark{font:700 clamp(22px,3vw,30px)/1 "UnifrakturCook",serif;color:var(--gold);text-shadow:0 1px 0 #000,0 0 18px rgba(255,180,90,.3)}
.ico{pointer-events:auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--gold)}
#snd{position:absolute;right:8px;top:calc(var(--st) + 3px)}#snd .off{display:none}#snd.m .on{display:none}#snd.m .off{display:inline}
.arrow{pointer-events:auto;position:absolute;top:44%;width:50px;height:50px;border-radius:50%;display:none;align-items:center;justify-content:center;color:#2a1908;background:radial-gradient(circle at 38% 30%,#f2d797,#c29a51 60%,#8b6a33);border:1px solid #5a4018;box-shadow:0 4px 14px rgba(0,0,0,.7);transition:filter .15s}
.arrow:hover{filter:brightness(1.12)}#prev{left:18px}#next{right:18px}
.arrow.off{opacity:.28}
#hud footer{position:absolute;left:0;right:0;bottom:0;padding:34px 12px calc(var(--sa) + 4px);background:linear-gradient(0deg,rgba(0,0,0,.94) 62%,transparent)}
body.pop #cap{visibility:hidden}
#cap{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:560px;margin:0 auto 10px}
.c-txt{min-width:0;display:flex;flex-direction:column}
.c-txt b{font:italic 400 20px/1.14 "IM Fell English",serif;color:var(--cream);text-shadow:0 1px 3px #000}
.c-txt span{font:700 14px "Cinzel Decorative",serif;color:var(--gold);margin-top:3px}
#hud nav{pointer-events:auto;display:flex;justify-content:center;gap:2px;border-top:1px solid rgba(224,187,115,.28);padding-top:3px}
#hud nav button{flex:1 1 auto;max-width:170px;min-height:44px;font:700 11.5px/1.1 "Cinzel Decorative",serif;color:var(--gold);letter-spacing:.02em;white-space:nowrap}
#hud nav em{font-style:normal;opacity:.7}
.baseline{pointer-events:auto;display:flex;justify-content:center;align-items:center;gap:14px;font-size:13px;color:#b8a586;min-height:24px}
.baseline button{font-size:13px;color:#b8a586;min-height:24px}
#lock{color:#b8a586;display:inline-flex;padding:6px}
#lock:hover{color:var(--gold)}
/* panel */
#panel{position:fixed;inset:0;z-index:20;display:flex;justify-content:center;align-items:flex-end}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);animation:fadein .35s both}
#panel.detail .scrim{background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 62%)}
#sheet{position:relative;width:100%;max-width:640px;max-height:84vh;max-height:84dvh;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;background:#1a0e07 url(../tex/wood_a_m.jpg) center/500px;border-radius:5px 5px 0 0;box-shadow:0 -14px 50px rgba(0,0,0,.85);outline:0;animation:rise .5s cubic-bezier(.2,.9,.25,1) both}
#panel.detail #sheet{max-height:64vh;max-height:64dvh}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
#body{position:relative;padding:30px 24px calc(var(--sa) + 28px);color:var(--ink);background:linear-gradient(rgba(246,234,204,.56),rgba(246,234,204,.56)),#d9c8a2 url(../tex/parch_a_m.jpg) center/640px;box-shadow:0 0 0 1px #7a5a2a,0 0 0 3px #17100a,0 0 0 4px #c29a51,inset 0 0 60px rgba(70,40,10,.38);border-radius:1px}
#close{position:absolute;right:16px;top:16px;z-index:3;color:var(--ink);border-radius:50%}
.cn{position:absolute;width:30px;height:30px;z-index:2;pointer-events:none;background:linear-gradient(135deg,#f2d797,#b48a45 55%,#7d5e2b)}
.cn.a{left:4px;top:4px;clip-path:polygon(0 0,100% 0,100% 18%,18% 18%,18% 100%,0 100%)}
.cn.b{right:4px;top:4px;clip-path:polygon(0 0,100% 0,100% 100%,82% 100%,82% 18%,0 18%)}
.cn.c,.cn.d{display:none}
#body h2{margin:0 26px 6px 0;font:700 32px/1.05 "UnifrakturCook",serif;color:#3a0a0d}
#body h3{margin:0 26px 8px 0;font:italic 400 24px/1.15 "IM Fell English",serif;color:#2a1508}
#body p{margin:0 0 12px;font-size:19px;line-height:1.4;font-weight:600}
#body .price{font:700 18px "Cinzel Decorative",serif;color:#5a1a12;margin-bottom:12px}
#body .fine{font-size:15.5px;color:var(--ink2)}
.shot{width:100%;display:block;max-height:46vh;object-fit:contain;background:#120b07;border:1px solid #6d5022;margin-bottom:8px}
.thumbs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:3px}
.thumbs img{height:58px;width:58px;object-fit:cover;border:1px solid #6d5022;cursor:pointer;opacity:.75;flex:none}.thumbs img.on{opacity:1;box-shadow:0 0 0 2px #7a1a1a}
.buy{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:14px 0 2px}
label{display:block;font:700 12.5px "Cinzel Decorative",serif;color:#46301b;margin:10px 0 4px;letter-spacing:.02em}
input[type=text],input[type=email],select,textarea{width:100%;font:500 18px "Cormorant Garamond",serif;padding:9px 10px;background:rgba(255,250,235,.55);border:1px solid #80602f;border-radius:2px;color:#1e130a;-webkit-appearance:none;appearance:none}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #7a1a1a;outline-offset:1px}
.tick{display:flex;gap:9px;align-items:flex-start;font:500 17px "Cormorant Garamond",serif;margin:12px 0;color:var(--ink);letter-spacing:0}
.tick input{margin-top:5px;width:18px;height:18px;accent-color:#6a0d14;flex:none}
.hp-hid{position:absolute!important;left:-9999px;height:0;overflow:hidden}
.err{color:#7a1212;font-weight:600;margin-top:8px}
.done{text-align:center;padding:18px 0}.done .sealmark{margin:0 auto 14px;animation:stamp .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stamp{from{transform:scale(2.2) rotate(-14deg);opacity:0}}
.cab-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.cab{display:flex;flex-direction:column;text-align:left;background:#120b07;border:1px solid #6d5022;color:var(--cream)}
.cab img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.cab b{font:italic 400 16.5px/1.15 "IM Fell English",serif;padding:7px 8px 2px}
.cab span{font:700 12.5px "Cinzel Decorative",serif;color:var(--gold);padding:0 8px 8px}
/* plain fallback */
#plain{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
body.plain{overflow:auto;background:#120b07 url(../tex/wood_a_m.jpg) center/700px}
body.plain #gl,body.plain #vig,body.plain #splash,body.plain #hud,body.plain #loader{display:none}
body.plain #plain{position:static;width:auto;height:auto;padding:30px 16px 40px;max-width:1040px;margin:0 auto;display:block}
#plain h1{font:700 44px "UnifrakturCook",serif;color:var(--gold);text-align:center;margin:0 0 18px}
#plain .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
#plain .card{display:flex;flex-direction:column;background:#160d07;border:1px solid #a97f3e;color:var(--cream);text-decoration:none}
#plain img{width:100%;aspect-ratio:1;object-fit:cover}#plain b{font:italic 400 18px "IM Fell English",serif;padding:8px 10px 2px}#plain .card span{font:700 13px "Cinzel Decorative",serif;color:var(--gold);padding:0 10px 10px}
.plain-links{text-align:center;margin-top:20px}.plain-links a{color:var(--gold);margin:0 10px}
@media(min-width:900px) and (orientation:landscape){
  .arrow{display:flex}
  #panel{justify-content:flex-end;align-items:stretch}
  #panel.detail .scrim{background:linear-gradient(270deg,rgba(0,0,0,.55),transparent 60%)}
  #sheet,#panel.detail #sheet{max-width:520px;max-height:none;height:100%;border-radius:0;animation-name:slide;overflow:auto}
  #panel:not(.detail){justify-content:center;align-items:center}
  #panel:not(.detail) #sheet{height:auto;max-height:90vh;max-width:700px;border-radius:4px;animation-name:rise}
  #body{min-height:100%}
  #panel:not(.detail) #body{min-height:0}
  .cab-grid{grid-template-columns:repeat(3,1fr)}
  #hud nav button{font-size:13px}
}
@keyframes slide{from{transform:translateX(70px);opacity:0}}
@media(max-height:560px){.sp-top{display:none}#hud footer{padding-top:8px}#cap{margin-bottom:4px}.baseline{display:none}}
body.pop .arrow{display:none!important}