/* Marquise — Meuble Confort & Style
   Black and red. The red is #BB3500, sampled from the circle in the MCS logo
   itself — so the mark in the header and every accent on the page are the same
   colour. Running a truer red (#C62828) alongside a rust logo would put two
   reds in one identity, which is the defect the current site already has.

   Red is the ONLY chroma in the system. Stock, fit and warning states are
   carried by weight and neutral value instead of by hue, which is what keeps a
   red-and-black site from reading as a clearance flyer. */

:root{
  --paper:#F4F4F3;          /* neutral ground — no warmth competing with red */
  --surface:#FFFFFF;        /* cards sit white on it */
  --sunk:#E8E8E6;
  --field:#FFFFFF;
  --ink:#0D0D0D;            /* true black, not a warm near-black */
  --ink-2:#3D3D3D;
  --ink-3:#6E6E6E;
  --line:#E2E2E0;
  --line-2:#C6C6C3;

  --brand:#BB3500;          /* the circle in the logo */
  --brand-deep:#8E2800;
  --brand-ink:#FFFFFF;
  --brand-soft:#F8E7DF;

  --signal:#0D0D0D;         /* in stock — stated in ink, not in green */
  --signal-soft:#EAEAE8;
  --warn:#6B6B6B;           /* "tight, but it goes" — muted, not amber */
  --warn-soft:#EFEFED;

  --band-red:#BB3500;
  --band-ink:#FFFFFF;
  --footer-bg:#0D0D0D;
  --footer-ink:rgba(255,255,255,.86);
  --footer-dim:rgba(255,255,255,.46);
  --footer-line:rgba(255,255,255,.14);
  --scrim-1:rgba(244,244,243,.97);
  --scrim-2:rgba(244,244,243,.66);
  --shadow:0 1px 1px rgba(13,13,13,.04), 0 12px 34px -18px rgba(13,13,13,.24);
  --lift:0 2px 4px rgba(13,13,13,.05), 0 26px 54px -26px rgba(13,13,13,.32);

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-ui:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1360px;
  --pad:clamp(20px,5vw,72px);
  --gut:clamp(18px,2.4vw,34px);
  --r:0px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E0E0E; --surface:#1A1A1A; --sunk:#050505; --field:#1F1F1F;
    --ink:#F2F1F0; --ink-2:#ADADAA; --ink-3:#7E7E7B;
    --line:#282828; --line-2:#3A3A3A;
    --brand:#E8724A; --brand-deep:#FF8A63; --brand-ink:#120707; --brand-soft:#33190E;
    --signal:#F2F1F0; --signal-soft:#1F1F1F;
    --warn:#9A9A97; --warn-soft:#1C1C1C;
    --band-red:#BB3500;
    --band-ink:#FFFFFF;
    --footer-bg:#050505;
    --footer-ink:rgba(255,255,255,.84);
    --footer-dim:rgba(255,255,255,.50);
    --footer-line:rgba(255,255,255,.12);
    --scrim-1:rgba(14,14,14,.95);
    --scrim-2:rgba(14,14,14,.62);
    --shadow:0 1px 1px rgba(0,0,0,.5), 0 14px 36px -20px rgba(0,0,0,.8);
    --lift:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0E0E0E; --surface:#1A1A1A; --sunk:#050505; --field:#1F1F1F;
  --ink:#F2F1F0; --ink-2:#ADADAA; --ink-3:#7E7E7B;
  --line:#282828; --line-2:#3A3A3A;
  --brand:#E8724A; --brand-deep:#FF8A63; --brand-ink:#120707; --brand-soft:#33190E;
  --signal:#F2F1F0; --signal-soft:#1F1F1F;
  --warn:#9A9A97; --warn-soft:#1C1C1C;
  --band-red:#BB3500;
  --band-ink:#FFFFFF;
  --footer-bg:#050505;
  --footer-ink:rgba(255,255,255,.84);
  --footer-dim:rgba(255,255,255,.50);
  --footer-line:rgba(255,255,255,.12);
  --scrim-1:rgba(14,14,14,.95);
  --scrim-2:rgba(14,14,14,.62);
  --shadow:0 1px 1px rgba(0,0,0,.5), 0 14px 36px -20px rgba(0,0,0,.8);
  --lift:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--paper); color:var(--ink); overflow-x:clip; max-width:100%;
  font-family:var(--f-body); font-size:16px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:400; margin:0; line-height:1.05;
  letter-spacing:-.018em; text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 60}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.mono{font-family:var(--f-mono)}
:focus-visible{outline:1.5px solid var(--brand); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the one recurring ornament: a rust hairline that marks a section's start */
.eyebrow{font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; display:flex; align-items:center; gap:12px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--brand); flex:none}

/* ── header ─────────────────────────────────────────── */
.topbar{background:var(--footer-bg); color:var(--footer-ink); border-bottom:2px solid var(--brand); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase}
.topbar .wrap{display:flex; gap:6px 26px; align-items:center; justify-content:center; flex-wrap:wrap; padding-block:10px; text-align:center}
.topbar b{font-weight:400; color:#FFFFFF}
.topbar .sep{opacity:.28}

header.site{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; gap:clamp(14px,3vw,44px); padding-block:16px}
.brand{display:block; line-height:0; flex:none}
.brand img{height:clamp(34px,3.6vw,46px); width:auto}
.brand .on-light{display:block}
.brand .on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .on-light{display:none}
  :root:not([data-theme="light"]) .brand .on-dark{display:block}
}
:root[data-theme="dark"] .brand .on-light{display:none}
:root[data-theme="dark"] .brand .on-dark{display:block}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
nav.main{display:flex; gap:clamp(11px,1.5vw,24px); margin-inline:auto; flex-wrap:wrap}
nav.main a{font-family:var(--f-ui); font-weight:500; font-size:13.5px; letter-spacing:.005em; padding:6px 0; position:relative; white-space:nowrap}
nav.main a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--brand); transition:right .35s var(--ease)}
nav.main a:hover::after{right:0}
nav.main a[aria-current]::after{right:0; background:var(--ink)}
.utils{display:flex; align-items:center; gap:16px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; white-space:nowrap}
.lang{display:inline-flex; gap:1px}
.lang a{padding:5px 7px; font-size:10px; letter-spacing:.16em; color:var(--ink-3)}
.lang a[aria-current]{color:var(--ink); border-bottom:1px solid var(--brand)}
.cart{background:transparent; color:var(--ink); -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ink); padding:9px 15px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; transition:background .25s var(--ease), color .25s var(--ease)}
.cart:hover{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
@media(max-width:980px){
  header.site .wrap{flex-wrap:wrap; row-gap:14px; padding-block:15px}
  nav.main{order:3; width:100%; margin:0; flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap}
  .utils{margin-left:auto}
  .utils .tel{display:none}
}

/* ── promise strip: hairline, not a coloured band ───── */
/* The promise strip is the brand band: one fixed red in both themes, because a
   theme-flipped accent would go pale here exactly the way the footer once did. */
.promise{background:var(--band-red); color:var(--band-ink)}
.promise .wrap{display:flex; gap:10px 40px; flex-wrap:wrap; justify-content:center; padding-block:13px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase}
.promise span{display:inline-flex; align-items:center; gap:9px}
.promise .dot{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none;opacity:.7}

/* ── buttons ────────────────────────────────────────── */
.btn{background:transparent; color:inherit; -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-ui);
  font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:17px 30px;
  border:1px solid transparent; cursor:pointer; border-radius:var(--r);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.btn-primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-deep); border-color:var(--brand-deep)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--brand); background:var(--brand); color:var(--brand-ink)}
.btn-block{width:100%}

/* ── chips ──────────────────────────────────────────── */
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; padding:6px 0; line-height:1.3}
.chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.chip.go{color:var(--signal)}
.chip.tight{color:var(--warn)}
.chip.no{color:var(--brand)}
.chip.plain{color:var(--ink-3)}
.chip.sale{background:var(--brand); color:var(--brand-ink); padding:6px 10px; letter-spacing:.12em}
.chip.boxed{padding:7px 11px}
.chip.boxed.go{background:var(--signal-soft)}
.chip.boxed.tight{background:var(--warn-soft)}
.chip.boxed.no{background:var(--brand-soft)}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative; border-bottom:1px solid var(--line); background:var(--paper)}
.hero-grid{display:grid; grid-template-columns:1fr}
@media(min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} }
.hero-copy{padding:clamp(40px,7vw,110px) var(--pad); display:flex; flex-direction:column; justify-content:center; gap:26px}
@media(min-width:1000px){ .hero-copy{padding-right:clamp(30px,4vw,70px)} }
.hero-copy h1{font-size:clamp(40px,5.6vw,74px); font-weight:400; letter-spacing:-.032em; line-height:.98;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.hero-copy h1 em{font-style:italic; color:var(--brand); font-variation-settings:"opsz" 144,"WONK" 1}
.hero-copy p{margin:0; font-size:clamp(16px,1.35vw,18px); color:var(--ink-2); max-width:40ch; line-height:1.6}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.hero-shot{position:relative; min-height:clamp(300px,52vw,660px); background:var(--sunk); overflow:hidden}
.hero-shot img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.hero-tag{position:absolute; left:24px; bottom:24px; background:var(--surface); padding:16px 20px; box-shadow:var(--lift); max-width:min(340px,74%)}
.hero-tag .n{font-family:var(--f-display); font-size:17px; letter-spacing:-.02em; line-height:1.2}
.hero-tag .m{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:7px}

/* ── sections ───────────────────────────────────────── */
section.band{padding:clamp(56px,8.5vw,124px) 0; border-bottom:1px solid var(--line)}
.band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:clamp(28px,3.6vw,52px)}
.band-head h2{font-size:clamp(28px,3.6vw,46px); font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0}
.band-head h2 em{font-style:italic; color:var(--brand)}
.band-head p{margin:14px 0 0; color:var(--ink-2); font-size:16px; max-width:52ch}
.more{font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; padding-bottom:5px; border-bottom:1px solid var(--brand)}

/* ── product grid ───────────────────────────────────── */
.grid{display:grid; gap:var(--gut) clamp(14px,1.8vw,26px); grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
/* The filter hides cards with the `hidden` attribute. An author display
   (.pc{display:flex}) OVERRIDES the UA's [hidden]{display:none} — so the
   filters counted correctly while hiding nothing. Never again. */
.pc[hidden],.ic[hidden]{display:none!important}
.pc{display:flex; flex-direction:column; background:transparent; border-radius:var(--r)}
.pc-shot{position:relative; aspect-ratio:7/5; background:var(--sunk); overflow:hidden}
/* a piece shot portrait is shown whole rather than cropped to a ratio it was
   never shot for */
.pc-shot.is-contain{background:#FFFFFF}
.pc-shot.is-contain img{object-fit:contain}
.pc-shot img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease)}
.pc:hover .pc-shot img{transform:scale(1.045)}
.pc-name{transition:color .2s var(--ease)}
.pc:hover .pc-name{color:var(--brand)}
.pc-flags{position:absolute; top:0; left:0; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2}
.pc-body{padding:16px 2px 4px; display:flex; flex-direction:column; gap:8px; flex:1}
.pc-sub{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.pc-name{font-family:var(--f-display); font-size:19px; letter-spacing:-.017em; line-height:1.2;
  font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0}
.pc-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.pc-price .now{font-family:var(--f-ui); font-size:16px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--brand)}
.pc-price .now.is-sale{color:var(--brand)}
.pc-price .was{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); text-decoration:line-through}
.pc-mo{font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; color:var(--ink-3); text-transform:uppercase}
.pc-sw{display:flex; gap:5px}
.pc-sw i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); display:block}

/* ── room tiles ─────────────────────────────────────── */
.rooms{display:grid; gap:clamp(14px,1.8vw,26px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.room{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--sunk)}
.room img{width:100%;height:100%;object-fit:cover; transition:transform .9s var(--ease)}
.room:hover img{transform:scale(1.05)}
.room-t{position:absolute; inset:auto 0 0 0; padding:60px 22px 22px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(12,10,8,.78))}
.room-t b{display:block; font-family:var(--f-display); font-size:26px; font-weight:400; letter-spacing:-.02em;
  border-top:2px solid var(--band-red); padding-top:10px; margin-top:4px;
  font-variation-settings:"opsz" 48}
.room-t span{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.78}

/* ── listing ────────────────────────────────────────── */
.listing{display:grid; grid-template-columns:1fr; gap:clamp(24px,3.4vw,56px); padding-block:clamp(28px,4vw,56px)}
@media(min-width:1040px){ .listing{grid-template-columns:230px minmax(0,1fr)} }
.facets{display:flex; flex-direction:column; gap:30px; align-self:start}
@media(min-width:1040px){ .facets{position:sticky; top:104px; max-height:calc(100vh - 130px); overflow-y:auto; padding-right:8px} }
.facet{border:0; margin:0; padding:0; min-width:0}
.facet legend{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
  font-weight:400; padding:0 0 11px; margin-bottom:13px; width:100%; border-bottom:1px solid var(--line)}
.facet label{display:flex; align-items:center; gap:11px; padding:6px 0; font-size:14px; cursor:pointer; color:var(--ink-2);
  transition:color .2s var(--ease)}
.facet label:hover{color:var(--ink)}
.facet input{accent-color:var(--brand); width:14px;height:14px; flex:none}
.facet .n{margin-left:auto; font-family:var(--f-mono); font-size:10px; color:var(--ink-3)}
.facet .sw{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); flex:none}
.facet-bar{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:clamp(20px,2.6vw,34px)}
.count{font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
select.sort{font-family:var(--f-ui); font-size:13px; font-weight:500; padding:10px 13px; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--field); color:var(--ink)}
.clearf{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brand);
  background:none; border:0; cursor:pointer; padding:0}
.facet-toggle{display:none}
@media(max-width:1039px){
  .facet-toggle{display:inline-flex}
  .facets{display:none; border:1px solid var(--line); padding:24px; background:var(--surface)}
  .facets.open{display:flex}
}

/* ── PDP ────────────────────────────────────────────── */
/* The buy column leads the DOM so the <h1> is the page's first heading; grid
   placement puts it back on the right, and `order` keeps the gallery first on
   a phone. */
.pdp{display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,64px); padding-block:clamp(20px,3vw,40px)}
.pdp > .media{order:1}
.pdp > .buy{order:2}
@media(min-width:1000px){
  .pdp{grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr)}
  .pdp > .media{grid-column:1; grid-row:1; order:0}
  .pdp > .buy{grid-column:2; grid-row:1; order:0}
}
.gal{display:grid; gap:10px; grid-template-columns:1fr}
.gal-main{aspect-ratio:7/5; background:var(--sunk); overflow:hidden}
.gal-main.is-contain{background:#FFFFFF}
.gal-main.is-contain img{object-fit:contain}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px}
.gal-thumbs button{padding:0; border:0; background:var(--sunk); overflow:hidden; aspect-ratio:1/1; cursor:pointer;
  opacity:.55; transition:opacity .3s var(--ease)}
.gal-thumbs button:hover{opacity:.85}
.gal-thumbs button[aria-current]{opacity:1; box-shadow:inset 0 -2px 0 var(--brand)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.buy{display:flex; flex-direction:column; gap:22px; align-self:start}
@media(min-width:1000px){ .buy{position:sticky; top:108px} }
.crumbs{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding-block:18px}
.crumbs a:hover{color:var(--brand)}
.buy h1{font-size:clamp(30px,3.5vw,44px); font-weight:400; font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.buy .sub{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.priceline{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.priceline .now{font-family:var(--f-ui); font-size:27px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--brand)}
.priceline .was{font-family:var(--f-mono); font-size:13px; color:var(--ink-3); text-decoration:line-through}
.fin{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-2)}
.fin a{border-bottom:1px solid var(--brand)}
.opts{display:flex; flex-direction:column; gap:11px}
.opts .lbl{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}
.opts .row{display:flex; flex-wrap:wrap; gap:8px}
.opt{font-family:var(--f-ui); font-weight:500; font-size:12.5px; padding:10px 15px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink-2); cursor:pointer; border-radius:var(--r);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease)}
.opt:hover{border-color:var(--ink-3)}
.opt[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.box{border:1px solid var(--line); background:var(--surface); padding:22px}
.box h3{font-size:19px; margin-bottom:14px; font-variation-settings:"opsz" 30}
.box p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.6}
.fitrow{display:flex; flex-direction:column; gap:16px}
.fitout{border-top:1px solid var(--line); padding-top:15px; display:flex; flex-direction:column; gap:10px}
.specs{width:100%; border-collapse:collapse; font-size:14px}
.specs td{padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top}
.specs td:first-child{color:var(--ink-3); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em;
  width:42%; text-transform:uppercase; padding-top:14px}
.desc{font-size:16px; line-height:1.75; color:var(--ink-2); max-width:62ch}
.desc h3{color:var(--ink); margin:38px 0 14px; font-size:23px; font-variation-settings:"opsz" 40}
.desc ul{padding-left:1.05em; margin:0 0 18px; list-style:none}
.desc li{margin-bottom:8px; position:relative; padding-left:4px}
.desc li::before{content:""; position:absolute; left:-14px; top:.72em; width:5px; height:1px; background:var(--brand)}
.desc p{margin:0 0 15px}

/* ── reviews ────────────────────────────────────────── */
.revs{display:grid; gap:clamp(14px,1.8vw,26px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rev{background:var(--surface); padding:32px 28px; display:flex; flex-direction:column; gap:16px}
.stars{color:var(--brand); font-size:12px; letter-spacing:.3em}
.rev p{margin:0; font-family:var(--f-display); font-size:19px; line-height:1.45; color:var(--ink); letter-spacing:-.012em;
  font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 0}
.rev cite{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-style:normal; margin-top:auto}

/* ── store ──────────────────────────────────────────── */
.store{display:grid; gap:clamp(22px,3.4vw,60px); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .store{grid-template-columns:1.05fr .95fr} }
.store-shot{aspect-ratio:4/3; overflow:hidden; background:var(--sunk)}
.store-shot img{width:100%;height:100%;object-fit:cover}
.hours{width:100%; border-collapse:collapse; font-size:14px; margin:22px 0 26px; max-width:330px}
.hours td{padding:9px 0; border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-2)}

/* ── prose ──────────────────────────────────────────── */
.prose{max-width:66ch; padding-block:clamp(34px,5vw,80px)}
.prose h1{font-size:clamp(34px,5vw,58px); font-weight:400; letter-spacing:-.028em; margin-bottom:24px;
  border-top:3px solid var(--brand); padding-top:22px;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.prose h2{font-size:clamp(22px,2.6vw,30px); margin:48px 0 16px; font-variation-settings:"opsz" 48}
.prose p,.prose li{color:var(--ink-2); font-size:16.5px; line-height:1.75}
.prose ul{padding-left:1.05em; list-style:none}
.prose li{margin-bottom:9px; position:relative}
.prose li::before{content:""; position:absolute; left:-14px; top:.75em; width:5px; height:1px; background:var(--brand)}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--brand); border-bottom:1px solid currentColor}
.callout{border-left:1px solid var(--brand); padding:4px 0 4px 24px; margin:32px 0}
.callout p{font-family:var(--f-display); font-size:18px; line-height:1.5; color:var(--ink); font-variation-settings:"opsz" 24}

/* ── footer ─────────────────────────────────────────── */
footer.site{background:var(--footer-bg); color:var(--footer-ink);
  border-top:3px solid var(--band-red); padding:clamp(52px,7vw,96px) 0 34px}
footer.site .cols{display:grid; gap:36px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:44px; border-bottom:1px solid var(--footer-line)}
footer.site .fh{border-top:2px solid var(--brand); padding-top:14px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--footer-dim); font-weight:400; margin:0 0 18px; line-height:1.4}
footer.site a{display:block; padding:6px 0; font-size:14.5px; color:var(--footer-ink); transition:color .25s var(--ease)}
footer.site a:hover{color:#fff}
footer.site .fine{display:flex; gap:12px 30px; flex-wrap:wrap; justify-content:space-between; padding-top:26px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--footer-dim)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:14px; z-index:99; background:var(--paper); color:var(--ink); padding:12px 16px}


/* ── scroll hero ─────────────────────────────────────
   Three rooms pinned for the length of the section. Without JS the section is
   an ordinary full-bleed hero showing the first room — the tall scroll and the
   crossfade are added by script, never assumed by the markup. */
.shero{position:relative; border-bottom:1px solid var(--line)}
.shero-stage{position:relative; height:min(86vh,760px); overflow:hidden; background:var(--sunk)}
.shero[data-scroll]{height:280vh}
.shero[data-scroll] .shero-stage{position:sticky; top:0; height:100vh}
.shero-slides{position:absolute; inset:0}
.shero-slide{position:absolute; inset:0; margin:0; opacity:0; will-change:opacity,transform}
.shero-slide:first-child{opacity:1}
.shero-slide img{width:100%; height:100%; object-fit:cover}
.shero-veil{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(270deg,var(--scrim-1) 0%,var(--scrim-2) 9%,transparent 22%),
    linear-gradient(100deg,var(--scrim-1) 0%,var(--scrim-1) 26%,var(--scrim-2) 46%,transparent 72%)}
@media(max-width:860px){
  .shero-veil{background:linear-gradient(180deg,var(--scrim-1) 0%,var(--scrim-2) 34%,transparent 58%,var(--scrim-2) 84%,var(--scrim-1) 100%)}
}
.shero-inner{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--wrap); margin-inline:auto; padding:clamp(28px,5vw,72px) var(--pad); gap:24px}
.shero-inner h1{font-size:clamp(38px,5.4vw,76px); font-weight:400; letter-spacing:-.032em; line-height:.98; max-width:14ch;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.shero-inner h1 em{font-style:italic; color:var(--brand); font-variation-settings:"opsz" 144,"WONK" 1}
.shero-lede{margin:0; font-size:clamp(15px,1.3vw,17.5px); color:var(--ink-2); max-width:38ch; line-height:1.6}

/* the caption that changes with the room */
.shero-caps{position:relative; height:5.4em; margin-top:6px}
/* Text cannot cross-fade over text the way photographs can — the outgoing
   caption leaves first, the incoming one waits for it. */
.shero-cap{position:absolute; inset:0; opacity:0; display:flex; flex-direction:column; gap:7px;
  transition:opacity .16s var(--ease)}
.shero-caps:not([data-js]) .shero-cap:first-child{opacity:1}
.shero-cap[data-on]{opacity:1; transition:opacity .3s var(--ease) .17s}
.shero-cap .rn{font-family:var(--f-display); font-size:clamp(21px,2.2vw,28px); letter-spacing:-.022em;
  font-variation-settings:"opsz" 40}
.shero-cap .rc{font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.shero-cap .rl{font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--brand); padding-bottom:4px; align-self:flex-start}

/* the rail — also the navigation */
.shero-rail{position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:20px; z-index:3}
.shero-rail a{display:flex; align-items:center; gap:12px; justify-content:flex-end; white-space:nowrap;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.shero-rail a .bar{width:26px; height:1px; background:currentColor; opacity:.45; transition:width .4s var(--ease), opacity .4s var(--ease)}
.shero-rail a[aria-current]{color:var(--ink)}
.shero-rail a[aria-current] .bar{width:46px; opacity:1; background:var(--brand)}
.shero-rail a:hover .bar{opacity:.9}
@media(max-width:860px){ .shero-rail{display:none} }

.shero-scrollcue{position:absolute; left:var(--pad); bottom:26px; display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.shero-scrollcue .ln{width:44px; height:1px; background:currentColor; opacity:.5}
@media(prefers-reduced-motion:reduce){
  .shero[data-scroll]{height:auto}
  .shero[data-scroll] .shero-stage{position:relative; height:min(86vh,760px)}
  .shero-slide{opacity:0}
  .shero-slide:first-child{opacity:1}
  .shero-scrollcue{display:none}
}

/* ── buy now, pay later ──────────────────────────────
   Provider names are set as type, deliberately. Klarna, Afterpay and Affirm
   each publish a brand kit with mandatory logo, clear-space and colour rules;
   swap the official assets in here rather than approximating their marks. */
.bnpl{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:15px 0; display:flex; flex-direction:column; gap:11px}
.bnpl-row{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; line-height:1.4}
.bnpl-amt{font-family:var(--f-ui); font-size:15px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--brand)}
.bnpl-txt{font-family:var(--f-ui); font-size:13.5px; color:var(--ink-2)}
.bnpl-marks{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-left:auto; white-space:nowrap}
.bnpl-more{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--brand); padding-bottom:3px; align-self:flex-start}
@media(max-width:420px){ .bnpl-marks{margin-left:0; width:100%} }

/* footer payment row */
.paybar{display:flex; align-items:center; gap:9px 12px; flex-wrap:wrap; padding:22px 0 0}
.paybar-h{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--footer-dim); margin-right:6px}
.paymark{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--footer-ink);
  border:1px solid var(--footer-line); padding:6px 10px; border-radius:2px; white-space:nowrap}

/* comparison table on the financing page */
.paytable{width:100%; border-collapse:collapse; margin:22px 0 26px; font-size:15px}
.paytable th{text-align:left; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:0 14px 10px 0; border-bottom:1px solid var(--line-2)}
.paytable td{padding:13px 14px 13px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
.paytable td:first-child{color:var(--ink); white-space:nowrap}
.prose .fineprint{font-size:13.5px; color:var(--ink-3); line-height:1.6}

/* ── opening splash ──────────────────────────────────
   The mark draws itself, the name arrives, the panel lifts. Runs once per
   session; a pre-paint script in <head> adds .intro-skip before first paint so
   a repeat visitor never sees a flash of it. */
.splash{position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:#14120F}
.intro-skip .splash{display:none}
html:not(.intro-skip) body:has(.splash:not(.done)){overflow:hidden}
.splash-badge{width:min(70vw,520px); display:flex; flex-direction:column; align-items:center; gap:20px}
.splash-lockup{display:flex; align-items:center; gap:clamp(10px,2.2vw,22px); width:100%}
.splash-mark{width:34%; height:auto; flex:none}
.splash-word{width:62%; height:auto; flex:none}
.splash-rule{display:block; width:100%; height:2px; background:var(--brand); transform-origin:left center}
.splash-sub{font-family:var(--f-mono); font-size:10px; letter-spacing:.3em; color:rgba(255,255,255,.55)}

@media (prefers-reduced-motion:no-preference){
  .splash{animation:splash-leave .8s cubic-bezier(.7,0,.3,1) 2.7s forwards}
  .splash.hold{animation:none}                 /* #introhold: freeze for review */
  @keyframes splash-leave{ to{ translate:0 -101%; } }

  /* 1 · the circular mark opens out of its own centre */
  .splash-mark{clip-path:circle(0% at 50% 50%); opacity:0;
    animation:mark-open .95s cubic-bezier(.2,.75,.3,1) .2s both}
  @keyframes mark-open{
    from{ clip-path:circle(0% at 50% 50%); opacity:0; scale:.9 }
    60% { opacity:1 }
    to  { clip-path:circle(75% at 50% 50%); opacity:1; scale:1 }
  }

  /* 2 · the wordmark wipes in beside it, left to right */
  .splash-word{clip-path:inset(0 100% 0 0);
    animation:word-wipe .8s cubic-bezier(.25,.7,.25,1) .85s both}
  @keyframes word-wipe{ to{ clip-path:inset(0 0 0 0) } }

  /* 3 · a red rule draws under the lockup, then the line arrives */
  .splash-rule{scale:0 1; animation:rule-sweep .65s cubic-bezier(.2,.7,.3,1) 1.5s forwards}
  @keyframes rule-sweep{ to{ scale:1 1 } }
  .splash-sub{opacity:0; animation:splash-rise .5s var(--ease) 1.85s both}
  @keyframes splash-rise{ from{ opacity:0; translate:0 10px } to{ opacity:1; translate:0 0 } }
}
@media (prefers-reduced-motion:reduce){ .splash{display:none} }

/* ── supplier catalogue ───────────────────────────
   Photo and code only — deliberately not dressed up as a product page,
   because there is no price, dimension or description behind it yet. */
.cat-bar{display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; justify-content:space-between;
  padding:20px 0 18px; border-bottom:1px solid var(--line); margin-bottom:clamp(18px,2.4vw,30px)}
.cat-bar .opts .row{gap:7px}
.cat-bar .opt .n{font-family:var(--f-mono); font-size:10px; color:var(--ink-3); margin-left:5px}
.cat-bar .opt[aria-pressed="true"] .n{color:var(--brand-ink); opacity:.75}
.cat-search{font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; padding:10px 13px;
  border:1px solid var(--line-2); background:var(--field); color:var(--ink); border-radius:var(--r); min-width:210px}
.cat-grid{display:grid; gap:clamp(12px,1.6vw,22px); grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ic{display:flex; flex-direction:column; gap:9px}
/* supplier shoot their catalogue on white, so the tile is white in both themes —
   letterboxing a white cutout against a dark ground looks like a loading error. */
.ic-shot{aspect-ratio:1/1; background:#FFFFFF; overflow:hidden; border:1px solid var(--line)}
.ic-shot img{width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease)}
.ic:hover .ic-shot img{transform:scale(1.04)}
.ic-code{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.09em; color:var(--ink)}
.ic-ask{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand)}
.ic-price{font-family:var(--f-ui); font-size:14px; font-weight:600; color:var(--brand); font-variant-numeric:tabular-nums}

/* A piece with no photograph of its own says so, rather than implying the
   whole set is what is for sale. */
.setshot{position:absolute; left:0; bottom:0; z-index:2; background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; padding:5px 9px}
.setshot-note{margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2);
  border-left:2px solid var(--brand); padding-left:12px}

/* mobile filter drawer: feedback the thumb can see */
.facet-apply{display:none}
@media(max-width:1039px){
  .facet-apply{display:flex; position:sticky; bottom:8px; width:100%; margin-top:6px}
  .facet-toggle.is-active{border-color:var(--brand); color:var(--brand)}
}

/* ── cart drawer ─────────────────────────────────────────────────
   The veil, foot and empty-state toggle via [hidden]; the author display
   below would defeat the UA rule, so the guard is explicit — same lesson
   as .pc[hidden]. */
.cart-veil[hidden],.cart-foot[hidden],.cart-empty[hidden]{display:none!important}
.cart-veil{position:fixed;inset:0;z-index:150;background:rgba(12,8,6,.52);backdrop-filter:blur(2px)}
.cart-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(430px,100vw);z-index:160;
  display:flex;flex-direction:column;background:var(--surface);color:var(--ink);
  box-shadow:-18px 0 50px rgba(0,0,0,.28);transform:translateX(103%);visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.8,.24,1),visibility 0s .32s}
.cart-drawer.open{transform:none;visibility:visible;
  transition:transform .32s cubic-bezier(.22,.8,.24,1)}
.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.cart-head h2{margin:0;font-size:21px}
.cart-x{background:transparent;color:var(--ink);border:0;font-size:26px;line-height:1;
  cursor:pointer;padding:2px 8px}
.cart-items{flex:1;overflow-y:auto;padding:4px 22px}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--line)}
.ci-shot img{display:block;width:64px;height:64px;object-fit:cover;border-radius:3px;
  background:var(--paper)}
.ci-name{display:block;font-weight:600;font-size:13.5px;line-height:1.35;
  color:var(--ink);text-decoration:none}
.ci-name:hover{text-decoration:underline}
.ci-opts{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3);margin-top:3px}
.ci-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.ci-qty{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);
  border-radius:3px;padding:2px 7px}
.ci-qty button{background:transparent;color:var(--ink);border:0;font-size:15px;
  line-height:1;cursor:pointer;padding:2px 4px}
.ci-qty b{font-size:12.5px;min-width:1em;text-align:center}
.ci-price{font-size:13.5px;white-space:nowrap}
.ci-x{background:transparent;color:var(--ink-3);border:0;font-size:17px;line-height:1;
  cursor:pointer;padding:0 2px}
.ci-x:hover{color:var(--ink)}
.cart-empty{padding:34px 22px;display:flex;flex-direction:column;gap:16px;
  align-items:flex-start}
.cart-empty p{margin:0;color:var(--ink-2)}
.cart-foot{padding:16px 22px 20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px}
.cart-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.cart-sub b{font-size:16.5px}
.cart-note{margin:0;font-family:var(--f-mono);font-size:10.5px;line-height:1.55;
  color:var(--ink-3)}
.cart-lock{overflow:hidden}

/* post-payment page */
.merci{padding:72px 0 96px;max-width:640px;display:flex;flex-direction:column;
  gap:18px;align-items:flex-start}
.merci h1{margin:0}