/* ============================================================
   FRS · DESIGN SYSTEM — shared across every page.
   Content lives in data.js. Behavior lives in site.js.
   Edit colors in :root (the brand accent is --accent).
   ============================================================ */
:root{
  --accent:#e7dfc8;                 /* ivory linework — brand, packaging spec */
  --gold:#c8b184;                   /* rim / hairline gold */
  --burgundy:#6b373d;               /* petal accent — a jewel, ~5–10% max */
  --burgundy-lift:#9a545b;          /* legible burgundy for small type / hover on black */
  --line-gold:rgba(200,177,132,.20);--gold-soft:rgba(200,177,132,.42);
  --bg:#0a0908;--surface:#100e0c;--surface-2:#16130f;--paper:#e8e1d4;
  --text:#e7e1d6;--muted:#928b7e;--faint:#5b554c;
  --line:rgba(231,225,214,.08);--line-strong:rgba(231,225,214,.17);
  --ink:#0a0908;--max:1240px;--gut:34px;
  --fdisp:'Cormorant Garamond',serif;--fbody:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --crest-url:url('assets/frs-crest-light.png?v=20260805e');   /* swap this one line to version the crest */
  --crest-mask:url('assets/frs-crest-light.png');  /* silhouette used by the holographic sheen */
  --ease:cubic-bezier(.2,.7,.2,1);
  --sheen-a:rgba(231,223,200,.5);--sheen-b:rgba(200,177,132,.5);--sheen-c:rgba(154,84,91,.38);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable both-edges}
body{background:var(--bg);color:var(--text);font-family:var(--fbody);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;font-feature-settings:"kern","liga","calt";
  background-image:radial-gradient(150% 90% at 50% -8%,rgba(231,225,214,.045),transparent 55%),linear-gradient(180deg,#0c0a09 0%,#0a0908 40%,#090807 100%);
  background-attachment:fixed}
body.locked{overflow:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.wrap.narrow{max-width:920px}
.serif{font-family:var(--fdisp);font-feature-settings:"liga","dlig","onum","swsh"}
h1,h2{text-wrap:pretty}
.label{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);font-weight:500}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26262b;border:3px solid var(--bg);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#36363c}

/* texture + frame */
.grain{position:fixed;inset:0;z-index:600;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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")}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 38%,transparent 56%,rgba(0,0,0,.5) 100%)}
.frame{position:fixed;inset:16px;border:1px solid var(--line-gold);pointer-events:none;z-index:45}
.fc{display:block;position:fixed;width:20px;height:20px;z-index:46;pointer-events:none}
.fc.tl{top:6px;left:6px;border-top:1px solid var(--gold-soft);border-left:1px solid var(--gold-soft)}
.fc.tr{top:6px;right:6px;border-top:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft)}
.fc.bl{bottom:6px;left:6px;border-bottom:1px solid var(--gold-soft);border-left:1px solid var(--gold-soft)}
.fc.br{bottom:6px;right:6px;border-bottom:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft)}
@media(max-width:600px){.frame{inset:8px}.fc.tl,.fc.tr{top:3px}.fc.bl,.fc.br{bottom:3px}.fc.tl,.fc.bl{left:3px}.fc.tr,.fc.br{right:3px}}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);background:transparent;color:var(--text);padding:17px 42px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;transition:border-color .45s,color .45s,background .45s;overflow:hidden;isolation:isolate}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(231,225,214,.10) 50%,transparent 70%);transform:translateX(-130%);transition:transform .85s var(--ease)}
.btn::after{display:none}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn.solid:hover{background:#fbf7f0;border-color:#fbf7f0;color:var(--ink)}
.btn.full{width:100%;text-align:center}
.btn.ghost{color:var(--muted);border-color:transparent}.btn.ghost:hover{color:var(--text)}

.dropcd{display:none;align-items:flex-end;justify-content:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.dropcd .cdlabel{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);align-self:center}
.dropcd .cd{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:38px}
.dropcd .cd b{font-family:var(--fdisp);font-weight:500;font-size:31px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.dropcd .cd i{font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
@media(max-width:480px){.dropcd{gap:11px}.dropcd .cd b{font-size:25px}}
/* returning-member chip */
.memba-wrap{margin:16px auto 2px;max-width:560px}
.memba{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;border:1px solid var(--line-strong);border-radius:100px;padding:8px 8px 8px 18px;font-size:12.5px;color:var(--muted);background:var(--surface)}
.memba .memb-t{color:var(--text)}
.memba a{color:var(--accent);text-decoration:none;letter-spacing:.04em}
.memba a:hover{text-decoration:underline}
.memx{border:1px solid var(--line);background:transparent;color:var(--faint);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.memx:hover{color:var(--text);border-color:var(--line-strong)}
/* per-strain "why this one" note in the product drawer */
.pd-why{margin:14px 0 2px;padding:12px 16px;border-left:2px solid var(--accent);background:linear-gradient(90deg,rgba(255,255,255,.035),transparent);font-family:var(--fdisp);font-style:italic;font-size:15.5px;line-height:1.5;color:var(--text)}
.pd-why-k{display:block;font-family:'Archivo',system-ui,sans-serif;font-style:normal;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy-lift);margin-bottom:5px}
/* concierge allocation line — quiet scarcity, in-voice */
.pd-alloc{display:flex;align-items:center;gap:9px;margin:13px 0 2px;font-size:12px;letter-spacing:.02em;color:var(--muted)}
.pd-alloc-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--burgundy-lift);box-shadow:0 0 0 0 rgba(154,84,91,.5);animation:allocPulse 2.6s ease-out infinite}
@keyframes allocPulse{0%{box-shadow:0 0 0 0 rgba(154,84,91,.5)}70%{box-shadow:0 0 0 7px rgba(154,84,91,0)}100%{box-shadow:0 0 0 0 rgba(154,84,91,0)}}
@media(prefers-reduced-motion:reduce){.pd-alloc-dot{animation:none}}
/* handwritten personal note on the confirmation screen */
.handnote{max-width:430px;margin:0 auto 30px;padding:22px 26px;border:1px solid var(--line);position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.handnote::before{content:'';position:absolute;top:-1px;left:26px;right:26px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.handnote p{font-family:var(--fdisp);font-style:italic;font-size:19px;line-height:1.55;color:var(--text);margin:0}
.handnote-sig{display:block;margin-top:12px;font-size:15px;font-style:italic;color:var(--accent);letter-spacing:.02em}
.catload{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.catload.row{grid-template-columns:repeat(2,1fr)}
.catload span{display:block;aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(100deg,rgba(255,255,255,.02) 30%,rgba(255,255,255,.055) 50%,rgba(255,255,255,.02) 70%);background-size:220% 100%;animation:cshimmer 1.25s ease-in-out infinite}
@keyframes cshimmer{0%{background-position:180% 0}100%{background-position:-40% 0}}
@media(max-width:900px){.catload{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.catload,.catload.row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.catload span{animation:none}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1.05s ease,transform 1.05s var(--ease)}
.reveal.in{opacity:1;transform:none}
.orn{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--faint);font-size:11px}
.orn span{width:74px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* ===== holographic crest engine (hero + gate) ===== */
.crestwrap{position:relative;display:inline-block;filter:drop-shadow(0 10px 52px rgba(0,0,0,.7))}
.crestwrap .crest{position:relative;display:block;z-index:1}
.crestwrap .sheen{position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-mask:var(--crest-mask) center/contain no-repeat;mask:var(--crest-mask) center/contain no-repeat}
.crestwrap .sheen::before{content:'';position:absolute;inset:0;
  background:linear-gradient(125deg,var(--sheen-a),var(--sheen-b),var(--sheen-c),var(--sheen-a));
  background-size:300% 100%;mix-blend-mode:screen;opacity:.14;animation:drift 14s linear infinite}
.crestwrap .sheen::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 41%,var(--sheen-a) 47%,var(--sheen-b) 51%,var(--sheen-c) 55%,transparent 61%);
  background-size:260% 100%;background-position:165% 0;mix-blend-mode:screen;animation:sweep 8.5s ease-in-out 1.8s infinite}
@keyframes drift{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes sweep{0%{background-position:165% 0}46%{background-position:-65% 0}100%{background-position:-65% 0}}

/* age gate */
/* No flash on repeat visits: an inline <head> script marks <html> before first
   paint, so the gate is never painted for someone who already confirmed. */
html.ok21 #gate{display:none}
html.ok21 body.locked{overflow:visible}
#gate{position:fixed;inset:0;z-index:1000;background:radial-gradient(120% 90% at 50% 32%,#0d0d10,#060607 70%);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;transition:opacity .9s ease,visibility .9s}
#gate.go{opacity:0;visibility:hidden}
.gate-inner{position:relative}
#gate .crestwrap{margin:0 auto 26px}
#gateImg{height:118px;width:auto;display:block}
#gate .gate-crest{animation:gateCrest 1.4s .15s var(--ease) both}
@keyframes gateCrest{0%{transform:scale(.92);filter:blur(7px)}100%{transform:none;filter:none}}
#gate .mark{font-size:30px;letter-spacing:.05em;margin-bottom:9px;line-height:1}
#gate .el{margin-bottom:24px}
#gate p{color:var(--muted);font-size:13.5px;margin:0 auto 30px;max-width:340px;line-height:1.7}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#gate .mark,#gate .el,#gate p,#gate .gate-actions{animation:hUp 1s both}
#gate .mark{animation-delay:.5s}#gate .el{animation-delay:.62s}#gate p{animation-delay:.74s}#gate .gate-actions{animation-delay:.86s}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.55);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
header.scrolled{background:rgba(8,8,10,.88);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.nav .brand{font-size:15px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;padding-left:.4em}
.nav .brand b{color:var(--gold);font-weight:500}
.nav ul{display:flex;gap:34px;list-style:none}
.nav ul a{position:relative;white-space:nowrap;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav ul a::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nav ul a:hover{color:var(--text)}
.nav ul a.active{color:var(--text)}.nav ul a.active::after{right:0}
.nav-right{display:flex;align-items:center;gap:22px}
.reserve-btn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);background:none;border:none;display:flex;align-items:center;gap:9px}
.reserve-btn .count{min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:100px;background:var(--accent);color:var(--ink);font-size:10.5px;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;font-weight:600;transition:transform .3s var(--ease),background .3s}
.reserve-btn .count.bump{animation:countpop .42s var(--ease)}
@keyframes countpop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.reserve-btn .count.empty{background:transparent;color:var(--faint);border:1px solid var(--line-strong)}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px}

/* dpill */
.dpill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:100px;padding:8px 17px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.014)}
.dpill .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dpill .dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulse 2.6s ease-out infinite}
.dpill.tone-off{color:var(--faint)}.dpill.tone-off .dot{background:var(--faint)}.dpill.tone-off .dot::after{display:none}
.dpill.tone-warn{color:#caa07e}.dpill.tone-warn .dot,.dpill.tone-warn .dot::after{background:#cf9b6a}
.dpill.tone-soon{color:var(--muted)}.dpill.tone-soon .dot::after{animation-duration:4.2s}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.4);opacity:0}}

/* hero (home) */
.hero{position:relative;padding:clamp(108px,13vh,150px) 0 clamp(80px,9vw,104px);text-align:center;border-bottom:1px solid var(--line);overflow:hidden}
.hero .glow{position:absolute;top:40px;left:50%;width:660px;height:660px;max-width:130vw;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.06),transparent 60%);pointer-events:none;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.09)}}
.hero .crestwrap{display:block;width:max-content;max-width:100%;margin:0 auto 34px}
.hero .crest{height:clamp(158px,27vw,266px);width:auto;max-width:86vw}
.hero .el{margin-bottom:22px}
.hero h1{font-family:var(--fdisp);font-weight:500;font-size:clamp(46px,8vw,104px);line-height:.98;letter-spacing:.015em;margin-bottom:20px;max-width:13ch;margin-left:auto;margin-right:auto}
.hero .tag{font-family:var(--fdisp);font-style:italic;font-weight:400;font-size:clamp(18px,2.8vw,25px);color:var(--text);margin-bottom:34px;opacity:.92}
.hero .dpill{margin:0 auto 26px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
body.entered .hero .crestwrap{animation:hUp 1.2s .04s var(--ease) both}
body.entered .hero .dpill{animation:hUp 1s .26s var(--ease) both}
body.entered .hero .el{animation:hUp 1s .36s var(--ease) both}
body.entered .hero h1{animation:hUp 1.05s .46s var(--ease) both}
body.entered .hero .tag{animation:hUp 1s .62s var(--ease) both}
body.entered .hero-actions{animation:hUp 1s .78s var(--ease) both}
body.entered .hero .orn{animation:hUp 1s .94s var(--ease) both}
@keyframes hUp{from{transform:translateY(26px)}to{transform:translateY(0)}}

/* page hero (subpages) */
.phero{padding:clamp(56px,7vw,92px) 0 clamp(28px,4vw,42px);border-bottom:1px solid var(--line)}
.phero .el{margin-bottom:20px}
.phero h1{font-family:var(--fdisp);font-weight:500;font-size:clamp(42px,7vw,86px);line-height:1;letter-spacing:.01em;margin-bottom:22px}
.phero p{color:var(--muted);max-width:620px;font-size:15.5px;line-height:1.85}

section{padding:clamp(88px,10vw,124px) 0;position:relative}
section.tight{padding:clamp(36px,5vw,56px) 0}
.sec-head{display:flex;align-items:baseline;gap:26px;margin-bottom:48px;border-bottom:1px solid var(--line-gold);padding-bottom:26px}
.sec-head .no{font-family:var(--fdisp);font-weight:500;font-style:italic;font-size:clamp(30px,4vw,46px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-strong);flex:none;align-self:center}
.sec-head h2{font-family:var(--fdisp);font-weight:500;font-size:clamp(30px,4.4vw,48px);flex:1;line-height:1}
.sec-head .label{white-space:nowrap;align-self:center}

/* home hub: editorial index rows */
.idx{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.idxrow{display:flex;align-items:center;gap:30px;padding:34px 6px;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),background .4s}
.idxrow:hover{padding-left:20px;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 60%)}
.idxrow .ino{font-family:var(--fdisp);font-style:italic;font-size:clamp(22px,3vw,34px);color:transparent;-webkit-text-stroke:1px var(--line-strong);flex:none;width:54px}
.idxrow .imid{flex:1;min-width:0}
.idxrow .it{font-family:var(--fdisp);font-size:clamp(26px,3.4vw,40px);line-height:1.04;margin-bottom:8px;transition:color .3s}
.idxrow .ib{color:var(--muted);font-size:13.5px;line-height:1.7;max-width:60ch}
.idxrow .imeta{flex:none;display:flex;align-items:center;gap:18px;color:var(--muted);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.idxrow .iar{font-size:18px;color:var(--muted);transition:transform .35s var(--ease),color .35s}
.idxrow:hover .iar{transform:translateX(6px);color:var(--accent)}
.idxrow:hover .it{color:var(--accent)}
@media(max-width:680px){.idxrow{gap:18px;padding:26px 4px}.idxrow .imeta .mtag{display:none}}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-bottom:24px}
.chip.avail{margin-left:0}
/* Push "in stock only" to the far edge only when the whole row genuinely fits on
   one line — otherwise it strands itself on row two with a screen-wide gap. */
@media(min-width:1001px){.chip.avail{margin-left:auto}}
.chip{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:10px 19px;background:transparent;transition:.3s}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.active{color:var(--ink);background:var(--accent);border-color:var(--accent)}

/* catalog */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:30px 20px}
.grid>*{min-width:0}
.card .ph{max-width:100%}
.card h3,.card .meta{overflow-wrap:anywhere}
.grid.two{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(22px);transition:border-color .4s,background .4s,box-shadow .4s,transform .65s var(--ease),opacity .65s ease}
.card.in{opacity:1;transform:none}
.card.in:hover{border-color:var(--line-strong);transform:translateY(-6px);background:var(--surface-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05)}
.card .ph{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#0d0d0f;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}
.card .ph.empty{background-image:radial-gradient(circle at 50% 40%,rgba(255,255,255,.025),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 11px,transparent 11px 22px)}
.card .ph .crestph{height:56%;opacity:.5}
.card .status{position:absolute;top:15px;right:15px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;background:rgba(8,8,10,.82);padding:6px 11px;backdrop-filter:blur(4px)}
.status.available{color:var(--accent)}.status.limited{color:var(--burgundy-lift)}.status.reserved,.status.soldout{color:var(--faint)}.status.soon{color:var(--muted)}
.card .ed{position:absolute;top:15px;left:15px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,10,.82);padding:6px 10px;backdrop-filter:blur(4px)}
.card .body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.card .cat{margin-bottom:14px}
.card h3{font-family:var(--fdisp);font-weight:500;font-size:26px;margin-bottom:15px;line-height:1.05}
.card .meta{font-size:12.5px;color:var(--muted);margin-bottom:22px;flex:1;line-height:1.75}
.card .meta b{color:var(--text);font-weight:400}
.card .open{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:5px;align-self:flex-start;transition:.3s}
.card .open:hover{color:var(--accent);border-color:var(--accent)}
.card.bl{background:#060607;border-color:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.card.bl .ph{background-color:#070709;background-image:radial-gradient(circle at 50% 38%,rgba(255,255,255,.03),transparent 62%)}
.card.bl .ed{color:var(--text);border:1px solid var(--line-strong);background:rgba(0,0,0,.6);letter-spacing:.28em}
.card.bl::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--sheen-a),var(--sheen-b),var(--sheen-c),transparent);background-size:220% 100%;z-index:3;pointer-events:none;animation:seam 7s ease-in-out infinite}
@keyframes seam{0%,100%{background-position:160% 0;opacity:.5}50%{background-position:-60% 0;opacity:1}}
.card.bl.in:hover{border-color:rgba(255,255,255,.34);box-shadow:0 28px 64px -28px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.07)}
/* ---- product-state mechanic: stamp on the artwork ---- */
.card.is-soldout .crestph,.card.is-soon .crestph{opacity:.26;filter:grayscale(1)}
.card .stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:11px;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,10,.5);backdrop-filter:blur(3px);border:1px solid var(--line-strong);padding:11px 17px;white-space:nowrap}
.card .stamp::before,.card .stamp::after{content:'';width:13px;height:1px;background:currentColor;opacity:.6}
.card .stamp.premium{color:var(--text);border-color:transparent;background:rgba(0,0,0,.62);box-shadow:0 0 0 1px rgba(255,255,255,.2);overflow:hidden}
.card .stamp.premium .sx{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,var(--sheen-a) 47%,var(--sheen-b) 51%,var(--sheen-c) 55%,transparent 62%);background-size:240% 100%;mix-blend-mode:screen;animation:sweep 7s ease-in-out 1s infinite;pointer-events:none}
.card .stamp.soon{color:var(--muted)}

/* lab rows (compact, used on home preview) */
.lab-intro{color:var(--muted);max-width:640px;margin-bottom:42px;font-size:15px;line-height:1.8}
.lab-row{display:grid;grid-template-columns:130px 1.4fr 1fr auto;gap:20px;align-items:center;padding:21px 0;border-top:1px solid var(--line);transition:padding-left .35s var(--ease)}
.lab-row:last-child{border-bottom:1px solid var(--line)}
.lab-row:hover{padding-left:6px}
.lab-row .bid{font-size:11.5px;letter-spacing:.16em;color:var(--accent)}
.lab-row .lp{font-family:var(--fdisp);font-size:21px}
.lab-row .ld{font-size:12.5px;color:var(--muted)}
.lab-row .lc{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:3px;white-space:nowrap}
.lab-row .lc:hover{color:var(--text)}

/* faq */
.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;gap:20px;width:100%;text-align:left;background:none;border:none;color:var(--muted);padding:27px 0;font-size:20px;font-family:var(--fdisp);transition:color .3s}
.faq-q:hover,.faq-item.open .faq-q{color:var(--text)}
.faq-q .fno{font-family:var(--fbody);font-size:10.5px;letter-spacing:.12em;color:var(--faint);width:24px;flex:none}
.faq-q .qt{flex:1}
.faq-q .pm{color:var(--accent);font-size:20px;flex:none;transition:transform .35s var(--ease)}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a .inner{overflow:hidden}
.faq-a p{color:var(--muted);font-size:15px;line-height:1.85;padding:0 30px 30px 44px;max-width:none;margin:0}
.dropcap::first-letter{font-family:var(--fdisp);font-weight:500;font-size:3.5em;line-height:.74;float:left;padding:8px 14px 0 0;color:var(--text)}

/* standard / story */
.swm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80vw,780px);aspect-ratio:760/830;background:var(--crest-url) center/contain no-repeat;opacity:.06;pointer-events:none;z-index:0;user-select:none}
.about{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about .big{font-family:var(--fdisp);font-size:clamp(26px,3.2vw,37px);line-height:1.3}
.about p{color:var(--muted);font-size:15px;margin-bottom:17px;line-height:1.8}
.pillars{display:flex;gap:42px;margin-top:36px;flex-wrap:wrap}
.pillars div .label{display:block;margin-bottom:8px}
.pillars div span:last-child{font-family:var(--fdisp);font-size:22px}

/* drop signup */
.drop{text-align:center;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.drop h2{font-family:var(--fdisp);font-size:clamp(30px,4vw,44px);margin-bottom:16px;line-height:1.05}
.drop p{color:var(--muted);max-width:460px;margin:0 auto 34px;line-height:1.75}
.drop form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.drop input{flex:1;min-width:230px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:15px 17px;font-family:inherit;font-size:14px;transition:border-color .3s}
.drop input:focus{outline:none;border-color:var(--accent)}
.dropMsg{display:none;color:var(--accent);font-size:13px;margin-top:18px}

/* footer */
footer{border-top:1px solid var(--line);padding:72px 0 48px;text-align:center}
footer .fcrest{height:70px;margin:0 auto 26px;display:block;opacity:.85}
.foot-brand{font-family:var(--fdisp);font-size:28px;letter-spacing:.04em;margin-bottom:9px}
.foot-nav{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin:28px 0 38px}
.foot-nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.foot-nav a:hover{color:var(--text)}
.disclaimer{font-size:10.5px;line-height:1.85;color:var(--faint);max-width:740px;margin:0 auto;border-top:1px solid var(--line);padding-top:28px}
.copy{margin-top:24px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* drawers */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px);z-index:200;opacity:0;pointer-events:none;transition:.35s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:466px;max-width:92vw;background:var(--bg);border-left:1px solid var(--line-strong);z-index:300;transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-40px 0 80px -40px rgba(0,0,0,.9)}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 30px;border-bottom:1px solid var(--line)}
.drawer-close{background:none;border:none;color:var(--muted);font-size:20px}.drawer-close:hover{color:var(--text)}
.drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:30px;scrollbar-width:thin}
.drawer-foot{border-top:1px solid var(--line);padding:24px 30px}
.pd-img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#0d0d0f;margin-bottom:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);overflow:hidden}
.pd-img.empty{background-image:radial-gradient(circle at 50% 40%,rgba(255,255,255,.025),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.013) 0 11px,transparent 11px 22px)}
.pd-img .crestph{height:50%;opacity:.5}
.pd-el{margin-bottom:10px;color:var(--faint);letter-spacing:.26em}
.pd-name{font-family:var(--fdisp);font-size:36px;margin-bottom:11px;line-height:1.04}
.pd-cat{margin-bottom:22px}
.pd-desc{color:var(--text);margin-bottom:26px;font-style:italic;font-family:var(--fdisp);font-size:17px;line-height:1.5;opacity:.9}
.pd-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:12.5px;padding:12px 0}
.pd-row + .pd-row{border-top:1px dotted rgba(255,255,255,.13)}
.pd-row .k{color:var(--faint);letter-spacing:.16em;text-transform:uppercase;font-size:10px;white-space:nowrap}
.pd-row .v{color:var(--text);text-align:right}
.pd-row .v a{color:var(--accent);border-bottom:1px solid var(--line-strong)}
.res-item{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line)}
.res-item .ri-img{width:62px;height:62px;flex:none;background-size:cover;background-position:center;background-color:#0d0d0f;border:1px solid var(--line)}
.res-item .ri-name{font-family:var(--fdisp);font-size:19px}
.res-item .ri-cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.res-item .ri-x{margin-left:auto;background:none;border:none;color:var(--faint);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}.res-item .ri-x:hover{color:var(--text)}
.res-empty{color:var(--muted);font-size:14px;text-align:center;padding:44px 0;line-height:1.7}
.fulfil{display:flex;gap:10px;margin:24px 0 20px}
.fulfil button{flex:1;padding:13px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--muted);transition:.3s}
.fulfil button.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.field{margin-bottom:15px}
.field label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:13px 15px;font-family:inherit;font-size:14px;font-weight:300;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field select{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:13px 15px;font-family:inherit;font-size:14px;font-weight:300;transition:border-color .3s;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus{outline:none;border-color:var(--accent)}
.zone-note{font-size:12px;color:#caa07e;line-height:1.65;margin-top:10px}
.res-note{font-size:11.5px;color:var(--faint);margin-top:16px;line-height:1.7}
#resSent{display:none;text-align:center;padding:34px 0}
#resSent .ok{font-family:var(--fdisp);font-size:28px;margin-bottom:11px;color:var(--text)}#resSent p{color:var(--muted);font-size:14px;line-height:1.7}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ch{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.chrow{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.chrow .ck{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);width:96px;flex:none}
.chrow .cv{font-family:var(--fdisp);font-size:21px;color:var(--text)}
.chrow a.cv{border-bottom:1px solid var(--line-strong);transition:.3s}.chrow a.cv:hover{color:var(--accent);border-color:var(--accent)}
.chrow .cv.empty{font-family:var(--fbody);font-size:12.5px;color:var(--faint);font-style:normal;letter-spacing:.04em}
.cnote{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:26px;max-width:46ch}

/* ---- lab results page ---- */
.sec-sub{color:var(--muted);font-size:14px;line-height:1.8;max-width:600px;margin-bottom:40px}
.seal{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.seal span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:9px 15px}
.seal span b{color:var(--text);font-weight:500}
.cur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cur{position:relative;background:var(--surface);border:1px solid var(--line);padding:26px 24px 24px;display:flex;flex-direction:column;transition:border-color .4s,background .4s,transform .5s var(--ease),box-shadow .4s}
.cur:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-4px);box-shadow:0 24px 56px -30px rgba(0,0,0,.85)}
.cur .tag{position:absolute;top:18px;right:18px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px}
.cur .tag .d{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(236,235,232,.5);animation:tp 2.6s ease-out infinite}
@keyframes tp{0%{box-shadow:0 0 0 0 rgba(236,235,232,.4)}70%,100%{box-shadow:0 0 0 9px rgba(236,235,232,0)}}
.cur .bid{font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:16px}
.cur .bid:hover{color:var(--text)}
.cur h3{font-family:var(--fdisp);font-weight:500;font-size:25px;line-height:1.05;margin-bottom:4px}
.cur .cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.cur .read{border-top:1px solid var(--line);padding-top:16px;margin-top:auto;display:flex;flex-direction:column;gap:10px}
.cur .rr{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cur .rr .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cur .rr .v{font-family:var(--fdisp);font-size:19px;color:var(--text)}
.cur .coa{margin-top:18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:5px;align-self:flex-start;transition:.3s}
.cur .coa:hover{color:var(--accent);border-color:var(--accent)}
.yearbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.arow{display:grid;grid-template-columns:118px 1.5fr 1fr 1fr auto;gap:22px;align-items:center;padding:20px 0;border-top:1px solid var(--line);transition:padding-left .35s var(--ease)}
.arow:last-child{border-bottom:1px solid var(--line)}
.arow:hover{padding-left:8px}
.arow .bid{font-size:11.5px;letter-spacing:.14em;color:var(--accent)}
.arow .ap{font-family:var(--fdisp);font-size:20px;line-height:1.1}
.arow .ap small{display:block;font-family:var(--fbody);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.arow .ad{font-size:12.5px;color:var(--muted)}
.arow .ac{font-size:12.5px;color:var(--text)}
.arow .ac small{display:block;color:var(--faint);font-size:11px;margin-top:3px}
.arow .lc{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:3px;white-space:nowrap;justify-self:end;transition:.3s}
.arow .lc:hover{color:var(--accent);border-color:var(--accent)}
.arow .lc.na{color:var(--faint);border-color:transparent;pointer-events:none}
.yhead{font-family:var(--fdisp);font-size:15px;color:var(--faint);letter-spacing:.1em;padding:30px 0 6px}
.howto{background:var(--surface);border:1px solid var(--line);padding:clamp(28px,4vw,44px)}
.howto h2{font-family:var(--fdisp);font-weight:500;font-size:clamp(24px,3vw,32px);margin-bottom:24px}
.htgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.htgrid div .label{display:block;margin-bottom:10px;color:var(--accent)}
.htgrid div p{color:var(--muted);font-size:13.5px;line-height:1.75}
@media(max-width:760px){.cur-grid{grid-template-columns:1fr}.arow{grid-template-columns:90px 1fr auto;gap:14px}.arow .ad,.arow .ac{display:none}.htgrid{grid-template-columns:1fr;gap:24px}}

/* ---- price + add on cards ---- */
.card .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.card .price{font-family:var(--fdisp);font-size:23px;color:var(--text);line-height:1}
.card .price.tba{font-family:var(--fbody);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.card .cardacts{display:flex;align-items:center;gap:16px}
.card .open{margin:0}
.card .add{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--accent);border:1px solid var(--accent);padding:11px 17px;transition:background .3s,color .3s}
.card .add:hover{background:transparent;color:var(--accent)}

/* ---- add-to-cart toast ---- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(22px);z-index:800;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);padding:14px 16px 14px 22px;display:flex;align-items:center;gap:20px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ease);box-shadow:0 22px 54px -22px rgba(0,0,0,.85)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast a{color:var(--accent);border-bottom:1px solid var(--line-strong);padding-bottom:3px}

/* ---- cart page ---- */
.cart-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:54px;align-items:start}
.citem{display:flex;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.citem:first-child{border-top:1px solid var(--line)}
.citem .ci-img{width:78px;height:78px;flex:none;background-size:cover;background-position:center;background-color:#0d0d0f;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.citem .ci-img img{height:58%;opacity:.5}
.citem .ci-main{flex:1;min-width:0}
.citem .ci-name{font-family:var(--fdisp);font-size:22px;line-height:1.08}
.citem .ci-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.citem .ci-unit{font-size:12px;color:var(--muted);margin-top:7px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
.qty button{width:34px;height:34px;background:none;border:none;color:var(--muted);font-size:15px;transition:color .25s}.qty button:hover{color:var(--text)}
.qty span{min-width:30px;text-align:center;font-size:13px;color:var(--text)}
.citem .ci-line{font-family:var(--fdisp);font-size:22px;width:82px;text-align:right;flex:none}
.citem .ci-x{background:none;border:none;color:var(--faint);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;flex:none;margin-left:4px}.citem .ci-x:hover{color:var(--text)}
.csum{background:var(--surface);border:1px solid var(--line);padding:30px;position:sticky;top:96px}
.csum h2{font-family:var(--fdisp);font-weight:500;font-size:24px;margin-bottom:18px}
#cartSummary .row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:13px;color:var(--muted)}
#cartSummary .row .v{color:var(--text)}
#cartSummary .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:18px;color:var(--text);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
#cartSummary .row.total .v{font-family:var(--fdisp);font-size:30px;letter-spacing:0;text-transform:none}
.csum .fulfil{margin:18px 0 8px}
.pay{margin-top:20px;border-top:1px solid var(--line);padding-top:22px}
.pay .label{display:block;margin-bottom:12px;color:var(--accent)}
.pay .methods{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pay .pm-chip{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-strong);padding:9px 14px;background:rgba(255,255,255,.014)}
.pay .remit{font-size:12.5px;color:var(--muted);line-height:1.75}
.pay .remit b{color:var(--text)}
.pay .card-soon{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;border:1px dashed var(--line-strong);padding:13px 15px;color:var(--faint);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.pay .card-soon .tag{color:var(--muted)}
.cart-empty{text-align:center;padding:74px 0;color:var(--muted);line-height:1.8}
.cart-empty .ce-h{font-family:var(--fdisp);font-size:30px;color:var(--text);margin-bottom:14px}
@media(max-width:820px){.cart-grid{grid-template-columns:1fr;gap:34px}.csum{position:static}}
@media(max-width:560px){
  .citem{flex-wrap:wrap;row-gap:14px;align-items:flex-start}
  .citem .ci-img{width:64px;height:64px}
  .citem .ci-main{flex:1 1 calc(100% - 82px)}
  .citem .ci-name{font-size:19px}
  .citem .qty{order:3}
  .citem .ci-line{order:4;width:auto;margin-left:auto;align-self:center}
  .citem .ci-x{order:5;flex-basis:100%;text-align:right;margin:0}
}

/* ============================================================
   REFINEMENT LAYER — tier sections, de-boxed cards, size + pay UI
   ============================================================ */
/* tier-grouped selection */
.tiersec{margin-bottom:clamp(56px,7vw,84px)}
.tiersec:last-child{margin-bottom:0}
.tier-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line-strong);padding-bottom:18px;margin-bottom:36px}
.tier-name{font-family:var(--fdisp);font-weight:500;font-size:clamp(26px,3.6vw,42px);line-height:1}
.tier-sub{margin-top:11px}
.tier-price{font-family:var(--fdisp);font-size:19px;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.tiersec.is-black .tier-head{border-bottom-color:rgba(231,225,214,.28)}
@media(max-width:600px){.tier-head{flex-direction:column;align-items:flex-start;gap:10px}.tier-price{font-size:16px}}

/* de-boxed editorial cards (override the boxed defaults) */
.card{background:transparent;border:none;overflow:visible;box-shadow:none}
.card .ph{border:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.card.in:hover{transform:translateY(-5px);background:transparent;box-shadow:none}
.card.in:hover .ph{border-color:var(--line-strong)}
.card .body{padding:18px 0 2px}
.card h3{font-size:28px;margin-bottom:12px}
.card .meta{font-size:12.5px;margin-bottom:0}
.card .cardfoot{padding-top:15px;margin-top:15px;border-top:1px solid var(--line-gold)}
.card.bl{background:transparent;border:none;box-shadow:none}
.card.bl .ph{border-color:rgba(231,225,214,.24)}
.card.bl.in:hover{box-shadow:none}
.card.bl.in:hover .ph{border-color:rgba(231,225,214,.4)}
.card.bl::after{top:0;height:1px}

/* product drawer: size selector */
.pd-sizes{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.pd-size{flex:1;min-width:84px;display:flex;flex-direction:column;gap:6px;align-items:center;padding:14px 10px;background:transparent;border:1px solid var(--line-strong);color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.3s}
.pd-size b{font-family:var(--fdisp);font-size:18px;font-weight:500;letter-spacing:0;color:inherit}
.pd-size:hover{color:var(--text)}
.pd-size.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.pd-size-one{margin:0 0 24px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* payment funnel */
.pay-intro{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.paybtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.paybtn{flex:1;min-width:88px;padding:13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:1px solid var(--line-strong);color:var(--muted);transition:.3s}
.paybtn:hover{color:var(--text)}
.paybtn.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.pay-detail{border:1px solid var(--line);padding:17px;margin-bottom:14px;background:rgba(231,225,214,.02)}
.pay-handle{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ph-v{font-family:var(--fdisp);font-size:22px;color:var(--text)}
.ph-v.faint{font-family:var(--fbody);font-size:12.5px;color:var(--faint)}
.ph-copy{margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--muted);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 13px;transition:.3s}.ph-copy:hover{color:var(--text);border-color:var(--accent)}
.pay-note{font-size:12px;color:var(--muted);line-height:1.65;margin-top:11px}

/* category-grouped selection + buttery inline buy */
.catsec{margin-bottom:clamp(34px,4vw,48px);padding:0}.catsec:last-child{margin-bottom:0}
.cat-h{font-family:var(--fdisp);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:.97;margin-bottom:20px;border-bottom:1px solid var(--line-strong);padding-bottom:14px}
.tiersub{margin-bottom:clamp(40px,5vw,58px)}.tiersub:last-child{margin-bottom:0}
.tiersub .tier-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:30px}
.tiersub .tier-name{font-size:clamp(21px,2.6vw,30px)}
.tier-name .ly{font-family:var(--fdisp);font-style:italic;font-size:15px;letter-spacing:.01em;text-transform:lowercase;color:var(--faint);margin-left:14px;vertical-align:baseline;white-space:nowrap}
.tiersub.is-black .tier-head{border-bottom-color:rgba(231,225,214,.26)}
.szrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.szp{font-size:10.5px;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line-strong);background:transparent;padding:9px 12px;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.szp:hover{color:var(--text);border-color:var(--text)}
.szp.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.card .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:none!important;padding-top:0;margin-top:0}
.card .add.full{flex:1;background:var(--accent);color:var(--ink);border:1px solid var(--accent);padding:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:background .25s,transform .12s}
.card .add.full:hover{background:#fbf7f0}.card .add.full:active{transform:scale(.985)}
.card .open.mini{flex:none;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:3px}
.card .open.mini:hover{color:var(--text)}

/* clean gallery card */
.card{cursor:pointer;display:flex;flex-direction:column}
.card .body{padding:16px 0 2px;flex:1;display:flex;flex-direction:column}
.card .cardfoot{margin-top:auto}
.card .ph{aspect-ratio:1/1;position:relative;overflow:hidden}
.card .ph::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(231,225,214,.10) 48%,rgba(231,225,214,.16) 50%,rgba(231,225,214,.10) 52%,transparent 62%);background-size:260% 100%;background-position:170% 0;opacity:0;transition:opacity .3s}
.card:hover .ph::after{opacity:1;animation:cardsheen .85s var(--ease)}
@keyframes cardsheen{0%{background-position:170% 0}100%{background-position:-70% 0}}
.ptier{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.card .body{padding:16px 0 2px}
.card h3{font-size:23px;margin-bottom:0;line-height:1.12;min-height:2.24em;display:flex;align-items:flex-start}
.card .cardfoot{display:flex!important;align-items:baseline;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;border-top:none!important;padding-top:13px;margin-top:13px}
.card .price{font-family:var(--fdisp);font-size:20px;color:var(--text);white-space:nowrap}
.card .price.tba{font-family:var(--fbody);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.addcue{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);transition:letter-spacing .25s,opacity .25s;opacity:.85;white-space:nowrap}
.card:hover .addcue{letter-spacing:.26em;opacity:1}
.card .crestph{transition:transform .9s var(--ease),opacity .4s}
.card:hover .crestph{transform:scale(1.05)}
.addcue.muted{color:var(--faint)}

/* featured carousel (home) */
.carwrap{position:relative}
.carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 14px}
.carousel::-webkit-scrollbar{display:none}
.carousel>.card{flex:0 0 clamp(216px,38vw,264px);min-width:0;scroll-snap-align:start}
.cbtn{position:absolute;top:34%;transform:translateY(-50%);width:46px;height:46px;border:1px solid var(--line-strong);background:rgba(10,9,8,.72);backdrop-filter:blur(6px);color:var(--text);z-index:3;font-size:15px;transition:opacity .3s,border-color .3s,color .3s;display:flex;align-items:center;justify-content:center}
.cbtn:hover{border-color:var(--accent);color:var(--accent)}
.cbtn.prev{left:-14px}.cbtn.next{right:-14px}
@media(max-width:680px){.cbtn{display:none}.carousel>.card{flex:0 0 76%}}

@media(max-width:900px){.grid,.grid.two{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr;gap:48px}.contact-grid{grid-template-columns:1fr;gap:40px}.lab-row{grid-template-columns:96px 1fr auto;gap:14px}.lab-row .ld{display:none}}
@media(max-width:860px){
  .nav ul{display:none}.menu-toggle{display:block}
  .nav ul.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:22px 34px;gap:22px}
}
@media(max-width:600px){
  .grid,.grid.two{grid-template-columns:1fr}
  section{padding:84px 0}.hero{padding:84px 0 64px}.sec-head{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.card,.crestwrap,.hero .dpill,.hero .el,.hero h1,.hero .tag,.hero-actions,.hero .orn,
  #gate .gate-crest,#gate .mark,#gate .el,#gate p,#gate .gate-actions{opacity:1!important;transform:none!important;filter:none!important}
  .sheen,.hero .glow,.card.bl::after{display:none}
}

/* product drawer gallery */
.pd-thumbs{display:flex;gap:9px;margin:-16px 0 24px}
.pd-thumb{width:58px;height:44px;border:1px solid var(--line);background-size:cover;background-position:center;background-color:#0d0d0f;cursor:pointer;padding:0;opacity:.55;transition:opacity .3s,border-color .3s}
.pd-thumb:hover{opacity:.85}
.pd-thumb.active{opacity:1;border-color:var(--line-strong)}
.pd-thumb:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* ============================================================
   MOTION & DEPTH SYSTEM — sharp geometry, living light. 2026-07.
   Two easings + one timing scale; every effect reuses them.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.19,.8,.22,1);
  --ease-spring:cubic-bezier(.3,1.33,.36,1);
  --t-fast:.26s;--t-med:.52s;--t-slow:1.05s;
  --sh-1:0 1px 2px rgba(0,0,0,.45),0 8px 20px -10px rgba(0,0,0,.6);
  --sh-2:0 3px 8px rgba(0,0,0,.42),0 26px 52px -22px rgba(0,0,0,.74);
  --glow-warm:0 18px 44px -18px rgba(233,227,216,.28);
}

/* ---- buttons: magnetic ink-fill with a glint ---- */
.btn{transform:translate3d(var(--magx,0px),var(--magy,0px),0);
  transition:border-color var(--t-med),color var(--t-med),letter-spacing var(--t-med) var(--ease-out),transform .38s var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.btn::before{z-index:-1;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);transition:transform .9s var(--ease-out)}
.btn::after{content:'';display:block;position:absolute;inset:-1px;z-index:-2;background:var(--accent);transform:translateY(102%);transition:transform var(--t-med) var(--ease-out)}
.btn:hover{border-color:var(--accent);color:var(--ink);letter-spacing:.33em;box-shadow:var(--glow-warm)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translate3d(var(--magx,0px),var(--magy,0px),0) scale(.972);box-shadow:0 6px 18px -12px rgba(233,227,216,.2);transition-duration:.12s}
.btn.solid{box-shadow:0 10px 28px -16px rgba(233,227,216,.4)}
.btn.solid::after{transform:none;transition:background var(--t-med)}
.btn.solid:hover{border-color:#fbf7f0;box-shadow:0 16px 42px -16px rgba(233,227,216,.55)}
.btn.solid:hover::after{background:#fbf7f0}
.btn.ghost::before,.btn.ghost::after{display:none}
.btn.ghost{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 1px;background-position:50% calc(100% - 10px);transition:color var(--t-med),letter-spacing var(--t-med) var(--ease-out),transform .38s var(--ease-out),background-size .5s var(--ease-out)}
.btn.ghost:hover{color:var(--text);border-color:transparent;box-shadow:none;background-size:52% 1px}

/* ---- inputs: sharp, inset depth, glowing focus ---- */
.field input,.field textarea,.field select{border-radius:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.012));box-shadow:inset 0 1px 3px rgba(0,0,0,.5);transition:border-color .3s,box-shadow .5s var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 3px rgba(233,227,216,.09),0 0 26px -6px rgba(233,227,216,.2)}
.drop input{transition:border-color .3s,box-shadow .5s var(--ease-out)}
.drop input:focus{box-shadow:0 0 0 3px rgba(233,227,216,.09),0 0 26px -6px rgba(233,227,216,.2)}

/* ---- chips + selectors: sharp again, tactile press ---- */
.chip{border-radius:0;transition:transform var(--t-fast) var(--ease-out),border-color .3s,color .3s,background .3s,box-shadow .3s}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.96)}
.chip.active,.paybtn.active,.pd-size.active,.fulfil button.active,.szp.active{box-shadow:0 8px 24px -12px rgba(233,227,216,.4)}
.paybtn,.pd-size,.fulfil button,.szp{transition:background .3s,color .3s,border-color .3s,transform var(--t-fast) var(--ease-out),box-shadow .3s}
.paybtn:active,.pd-size:active,.fulfil button:active,.szp:active{transform:scale(.96)}
.dpill{box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.05)}
.reserve-btn .count{box-shadow:0 2px 10px -3px rgba(233,227,216,.55)}

/* ---- product tiles: focus-pull entrance, cursor light, interior zoom ---- */
.card{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity .7s ease,filter .7s ease,transform .7s var(--ease-out),border-color .4s,background .4s,box-shadow var(--t-med) var(--ease-out)}
.card.in{opacity:1;transform:none;filter:none}
.card.in:hover{transform:translateY(-6px)}
.card .ph{--mx:50%;--my:50%;isolation:isolate;transition:border-color .4s,box-shadow var(--t-med) var(--ease-out)}
.card .ph .phz{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.001);transition:transform 1.15s var(--ease-out)}
.card.in:hover .ph .phz{transform:scale(1.055)}
.card .ph::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(340px circle at var(--mx) var(--my),rgba(233,227,216,.16),transparent 62%);transition:opacity .5s ease}
.card.in:hover .ph::before{opacity:1}
.card.in:hover .ph{box-shadow:0 26px 60px -26px rgba(0,0,0,.92),var(--glow-warm)}
.card .crestph{position:relative;z-index:0}
.card .stamp{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.7)}

/* ---- carousel arrows ---- */
.cbtn{transition:opacity .3s,border-color .3s,color .3s,transform .3s var(--ease-out),box-shadow .3s}
.cbtn:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 12px 30px -14px rgba(0,0,0,.8)}
.cbtn:active{transform:translateY(-50%) scale(.94)}

/* ---- index rows: sharp, floating ---- */
.idxrow{transition:padding-left .45s var(--ease-out),background .45s,box-shadow .5s var(--ease-out)}
.idxrow:hover{box-shadow:0 24px 56px -34px rgba(0,0,0,.85)}

/* ---- header: condenses on scroll ---- */
.nav{transition:height .5s var(--ease-out)}
header.scrolled .nav{height:58px}
header.scrolled{box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}

/* ---- hero: ambient aura + slow crest float ---- */
.hero .glow{filter:blur(8px);opacity:.92}
body.entered .hero .crestwrap{animation:hUp 1.2s .04s var(--ease) both,crestFloat 12s 4s ease-in-out infinite}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---- gate: grain flares then settles as it clears ---- */
body.entering .grain{animation:grainFlare 1.25s ease-out}
@keyframes grainFlare{0%{opacity:.028}22%{opacity:.15}100%{opacity:.028}}

/* ---- subpage hero entrance ---- */
body.entered .phero .el{animation:fadeUp .85s .05s var(--ease-out) both}
body.entered .phero h1{animation:fadeUp .9s .16s var(--ease-out) both}
body.entered .phero p{animation:fadeUp .9s .28s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- drawer: spring slide, blur ramp, content stagger ---- */
.scrim{backdrop-filter:blur(0px);transition:opacity .45s ease,backdrop-filter .55s ease,background .45s}
.scrim.show{background:rgba(0,0,0,.6);backdrop-filter:blur(7px)}
.drawer{transition:transform .62s var(--ease-spring);box-shadow:-56px 0 130px -50px rgba(0,0,0,.95),inset 1px 0 0 rgba(255,255,255,.05)}
.pd-img{box-shadow:var(--sh-1)}
.drawer .drawer-body>*,.drawer .drawer-foot>*{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.drawer.show .drawer-body>*,.drawer.show .drawer-foot>*{opacity:1;transform:none;transition:opacity .55s ease,transform .6s var(--ease-out)}
.drawer.show .drawer-body>*:nth-child(1){transition-delay:.1s}
.drawer.show .drawer-body>*:nth-child(2){transition-delay:.15s}
.drawer.show .drawer-body>*:nth-child(3){transition-delay:.19s}
.drawer.show .drawer-body>*:nth-child(4){transition-delay:.23s}
.drawer.show .drawer-body>*:nth-child(5){transition-delay:.27s}
.drawer.show .drawer-body>*:nth-child(6){transition-delay:.3s}
.drawer.show .drawer-body>*:nth-child(7){transition-delay:.33s}
.drawer.show .drawer-body>*:nth-child(8){transition-delay:.36s}
.drawer.show .drawer-body>*:nth-child(n+9){transition-delay:.39s}
.drawer.show .drawer-foot>*{transition-delay:.42s}

/* ---- toast: spring in ---- */
.toast{transition:opacity .35s,transform .5s var(--ease-spring)}

/* ---- page-to-page cross-fade (no-op where unsupported) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtFade .26s ease both}
::view-transition-new(root){animation:vtIn .4s ease both}
@keyframes vtFade{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* ---- crest watermark parallax (JS drives --par) ---- */
.swm{transform:translate(-50%,calc(-50% + var(--par,0px)))}

/* ---- reduced motion: extend the kill switch ---- */
@media(prefers-reduced-motion:reduce){
  .drawer .drawer-body>*,.drawer .drawer-foot>*{opacity:1!important;transform:none!important}
  .phero .el,.phero h1,.phero p{animation:none!important;opacity:1!important;transform:none!important}
  .card .ph::before{display:none}
  .card .ph .phz{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  header.scrolled .nav{height:72px}
  .swm{transform:translate(-50%,-50%)}
}

/* ============================================================
   CARE LAYER — obsessive ergonomics. 2026-07-21.
   Bigger touch targets, inline field errors, undo toasts,
   keyboard focus, held-items bar. No new colors, no radius.
   ============================================================ */
.qty button{width:42px;height:42px}
.citem .ci-x{padding:12px 8px}
.drawer-close{padding:10px 14px;margin:-10px -14px;transition:color .25s,transform .35s var(--ease-out)}
.drawer-close:hover{transform:rotate(90deg)}
.memx{width:26px;height:26px}
.field.err input,.field.err textarea,.field.err select{border-color:#cf9b6a;box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 3px rgba(207,155,106,.12)}
.field.err label{color:#cf9b6a}
.card[role="button"]:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.toast .tact{background:none;border:1px solid var(--line-strong);color:var(--accent);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 15px;transition:border-color .3s,color .3s}
.toast .tact:hover{border-color:var(--accent)}
#cartbar{position:fixed;left:14px;right:14px;bottom:14px;z-index:120;display:none;align-items:center;gap:14px;background:rgba(13,12,10,.93);backdrop-filter:blur(14px);border:1px solid var(--line-strong);padding:15px 20px calc(15px + env(safe-area-inset-bottom,0px));box-shadow:0 24px 60px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);transform:translateY(90px);opacity:0;transition:transform .6s var(--ease-spring),opacity .4s}
#cartbar.show{transform:none;opacity:1}
#cartbar .cb-n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#cartbar .cb-s{font-size:21px;color:var(--text);margin-left:auto;line-height:1}
#cartbar .cb-go{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
@media(max-width:680px){
  #cartbar{display:flex}
  body.has-cartbar{padding-bottom:88px}
  body.has-cartbar .toast{bottom:104px}
}
@media(prefers-reduced-motion:reduce){#cartbar{transition:opacity .2s}}

/* ============================================================
   BRAND JEWEL ACCENTS — packaging palette (matte black · ivory
   #E7DFC8 · gold hairline · burgundy #6B373D). Burgundy stays a
   jewel: scarcity signals + link hover only.
   ============================================================ */
a:hover{color:var(--burgundy-lift)}
.nav ul a:hover,.nav ul a.active{color:var(--text)}
.btn:hover,.btn.solid:hover{color:var(--ink)}
.btn:not(.solid):hover{color:var(--accent)}
.orn span{background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.pd-why{border-left-color:var(--burgundy-lift)}
.memba a{color:var(--burgundy-lift)}

/* ============================================================
   CRAFT PASS — typographic finesse + readability. 2026-08-04.
   No new colors, no layout changes. Only refinement.
   ============================================================ */

/* Headlines break on meaning, not on width. Body text avoids orphans. */
h1,h2,h3,.pd-name,.idxrow .it,.hero .tag,.foot-brand{text-wrap:balance}
p,.card .meta,.idxrow .ib,.phero p,.sec-sub,.disclaimer{text-wrap:pretty}

/* Display serif: proportional oldstyle figures read as typeset, not tabular.
   Prices and quantities stay lining + tabular so columns align. */
.serif,h1,h2,.pd-name,.idxrow .it{font-variant-numeric:oldstyle-nums proportional-nums}
.card .price,.chrow .cv,.cur .rr .v,.citem .ci-name,#cartbar .cb-s,.dropcd .cd b,.lab-row .lp{font-variant-numeric:lining-nums tabular-nums}

/* Readability: secondary copy was a touch tight for long-form reading. */
.card .ptier{font-size:11px;letter-spacing:.16em}
.pd-desc{font-size:14.5px;line-height:1.8}
.idxrow .ib{font-size:14px;line-height:1.72}
.phero p{font-size:16px}
.sec-sub{font-size:14.5px}

/* Small-caps labels: optical letter-spacing shouldn't apply to the last letter,
   which otherwise pushes the label off its own right edge. */
/* NOTE: an earlier "optical letter-spacing" rule set padding-right on .chip,
   .status, .label and friends. Because it came after their padding shorthand it
   silently destroyed their right padding, so text sat flush against the border.
   Trailing letter-spacing is not worth that risk — leave padding alone. */

/* Keyboard focus: visible, on-brand, and never a browser-default blue ring. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:1px solid var(--gold-soft);outline-offset:3px;border-radius:1px}
.btn:focus-visible{outline-offset:4px}

/* Selection + tap feedback in brand ink rather than system blue. */
::selection{background:var(--burgundy);color:var(--paper)}
*{-webkit-tap-highlight-color:rgba(200,177,132,.16)}

/* ============================================================
   LEGIBILITY PASS — transparency was costing readability.
   ============================================================ */
/* Tell the browser this is a dark UI, so native dropdown lists, form controls
   and scrollbars render dark instead of a bright system panel. */
:root{color-scheme:dark}

/* The sticky header sat at 55% opacity, so nav links competed with whatever
   content scrolled behind them. Blur alone can't fix contrast — and it silently
   does nothing on browsers that don't support backdrop-filter. */
header{background:rgba(9,8,7,.82)}
header.scrolled{background:rgba(9,8,7,.95)}
@supports not (backdrop-filter:blur(2px)){
  header{background:rgba(9,8,7,.97)}
}

/* Native <select> popup: style the options explicitly, or some platforms draw
   dark-on-dark and the list becomes unreadable. */
.field select option,select option{background:#141210;color:var(--text)}
.field select{background-color:var(--surface)}

/* Scrollbar: thin, dark, unobtrusive on the matte ground. */
html{scrollbar-color:var(--line-strong) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#221f1b;border:2px solid var(--bg);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:#2e2a24}

/* Hairline rules render crisper as gradients that fade at the ends. */
.sec-head{border-bottom:none;position:relative}
.sec-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold-soft),var(--line-gold) 55%,transparent)}

/* Cards: lift the whole plate on hover instead of only tinting the border. */
.card{transition:border-color .4s,background .4s,transform .55s var(--ease-out),box-shadow .55s var(--ease-out),opacity .7s,filter .7s}
.card:hover{transform:translateY(-3px);box-shadow:0 30px 64px -34px rgba(0,0,0,.9)}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}}

/* Long strain names shouldn't collide with the price. */
.card .cardfoot{flex-wrap:wrap;row-gap:12px}

/* Cart: the total is the hero number of that page. */
.citem .ci-name{letter-spacing:.005em}

/* ============================================================
   NARROW SCREENS — 414px and under. The existing breakpoints
   stop at 480px, but .wrap's 34px gutters alone eat 21% of a
   320px viewport. Reclaim space and let every row wrap.
   ============================================================ */
@media(max-width:414px){
  :root{--gut:20px}
  .btn{padding:16px 26px;font-size:9.5px;letter-spacing:.18em}
  .hero-actions,.gate-actions{gap:10px}
  .hero-actions .btn,.gate-actions .btn{flex:1 1 auto;min-width:0}
  .drop form{gap:8px}
  .drop input{min-width:0;flex:1 1 100%}
  .drop form .btn{width:100%}
  .sec-head{gap:14px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:34px}
  .sec-head .label{flex-basis:100%}
  .lab-row{grid-template-columns:1fr auto;gap:6px 12px;padding:18px 0}
  .lab-row .ld{display:none}
  .lab-row .lp{font-size:18px}
  .foot-nav{gap:16px 20px}
  .pd-row{gap:14px}
  .pd-row .v{min-width:0;overflow-wrap:anywhere}
  .drawer-head,.drawer-body{padding-left:20px;padding-right:20px}
  .drawer-foot{padding-left:20px;padding-right:20px}
  #cartbar{left:10px;right:10px;gap:10px;padding:13px 15px calc(13px + env(safe-area-inset-bottom,0px))}
  #cartbar .cb-n{font-size:9px;letter-spacing:.14em}
  #cartbar .cb-s{font-size:18px}
  #cartbar .cb-go{font-size:9px;letter-spacing:.14em}
  .seal{gap:8px}
  .seal span{padding:8px 11px;font-size:9px}
  .handnote{padding:18px 18px}
  .handnote p{font-size:17px}
}
@media(max-width:360px){
  :root{--gut:16px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  #cartbar{flex-wrap:wrap;row-gap:6px}
  #cartbar .cb-s{margin-left:auto}
  #cartbar .cb-go{flex-basis:100%;text-align:center;padding-top:2px}
  .card h3{font-size:21px}
}
/* the placeholder crest could exceed its frame by a hair at some widths */
.card .ph .crestph,.pd-img .crestph{max-width:82%;object-fit:contain}
.chip:hover{border-color:var(--gold-soft)}
.btn:not(.solid):hover{border-color:var(--gold-soft);color:var(--accent)}
.card:hover .ph{border-color:var(--gold-soft)}
.sec-head .no{-webkit-text-stroke-color:var(--gold-soft)}
.reserve-btn:hover{color:var(--gold)}
.crestwrap .sheen{display:none}
#gateImg{height:118px}

/* ============================================================
   AURA / MOBILE LAYER — the flow, remade for thumbs. 2026-07-21.
   Full-screen nav veil · bottom-sheet product drawer ·
   pinned checkout · edge-swipe filters. Same palette, no noise.
   ============================================================ */
body.navlock{overflow:hidden}
body.navlock #cartbar{opacity:0;pointer-events:none}
@media(max-width:860px){
  .nav .brand,.nav-right{position:relative;z-index:2}
  /* Full-screen veil. Top padding clears the 72px header so the first link never
     tucks under the brand. Auto margins on the first and last item centre the
     column when there is room and let it scroll when there isn't — fixed padding
     alone clipped the top on short windows. */
  .nav ul.open{position:fixed;inset:0;height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;gap:0;background:linear-gradient(180deg,#0b0a09,#070605);backdrop-filter:blur(20px);padding:calc(72px + 30px) var(--gut) calc(44px + env(safe-area-inset-bottom,0px));border-bottom:none;z-index:1;overflow-y:auto;overscroll-behavior:contain}
  .nav ul.open li:first-child{margin-top:auto}
  .nav ul.open li:last-child{margin-bottom:auto}
  .nav ul.open::before{content:'';position:absolute;inset:0;background:var(--crest-url) center/72vw no-repeat;opacity:.05;pointer-events:none}
  .nav ul.open li{border-bottom:1px solid var(--line);animation:navRise .6s var(--ease-out) both}
  .nav ul.open li:nth-child(1){animation-delay:.05s}
  .nav ul.open li:nth-child(2){animation-delay:.11s}
  .nav ul.open li:nth-child(3){animation-delay:.17s}
  .nav ul.open li:nth-child(4){animation-delay:.23s}
  .nav ul.open li:nth-child(5){animation-delay:.29s}
  .nav ul.open a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;font-family:var(--fdisp);font-size:clamp(25px,6.4vw,33px);letter-spacing:.01em;text-transform:none;color:var(--text);padding:17px 2px}
  .nav ul.open a::after{content:'\2192';position:static;left:auto;right:auto;bottom:auto;width:auto;height:auto;background:none;font-size:17px;color:var(--faint)}
  .nav ul.open a.active{color:var(--accent)}
  .nav ul.open a.active::after{color:var(--accent)}
  .filters{margin-bottom:24px}
  .chip{flex:none}
}
/* Edge-to-edge swipeable chip strip. Runs wherever the row can't fit on one
   line (7 chips need ~770px), so filters never orphan two items onto a second
   row. Above this they fit naturally. */
@media(max-width:860px){
  .filters{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* room for the active chip's glow and the hover lift, or they get sliced */
    margin:0 calc(var(--gut) * -1) 18px;padding:10px var(--gut) 16px;
    scroll-snap-type:x proximity;scroll-padding-left:var(--gut);
    /* fade at both ends so chips read as scrollable instead of chopped off */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 26px),transparent 100%);
  }
  .filters::-webkit-scrollbar{display:none}
  .chip{scroll-snap-align:start}
  .chip.avail{margin-left:6px}
}
@keyframes navRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Short windows (landscape phones, small laptops): tighten so all five links fit
   without the column needing to scroll. */
@media(max-width:860px) and (max-height:640px){
  .nav ul.open{padding-top:calc(72px + 16px);padding-bottom:24px}
  .nav ul.open a{font-size:21px;padding:12px 2px}
  .nav ul.open::before{background-size:52vw}
}
@media(max-width:680px){
  .drawer{top:auto;bottom:0;left:0;right:0;width:100%;max-width:100%;height:auto;min-height:46vh;max-height:86vh;max-height:88dvh;border-left:none;border-top:1px solid var(--line-strong);transform:translateY(103%);box-shadow:0 -50px 110px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
  .drawer.show{transform:translateY(0)}
  .drawer::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:100px;background:var(--line-strong);z-index:2}
  .drawer-head{padding:22px 26px 14px;touch-action:none}
  .drawer-body{padding:22px 26px}
  .drawer-foot{padding:16px 26px calc(16px + env(safe-area-inset-bottom,0px))}
  .pd-img{aspect-ratio:16/10}
}
#cartbar.checkout .cb-s{margin-left:0}
#cartbar.checkout .cb-n{letter-spacing:.14em}
#cartbar.checkout .cb-go{margin-left:auto;color:var(--ink);background:var(--accent);padding:12px 15px}