/* ============================== CLEFT ==============================
   THE STRUCTURAL MOVE: the page is wide exactly twice and never again.
   A full-viewport stage opens it, one full-bleed band interrupts it low
   down, and every block caught between the two collapses into a narrow
   centred column of prose — so the dominant impression is a page of text
   punctuated by photographs rather than a picture-led shop. Photographs
   drop straight onto the ink with no frame, no border and no radius,
   which is what makes that one wide band read as a hole cut in the page.
   Ball red is spent three times only: the controls, the rand figure and
   the hairline under each heading. */
body.t-cleft {
  background: #12161c;
  color: #cfc7b8;
  --cl-red: #b4392e;
  --cl-lit: #c9483b;
  --cl-cream: #ece4d6;
  --cl-lift: #171c24;
  --bg-flat: #12161c;
  --header-bg: #12161c;
  --surface: #171c24;
  --surface-2: #1d232c;
  --line: #252c36;
  --line-strong: #38424f;
  --heading: #ece4d6;
  --text: #cfc7b8;
  --muted: #8b8578;
  --radius: 0;
  --shadow: none;
}

/* a flat ink bar the same colour as the page, so the stage begins beneath it
   rather than behind it. Type, colour and tracking only — nothing here moves
   or reorders a single item in the header. */
body.t-cleft .sf-head, body.t-cleft .sf-header,
body.t-cleft .sf-foot, body.t-cleft .sf-footer, body.t-cleft .sf-cats {
  background: #12161c; border-color: #252c36;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-cleft .sf-name, body.t-cleft .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; font-weight: 600; }

/* RED 1 of 3 — every control is a flat ball-red slab with no edge on it */
body.t-cleft .btn.brand { background: var(--cl-red); border: 0; box-shadow: none; color: #f7f0e5; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-cleft .btn.brand:hover { background: var(--cl-lit); color: #ffffff; }

/* WIDE, ONCE — the whole first screen and nothing else on it: three slides
   cross-fading, heading and sub held dead centre over the middle of the frame */
body.t-cleft .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-cleft .sc-hero h1 { font-size: clamp(34px, 5.6vw, 66px); line-height: 1.06; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 20px; }

/* RED 2 of 3 — the hairline under every heading, and the only rule anywhere
   on the page. It slides left wherever the heading is left-set. */
body.t-cleft .sc-h2 { color: var(--cl-cream); font-weight: 600; font-size: clamp(21px, 2.7vw, 32px); letter-spacing: -0.005em; margin-bottom: 32px; }
body.t-cleft .sc-h2::after { content: ''; display: block; width: 46px; height: 2px; background: var(--cl-red); margin: 18px auto 0; }
body.t-cleft .sc-about-overlay .sc-h2 { text-align: left; }
body.t-cleft .sc-about-split .sc-h2::after, body.t-cleft .sc-about-overlay .sc-h2::after { margin-left: 0; }

/* THE COLLAPSE — the first thing under the stage is a contained column, and
   the page stays in one from here to the band. Prose is set in cream at
   reading size with a great deal of air either side of it. */
body.t-cleft .sc-richtext { max-width: 600px; padding: 130px 20px 126px; }
body.t-cleft .sc-richtext p, body.t-cleft .sc-about-copy p { color: var(--cl-cream); font-size: clamp(16px, 1.9vw, 17.5px); line-height: 2; }
body.t-cleft .sc-about-split { max-width: 1000px; padding: 122px 20px 106px; gap: 60px; }
body.t-cleft .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }

/* TWO CONTAINED FOUR-UPS — the stockists carry a heading and the players do
   not, which is the whole difference between them: places get a small tracked
   caption, quotes get set in cream at reading size with no caps and no rule. */
body.t-cleft .sc-strip { padding: 100px 20px 106px; }
body.t-cleft .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-cleft .sc-strip-img { border: 0; border-radius: 0; background: var(--cl-lift); }
body.t-cleft .sc-strip:has(.sc-h2) .sc-strip-label { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body.t-cleft .sc-strip:not(:has(.sc-h2)) .sc-strip-label { margin-top: 18px; font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--cl-cream); }

/* the one priced block on the page: four across in two rows that both fill.
   RED 3 of 3 is the rand figure, and the category above it is muted so the
   accent lands once per tile instead of twice. */
body.t-cleft .sc-buygrid { padding: 24px 20px 118px; }
body.t-cleft .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 28px; }
body.t-cleft .sc-buy-cat { color: var(--muted); letter-spacing: 0.18em; }
body.t-cleft .sc-buy-p { color: var(--cl-lit); font-weight: 700; font-size: 16px; }

/* WIDE, TWICE AND LAST — the only full photograph after the stage, butted
   flush with no gutter above or below. The words sit in the upper third and
   the rest of the frame is left to the ground at dawn. */
body.t-cleft .sc-banner { min-height: 74vh; padding: 15vh 22px 0; margin: 0 calc(50% - 50vw); }
body.t-cleft .sc-banner h2 { font-size: clamp(24px, 3.6vw, 40px); font-weight: 600; line-height: 1.12; }

/* the quietest section on the page by design: one narrow column on bare ink,
   no photograph, no panel, no band */
body.t-cleft .sc-contact { max-width: 520px; padding: 120px 20px 112px; }

/* and it ends on a person, not a call to action: the bench runs full width and
   the two paragraphs are set into the dark left third of it */
body.t-cleft .sc-about-overlay { min-height: 60vh; padding: 104px max(24px, calc(50vw - 620px)); display: flex; align-items: center; }
body.t-cleft .sc-about-overlay-inner { max-width: 400px; margin: 0; text-align: left; }

@media (max-width: 900px) {
  body.t-cleft .sc-hero { min-height: 86vh; }
  body.t-cleft .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-cleft .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-cleft .sc-banner { min-height: 56vh; padding: 12vh 20px 0; }
}

/* NIGHT — the ink drops another three stops toward black so the two wide
   photographs become the only lit things in the room, and the red is lifted
   to meet them, which keeps the hairlines and the rand figures readable
   against a darker ground. The cream warms rather than brightens. */
html[data-theme="dark"] body.t-cleft {
  background: #0a0d11;
  color: #c2baac;
  --cl-red: #c4463a;
  --cl-lit: #d9584a;
  --cl-cream: #f2ebdd;
  --cl-lift: #0f1318;
  --bg-flat: #0a0d11;
  --header-bg: #0a0d11;
  --surface: #10141a;
  --surface-2: #161b22;
  --line: #1c222a;
  --line-strong: #2c3641;
  --heading: #f2ebdd;
  --text: #c2baac;
  --muted: #7d786d;
}
html[data-theme="dark"] body.t-cleft .sf-head, html[data-theme="dark"] body.t-cleft .sf-header,
html[data-theme="dark"] body.t-cleft .sf-foot, html[data-theme="dark"] body.t-cleft .sf-footer,
html[data-theme="dark"] body.t-cleft .sf-cats { background: #0a0d11; border-color: #1c222a; }