/* ---------- Flake — Custom paint shop & helmet refinishing 196 (store) -------
   THE STRUCTURAL MOVE: THE TYPELESS WALL. The strip renderer caps a single
   strip at six items, so the reference's eight-image gallery is carried by the
   TWO headingless strips at positions two and three. Both give up the
   container, the gutters, the tile borders and their labels, and fuse into one
   edge-to-edge grid — four square photographs across, two rows deep — welded
   to the bottom edge of the full-viewport stage with no gap and not one word
   on it. The page therefore speaks in photographs for two whole screens before
   it speaks in a sentence, and the priced grid is held all the way back to
   sixth. The two walls are reached with :not(:has(.sc-h2)) and never a
   positional selector: the painter row is the only strip carrying a heading,
   so it alone keeps its gutters, its 3:4 portrait crop and its names. */
body.t-flake {
  background: #e6e6e4;
  color: #000000;
  --fl-candy: #8b1f6b;
  --bg-flat: #e6e6e4;
  --surface: #fbfbfa;
  --surface-2: #ededeb;
  --line: #d6d6d3;
  --line-strong: #c2c2be;
  --heading: #000000;
  --text: #000000;
  --muted: #5d5d5a;
  --header-bg: #e6e6e4;
  --radius: 0;
  --shadow: none;
}

/* the bar dissolves into the primer ground — no panel, no rule, no blur, and
   the wordmark stays hard left where the shared header already puts it */
body.t-flake .sf-header, body.t-flake .sf-head,
body.t-flake .sf-footer, body.t-flake .sf-foot, body.t-flake .sf-cats {
  background: #e6e6e4; border-color: #e6e6e4;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-flake .sf-name { font-weight: 800; font-size: 15px; letter-spacing: 0.26em; text-transform: uppercase; }

/* flat candy slabs, no border and no inset shadow */
body.t-flake .btn.brand { background: var(--fl-candy); border: 0; box-shadow: none; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 30px; }
body.t-flake .btn.brand:hover { background: #6c1552; opacity: 1; }

/* headings are stencil marks, not titles — the photographs carry the page */
body.t-flake .sc-h2 { font-size: 12px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #000000; margin-bottom: 26px; }

/* the stage owns the entire first screen; nothing peeks under it */
body.t-flake .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-flake .sc-hero h1 { font-size: clamp(34px, 6.4vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 18px; }

/* THE WALL — both headingless strips, gapless, borderless, wordless */
body.t-flake .sc-strip:not(:has(.sc-h2)) { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-flake .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-flake .sc-strip:not(:has(.sc-h2)) .sc-strip-img { border: 0; }
body.t-flake .sc-strip:not(:has(.sc-h2)) .sc-strip-label { display: none; }

/* the painter row — the one strip with a heading, so gutters and names return */
body.t-flake .sc-strip:has(.sc-h2) { padding: 86px 20px 30px; }
body.t-flake .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-flake .sc-strip:has(.sc-h2) .sc-strip-img { aspect-ratio: 3 / 4; background: #fbfbfa; border-color: #d6d6d3; }
body.t-flake .sc-strip-label { margin-top: 13px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl-candy); }

/* the first words on the page, and the block given the most air of anything */
body.t-flake .sc-richtext { max-width: 560px; padding: 138px 20px 132px; }
body.t-flake .sc-richtext p { font-size: 17px; line-height: 1.95; color: #2b2b29; }

/* four across, twice, so the only priced band on the page never orphans a tile */
body.t-flake .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 22px; }
body.t-flake .sc-contact-split { padding: 74px 20px 88px; border-top: 1px solid #d6d6d3; }

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

/* NIGHT — primer grey drops to shed black and the ink inverts, but the wall
   stays the brightest thing in the page because it has no ground of its own.
   The candy lifts to a hot magenta so the controls still read as the single
   coloured thing against a near-black. */
html[data-theme="dark"] body.t-flake {
  background: #101010;
  color: #ececea;
  --fl-candy: #d94ba0;
  --bg-flat: #101010;
  --surface: #191919;
  --surface-2: #1d1d1d;
  --line: #2b2b2b;
  --line-strong: #3d3d3d;
  --heading: #ffffff;
  --text: #ececea;
  --muted: #8b8b88;
  --header-bg: #101010;
}
html[data-theme="dark"] body.t-flake .sf-header, html[data-theme="dark"] body.t-flake .sf-head,
html[data-theme="dark"] body.t-flake .sf-footer, html[data-theme="dark"] body.t-flake .sf-foot,
html[data-theme="dark"] body.t-flake .sf-cats { background: #101010; border-color: #101010; }
html[data-theme="dark"] body.t-flake .sc-h2 { color: #ffffff; }
html[data-theme="dark"] body.t-flake .sc-richtext p { color: #b6b6b3; }
html[data-theme="dark"] body.t-flake .sc-strip:has(.sc-h2) .sc-strip-img { background: #191919; border-color: #2b2b2b; }
html[data-theme="dark"] body.t-flake .sc-contact-split { border-top-color: #2b2b2b; }