/* Jambo Pits — production stylesheet for Bricks (generated by build-bricks-kit.py from the LOCKED demo v2).
   Loaded site-wide by the jambo-bricks-child child theme. Do not edit here: edit demo-v2/_src or the generator, then rebuild.
   Type: All Rye, baked in (Richard 2026-09-26); the roles are --disp / --name / --body / --mono. Keyframes are jp-prefixed: burn, ember, fade, fill, flicker, needle, needle-bbq, nmGlow, nmGlowOn, puff, puff1, rise, sheen, spitA, spitB, travel. */
@font-face{font-family:'Rye';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Rye-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/Inter-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-500.woff2') format('woff2')}
/* ═══════════════════════════════════════════════════════════════════
   JAMBO PITS — "The Showroom" mockup v1 (2026-09-25)
   Same layout family as the Trophy Room demo; new finish.
   Smoke + embers are pure CSS (Bricks-portable). JS only for:
   type toggle, count-up, bay spotlight, header shrink, gauge.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --stage:#0E0B09; --ground:#1A1512; --structure:#241C17;
  --action:#C4262E; --action-hi:#D83A42; --action-inv:#E8666B;
  --brass:#B8862B; --brass-l:#D9A94A; --brass-d:#8A6420;
  --cream:#F7EFE1; --cream-2:#EFE3D0; --rule:#D9C9B2;
  --muted:#6B5F52; --muted-dk:#A79683; --smoke:236,228,216;

  --disp:'Rye',Georgia,serif; --disp-wt:400; --disp-track:0; --disp-case:none;
  --accent:'Rye',Georgia,serif;
  --name:'Rye',Georgia,serif; /* nameplates: model names + spec numerals */
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shell:1240px; --gutter:clamp(1rem,4vw,2.5rem);
}
html .hero h1 em{font-style:normal}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:100%}
body{margin:0;background:var(--stage);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--disp);font-weight:var(--disp-wt);letter-spacing:var(--disp-track);line-height:1.02;margin:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-l);margin:0 0 1rem;display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.eyebrow--dk{color:var(--brass-d)}

/* film grain over dark grounds — a finish, not a flat hex */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.07;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='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.grain > *{position:relative;z-index:2}

/* coachline — thin double brass pinstripe */
.coachline{height:5px;border-block:1px solid var(--brass);opacity:.55;max-width:var(--shell);margin:0 auto}
.coachline--c{width:120px;margin:1.4rem 0}



/* ── SMOKE (pure CSS) ─────────────────────────────────────────────
   Each <i> is a soft puff that rises, drifts, swells and fades.
   Place a .smoke container at the mouth of a stack. */
.smoke{position:absolute;width:0;height:0;pointer-events:none;z-index:3}
.smoke i{position:absolute;left:calc(var(--s,110px) / -2);bottom:0;width:var(--s,110px);height:var(--s,110px);border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(var(--smoke),.5) 0%,rgba(var(--smoke),.2) 38%,rgba(var(--smoke),0) 68%);
  filter:blur(var(--b,12px));opacity:0;will-change:transform,opacity;
  animation:jp-puff var(--d,10s) cubic-bezier(.35,.1,.55,1) infinite;animation-delay:var(--t,0s)}
@keyframes jp-puff{
  0%  {transform:translate(0,0) scale(.3);opacity:0}
  5%  {opacity:var(--o,.55)}
  35% {transform:translate(var(--x1,10px),calc(var(--rise,420px) * -.35)) scale(.9)}
  70% {transform:translate(var(--x2,-20px),calc(var(--rise,420px) * -.7)) scale(1.8);opacity:calc(var(--o,.55) * .55)}
  100%{transform:translate(var(--x3,40px),calc(var(--rise,420px) * -1)) scale(2.8);opacity:0}}
/* small wisp from the logo's own smokestack */
.smoke--hero i{--o:.34;--d:10.8s;--rise:380px;--b:14px}
.smoke--logo i{--s:22px;--b:4px;--rise:70px;--o:.45;--d:5.5s}
/* embers */
.embers{position:absolute;pointer-events:none;z-index:3;width:0;height:0}
.embers b{position:absolute;left:0;bottom:0;width:3px;height:3px;border-radius:50%;background:#FFC27A;
  box-shadow:0 0 6px 2px rgba(255,120,40,.75);opacity:0;animation:jp-ember var(--d,6s) linear infinite;animation-delay:var(--t,0s)}
@keyframes jp-ember{
  0%{transform:translate(0,0);opacity:0}
  8%{opacity:1}
  30%{transform:translate(var(--x1,8px),calc(var(--rise,320px) * -.28))}
  50%{opacity:.35}
  60%{transform:translate(var(--x2,-10px),calc(var(--rise,320px) * -.56));opacity:.9}
  100%{transform:translate(var(--x3,20px),calc(var(--rise,320px) * -1));opacity:0}}
@media (prefers-reduced-motion:reduce){.smoke,.embers{display:none}}

/* ── HEADER ─────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(14,11,9,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184,134,43,.35);transition:padding .35s}
.hdr .shell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:14px;transition:padding .35s}
.brandwrap{position:relative;display:block;flex:none}
.brand{height:84px;width:auto;transition:height .35s}
.hdr.is-tight .brand{height:54px}
.hdr.is-tight .shell{padding-block:8px}
.brandwrap .smoke{left:78.5%;top:3%}
.nav{display:flex;gap:2rem;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.nav a{text-decoration:none;color:#E6DACA;padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass-l);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:hover::after{transform:scaleX(1)}
.navtoggle{display:none}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;background:var(--action);color:var(--cream);font-family:var(--mono);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:14px 22px;min-height:48px;border-radius:2px;text-decoration:none;border:0;cursor:pointer;transition:background .3s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .7s}
.btn:hover{background:#A31D24}
.btn:hover::after{left:130%}
.btn--sm{padding:11px 18px;min-height:44px;font-size:12.5px}
.btn--block{display:flex;justify-content:center;width:100%}
.btn--ghost{background:rgba(14,11,9,.25);color:var(--brass-l);box-shadow:inset 0 0 0 1px var(--brass)}
.btn--ghost:hover{background:rgba(184,134,43,.12)}
.btn--ghost::after{background:linear-gradient(90deg,transparent,rgba(217,169,74,.22),transparent)}
.link{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--brass-l);display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.link span{transition:transform .3s}
.link:hover span{transform:translateX(5px)}

/* ── HERO ───────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;min-height:min(88vh,820px);display:grid;align-items:center;
  background:linear-gradient(180deg,#15110E 0%,var(--stage) 100%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:5rem 6rem}
.hero h1{font-size:clamp(2.9rem,6.4vw,5.6rem)}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block;animation:jp-rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .l:nth-child(2) span{animation-delay:.14s}
.hero h1 .l:nth-child(3) span{animation-delay:.28s}
.hero h1 em{font-style:italic;color:var(--brass-l)}
html .craft h2 em{font-style:normal}
@keyframes jp-rise{from{transform:translateY(105%);filter:blur(8px);opacity:0}to{transform:none;filter:none;opacity:1}}
.hero p.sub{color:#D8CBB8;max-width:40ch;font-size:1.08rem;margin:1.6rem 0 2.2rem;animation:jp-fade 1.2s .5s both}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;animation:jp-fade 1.2s .7s both}
@keyframes jp-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* framed card — whole photos on a dark mat, never cropped */
.frame{position:relative;padding:12px;border:1px solid rgba(184,134,43,.75);animation:jp-fade 1.4s .2s both}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(184,134,43,.35);pointer-events:none}
.frame__mat{position:relative;aspect-ratio:4/3;background:#0A0807;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transform:translateX(100%);
  transition:transform 1.25s cubic-bezier(.65,0,.35,1),opacity .9s ease;pointer-events:none}
.slide.is-on{opacity:1;transform:none}
.slide.is-off{opacity:.2;transform:translateX(-100%)}
.slide img{width:100%;height:100%;object-fit:contain}
.frame__plate{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:14px 4px 2px}
.frame__plate .nm{font-family:var(--name);font-weight:400;font-size:1.8rem;line-height:1}
.frame__plate .nm span,.frame__plate .ds span{display:inline-block;transition:opacity .45s,transform .45s}
.frame__plate.swap .nm span,.frame__plate.swap .ds span{opacity:0;transform:translateY(6px)}
.frame__plate .ds{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk);margin-top:.35rem}
.bars{display:flex;gap:2px}
.bars:not([data-ind]) button{background:none;border:0;padding:0 3px;min-width:44px;min-height:44px;cursor:pointer;display:flex;align-items:center}
.bars:not([data-ind]) button i{display:block;width:100%;height:2px;background:rgba(184,134,43,.3);position:relative;overflow:hidden}
.bars:not([data-ind]) button i::after{content:"";position:absolute;inset:0;background:var(--brass-l);transform:scaleX(0);transform-origin:left}
.bars:not([data-ind]) button.is-on i::after{animation:jp-fill var(--dwell,7s) linear forwards}
.bars:not([data-ind]) button.is-done i::after{transform:scaleX(1)}
@keyframes jp-fill{to{transform:scaleX(1)}}

/* ── EMBER + PUFF BURSTS (one-shot, spawned on slide change / card hover) ── */
#fx{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:40}
#fx b{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFC27A;box-shadow:0 0 6px 2px rgba(255,120,40,.75);
  opacity:0;animation:jp-ember var(--d,2.6s) cubic-bezier(.2,.6,.4,1) forwards;animation-delay:var(--t,0s)}
#fx b.sm{width:2px;height:2px;box-shadow:0 0 4px 1px rgba(255,120,40,.7)}
#fx i{position:absolute;width:var(--s,90px);height:var(--s,90px);margin:calc(var(--s,90px) / -2) 0 0 calc(var(--s,90px) / -2);border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(var(--smoke),.38) 0%,rgba(var(--smoke),.14) 40%,rgba(var(--smoke),0) 68%);
  filter:blur(12px);opacity:0;animation:jp-puff1 var(--d,3.2s) cubic-bezier(.3,.2,.5,1) forwards;animation-delay:var(--t,0s)}
@keyframes jp-puff1{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:var(--o,.6)}
  100%{transform:translate(var(--x3,20px),calc(var(--rise,160px) * -1)) scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.slide{transition:opacity .01s}.slide.is-off{transform:none;opacity:0}#fx{display:none}.bars:not([data-ind]) button.is-on i::after{animation:none;transform:scaleX(1)}}

/* ── INSTRUMENT CLUSTER ─────────────────────────────────────────── */
.cluster{background:var(--ground);border-block:1px solid rgba(184,134,43,.3)}
.cluster .shell{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center}
.gauge-n{padding:2.2rem 1.5rem;border-right:1px solid rgba(184,134,43,.22)}
.gauge-n:first-child{padding-left:0}
.gauge-n b{display:block;font-family:var(--name);font-weight:400;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:var(--cream);font-variant-numeric:lining-nums}
.gauge-n b small.x{font-family:var(--body);font-weight:400;margin:0 .12em;font-size:.5em}
.gauge-n b small{font-size:.45em;color:var(--brass-l);margin-left:.15em}
.gauge-n > span{display:block;margin-top:.55rem;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk)}
.dial{padding:1rem 0 1rem 2rem;display:flex;align-items:center;gap:1rem}
.dial svg.g{width:104px;height:104px}
/* same drawing as the hero gauges; one sweep left→right on reveal, overshoot, settle in the red */
.dial .g__unit{font-family:var(--mono);font-size:4.6px;letter-spacing:.06em;fill:var(--muted-dk)}
.dial .g__face{stroke-width:.9}
.dial.on .g__face{stroke:var(--brass-l)}
.dial .g__zy,.dial .g__zo,.dial .g__zr{fill:none;stroke-width:2.4}
.dial .g__zy{stroke:#E3B53C}   /* 125–200°F warming */
.dial .g__zo{stroke:#E8742A}   /* 200–300°F ideal BBQ — where the needle settles */
.dial .g__zr{stroke:var(--action)}  /* 300–550°F too hot to smoke */
/* sweep up into the red, fall back, settle at 250°F — mid-orange, classic low-and-slow */
.dial.on .g__ndl{animation:jp-needle-bbq 3.4s cubic-bezier(.35,.1,.35,1) .2s forwards}
@keyframes jp-needle-bbq{0%{transform:rotate(-120deg)}45%{transform:rotate(100deg)}72%{transform:rotate(-36deg)}86%{transform:rotate(-19deg)}100%{transform:rotate(-24deg)}}
.dial p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk);max-width:13ch;line-height:1.5}

/* ── THE LINE (showroom bays) ───────────────────────────────────── */
.sect{padding:clamp(4.5rem,9vw,8rem) 0}
.sect__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.5rem}
.sect__head h2{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.sect__head p{max-width:40ch;color:#CDBFAC;margin:0}
.line{background:linear-gradient(var(--stage),var(--ground))}
.bays{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(184,134,43,.22);border:1px solid rgba(184,134,43,.22)}
.bay{--mx:50%;--my:35%;position:relative;background:var(--stage);padding:2rem 1.6rem 1.8rem;display:flex;flex-direction:column;min-height:520px;overflow:hidden;text-decoration:none;color:inherit}
.bay::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 260px at var(--mx) var(--my),rgba(255,236,210,.09),transparent 70%);transition:opacity .4s;pointer-events:none}
.bay__rank{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-l)}
.bay__photo{position:relative;aspect-ratio:4/3;margin:1.3rem 0 1.4rem;background:#0A0807;border:1px solid rgba(184,134,43,.35);padding:5px}
.bay__photo img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bay:hover .bay__photo img{transform:scale(1.025)}
.bay h3{font-family:var(--name);font-weight:400;font-size:2.5rem;letter-spacing:.01em}
.bay__line{color:#CDBFAC;font-size:.95rem;margin:.5rem 0 1.2rem;min-height:3.1em}
.bay .dl{margin:0 0 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.9rem}
.bay .dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dk);padding-top:.15rem}
.bay .dd{margin:0;color:var(--cream)}
.bay__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(184,134,43,.25);padding-top:1rem;margin-bottom:1rem;gap:.5rem}
.bay:hover .btn{background:#A31D24}
.price{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dk);line-height:1.4}
.price b{display:block;font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--cream);font-weight:500}
.flag{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brass);margin-left:.35rem;vertical-align:middle}

/* ── CRAFT (cream) ──────────────────────────────────────────────── */
.craft{background:var(--cream);color:var(--structure)}
.craft .eyebrow{color:var(--brass-d)}
.craft h2{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.craft__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:4rem;align-items:center}
.craft__intro p{color:var(--muted);font-size:1.05rem;max-width:42ch}
.cutaway{position:relative}
.cutaway svg{width:100%;height:auto;display:block}
.cutaway .callouts{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem;counter-reset:c}
.cutaway .callouts li{counter-increment:c;display:grid;grid-template-columns:30px 1fr;gap:.7rem;font-size:.95rem;line-height:1.45}
.cutaway .callouts li::before{content:counter(c);width:26px;height:26px;border-radius:50%;border:1px solid var(--brass-d);color:var(--brass-d);font-family:var(--mono);font-size:12px;display:grid;place-items:center}
.cutaway .callouts b{display:block;font-weight:600;color:var(--structure)}
.cutaway .callouts span{color:var(--muted)}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.cutaway.on .draw{stroke-dashoffset:0}
.pin{opacity:0;transition:opacity .5s 1.8s}
.cutaway.on .pin{opacity:1}

/* ── COMPARE ────────────────────────────────────────────────────── */
.compare{background:var(--cream-2);color:var(--structure);border-top:1px solid var(--rule)}
.compare .eyebrow{color:var(--brass-d)}
.compare h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--structure)}
.tbl{width:100%;border-collapse:collapse;min-width:760px}
.th,.rh,.tc{text-align:left;padding:1rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top;font-size:.95rem}
.th{font-family:var(--name);font-weight:400;font-size:1.6rem;padding-top:1.4rem}
.th:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);vertical-align:bottom}
.rh{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;width:18%}
.tc.same{color:var(--muted)}
.note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:1rem}
.note .flag{margin:0 .35rem 0 0}

/* ── FINISHES ───────────────────────────────────────────────────── */
.finish{background:var(--ground)}
.finish__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem;align-items:center}
.finish h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.finish p{color:#CDBFAC;max-width:44ch}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.chip{border:1px solid rgba(184,134,43,.3);padding:.6rem .6rem 1rem;background:var(--stage)}
.chip i{display:block;aspect-ratio:4/3;border-radius:1px;background:
  linear-gradient(115deg,rgba(255,255,255,.0) 30%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 60%),
  radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.25),transparent 60%),var(--c);
  background-size:250% 100%,100% 100%,100% 100%;background-position:100% 0,0 0,0 0;transition:background-position 1.1s}
.chip:hover i{background-position:-60% 0,0 0,0 0}
.chip b{display:block;margin-top:.8rem;font-size:.9rem;font-weight:500}
.chip span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dk)}

/* ── CLOSE ──────────────────────────────────────────────────────── */
.close{position:relative;overflow:hidden;text-align:center;background:radial-gradient(ellipse 60% 80% at 50% 110%,#3A1A14,var(--stage) 70%)}
.close h2{font-size:clamp(3rem,8vw,6.5rem)}
.close p{color:#CDBFAC;max-width:46ch;margin:1.2rem auto 2.4rem}
.close .smoke{left:50%;bottom:0}
.close .smoke i{--s:260px;--b:30px;--rise:620px;--o:.28;--d:14s}
.seal{width:132px;height:132px;margin:0 auto 2rem;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 35% 30%,#E9C877,#B8862B 45%,#6E4E16 100%);color:#2A1D08;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.18),inset 0 0 0 7px rgba(255,236,190,.35),0 12px 30px rgba(0,0,0,.5)}
.seal div{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.35}
.seal strong{display:block;font-family:var(--accent);font-size:17px;letter-spacing:.02em;margin:.15rem 0}

/* footer */
.ftr{background:var(--stage);border-top:1px solid rgba(184,134,43,.3);padding:3rem 0 2rem;font-size:.92rem;color:#CDBFAC}
.ftr .shell{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.ftr img{height:60px;width:auto}
.ftr small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dk)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero h1 .l span,.hero p.sub,.hero .ctas,.stage{animation:none}}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .bays{grid-template-columns:repeat(2,1fr)}
  .cluster .shell{grid-template-columns:repeat(2,1fr)}
  .gauge-n{border-bottom:1px solid rgba(184,134,43,.22)}
  .gauge-n:nth-child(3){padding-left:0}
  .dial{grid-column:1/-1;padding-left:0}
}
@media (max-width:900px){
  .nav{display:none}
  .navtoggle{display:inline-grid;place-items:center;background:none;border:1px solid var(--brass);color:var(--brass-l);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;min-height:44px;min-width:44px;padding:0 12px}
  .hdr .btn--sm{display:none}
  .nav.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--stage);border-bottom:1px solid rgba(184,134,43,.35);padding:.5rem var(--gutter) 1rem}
  .nav.open a{padding:14px 0;border-bottom:1px solid rgba(184,134,43,.15);font-size:13px}
  .hero__grid{grid-template-columns:1fr;padding-block:3rem 3.5rem}
  .frame{order:-1}
  .craft__grid,.finish__grid{grid-template-columns:1fr;gap:2.5rem}
  .sect__head{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (max-width:600px){
  .brand{height:60px}
  .bays{grid-template-columns:1fr}
  .bay{min-height:0}
  .cutaway .callouts{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,1fr)}
  .gauge-n{padding:1.5rem 1rem 1.5rem 0}
  .gauge-n:nth-child(even){padding-left:1rem;border-right:0}
}

/* ── HERO PROGRESS: model nameplates with a burning fuse (locked 2026-09-25) ── */
.plate--ind{flex-direction:column;align-items:stretch;gap:10px;padding-top:12px}
.plate--ind .ds{margin:0 4px 2px}
.bars[data-ind]{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,18px);width:100%}
.bars .ind{background:none;border:0;padding:6px 0 4px;min-height:44px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;text-align:left;min-width:0}
.ind__nm{font-family:var(--name);font-weight:400;font-size:clamp(13px,1.35vw,17px);line-height:1;color:var(--muted-dk);white-space:nowrap;transition:color .5s}
.ind:hover .ind__nm,.ind:focus-visible .ind__nm{color:var(--brass-l)}
.ind.is-on .ind__nm{color:var(--cream)}
/* the fuse: an unlit twisted wick, a charred trail, and a spitting spark at the tip */
.fuse{position:relative;display:block;width:100%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(184,134,43,.42) 0 5px,rgba(184,134,43,.14) 5px 8px)}
.fuse::before{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#2B1F17 0%,#5A3A1C 55%,#C4262E 88%,#FF9A3C 100%)}
.ind.is-on .fuse::before{animation:jp-burn var(--dwell,7s) linear forwards}
.ind.is-done .fuse::before{transform:scaleX(1);background:#3A2A1E}
.spark{position:absolute;top:50%;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFE7BF;opacity:0;
  box-shadow:0 0 6px 2px #FF9A3C,0 0 16px 5px rgba(255,90,20,.5)}
.ind.is-on .spark{opacity:1;animation:jp-travel var(--dwell,7s) linear forwards,jp-flicker .22s steps(2) infinite}
.spark::before,.spark::after{content:"";position:absolute;left:2px;top:2px;width:2px;height:2px;border-radius:50%;background:#FFC27A;box-shadow:0 0 3px 1px rgba(255,140,50,.8);opacity:0}
.ind.is-on .spark::before{animation:jp-spitA .55s linear infinite}
.ind.is-on .spark::after{animation:jp-spitB .7s linear .25s infinite}
@keyframes jp-burn{to{transform:scaleX(1)}}
@keyframes jp-travel{to{left:100%}}
@keyframes jp-flicker{50%{box-shadow:0 0 4px 1px #FF9A3C,0 0 10px 3px rgba(255,90,20,.4)}}
@keyframes jp-spitA{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-7px,-10px)}}
@keyframes jp-spitB{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(5px,-12px)}}
/* concept: thermometer gauges */
.bars .ind--gauge{align-items:center;text-align:center;gap:6px}
.g{width:48px;height:48px;overflow:visible}
.g__face{fill:#0A0807;stroke:var(--brass);stroke-width:1.2}
.g__tick{stroke:var(--muted-dk);stroke-width:1}
.g__red{fill:none;stroke:var(--action);stroke-width:2.2}
.g__ndl{transform-origin:24px 24px;transform:rotate(-120deg)}
.g__ndl line{stroke:var(--cream);stroke-width:1.6;stroke-linecap:round}
.g__hub{fill:var(--brass)}
.ind--gauge.is-on .g__ndl{animation:jp-needle var(--dwell,7s) cubic-bezier(.3,.1,.4,1) forwards}
.ind--gauge.is-on .g__face{stroke:var(--brass-l)}
.ind--gauge.is-done .g__ndl{transform:rotate(62deg)}
.ind--gauge.is-done .g__ndl line{stroke:var(--muted-dk)}
@keyframes jp-needle{0%{transform:rotate(-120deg)}85%{transform:rotate(66deg)}100%{transform:rotate(62deg)}}
/* model names under the gauges: a slow ember glow, staggered so the row breathes (Richard 2026-09-26) */
.ind--gauge .ind__nm{animation:jp-nmGlow 3.2s ease-in-out infinite}
.ind--gauge:nth-child(2) .ind__nm{animation-delay:.8s}
.ind--gauge:nth-child(3) .ind__nm{animation-delay:1.6s}
.ind--gauge:nth-child(4) .ind__nm{animation-delay:2.4s}
.ind--gauge.is-on .ind__nm{animation:jp-nmGlowOn 2.4s ease-in-out infinite}
@keyframes jp-nmGlow{0%,100%{text-shadow:0 0 0 rgba(217,169,74,0)}50%{text-shadow:0 0 8px rgba(217,169,74,.45),0 0 16px rgba(196,38,46,.18)}}
@keyframes jp-nmGlowOn{0%,100%{text-shadow:0 0 6px rgba(255,154,60,.35),0 0 14px rgba(196,38,46,.2)}50%{text-shadow:0 0 10px rgba(255,154,60,.7),0 0 24px rgba(196,38,46,.38)}}
@media (prefers-reduced-motion:reduce){
  .ind.is-on .fuse::before{animation:none;transform:scaleX(1)}
  .ind.is-on .spark{animation:none;left:100%}.ind.is-on .spark::before,.ind.is-on .spark::after{animation:none}
  .ind--gauge.is-on .g__ndl{animation:none;transform:rotate(62deg)}
  .ind--gauge .ind__nm{animation:none}.ind--gauge.is-on .ind__nm{animation:none;text-shadow:0 0 8px rgba(255,154,60,.5)}
  .dial.on .g__ndl{animation:none;transform:rotate(-24deg)}}

/* ═══ v2 multi-page components (build-demo-v2.py) ═══════════════════ */
html .phead h1,html .pdp__name{letter-spacing:.01em}
.nav a[aria-current="page"]{color:var(--brass-l)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.brandwrap .smoke{left:78.5%;top:3%}

/* page head */
.phead{background:linear-gradient(180deg,#15110E,var(--stage));padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);border-bottom:1px solid rgba(184,134,43,.3)}
.phead h1{font-size:clamp(2.6rem,6.4vw,5rem);animation:jp-fade 1s .1s both}
.phead__lede{color:#D8CBB8;max-width:58ch;font-size:1.06rem;margin:1.4rem 0 0;animation:jp-fade 1s .3s both}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk);margin-bottom:1.6rem}
.crumb a{color:var(--muted-dk);text-decoration:none}
.crumb a:hover{color:var(--brass-l)}

/* frames that don't slide */
.frame--still{animation:none}
.frame--still .frame__mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}

/* model page + configurator */
.pdp{background:var(--stage);padding-top:3rem}
.cfg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.cfg__gal{position:sticky;top:110px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.thumb{position:relative;aspect-ratio:4/3;background:#0A0807;border:1px solid rgba(184,134,43,.25);padding:3px;cursor:pointer;min-height:44px}
.thumb img{width:100%;height:100%;object-fit:contain;opacity:.7;transition:opacity .3s}
.thumb:hover img,.thumb[aria-current="true"] img{opacity:1}
.thumb[aria-current="true"]{border-color:var(--brass-l)}
.pdp__name{font-size:clamp(3.2rem,7vw,5.2rem);font-family:var(--name);font-weight:400}
html .pdp__name{font-family:var(--disp)}
.pdp__blurb{color:#D8CBB8;font-size:1.05rem;margin:1rem 0 1.6rem;max-width:46ch}
.nums{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid rgba(184,134,43,.25);margin-bottom:1.6rem}
.nums div{padding:1rem .8rem 1rem 0}
.nums div+div{padding-left:.9rem;border-left:1px solid rgba(184,134,43,.2)}
.nums b{display:block;font-family:var(--name);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1;color:var(--cream)}
.nums b small{font-size:.55em;color:var(--brass-l);margin-left:.12em}
.nums span{display:block;margin-top:.45rem;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dk);line-height:1.4}
.axis{margin-bottom:1.3rem}
.axis__lbl{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk);margin-bottom:.55rem}
.axis__lbl b{color:var(--brass-l);font-weight:500;text-align:right}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{background:transparent;color:var(--cream);border:1px solid rgba(184,134,43,.45);font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  padding:10px 14px;min-height:44px;cursor:pointer;border-radius:2px;transition:background .25s,border-color .25s,color .25s;text-align:left}
.opt em{font-style:normal;color:var(--muted-dk);margin-left:.4rem}
.opt:hover{border-color:var(--brass-l)}
.opt[aria-pressed="true"]{background:rgba(184,134,43,.16);border-color:var(--brass-l);color:var(--brass-l)}
.opt[aria-pressed="true"] em{color:var(--brass-l)}
.opt .real{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--action-inv);margin-left:.45rem;vertical-align:middle}
.total{border-top:1px solid rgba(184,134,43,.45);margin-top:1.6rem;padding-top:1rem}
.total__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;font-family:var(--mono);font-size:12.5px;color:var(--muted-dk)}
.total__row b{color:var(--cream);font-weight:500}
.total__row.is-sum{border-top:1px solid rgba(184,134,43,.25);margin-top:.5rem;padding-top:.9rem;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.total__row.is-sum strong{font-family:var(--name);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.1rem);letter-spacing:0;text-transform:none;color:var(--cream)}
.total__ctas{display:grid;gap:.7rem;margin:1.2rem 0 .4rem}
.total__ctas .btn{justify-content:center}
.note{font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--muted-dk);margin:.9rem 0 0}
.note strong{color:var(--cream);font-weight:500}
.note .flag{margin:0 .3rem 0 0}

/* spec .tbl section (cream) */
.specs{background:var(--cream);color:var(--structure)}
.specs__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.specs h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.specs .note{color:var(--muted)}
.spectable{width:100%;border-collapse:collapse;min-width:0;border-top:2px solid var(--structure)}
.spectable .rh,.spectable .tc{padding:.95rem .8rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;font-size:.97rem}
.spectable .rh{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;width:34%;padding-left:0}
.spectable--dark{border-top-color:var(--brass)}
.spectable--dark .rh{color:var(--muted-dk)}
.spectable--dark .tc{color:var(--cream);border-bottom-color:rgba(184,134,43,.2)}
.spectable--dark .rh{border-bottom-color:rgba(184,134,43,.2)}

/* 3-up bays */
.bays--3{grid-template-columns:repeat(3,1fr)}

/* band (image + text) */
.band{background:var(--ground)}
.band__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.band h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.band p{color:#CDBFAC;max-width:44ch}
.band .ctas{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.8rem}

/* tiles (custom, merch) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(184,134,43,.22);border:1px solid rgba(184,134,43,.22)}
.tile{background:var(--stage);padding:1.6rem;display:flex;flex-direction:column}
.tile .bay__photo{margin-top:0}
.tile h3{font-family:var(--name);font-weight:400;font-size:1.8rem;margin:.3rem 0 .6rem}
.tile p{color:#CDBFAC;font-size:.97rem;margin:0}
.tile .bay__foot{margin-top:auto}
.tiles--merch .tile{min-height:0}
.center-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:3rem}
.close .center-ctas{margin-top:0}

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem}
.fchip{background:transparent;color:var(--cream);border:1px solid rgba(184,134,43,.45);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:0 16px;min-height:44px;cursor:pointer;border-radius:2px}
.fchip[aria-pressed="true"]{background:var(--brass);color:var(--stage);border-color:var(--brass)}
.masonry{column-count:3;column-gap:14px}
.masonry figure{break-inside:avoid;margin:0 0 14px;background:#0A0807;border:1px solid rgba(184,134,43,.3);padding:5px}
.gal__open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal__open img{width:100%;height:auto;transition:opacity .3s}
.gal__open:hover img{opacity:.85}
.masonry figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk);padding:.6rem .3rem .2rem}
.lb{border:1px solid var(--brass);background:var(--stage);padding:12px;max-width:min(94vw,1100px);max-height:92vh;color:var(--cream)}
.lb::backdrop{background:rgba(8,6,5,.88)}
.lb img{max-width:100%;max-height:calc(92vh - 40px);object-fit:contain;margin:0 auto}
.lb__btn{position:absolute;background:rgba(14,11,9,.8);color:var(--cream);border:1px solid rgba(184,134,43,.6);width:44px;height:44px;font-size:22px;cursor:pointer;line-height:1}
.lb__prev{left:18px;top:50%;transform:translateY(-50%)}
.lb__next{right:18px;top:50%;transform:translateY(-50%)}
.lb__close{right:18px;top:18px}

/* forms */
.contact__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:#0A0807;color:var(--cream);border:1px solid rgba(184,134,43,.4);border-radius:2px;padding:12px 14px;min-height:48px;font:16px/1.4 var(--body)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass-l);box-shadow:0 0 0 3px rgba(217,169,74,.18)}
.side-h{font-family:var(--name);font-weight:400;font-size:2rem;margin-bottom:1rem}
.cartline{display:grid;grid-template-columns:180px 1fr;gap:1.4rem;align-items:center;border:1px solid rgba(184,134,43,.3);padding:1rem;background:var(--stage)}
.cartline .bay__photo{margin:0}
.cartline h3{font-family:var(--name);font-weight:400;font-size:1.9rem}
.cartline__opts{color:#CDBFAC;font-size:.95rem;margin:.4rem 0}
.cartline .price b{display:inline}

/* the pit stop */
.ps__feat{margin-bottom:2.5rem}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(184,134,43,.22);border:1px solid rgba(184,134,43,.22)}
.post{background:var(--stage);padding:1.4rem;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background .3s}
.post:hover{background:#15110E}
.post .bay__photo{margin:0 0 1.2rem}
.post__bd{display:flex;flex-direction:column;flex:1}
.post h3{font-family:var(--name);font-weight:400;font-size:1.55rem;line-height:1.1;margin:.5rem 0 .6rem}
.post p{color:#CDBFAC;font-size:.95rem;margin:0 0 1.2rem}
.post__meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(184,134,43,.25);padding-top:.4rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk)}
.post[hidden]{display:none}
.post--feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.4rem;align-items:center;border:1px solid rgba(184,134,43,.45);padding:1.6rem}
.post--feat .bay__photo{margin:0}
.post--feat h3{font-size:clamp(2rem,3.6vw,3rem)}
.post--feat p{font-size:1.05rem}
.article-wrap{background:var(--stage)}
.article{max-width:860px}
.prose{max-width:68ch}
.prose p{color:#DCCFBD;font-size:1.07rem;line-height:1.75;margin:0 0 1.2rem}
.prose h2{font-family:var(--name);font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem);margin:2.4rem 0 .8rem}
.recipe{border:1px solid var(--brass);padding:1.4rem 1.6rem;margin:2rem 0;background:#0A0807;position:relative}
.recipe::before{content:"";position:absolute;inset:4px;border:1px solid rgba(184,134,43,.3);pointer-events:none}
.recipe__hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.recipe__hd strong{font-family:var(--name);font-weight:400;font-size:1.4rem;color:#E8742A}
.recipe .dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin:0}
.recipe .dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dk);padding-top:.2rem}
.recipe .dd{margin:0;color:var(--cream)}
.nav{gap:1.6rem}
.nav a,.btn{white-space:nowrap}
@media (max-width:1180px){.hdr .btn--sm{display:none}.nav{gap:1.2rem;font-size:12px;letter-spacing:.13em}}
@media (max-width:1100px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.post--feat{grid-template-columns:1fr;gap:1.2rem}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}

/* luxury seal */
.luxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center}
.luxopt{margin:0}
.luxopt__stage{perspective:700px;padding:1.5rem 0 1rem}
.luxwrap{width:min(240px,70vw);margin:0 auto;transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(217,169,74,.12))}
.lux{width:100%;height:auto;display:block;overflow:visible}
.lux .sheen{animation:jp-sheen 6s ease-in-out infinite}
@keyframes jp-sheen{0%,62%{transform:translateX(-40px)}92%,100%{transform:translateX(300px)}}
.luxopt h3{font-family:var(--name);font-weight:400;font-size:1.8rem;margin:.5rem 0 .6rem}
.luxopt p{color:#CDBFAC;max-width:32ch;margin:0 auto;font-size:.95rem}
@media (max-width:900px){.luxgrid{grid-template-columns:1fr;gap:3.5rem}}
@media (prefers-reduced-motion:reduce){.lux .sheen{animation:none;opacity:0}}

/* the Cadillac badge in closing sections (option 2, locked 2026-09-26) */
.luxseal{padding:0 0 1.6rem}
.luxseal .luxwrap{width:clamp(150px,18vw,190px)}
.signoff{padding:clamp(2.5rem,5vw,4rem) 0;text-align:center;border-top:1px solid rgba(184,134,43,.18)}
.signoff .luxseal{padding:0}

/* concept banner */
.concept{background:var(--ground);border-bottom:1px solid rgba(184,134,43,.3);padding:14px 0;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:#CDBFAC}
.concept strong{color:var(--brass-l);font-weight:500}
.concept a{color:var(--cream)}

/* footer (multi-column) */
.ftr__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;width:100%;margin-bottom:2rem}
.ftr__brand p{margin:.9rem 0 0;font-size:.92rem}
.ftr__addr{font-family:var(--mono);font-size:12px!important;line-height:1.7;color:var(--muted-dk)}
.ftr__addr a{color:#D8CBB8;text-decoration:none;display:inline-block;padding:6px 0}
.ftr__addr a:hover{color:var(--brass-l)}
.spectable a{color:inherit}
.ftr h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-l);font-weight:500;margin:0 0 .8rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:inline-block;padding:6px 0;text-decoration:none;color:#D8CBB8}
.ftr li a:hover{color:var(--brass-l)}
.ftr .coachline{width:100%;margin-bottom:1.2rem}
.ftr__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;width:100%}
.ftr .shell{display:block}

@media (max-width:1100px){
  .bays--3{grid-template-columns:repeat(2,1fr)}
  .thumbs{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .cfg,.specs__grid,.band__grid,.contact__grid{grid-template-columns:1fr}
  .cfg__gal{position:static}
  .tiles{grid-template-columns:1fr 1fr}
  .masonry{column-count:2}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:600px){
  .bays--3,.tiles{grid-template-columns:1fr}
  .masonry{column-count:1}
  .cartline{grid-template-columns:1fr}
  .nums b{font-size:1.25rem}
  .lb__prev{left:6px}.lb__next{right:6px}
}


/* ═══════════════ BRICKS LAYER (build-bricks-kit.py) — the SyTec playbook traps, fixed up front ═══════════════ */
/* trap 2: .brxe-block is flex-direction:column by default; every demo flex row says row explicitly */
:where(.eyebrow){flex-direction:row}
:where(.hdr .shell){flex-direction:row}
:where(.nav){flex-direction:row}
/* buttons */
:where(.btn){flex-direction:row}
:where(.btn--block){flex-direction:row}
:where(.link){flex-direction:row}
:where(.hero .ctas){flex-direction:row}
:where(.frame__plate){flex-direction:row}
:where(.bars){flex-direction:row}
:where(.bars:not([data-ind]) button){flex-direction:row}
:where(.dial){flex-direction:row}
:where(.sect__head){flex-direction:row}
:where(.bay__foot){flex-direction:row}
:where(.ftr .shell){flex-direction:row}
:where(.axis__lbl){flex-direction:row}
:where(.opts){flex-direction:row}
:where(.total__row){flex-direction:row}
:where(.band .ctas){flex-direction:row}
:where(.center-ctas){flex-direction:row}
/* gallery */
:where(.filters){flex-direction:row}
:where(.post__meta){flex-direction:row}
:where(.recipe__hd){flex-direction:row}
:where(.ftr__legal){flex-direction:row}
/* spec cards (Richard approved 2026-10-15, mockups/spec-cards-before-after.png): in the 4-up line-up each label sits above its
   value so no value wraps; 2-up/1-up (≤1100px) unchanged */
@media (min-width:1101px){.bays:not(.bays--3) .bay .dl{grid-template-columns:1fr;gap:.15rem}.bays:not(.bays--3) .bay .dl .dd{margin-bottom:.45rem}}
/* trap 3: blocks default to width:100%; inside a row they size to content, like the demo (low specificity on purpose) */
.eyebrow>:where(.brxe-block,.brxe-div),
.hdr .shell>:where(.brxe-block,.brxe-div),
.nav>:where(.brxe-block,.brxe-div),
/* buttons */
.btn>:where(.brxe-block,.brxe-div),
.btn--block>:where(.brxe-block,.brxe-div),
.link>:where(.brxe-block,.brxe-div),
.hero .ctas>:where(.brxe-block,.brxe-div),
.frame__plate>:where(.brxe-block,.brxe-div),
.bars>:where(.brxe-block,.brxe-div),
.bars:not([data-ind]) button>:where(.brxe-block,.brxe-div),
.dial>:where(.brxe-block,.brxe-div),
.sect__head>:where(.brxe-block,.brxe-div),
.bay__foot>:where(.brxe-block,.brxe-div),
.ftr .shell>:where(.brxe-block,.brxe-div),
.axis__lbl>:where(.brxe-block,.brxe-div),
.opts>:where(.brxe-block,.brxe-div),
.total__row>:where(.brxe-block,.brxe-div),
.band .ctas>:where(.brxe-block,.brxe-div),
.center-ctas>:where(.brxe-block,.brxe-div),
/* gallery */
.filters>:where(.brxe-block,.brxe-div),
.post__meta>:where(.brxe-block,.brxe-div),
.recipe__hd>:where(.brxe-block,.brxe-div),
.ftr__legal>:where(.brxe-block,.brxe-div){width:auto}
/* trap 5/12: containers and .shell are always full width inside a section */
.brxe-section>.shell,.brxe-section>.brxe-container,.shell.brxe-block,.shell.brxe-div{width:100%}
/* the demo's .hero is a grid that centres .hero__grid and lets it shrink to fit (≈540px at 768); the full-width .shell rule
   above stretched it on tablets — fix 2026-10-15 (layout-diff 768) */
.hero.brxe-section>.hero__grid{width:auto}
/* trap 9: the importer splits "number + unit" into block siblings; keep them inline */
.gauge-n b>*,.nums b>*,.frame__plate .nm>*,.ind__nm{display:inline}
/* trap 10: grid children need min-width:0 or long words blow the grid out */
.bays>*,.posts>*,.tiles>*,.chips>*,.cfg>*,.contact__grid>*,.specs__grid>*,.band__grid>*,.craft__grid>*,.finish__grid>*,.hero__grid>*{min-width:0}  /* not .cluster .shell>* / .nums>*: their auto columns must grow like the demo (fix 2026-10-15) */
/* trap 13: tables are role=table div grids */
/* fix 2026-10-15: CSS table display, not a grid. role=table divs then lay out exactly like the demo's <table> (auto column
   widths, the 34% / 18% header widths); the old equal-fr grid made every compare column equal and squeezed .rh to 34% of 34% */
.tbl{display:table;table-layout:auto}
.tbl .tr{display:table-row}
.tbl .tr>*{display:table-cell}
/* crumb: the importer turns each " › " into a block, so the crumb stacked into 3 lines */
.crumb>*{display:inline}
.crumb>*+*{margin-left:.75em}
/* Bricks text links are inline-flex; links inside table cells are inline text in the demo */
.tbl .tc a.brxe-text-link{display:inline}
/* Bricks' base CSS centres figcaption; the demo's hero plate caption is start-aligned */
figcaption.frame__plate{text-align:start}
/* stretched card links (trap 1): the whole card clicks through its button */
.bay,.post{position:relative}
.bay__link::after,.post__link::after{content:"";position:absolute;inset:0;z-index:1}
.post__link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-l);text-decoration:none}
/* static buttons are role=button divs (trap 11) */
[role="button"]{cursor:pointer}
[role="button"]:focus-visible{outline:2px solid var(--brass-l);outline-offset:2px}
/* JS lightbox (no <dialog> in Bricks content) */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(8,6,5,.9);padding:16px;margin:0;max-width:none;max-height:none;border:0}
.lb.open{display:flex}
.lb img{max-width:min(94vw,1100px);max-height:88vh;object-fit:contain;border:1px solid var(--brass);background:var(--stage);padding:10px}
/* Bricks header/footer: the site header is a native Bricks template; these map its elements onto the demo look */
#brx-header .brxe-nav-menu .bricks-nav-menu>li>a{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#E6DACA}
#brx-header .brxe-nav-menu .bricks-nav-menu>li.current-menu-item>a{color:var(--brass-l)}
/* Fluent Forms on the contact page: dark fields like the demo */
.ff-slot .ff-el-form-control{background:#0A0807;color:var(--cream);border:1px solid rgba(184,134,43,.4);border-radius:2px;min-height:48px;font:16px/1.4 var(--body)}
.ff-slot .ff-el-input--label label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk)}
.ff-slot .ff-btn-submit{background:var(--action)!important;color:var(--cream)!important;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;border-radius:2px;min-height:48px;padding:14px 22px}


/* ═══════════════ FLUENTCART → Jambo tokens. Token overrides only; FluentCart's own markup, no template edits ═══════════════
   Adapted from the SyTec kit. Store pages (cart/checkout/thank-you/account) render in article#brx-content (no <main>). */
:root{
  --fct-primary-text-color:var(--cream);--fct-secondary-text-color:var(--muted-dk);--fct-heading-color:var(--cream);
  --fct-primary-bg-color:var(--action);--fct-secondary-bg-color:#ffffff0a;--fct-border-color:rgba(184,134,43,.35);--fct-divider-color:rgba(184,134,43,.2);
  --fct-active-border-color:var(--brass-l);--fct-secondary-active-border-color:var(--brass);--fct-primary-active-text-color:var(--brass-l);
  --fct-btn-bg-color:var(--action);--fct-btn-text-color:var(--cream);--fct-btn-border-color:transparent;
  --fct-secondary-btn-bg-color:transparent;--fct-secondary-btn-border-color:var(--brass);--fct-secondary-btn-hover-bg-color:rgba(184,134,43,.12);--fct-secondary-btn-text-color:var(--brass-l);
  --fct-input-bg-color:#0A0807;--fct-input-text-color:var(--cream);--fct-input-placeholder-text-color:var(--muted-dk);--fct-input-disabled-bg-color:#ffffff05;--fct-input-disabled-bg:#ffffff05;
  --fct-card-bg:#15110E;--fct-checkout-summary-bg-color:#15110E;--fct-checkout-payment-method-bg-color:#ffffff06;--fct-checkout-radio-bg-color:transparent;--fct-checkout-radio-dot-bg-color:var(--brass-l);
  --fct-checkout-checkbox-bg:transparent;--fct-checkout-address-wrapper-bg:#15110E;--fct-checkout-address-modal-bg:#15110E;--fct-checkout-shipping-methods-bg:#15110E;
  --fct-cart-drawer-bg:var(--stage);--fct-cart-drawer-border-color:rgba(184,134,43,.35);--fct-cart-drawer-primary-text-color:var(--cream);--fct-cart-drawer-secondary-text-color:var(--muted-dk);
  --fct-cart-drawer-footer-action-bg-color:var(--stage);--fct-cart-drawer-open-btn-bg-color:#15110E;--fct-cart-drawer-quantity-bg-color:transparent;--fct-cart-drawer-quantity-btn-bg:#ffffff0a;--fct-cart-drawer-quantity-btn-hover-bg:#ffffff14;
  --fct-cart-drawer-close-btn-color:var(--cream);--fct-cart-drawer-badge-bg-color:var(--action);--fct-cart-drawer-badge-text-color:var(--cream);
  --fct-cart-item-delete-btn-bg-color:transparent;--fct-cart-item-delete-btn-hover-bg-color:#C4262E22;--fct-view-cart-btn-bg-color:transparent;--fct-view-cart-drawer-btn-hover-bg:#ffffff0a;
  --fct-single-product-qty-bg:#ffffff0a;--fct-single-product-qty-text-color:var(--cream);
  --fct-shop-input-bg:#0A0807;--fct-shop-checkmark-bg:transparent;--fct-shop-paginator-bg:transparent;--fct-shop-paginator-items-hover-bg:#ffffff0a;--fct-shop-view-switcher-active-bg:#ffffff14;
  --fct-select-dropdown-bg:#15110E;--fct-select-option-hover-bg:#ffffff0a;
  --fct-customer-dashboard-nav-active-bg-color:#ffffff0a;--fct-customer-dashboard-nav-active-text-color:var(--cream);--fct-customer-dashboard-nav-active-bar-color:var(--brass-l);--fct-customer-dashboard-nav-text-color:var(--muted-dk);
  --fct-customer-dashboard-logout-btn-bg-color:#C4262E14;--fct-customer-dashboard-logout-btn-hover-bg-color:#C4262E26;--fct-customer-dashboard-logout-btn-text-color:var(--action-inv);
  --fct-modal-checkout-border-radius:2px;
}
.fluent-cart-checkout-page,.fct-cart-page,.fct-customer-dashboard,[class*="fct-checkout"]{font-family:var(--body);color:var(--cream)}
[class*="fct-"] h1,[class*="fct-"] h2,[class*="fct-"] h3{font-family:var(--name);font-weight:400}
.fct-product-price,.fct-product-item-price,[class*="fct-"][class*="price"]{font-family:var(--mono);color:var(--cream)}
.fct-product-card,[class*="fct-checkout-summary"],.fct_auth_wrap{border:1px solid rgba(184,134,43,.35);border-radius:2px}
img.fct-product-card-image[src*="placeholder"],.fct-product-gallery-wrapper img[src*="placeholder"]{opacity:.18;filter:invert(1)}
/* the pit templates keep FluentCart's native buy section in [data-jp="buyslot"] (hidden until the configurator adapter is wired, T9) */
[data-jp="buyslot"]{margin-top:1rem}

/* ═══════════════ PHASE 1 (2026-10-15, live Bricks build) — maps native Bricks output onto the locked demo look ═══════════════
   Added during the live build (BUILD-LOG.md). Port into build-bricks-kit.py before regenerating the kit. */
/* header: Bricks wraps the template in <header id="brx-header">, so the sticky lives there (sticky on .hdr can't move) */
#brx-header{position:sticky;top:0;z-index:50}
.hdr{position:relative;background:rgba(14,11,9,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(184,134,43,.35)}
.hdr .brandwrap img,.hdr img.brand{display:block;height:84px;width:auto;transition:height .35s}
.hdr.is-tight .brandwrap img,.hdr.is-tight img.brand{height:54px}
/* nav = Bricks Nav Menu ("Jambo Primary"), Bricks' own mobile menu off; the demo's Menu toggle opens it */
.hdr .brxe-nav-menu.nav{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.hdr .nav .bricks-nav-menu-wrapper{display:block}
.hdr .nav .bricks-nav-menu{display:flex;flex-direction:row;gap:2rem;margin:0;padding:0;list-style:none}
.hdr .nav .bricks-nav-menu>li{margin:0}
.hdr .nav .bricks-nav-menu>li>a{display:inline-block;color:#E6DACA;text-decoration:none;padding:6px 0;position:relative;white-space:nowrap}
.hdr .nav .bricks-nav-menu>li>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass-l);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.hdr .nav .bricks-nav-menu>li>a:hover::after,.hdr .nav .bricks-nav-menu>li>a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .nav .bricks-nav-menu>li>a[aria-current="page"]{color:var(--brass-l)}
.hdr .nav .bricks-mobile-menu-toggle,.hdr .nav .bricks-mobile-menu-wrapper,.hdr .nav .bricks-mobile-menu-overlay{display:none!important}
@media (max-width:1180px){.hdr .nav .bricks-nav-menu{gap:1.2rem}.hdr .brxe-nav-menu.nav{font-size:12px;letter-spacing:.13em}}
@media (max-width:900px){
  .hdr .brxe-nav-menu.nav{display:none}
  .hdr .brxe-nav-menu.nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--stage);border-bottom:1px solid rgba(184,134,43,.35);padding:.5rem var(--gutter) 1rem}
  .hdr .nav.open .bricks-nav-menu{flex-direction:column;gap:0}
  .hdr .nav.open .bricks-nav-menu>li>a{display:block;padding:14px 0;border-bottom:1px solid rgba(184,134,43,.15);font-size:13px}
  .hdr .brandwrap img,.hdr img.brand,.hdr.is-tight .brandwrap img{height:60px}
  .hdr .navtoggle{display:inline-grid;place-items:center;cursor:pointer}
}
.hdr .navtoggle{user-select:none}
/* finish chips: the importer drops the empty <i>; jambo-effects.js re-injects it from data-c */
/* unconfirmed-fact dot sits inline after its text (the importer splits text + span into blocks) */
.brxe-text-basic:has(+ .flag){display:inline}
/* forms: Bricks Form element styled as the demo form (.field) */
.ff-slot .brxe-form{display:block;width:100%}
.ff-slot .brxe-form .form-group{margin:0 0 1.2rem;padding:0;width:100%}
.ff-slot .brxe-form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dk);margin-bottom:.5rem}
.ff-slot .brxe-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.ff-slot .brxe-form select,.ff-slot .brxe-form textarea{width:100%;background:#0A0807;color:var(--cream);border:1px solid rgba(184,134,43,.4);border-radius:2px;padding:12px 14px;min-height:48px;font:16px/1.4 var(--body)}
.ff-slot .brxe-form select option{background:#0A0807;color:var(--cream)}
.ff-slot .brxe-form input:focus,.ff-slot .brxe-form select:focus,.ff-slot .brxe-form textarea:focus{outline:none;border-color:var(--brass-l);box-shadow:0 0 0 3px rgba(217,169,74,.18)}
.ff-slot .brxe-form .submit-button-wrapper{margin-top:.4rem}
.ff-slot .brxe-form .bricks-button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;background:var(--action);color:var(--cream);font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:14px 22px;min-height:48px;border-radius:2px;border:0;cursor:pointer;transition:background .3s}
.ff-slot .brxe-form .bricks-button:hover{background:#A31D24}
.ff-slot .brxe-form .message{font-family:var(--mono);font-size:12.5px;line-height:1.6;padding:12px 14px;margin-top:1rem;border:1px solid rgba(184,134,43,.45);color:var(--cream);background:#0A0807}
.ff-slot .brxe-form .message.error{border-color:var(--action-inv)}
/* honeypot (field jphnpt) off-screen; hidden-only groups (model/build) take no space */
.ff-slot .brxe-form .form-group:has([name="form-field-jphnpt"]){position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ff-slot .brxe-form .form-group:has(input[type=hidden]):not(:has(input:not([type=hidden]),select,textarea)){display:none}
.ff-slot .brxe-form label.required::after{content:" *";color:var(--action-inv)}
/* The Pit Stop: CSS-only empty state while no posts are published */
.ps-empty{display:none}
/* an empty Bricks loop leaves only an HTML comment, so :empty matches (nested :has() is invalid CSS and killed the old rule) */
.posts:empty~.ps-empty{display:block;font-size:13px}
.posts:empty{display:none}
.shell:has(>.posts:empty)>.filters{display:none}
/* post template: hide "Keep reading" while there are no other posts (the Pit Stop page keeps its .ps-empty note) */
.sect:has(.posts:empty):not(:has(.ps-empty)){display:none}
.ps-empty a{color:var(--brass-l)}