/* Product and wholesale pages. Same tokens, fonts and plywood-edge motif as the homepage.
   Motion is CSS only and progressive: without support everything is simply visible. No JavaScript. */
:root{
  --ink:#0d0b08;--green:#1b2c21;--walnut:#2a1d10;--ply:#c08a4e;--ply-light:#e0b886;
  --cream:#f2e9d8;--cream-70:rgba(242,233,216,.72);--cream-45:rgba(242,233,216,.45);
  --gold:#d2a85f;--gold-strong:#e6c07a;--line:rgba(242,233,216,.11);--gold-line:rgba(210,168,95,.28);
  --radius:22px;--font-d:'Fraunces',Georgia,serif;--font-b:'Manrope',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:90px}
body{font-family:var(--font-b);color:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;background:var(--ink);overflow-x:hidden;overflow-x:clip}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1000px 640px at 92% 10%,rgba(40,72,52,.42),transparent 62%),
  radial-gradient(900px 620px at -10% 60%,rgba(70,44,22,.38),transparent 58%),var(--ink)}
/* film grain + vignette, fixed and static (cheap to paint) */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-strong);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--cream)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,5vw,64px)}

/* plywood edge: the site's signature stripe */
.ply-edge{height:11px;opacity:.85;box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
  background:repeating-linear-gradient(180deg,#caa06a 0 2.5px,#6e4426 2.5px 3.5px,#bb8d57 3.5px 6px,#5d3a20 6px 7px,
    #d4ac74 7px 9.5px,#71492a 9.5px 10.5px,#c79c63 10.5px 11px)}

/* header: glass over the hero, turns solid as you scroll (where supported) */
.top{position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,rgba(13,11,8,.78),rgba(13,11,8,.25));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.top img{height:40px;width:auto;border-radius:9px}
.top nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.top nav a{color:var(--cream);text-decoration:none;opacity:.86}
.top nav a:hover{opacity:1;color:var(--gold-strong)}
@supports (animation-timeline: scroll()){
  .top{animation:topSolid linear both;animation-timeline:scroll();animation-range:0 220px}
  @keyframes topSolid{to{background:rgba(13,11,8,.94);box-shadow:0 1px 0 var(--line)}}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,border-color .3s}
.btn svg{width:15px;height:15px;flex:none}
.btn-gold{background:linear-gradient(120deg,var(--gold-strong),var(--ply));color:#241708}
.btn-gold:hover{color:#241708;transform:translateY(-3px);box-shadow:0 22px 50px -16px rgba(210,168,95,.65)}
.btn-ghost{border-color:rgba(242,233,216,.3);color:var(--cream);background:rgba(13,11,8,.25)}
.btn-ghost:hover{color:var(--cream);transform:translateY(-3px);background:rgba(242,233,216,.08);border-color:var(--cream)}
.top .btn{padding:11px 20px;font-size:.72rem}
@media(max-width:760px){.top nav .hide-sm{display:none}}

/* letterbox hero: a 2.39:1 widescreen frame between near-black bars (anamorphic, oil-lamp light) */
.lbx{position:relative;background:#070605;padding-top:72px}
.lbx-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:7vh;padding-top:14px;padding-bottom:14px}
.lbx-bar p{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-45)}
.lbx-bar a{color:var(--cream-70);text-decoration:none}
.lbx-bar a:hover{color:var(--gold-strong)}
.lbx-bar .overline{color:var(--gold)}
.frame{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vw / 2.39);display:flex;align-items:flex-end;
  animation:curtain 1.5s var(--ease) both}
@keyframes curtain{from{clip-path:inset(14% 0 14% 0)}to{clip-path:inset(0 0 0 0)}}
.frame-media{position:absolute;inset:0;z-index:-3;animation:fromBlack 1.8s ease both}
.frame-media img{width:100%;height:100%;object-fit:cover;transform-origin:64% 40%;
  filter:sepia(.18) saturate(.88) contrast(1.06) brightness(.96);animation:kenburns 26s var(--ease) both}
@keyframes kenburns{from{transform:scale(1.14) translate3d(1.5%,1%,0)}to{transform:scale(1.02) translate3d(0,0,0)}}
@keyframes fromBlack{from{opacity:0}to{opacity:1}}
/* scrim + a single warm light source, top right, flickering like a lantern */
.frame::before{content:'';position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(7,6,5,.93) 0%,rgba(7,6,5,.74) 36%,rgba(7,6,5,.16) 74%),
  linear-gradient(0deg,rgba(7,6,5,.8) 0%,transparent 42%)}
.frame::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(45% 62% at 84% 16%,rgba(232,176,96,.24),transparent 70%);animation:lantern 7s ease-in-out infinite}
@keyframes lantern{0%,100%{opacity:1}18%{opacity:.86}22%{opacity:.97}47%{opacity:.9}52%{opacity:1}76%{opacity:.84}81%{opacity:.95}}
/* corner brackets */
.brk{position:absolute;inset:clamp(12px,2vw,26px);z-index:1;pointer-events:none;opacity:.7;background:
  linear-gradient(var(--gold),var(--gold)) top left/30px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) top left/1px 30px no-repeat,
  linear-gradient(var(--gold),var(--gold)) top right/30px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) top right/1px 30px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom left/30px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom left/1px 30px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom right/30px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom right/1px 30px no-repeat}
.frame-inner{width:100%;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,5vw,72px)}
h1{font-family:var(--font-d);font-weight:500;letter-spacing:-.018em;line-height:1;
  font-size:clamp(2.5rem,5.4vw,4.9rem);max-width:15ch;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:420;color:transparent;
  background:linear-gradient(115deg,var(--ply-light) 5%,var(--gold) 55%,#a87a3e);-webkit-background-clip:text;background-clip:text}
.answer{margin-top:22px;font-size:clamp(1rem,1.35vw,1.15rem);color:var(--cream);max-width:60ch;line-height:1.7}
.answer strong{color:var(--gold-strong);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.crumbs{margin:0}
.overline{display:flex;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.overline::before{content:'';width:38px;height:1px;background:var(--gold);opacity:.7}
/* entrance on load only: staggered rise, ends fully visible */
.rise{animation:rise 1.1s var(--ease) both}
.d1{animation-delay:.35s}.d2{animation-delay:.5s}.d3{animation-delay:.65s}.d4{animation-delay:.8s}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .frame{min-height:560px}
  .frame::before{background:linear-gradient(0deg,rgba(7,6,5,.95) 0%,rgba(7,6,5,.78) 55%,rgba(7,6,5,.35) 100%)}
  .lbx-bar{min-height:48px}
  .lbx-bottom p:last-child{display:none}
}

/* thickness rail: every thickness on the rack drawn to scale, edge-on (6px per mm) */
.rail{margin-top:24px;padding:26px clamp(18px,3vw,30px) 22px;position:relative;border-radius:4px;background:#070605;border:1px solid var(--line)}
.rail .brk{inset:10px;opacity:.55}
.rail figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px;font-size:.92rem;color:var(--cream-70)}
.rail figcaption strong{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:700}
.rail-row{display:flex;align-items:flex-end;gap:clamp(8px,1.4vw,18px);margin-top:26px;min-height:170px;overflow-x:auto;padding-bottom:4px}
.bar{flex:1 1 0;min-width:30px;max-width:58px;display:flex;flex-direction:column;align-items:center;gap:10px}
.edge{display:block;width:100%;height:calc(var(--mm) * 6px);border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -14px rgba(0,0,0,.9);
  transition:filter .5s var(--ease),box-shadow .5s var(--ease);filter:saturate(.8) brightness(.92)}
.bar:hover .edge{filter:saturate(1.15) brightness(1.08);box-shadow:0 0 0 1px var(--gold-line),0 0 28px -4px rgba(232,176,96,.45)}
.mm{font-size:.7rem;letter-spacing:.12em;color:var(--cream);white-space:nowrap;line-height:1.2}
.mm.sub{color:var(--cream-45);margin-top:-6px}
.ply{background:repeating-linear-gradient(180deg,#caa06a 0 2.5px,#6e4426 2.5px 3.5px,#bb8d57 3.5px 6px,#5d3a20 6px 7px,#d4ac74 7px 9.5px,#71492a 9.5px 10.5px,#c79c63 10.5px 13px)}
.film{background:linear-gradient(180deg,#3a2414 0 2px,transparent 2px calc(100% - 2px),#3a2414 calc(100% - 2px)),repeating-linear-gradient(180deg,#caa06a 0 2.5px,#6e4426 2.5px 3.5px,#bb8d57 3.5px 6px,#5d3a20 6px 7px)}
.mdf{background:linear-gradient(180deg,#a9774a,#9a6a3f 50%,#a9774a);background-color:#9e6e42}
.hmr{background:linear-gradient(180deg,#a9774a 0 1.5px,#6f7d4a 1.5px calc(100% - 1.5px),#a9774a calc(100% - 1.5px))}
.mel{background:linear-gradient(180deg,#efe8dc 0 2px,#a9774a 2px calc(100% - 2px),#efe8dc calc(100% - 2px))}
.pvc{background:linear-gradient(180deg,#f3f0ea,#e2ddd3);}

/* trade docket: the terms on paper, the only light surface on the site */
.docket{position:relative;margin-top:30px;padding:38px clamp(20px,3vw,34px) 26px;background:#efe4cf;color:#2a1d10;border-radius:3px;
  transform:rotate(-.4deg);box-shadow:0 34px 70px -34px rgba(0,0,0,.95),inset 0 0 80px rgba(120,80,40,.12)}
.docket::before{content:'';position:absolute;left:0;right:0;top:-8px;height:9px;
  background:radial-gradient(circle at 8px 0,transparent 4.5px,#efe4cf 5px) repeat-x;background-size:16px 9px}
.docket-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding-bottom:12px;border-bottom:2px solid #2a1d10;
  font-family:'Courier New',ui-monospace,Menlo,monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.stamp{position:absolute;right:clamp(14px,3vw,30px);bottom:16px;padding:6px 12px;border:2px solid #8a2f1d;border-radius:4px;color:#8a2f1d;
  font-family:'Courier New',ui-monospace,Menlo,monospace;font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-8deg);opacity:.82;mix-blend-mode:multiply}
.docket .table-wrap{margin-top:8px;border:0;border-radius:0;background:transparent;box-shadow:none}
.docket table{min-width:0}
.docket th,.docket td{color:#2a1d10;border-bottom:1px solid rgba(42,29,16,.2);font-size:.95rem}
.docket .kv th{font-family:'Courier New',ui-monospace,Menlo,monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;width:32%;color:#5a3a1d}
.docket tbody tr:hover{background:rgba(138,47,29,.05)}
.docket{padding-bottom:64px}

/* body layout: content + sticky price card */
.page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start;
  padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(40px,6vw,80px)}
@media(max-width:980px){.page{grid-template-columns:minmax(0,1fr)}.price-card{position:static!important;order:-1}}
.blk{position:relative;padding-bottom:clamp(44px,6vw,72px);margin-bottom:clamp(44px,6vw,72px);border-bottom:1px solid var(--line)}
.blk:last-of-type{border-bottom:0}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.kicker .idx{color:var(--cream-45);letter-spacing:.16em}
.kicker .chip{width:22px;height:13px;border-radius:3px;flex:none;
  background:repeating-linear-gradient(180deg,#caa06a 0 2.5px,#6e4426 2.5px 3.5px,#bb8d57 3.5px 6px,#5d3a20 6px 7px,#d4ac74 7px 9.5px,#71492a 9.5px 10.5px,#c79c63 10.5px 13px)}
h2{font-family:var(--font-d);font-weight:500;letter-spacing:-.012em;line-height:1.06;font-size:clamp(1.9rem,3.6vw,3rem);max-width:20ch;text-wrap:balance}
.blk>p,.blk>ul,.blk>ol{margin-top:18px;max-width:66ch;color:var(--cream-70);font-size:1.02rem}
.blk li{margin:8px 0 8px 20px}
.blk li strong{color:var(--cream)}
.blk li::marker{color:var(--gold)}

/* tables in a glass card */
.table-wrap{margin-top:24px;overflow-x:auto;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(242,233,216,.035),rgba(242,233,216,.01));box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.98rem}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;background:rgba(242,233,216,.03)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .3s}
tbody tr:hover{background:rgba(210,168,95,.06)}
td:first-child,.kv th{color:var(--cream);font-weight:600}
.kv th{font-size:.95rem;letter-spacing:0;text-transform:none;background:transparent;width:30%}
td{color:var(--cream-70)}
td a{color:var(--gold-strong)}

/* questions: visible headings + answers, so search and AI engines can quote them */
.qa{margin-top:22px;border-top:1px solid var(--line)}
.qa h3{font-family:var(--font-d);font-size:clamp(1.15rem,1.8vw,1.35rem);font-weight:500;color:var(--cream);padding-top:24px;letter-spacing:-.005em}
.qa p{margin-top:10px;color:var(--cream-70);max-width:66ch;padding-bottom:24px;border-bottom:1px solid var(--line)}

/* order steps */
.order{position:relative;overflow:hidden;margin-bottom:clamp(44px,6vw,72px);padding:clamp(28px,4vw,44px);border-radius:var(--radius);border:1px solid var(--gold-line);
  background:linear-gradient(135deg,rgba(210,168,95,.12),rgba(27,44,33,.45) 60%,rgba(42,29,16,.5))}
.order h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.order ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.order li{counter-increment:s;position:relative;padding-left:58px;min-height:30px;color:var(--cream-70)}
.order li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--font-d);font-size:1.6rem;line-height:1;color:var(--gold-strong);font-style:italic}
.order .ply-edge{position:absolute;left:0;right:0;bottom:0;height:8px;opacity:.75}

/* sticky price card */
.price-card{position:sticky;top:96px;padding:28px;border-radius:var(--radius);border:1px solid var(--gold-line);
  background:linear-gradient(160deg,rgba(27,44,33,.75),rgba(13,11,8,.85));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.price-card .kicker{margin-bottom:10px}
.price-card h2{font-size:1.65rem}
.price-card p{margin-top:12px;color:var(--cream-70);font-size:.95rem}
.price-card .btn{width:100%;justify-content:center;margin-top:12px}
.price-card ul{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:10px;font-size:.88rem;color:var(--cream-70)}
.price-card li strong{display:block;color:var(--cream);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2px}

/* related + updated */
.related{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:28px}
.related a{padding:11px 18px;border:1px solid var(--line);border-radius:999px;color:var(--cream);text-decoration:none;font-size:.82rem;letter-spacing:.06em;transition:border-color .3s,color .3s,transform .4s var(--ease)}
.related a:hover{border-color:var(--gold-line);color:var(--gold-strong);transform:translateY(-2px)}
.updated{font-size:.82rem;color:var(--cream-45);padding-bottom:clamp(48px,7vw,90px)}

/* footer */
footer{position:relative;border-top:1px solid var(--line);padding:clamp(48px,7vw,80px) 0 40px;font-size:.92rem;color:var(--cream-70)}
.f-logo{width:min(320px,70vw);height:auto;border-radius:16px;margin-bottom:34px;filter:drop-shadow(0 18px 42px rgba(0,0,0,.42))}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
footer strong{display:block;color:var(--gold);margin-bottom:8px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
footer a{color:var(--cream-70)}
footer a:hover{color:var(--gold-strong)}
footer .legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--cream-45)}

/* mobile action bar: WhatsApp + call always one tap away */
.mbar{display:none}
@media(max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:120;
    padding:10px;border-radius:999px;background:rgba(13,11,8,.88);border:1px solid var(--gold-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .mbar .btn{justify-content:center;padding:13px 10px;font-size:.74rem}
  body{padding-bottom:84px}
  
}


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* booking page */
.frame-short{min-height:calc(100vw / 3.2)}
.book-link{display:block;margin-top:16px;font-size:.86rem;color:var(--gold-strong)}
.book-page{grid-template-columns:minmax(0,1fr) 360px}
.book{display:grid;gap:26px}
.step{border:0;padding:0;margin:0}
.step legend{display:flex;align-items:center;gap:14px;font-family:var(--font-d);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500;margin-bottom:16px}
.step legend .idx{font-family:var(--font-b);font-size:.7rem;letter-spacing:.2em;color:var(--gold)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{position:relative;cursor:pointer}
.opt input,.slot input{position:absolute;opacity:0;width:1px;height:1px;left:12px;top:12px;pointer-events:none}
.opt-in{display:block;height:100%;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(242,233,216,.025);transition:border-color .3s,background .3s,box-shadow .3s}
.opt-t{display:block;font-weight:700;color:var(--cream);font-size:1rem}
.opt-d{display:block;margin-top:6px;font-size:.86rem;color:var(--cream-70);line-height:1.5}
.opt:hover .opt-in{border-color:var(--gold-line)}
.opt input:checked+.opt-in{border-color:var(--gold);background:linear-gradient(135deg,rgba(210,168,95,.16),rgba(27,44,33,.4));box-shadow:0 0 0 1px var(--gold) inset}
.opt input:focus-visible+.opt-in,.slot input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.fld{display:grid;gap:8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.fld i{font-style:normal;text-transform:none;letter-spacing:0}
.fld input,.fld textarea{width:100%;font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--cream);background:#0a0907;border:1px solid var(--line);border-radius:12px;padding:15px 16px;min-height:54px;color-scheme:dark}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,168,95,.18)}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slot{cursor:pointer;position:relative}
.slot span{display:flex;flex-direction:column;justify-content:center;min-height:54px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--cream);font-weight:600}
.slot small{font-weight:400;font-size:.78rem;color:var(--cream-45)}
.slot input:checked+span{border-color:var(--gold);background:rgba(210,168,95,.12)}
.hint{font-size:.85rem;color:var(--cream-45)}
.err{min-height:1.4em;color:#f0a37a;font-weight:600}
.book-actions{display:flex;flex-wrap:wrap;gap:12px}
.book-actions .btn{padding:17px 28px}
button.btn{cursor:pointer;font-family:inherit}
.slip{position:sticky;top:96px}
.slip .docket{margin-top:0;transform:rotate(.5deg)}
.slip .hint{margin-top:16px}
.slip td{word-break:break-word}
@media(max-width:980px){.book-page{grid-template-columns:minmax(0,1fr)}.slip{position:static}}
@media(max-width:600px){.opts,.row2{grid-template-columns:1fr}.frame-short{min-height:420px}}

/* Book in the menu (stays visible on phones) */
.top nav .nav-book{padding:9px 16px;border-radius:999px;border:1px solid var(--gold);color:var(--gold-strong);opacity:1}
.top nav .nav-book:hover{background:var(--gold);color:var(--ink)}
@media(max-width:420px){.top nav{gap:8px}.top nav .nav-book{padding:8px 12px}.top .btn{padding:10px 14px}}