/* ---- baffle (Baffle — Acoustic treatment & studio fit-out 134) -------------
   THE STRUCTURAL MOVE: the category strip stops being a small contained row and
   becomes the page's centre of gravity — a full-bleed, near-gapless wall of six
   portrait photographs, three across and two down on a 3px gutter, each with a
   small letterspaced caption set in type UNDER the tile rather than laid over
   it. Everything else is a contained oat block sitting in air around that wall,
   and the priced grid lands LAST — after two prose blocks and a charcoal bleed
   — so the rand figures are the closing argument rather than a mid-page aside.
   Tape-box oat for the contained blocks, control-room charcoal for the furniture
   and the band, and one record-light red spent exactly three times: the hero
   button, the banner link, and the middle tile of the price grid. The brand
   colour is charcoal on purpose, so nothing else on the page can go red. ---- */
body.t-baffle {
  background: #ede7db;
  color: #2a2620;
  --bf-red: #d6301f;
  --bg-flat: #ede7db;
  --surface: #ede7db;
  --surface-2: #e3dbca;
  --line: #d3c9b6;
  --line-strong: #b6ab96;
  --heading: #14120f;
  --text: #2a2620;
  --muted: #6d6559;
  --header-bg: #14120f;
  --radius: 0;
  --shadow: none;
}

/* the bar and the footer are the only charcoal furniture above the band, and
   the wordmark sits centred on its own line with the four links ranged small
   and letterspaced underneath it */
body.t-baffle .sf-header, body.t-baffle .sf-head,
body.t-baffle .sf-footer, body.t-baffle .sf-foot { background: #14120f; border-color: #332e26; }
/* header stays one row, brand hard left — house rule; the theme keeps its
   own type, colour and rhythm, it just does not restack or centre the name */
body.t-baffle .sf-header .container { gap: 11px; padding-top: 18px; padding-bottom: 16px; }
body.t-baffle .sf-name, body.t-baffle .sf-navlink, body.t-baffle .sf-cart,
body.t-baffle .sf-footer, body.t-baffle .sf-footer a, body.t-baffle .theme-toggle { color: #ede7db; }
body.t-baffle .sf-name, body.t-baffle .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; font-weight: 700; }
/* flat charcoal slabs — no ring, no radius. Red is rationed, never the default */
body.t-baffle .btn.brand { background: #14120f; border-color: #14120f; color: #ede7db; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 15px 30px; }

/* the fold cuts through a photograph: two slides cross-fading, the copy held
   left and LOW in the frame so the upper two thirds stay picture */
body.t-baffle .sc-hero { min-height: 100vh; align-items: flex-end; padding: 120px clamp(20px, 7vw, 96px) clamp(70px, 12vh, 128px); }
body.t-baffle .sc-hero h1 { font-weight: 700; font-size: clamp(34px, 6vw, 72px); line-height: 1.02; max-width: 14ch; }
body.t-baffle .sc-hero p { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11.5px; font-weight: 600; }
/* RED 1 of 3 */
body.t-baffle .sc-hero .btn.brand { background: var(--bf-red); border-color: var(--bf-red); color: #fff; }

/* THE WALL — full bleed, 3px gutter, portrait crops, caption in type under each */
body.t-baffle .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0 0 30px; }
body.t-baffle .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
body.t-baffle .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; background: #14120f; }
body.t-baffle .sc-strip-label { margin-top: 10px; padding: 0 12px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }

/* the credit list — eight names set as type on the narrowest measure on the page */
body.t-baffle .sc-richtext { max-width: 620px; padding: 96px 20px 82px; }
body.t-baffle .sc-richtext p { font-size: 15px; line-height: 2.1; color: #3a352d; }

/* the range: the checkerboard collapses to one full-width feature row per
   panel, pulled out one at a time, each flat-lay floating on plain white */
body.t-baffle .sc-show-grid { grid-template-columns: 1fr; }
body.t-baffle .sc-show-item, body.t-baffle .sc-show-item:nth-child(4n + 2), body.t-baffle .sc-show-item:nth-child(4n + 3) { background: transparent; border-top: 1px solid var(--line); }
body.t-baffle .sc-show-inner { min-height: 0; padding: 52px 20px 56px; }
body.t-baffle .sc-show-media, body.t-baffle .sc-buy-media { background: #ffffff; flex: none; }
body.t-baffle .sc-show-media { width: 100%; max-width: 520px; margin: 0 auto; padding: 30px 0; }
body.t-baffle .sc-show-media img, body.t-baffle .sc-buy-media img { max-width: 66%; max-height: 240px; object-fit: contain; }
body.t-baffle .sc-show-cat, body.t-baffle .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; font-weight: 600; }

/* the charcoal band where the reference puts its video plate */
body.t-baffle .sc-banner { min-height: 52vh; display: flex; align-items: center; background-color: #14120f; margin: 0 calc(50% - 50vw); padding: 88px 8vw; }
/* RED 2 of 3 */
body.t-baffle .sc-banner .btn.brand { background: var(--bf-red); border-color: var(--bf-red); color: #fff; }

/* prices land LAST — three across, two rows that fill, with air above them */
body.t-baffle .sc-buygrid { padding: 78px 20px 92px; }
body.t-baffle .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 30px; }
body.t-baffle .sc-buy-media { padding: 18px 0; }
/* RED 3 of 3 — the middle tile of the top row, the way the reference raises the
   middle one of its three price cards. Nothing else on the page is red. */
body.t-baffle .sc-buy-card:nth-child(2) { border-top: 3px solid var(--bf-red); padding-top: 16px; }
body.t-baffle .sc-buy-card:nth-child(2) .sc-buy-p { color: var(--bf-red); font-weight: 700; }

@media (max-width: 900px) {
  body.t-baffle .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body.t-baffle .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the oat ground and the charcoal swap places: the page becomes the
   control room and the oat is kept for type, for the buttons and for the white
   plates the flat-lays sit on. The red lifts two stops to survive the dark. */
html[data-theme="dark"] body.t-baffle {
  background: #14120f;
  color: #b9b2a5;
  --bf-red: #e8513c;
  --bg-flat: #14120f;
  --surface: #14120f;
  --surface-2: #1d1a15;
  --line: #2e2921;
  --line-strong: #453e33;
  --heading: #f0ebe1;
  --text: #b9b2a5;
  --muted: #8a8175;
  --header-bg: #0c0a08;
}
html[data-theme="dark"] body.t-baffle .sf-header, html[data-theme="dark"] body.t-baffle .sf-head,
html[data-theme="dark"] body.t-baffle .sf-footer, html[data-theme="dark"] body.t-baffle .sf-foot { background: #0c0a08; border-color: #2e2921; }
html[data-theme="dark"] body.t-baffle .btn.brand { background: #ede7db; border-color: #ede7db; color: #14120f; }
html[data-theme="dark"] body.t-baffle .sc-hero .btn.brand, html[data-theme="dark"] body.t-baffle .sc-banner .btn.brand { background: var(--bf-red); border-color: var(--bf-red); color: #fff; }
html[data-theme="dark"] body.t-baffle .sc-show-media, html[data-theme="dark"] body.t-baffle .sc-buy-media { background: #f2eee6; }
html[data-theme="dark"] body.t-baffle .sc-banner { background-color: #0c0a08; }
html[data-theme="dark"] body.t-baffle .sc-richtext p { color: #b9b2a5; }