:root{
  --ink:#0B0A0C; --coal:#141217; --coal-2:#1C191F; --bone:#EFE8DA; --bone-2:#CFC7B8; --muted:#A79F90;
  --gold:#C8A24A; --gold-hi:#E8CB84; --oxblood:#4A0F1E; --jewel:#2B58FF;
  --line:rgba(239,232,218,.14); --line-gold:rgba(200,162,74,.35);
  --ok:#6FCF97; --bad:#F08A80;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(18px,5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--bone-2);font:400 clamp(16px,1.05vw + 11px,18px)/1.65 var(--sans);overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:3px}
.skip{position:fixed;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:6px;z-index:200;font-weight:600}
.skip:focus{left:8px}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.no-webgl #stage{display:none}
.no-webgl body{background:radial-gradient(60% 50% at 75% 25%,rgba(200,162,74,.22),transparent 70%),var(--ink)}
main{position:relative;z-index:1;outline:0}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:500;letter-spacing:-.025em;line-height:.96;color:var(--bone);text-wrap:balance}
h1.display{font-size:clamp(3.3rem,9.4vw,9rem)}
h2.display{font-size:clamp(2.3rem,5.4vw,4.6rem);margin-bottom:.5em}
h3.display{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.05}
.kicker{font-size:.9rem;font-weight:500;color:var(--gold-hi);margin-bottom:1.4rem;letter-spacing:.02em}
.roman{font-family:var(--display);font-size:1.1rem;color:var(--gold);margin-bottom:1rem}
.lede{max-width:34em;color:var(--bone-2);margin-top:1.6rem}
.hint{font-size:.85rem;color:var(--muted)}
.line{display:block;overflow:hidden;padding:.04em 0 .1em}
.line>span{display:block}

/* ---------- chrome ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top)) var(--gutter) 14px}
.wordmark{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--bone);min-height:44px}
.bar-actions{display:flex;align-items:center;gap:8px}
.pill,.ghost,.textlink{font:500 .95rem var(--sans);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pill{background:var(--gold);color:var(--ink);border:1px solid var(--gold);padding:0 22px;border-radius:999px;font-weight:600}
.pill:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.pill.big{min-height:54px;padding:0 32px;font-size:1.02rem}
.pill[disabled]{opacity:.45;cursor:not-allowed}
.ghost{background:rgba(11,10,12,.6);color:var(--bone);border:1px solid var(--line-gold);padding:0 16px;border-radius:999px}
.ghost:hover{border-color:var(--gold);background:rgba(200,162,74,.12)}
.ghost.sq{width:44px;padding:0;border-radius:50%}
.textlink{background:none;border:0;color:var(--bone);padding:0 4px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;text-decoration-thickness:1px}
.textlink:hover{color:var(--gold-hi)}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--gold);color:var(--ink);font-size:.78rem;font-weight:600;padding:0 5px}
.count[data-n="0"]{background:var(--coal-2);color:var(--muted)}

.rail{position:fixed;left:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:50}
.rail ol{display:grid;gap:4px}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:36px;color:var(--muted);font-size:.82rem}
.rail i{font:500 .85rem var(--display);font-style:normal;width:26px;text-align:center;border-right:1px solid var(--line);padding-right:8px;margin-right:2px}
.rail span{opacity:0;transform:translateX(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
.rail a:hover span,.rail a:focus-visible span,.rail a[aria-current=true] span{opacity:1;transform:none}
.rail a[aria-current=true]{color:var(--gold-hi)}
.rail a[aria-current=true] i{border-right-color:var(--gold)}
@media(max-width:1099px){.rail{display:none}}

/* ---------- chapters ---------- */
.chapter{min-height:100svh;display:flex;align-items:center;position:relative;padding:max(16vh,110px) 0 12vh}
.col{width:min(600px,100% - 2*var(--gutter));margin-left:max(var(--gutter),11vw)}
.col.wide{width:min(700px,100% - 2*var(--gutter))}
@media(max-width:1099px){.col{margin-left:var(--gutter)}}
.hero{padding-top:max(14vh,100px)}
.hero .col{width:min(860px,100% - 2*var(--gutter))}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:2.2rem}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:.78rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.cue::after{content:"";display:block;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);margin:10px auto 0}
@media(max-width:700px){.cue{display:none}}
@media(max-width:700px){
  .chapter{align-items:flex-start}
  .hero{align-items:flex-end;padding-bottom:12vh}
  .hero .col,.col,.col.wide{margin-left:var(--gutter);width:calc(100% - 2*var(--gutter))}
}

/* services ledger */
.ledger{margin-top:2.2rem;border-top:1px solid var(--line);background:rgba(11,10,12,.5)}
.ledger li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto auto;gap:6px 24px;align-items:center;width:100%;text-align:left;padding:22px 14px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;transition:background-color .25s var(--ease)}
.row:hover,.row:focus-visible{background:rgba(200,162,74,.08)}
.row .nm{font:500 clamp(1.4rem,2.4vw,2rem)/1.1 var(--display);color:var(--bone);transition:transform .3s var(--ease)}
.row:hover .nm{transform:translateX(6px)}
.row .ds{grid-column:1;color:var(--muted);font-size:.92rem;max-width:40ch}
.row .du{grid-column:2;grid-row:1;color:var(--muted);font-size:.9rem;white-space:nowrap}
.row .pr{grid-column:3;grid-row:1;color:var(--gold-hi);font-weight:600;white-space:nowrap;min-width:4.5ch;text-align:right}
.row .go{grid-column:2/4;grid-row:2;justify-self:end;font-size:.85rem;color:var(--gold-hi)}
@media(max-width:560px){.row{grid-template-columns:1fr auto}.row .du{grid-column:1;grid-row:3}.row .pr{grid-column:2;grid-row:1}.row .go{grid-column:2;grid-row:2}}

/* cabinet */
.cab{padding:0;display:block;height:var(--cab-h,320svh);min-height:0}
.cab-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:max(14vh,96px) 0 28px}
.cab .col{margin-top:0;padding:26px 28px;background:rgba(11,10,12,.72);border:1px solid var(--line);border-radius:6px;width:min(520px,100% - 2*var(--gutter))}
.prod{margin-top:1.6rem;border-top:1px solid var(--line-gold);padding-top:1.3rem}
.prod .cat{font-size:.85rem;color:var(--gold-hi);margin-bottom:.4rem}
.prod .tag{color:var(--bone);margin-top:.5rem}
.prod .desc{margin-top:.6rem;color:var(--bone-2);font-size:.97rem;max-width:42ch}
.buy{display:flex;align-items:center;gap:18px;margin-top:1.2rem;flex-wrap:wrap}
.price{font:500 1.7rem var(--display);color:var(--gold-hi)}
.pager{display:flex;align-items:center;gap:14px;margin-top:1.2rem;color:var(--muted);font-size:.9rem}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px var(--gutter) 6px max(var(--gutter),11vw);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(11,10,12,.7);color:var(--bone-2);font:500 .88rem var(--sans);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.chip:hover{border-color:var(--gold)}
.chip[aria-current=true]{border-color:var(--gold);color:var(--ink);background:var(--gold)}
@media(max-width:899px){
  .cab-sticky{justify-content:flex-end;padding-top:80px;gap:12px}
  .cab .col{background:linear-gradient(transparent,rgba(11,10,12,.9) 22%);padding:34px var(--gutter) 6px;border:0;border-radius:0;width:100%;margin-left:0}
  .cab h2,.cab .roman,.cab .lede{display:none}
  .prod{margin-top:0;border-top:0;padding-top:0}
  .prod .desc{display:none}
  .chips{padding-left:var(--gutter)}
}
.reduced .cab,.no-webgl .cab{height:auto;padding:max(14vh,100px) 0 10vh}
.reduced .cab-sticky,.no-webgl .cab-sticky{position:static;height:auto}

/* ritual */
.steps{display:grid;gap:clamp(22px,4vh,40px);margin-top:2.4rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:22px 20px;background:rgba(11,10,12,.55);border-left:1px solid var(--line-gold)}
.steps .n{font:500 2.4rem/1 var(--display);color:var(--gold)}
.steps h3{font:500 1.5rem var(--display);color:var(--bone);margin-bottom:.3rem}
.steps p{color:var(--bone-2);max-width:44ch}

/* reserve */
.end{flex-direction:column;align-items:flex-start;justify-content:center}
.end .col{margin-bottom:auto}
.visit{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 28px;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.visit dt{font-size:.8rem;color:var(--muted);margin-bottom:2px}
.visit dd,.visit dd a{color:var(--bone);text-decoration:none}
.visit dd a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.foot{width:100%;display:flex;gap:10px 28px;justify-content:space-between;flex-wrap:wrap;padding:60px var(--gutter) calc(22px + env(safe-area-inset-bottom));font-size:.85rem;color:var(--muted)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--gold-hi)}

/* ---------- loader / toast ---------- */
#loader{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .7s var(--ease),visibility .7s}
#loader img{animation:pulse 1.6s ease-in-out infinite}
#loadpct{font:500 .9rem var(--sans);color:var(--muted);letter-spacing:.2em;font-variant-numeric:tabular-nums}
#loadpct::after{content:"%"}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes pulse{50%{opacity:.5;transform:scale(.94)}}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:var(--bone);color:var(--ink);padding:11px 18px;border-radius:999px;font-size:.92rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease);z-index:400;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- dialogs ---------- */
dialog{border:1px solid var(--line-gold);background:var(--coal);color:var(--bone-2);padding:0;max-width:none;max-height:none}
dialog::backdrop{background:rgba(5,4,6,.72);backdrop-filter:blur(5px)}
dialog[open]{animation:dlg .35s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(14px)}}
.sheet{width:min(920px,94vw);max-height:92svh;margin:auto;border-radius:10px;overflow:auto}
.sheet.small{width:min(520px,94vw)}
.drawer{width:min(460px,100vw);height:100svh;max-height:100svh;margin:0 0 0 auto;border-radius:0;border-width:0 0 0 1px;overflow:auto}
.drawer[open]{animation:drw .4s var(--ease)}
@keyframes drw{from{transform:translateX(40px);opacity:0}}
.dh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--coal);z-index:2}
.dh h2{font:500 1.5rem var(--display);color:var(--bone)}
.x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--bone);font-size:1rem;cursor:pointer}
.x:hover{border-color:var(--gold)}
.db{padding:22px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;align-items:start}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.sum{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--coal-2);font-size:.92rem}
.sum dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.sum dt{color:var(--muted)}.sum dd{text-align:right;color:var(--bone);overflow-wrap:anywhere}
.steps-bar{display:flex;gap:6px;margin-bottom:20px;font-size:.82rem;color:var(--muted)}
.steps-bar span{flex:1;padding-top:8px;border-top:2px solid var(--line)}
.steps-bar span.on{border-top-color:var(--gold);color:var(--gold-hi)}
.steps-bar span.done{border-top-color:var(--bone-2);color:var(--bone-2)}
.h3{font:500 1.25rem var(--display);color:var(--bone);margin-bottom:12px}
.opts{display:grid;gap:8px}
.opt{display:flex;justify-content:space-between;gap:14px;align-items:center;width:100%;text-align:left;padding:14px 16px;background:var(--coal-2);border:1px solid var(--line);border-radius:8px;color:inherit;font:inherit;cursor:pointer;min-height:56px;transition:border-color .2s,background-color .2s}
.opt:hover{border-color:var(--line-gold)}
.opt[aria-pressed=true]{border-color:var(--gold);background:rgba(200,162,74,.1)}
.opt b{display:block;color:var(--bone);font-weight:500}.opt small{color:var(--muted)}.opt .pr{color:var(--gold-hi);font-weight:600}
.field{margin-bottom:14px}
label{display:block;font-size:.85rem;font-weight:500;color:var(--bone);margin-bottom:5px}
input,select,textarea{width:100%;min-height:46px;padding:10px 13px;background:#0F0D12;color:var(--bone);border:1px solid #3D3742;border-radius:6px;font:inherit}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:#7d766b}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.radio{display:flex;gap:8px;flex-wrap:wrap}
.radio label{flex:1;min-width:140px;display:flex;align-items:center;gap:9px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:500}
.radio label:has(input:checked){border-color:var(--gold);background:rgba(200,162,74,.1)}
.radio input{width:18px;min-height:18px;height:18px;accent-color:var(--gold)}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--bone)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow{font-size:.74rem;color:var(--muted);text-align:center;padding:4px 0}
.day{height:44px;border:1px solid transparent;background:none;border-radius:6px;color:var(--bone);font:inherit;cursor:pointer}
.day:hover:not([disabled]){border-color:var(--line-gold)}
.day[disabled]{color:#5b554c;cursor:not-allowed}
.day.today{border-color:var(--line)}
.day[aria-pressed=true]{background:var(--gold);color:var(--ink);font-weight:600}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slot{min-height:44px;border:1px solid var(--line);background:var(--coal-2);color:var(--bone);border-radius:6px;font:500 .92rem var(--sans);cursor:pointer}
.slot:hover{border-color:var(--gold)}
.slot[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.alert{padding:10px 14px;border-radius:6px;font-size:.92rem;border:1px solid;margin-bottom:14px}
.alert.err{color:var(--bad);border-color:rgba(240,138,128,.4);background:rgba(240,138,128,.08)}
.alert.ok{color:var(--ok);border-color:rgba(111,207,151,.35);background:rgba(111,207,151,.08)}
.empty{padding:22px;text-align:center;color:var(--muted)}
.row2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row2.end{justify-content:flex-end}.row2.between{justify-content:space-between}
.btn{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-gold);background:none;color:var(--bone);font:500 .95rem var(--sans);cursor:pointer}
.btn:hover{border-color:var(--gold);background:rgba(200,162,74,.1)}
.btn.danger{color:var(--bad);border-color:rgba(240,138,128,.4)}
.code{font:600 1.9rem/1 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:var(--gold-hi)}
.tag-ok{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(111,207,151,.12);color:var(--ok);font-size:.78rem;font-weight:600}
.tag-bad{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(240,138,128,.12);color:var(--bad);font-size:.78rem;font-weight:600}
.skel{height:56px;border-radius:8px;background:var(--coal-2);animation:pulse 1.4s ease-in-out infinite}

/* bag */
.lines{display:grid;gap:0;margin-bottom:18px}
.line-i{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.line-i b{color:var(--bone);font-weight:500}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.qty button{width:40px;height:40px;border:0;background:none;color:var(--bone);font-size:1.1rem;cursor:pointer;border-radius:50%}
.qty button:hover{background:rgba(200,162,74,.12)}
.qty output{min-width:26px;text-align:center;color:var(--bone)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;color:var(--bone);font-size:1.05rem}
.total b{font:500 1.6rem var(--display);color:var(--gold-hi)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:430px){
  .wordmark{font-size:1.02rem;gap:8px}.wordmark img{width:26px;height:26px}
  .bar{gap:6px}.bar-actions{gap:6px}
  .pill{padding:0 16px;font-size:.9rem}.ghost{padding:0 12px;font-size:.9rem}
}
