/* ---- baize (Baize — Card room & table games supply 185) --------------------
   THE STRUCTURAL MOVE: THE PASSE-PARTOUT. A constant bone margin is painted
   over all four viewport edges as a FIXED overlay, so the frame never scrolls
   away and even the page's one interior bleed stops short of the screen — the
   storefront reads as a lit mount around a dark picture. The bar is pinned
   inside the frame (wordmark LEFT, links right), the stage fills what the frame
   and the bar leave, and the single brass note on the page is the hairline over
   each strip label. Nothing else in the gallery wears a frame. */
body.t-baize {
  background: #efece3;
  color: #22201c;
  --bz-frame: 18px;
  --bz-mount: #efece3;
  --bz-felt: #245c3f;
  --bz-brass: #b08b45;
  --bz-dark: #16150f;
  --radius: 0;
  --shadow: none;
  --header-bg: #efece3;
  --surface: #e8e4d9;
  --surface-2: #ded9ca;
  --line: #d5cfbf;
  --line-strong: #bcb4a0;
  --heading: #15140f;
  --text: #22201c;
  --muted: #6d675b;
}

/* THE FRAME ITSELF — fixed, above the sticky bar, pointer-transparent, and it
   is what clips the bleed rather than any margin on the section. */
body.t-baize::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  border: var(--bz-frame) solid var(--bz-mount);
}

/* the contained spine, widened to the reference's 1300 and stepped in off the frame */
body.t-baize .container { max-width: 1300px; padding-left: 40px; padding-right: 40px; }

/* flat bar and foot — nothing blurs, nothing floats, and the bar is pinned
   INSIDE the frame instead of against the viewport edge */
body.t-baize .sf-head, body.t-baize .sf-header,
body.t-baize .sf-foot, body.t-baize .sf-footer, body.t-baize .sf-cats {
  background: #efece3; border-color: #d5cfbf;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-baize .sf-header { top: var(--bz-frame); border-bottom: 0; }
/* wordmark LEFT and wide-tracked — never centred, never stacked over the links */
body.t-baize .sf-name { text-transform: uppercase; letter-spacing: 0.26em; font-size: 15px; font-weight: 700; }
body.t-baize .btn.brand { background: var(--bz-felt); border: 0; box-shadow: none; color: #f2efe6; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 34px; }

/* THE STAGE — three slides, copy centred, filling what the frame and bar leave */
body.t-baize .sc-hero { min-height: calc(100vh - 92px); padding: 96px 40px; }
body.t-baize .sc-hero h1, body.t-baize .sc-banner h2 { text-transform: uppercase; letter-spacing: 0.11em; font-weight: 800; font-size: clamp(25px, 4.4vw, 56px); line-height: 1.12; }
body.t-baize .sc-hero p { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; font-weight: 600; }
body.t-baize .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: clamp(12px, 1.4vw, 15px); }

/* THE FOUR-UP — the only place on the page where a picture and words share a
   tile. Gapped, contained, and a brass hairline drawn over every label. */
body.t-baize .sc-strip { padding-top: 78px; padding-bottom: 14px; }
body.t-baize .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
body.t-baize .sc-strip-img { aspect-ratio: 4 / 3; border: 0; }
body.t-baize .sc-strip-label { margin-top: 16px; padding-top: 13px; border-top: 2px solid var(--bz-brass); text-align: left; text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; font-weight: 700; color: var(--heading); }

/* THE FIGURES BAND — photograph-free, flat bone, and the reference's row of
   oversized numerals collapsed onto the paragraph's first line. Only the centred
   richtext carries .sc-richtext (the split one renders as .sc-about-split), so
   the two are told apart by class and never by element position. */
body.t-baize .sc-richtext { max-width: 880px; padding-top: 104px; padding-bottom: 88px; }
body.t-baize .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.9; }
body.t-baize .sc-richtext p::first-line { color: var(--bz-felt); font-weight: 700; font-size: clamp(17px, 2vw, 25px); letter-spacing: 0.01em; }

/* THE ONE BLEED — edge to edge, and the frame still cuts it short of the screen */
body.t-baize .sc-banner { margin: 8px calc(50% - 50vw) 0; min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 90px 40px; }

/* THE WALL — eight tiles, four across, two rows that fill; the cards give up
   their boxes so the flat-lays sit straight on the bone */
body.t-baize .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 26px; padding: 20px 0 78px; }
body.t-baize .product-card { background: transparent; border: 0; }
body.t-baize .product-card .meta { padding: 14px 2px 0; }
body.t-baize .product-card .p { color: var(--bz-felt); font-weight: 700; }

/* the 50/50, the last thing before the dark band — gapped, no divider rules */
body.t-baize .sc-about-split { gap: 60px; padding-top: 8px; padding-bottom: 96px; }

/* the page closes on one painted strip; the form tokens are re-pointed inside it */
body.t-baize .sc-contact-band { background: var(--bz-dark); color: #efece3; margin-top: 24px; padding: 92px 0 100px; --heading: #efece3; --muted: #b6b0a0; --surface: #24221a; --line: #3c3930; }
body.t-baize .sc-contact-band .btn.brand { background: var(--bz-mount); color: #16150f; }

@media (max-width: 1000px) {
  body.t-baize .sc-hero { min-height: 80vh; }
  body.t-baize .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-baize .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body.t-baize { --bz-frame: 10px; }
  body.t-baize .container { padding-left: 22px; padding-right: 22px; }
  /* the figures line stops being oversized rather than wrapping half-oversized */
  body.t-baize .sc-richtext p::first-line { font-size: inherit; }
}

/* NIGHT — the room after the lamps come down. The mount stops being bleached
   card and becomes a dark board, so the frame is still a frame and still never
   scrolls; the felt lifts two steps because #245c3f was picked to hold against
   bone and goes to mud on a near-black ground, so the slab takes dark type at
   night; the brass warms slightly to stay visible as a hairline. */
html[data-theme="dark"] body.t-baize {
  background: #14150f;
  color: #c5c0b2;
  --bz-mount: #1b1c14;
  --bz-felt: #4f9a72;
  --bz-brass: #c9a464;
  --bz-dark: #0c0d08;
  --header-bg: #1b1c14;
  --surface: #1f2018;
  --surface-2: #26281d;
  --line: #33352a;
  --line-strong: #474a3c;
  --heading: #f0ece0;
  --text: #c5c0b2;
  --muted: #8b8676;
}
html[data-theme="dark"] body.t-baize .sf-head, html[data-theme="dark"] body.t-baize .sf-header,
html[data-theme="dark"] body.t-baize .sf-foot, html[data-theme="dark"] body.t-baize .sf-footer,
html[data-theme="dark"] body.t-baize .sf-cats { background: #1b1c14; border-color: #33352a; }
html[data-theme="dark"] body.t-baize .btn.brand { color: #08120c; }
html[data-theme="dark"] body.t-baize .sc-contact-band { --surface: #1c1e15; --line: #3d4032; --muted: #a7a292; }
html[data-theme="dark"] body.t-baize .sc-contact-band .btn.brand { background: #f0ece0; color: #14150f; }