/* ---- stringer (Stringer — Surfboard shaping bay & fin room 340) ------------
   THE STRUCTURAL MOVE: the page holds exactly ONE plain even grid and then
   goes wide for a single hairline row of small square marks with no text
   column beside it. Six product plates sit three across and two down on bare
   foam-dust white with the card chrome — panel, border, radius, shadow, hover
   lift — stripped off completely, so the photograph's own edge is the only
   edge above the label, and the label always sits UNDER the frame and never
   over it. Directly beneath, .sc-strip-row is re-pitched to a small auto-fit
   track so eight material tiles land in ONE near-full-measure line under one
   display-scale centred heading; auto-fit collapses its empty tracks, so the
   row still comes up as one filled line if the tree is ever clamped to six.
   Resin amber is rationed to three appearances and no more — the rand figure
   on each plate, the hairline on the hero's ghost button, and the 24px rule
   under every product label. Every control is a flat ink slab; the sea never
   enters the palette, only the photographs. Nothing in this block touches
   .sf-header, .ws-nav or any item inside them — no order, no position, no
   nth-of-type, type and colour only. --------------------------------------- */
body.t-stringer {
  background: #f8f7f3;
  color: #0e0e0c;
  --st-amber: #b3741a;
  --st-amber-hi: #c9862a;
  --bg-flat: #f8f7f3;
  --header-bg: #f8f7f3;
  --surface: #f8f7f3;
  --surface-2: #f2f0ea;
  --line: #e3e0d7;
  --line-strong: #c7c3b7;
  --heading: #0e0e0c;
  --text: #0e0e0c;
  --muted: #7b786e;
  --radius: 0;
  --shadow: none;
}

/* a flat dust-white bar the same colour as the wall, so the stage begins under
   the header rather than behind it. Colour, type and tracking only. */
body.t-stringer .sf-head, body.t-stringer .sf-header,
body.t-stringer .sf-foot, body.t-stringer .sf-footer, body.t-stringer .sf-cats {
  background: #f8f7f3; border-color: #e3e0d7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-stringer .sf-name, body.t-stringer .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 600; }

/* every control is an ink slab — no amber on a button anywhere but the hero */
body.t-stringer .btn.brand { background: #0e0e0c; border: 0; box-shadow: none; color: #f8f7f3; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; padding: 15px 32px; }
body.t-stringer .btn.brand:hover { background: #2c2b25; color: #ffffff; }

/* THE FOLD — the whole window, three frames cross-fading, one display line over
   a single tracked sub-line and nothing else on it */
body.t-stringer .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-stringer .sc-hero h1 { font-size: clamp(34px, 6.4vw, 78px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.99; margin: 0 0 20px; text-shadow: none; }
body.t-stringer .sc-hero p { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; margin: 0 0 36px; text-shadow: none; }

/* AMBER 1 of 3 — the hairline on the ghost button, and the only amber above
   the catalogue */
body.t-stringer .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--st-amber); color: #ffffff; }
body.t-stringer .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--st-amber); color: #14110a; }

/* two scales of heading and nothing in between: a tiny tracked label over the
   catalogue, and display slabs on the two wide blocks */
body.t-stringer .sc-products .sc-h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 600; color: var(--muted); margin: 0 0 54px; }
body.t-stringer .sc-strip .sc-h2, body.t-stringer .sc-contact-band .sc-h2 { font-size: clamp(30px, 5vw, 60px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; margin: 0 0 40px; }
body.t-stringer .sc-about-copy .sc-h2 { font-size: clamp(23px, 2.9vw, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.14; margin: 0 0 22px; }

/* THE ONE GRID — three across, two down, wide white gutters, no card */
body.t-stringer .sc-products, body.t-stringer .sc-about-split { max-width: 1200px; }
body.t-stringer .sc-products { padding: 104px 20px 108px; }
body.t-stringer .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 74px 56px; padding: 0; }
body.t-stringer .product-card, body.t-stringer .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-stringer .product-card .ph { aspect-ratio: 1; background: var(--surface-2); }
body.t-stringer .product-card .meta { padding: 18px 0 0; }
body.t-stringer .product-card .t { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
/* AMBER 2 of 3 — the rand figure. AMBER 3 of 3 — the short rule under the label */
body.t-stringer .product-card .p { color: var(--st-amber); font-size: 14px; font-weight: 700; margin-top: 5px; }
body.t-stringer .product-card .meta::after { content: ''; display: block; width: 24px; height: 2px; margin-top: 15px; background: var(--st-amber); }

/* THE WIDE ROW — eight square marks on one near-full-measure line, no text
   column beside them. auto-fit at a small track: eight fill one line, and six
   would fill one line too rather than orphaning a tile. */
body.t-stringer .sc-strip { max-width: 1340px; padding: 0 20px 112px; }
body.t-stringer .sc-strip-row { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; }
body.t-stringer .sc-strip-img { border-radius: 0; border-color: var(--line); background: var(--surface-2); }
body.t-stringer .sc-strip-label { margin-top: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: var(--muted); }

/* THE ONLY HANDED BLOCK ON THE PAGE — one tall photograph, prose beside it */
body.t-stringer .sc-about-split { grid-template-columns: 0.82fr 1.18fr; gap: 64px; padding: 0 20px 112px; align-items: start; }
body.t-stringer .sc-about-media img { aspect-ratio: 4 / 5; border-radius: 0; }
body.t-stringer .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.9; }

/* WIDE SLAB — the heading sits in the upper third and one paragraph under it */
body.t-stringer .sc-banner { margin: 0 calc(50% - 50vw); min-height: 76vh; padding: 15vh 24px 22vh; }
body.t-stringer .sc-banner-inner { max-width: 840px; }
body.t-stringer .sc-banner h2 { font-size: clamp(26px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; margin: 0 0 20px; text-shadow: none; }
body.t-stringer .sc-banner p { font-size: 15.5px; line-height: 1.85; max-width: 56ch; margin: 0 auto; text-shadow: none; }

/* the page shuts on width, not on a form card */
body.t-stringer .sc-contact-band { background: var(--surface-2); border-top: 1px solid var(--line); padding: 104px 0 116px; }
body.t-stringer .sc-contact-band-inner { max-width: 900px; }
body.t-stringer .sc-contact-band .sc-contact-sub { max-width: 62ch; margin: 0 auto 34px; color: var(--text); font-size: 15px; line-height: 1.85; }
body.t-stringer .sc-contact-form .btn { align-self: center; margin-top: 10px; }

/* every count still fills its rows on the way down: six goes 3 → 2 → 1, eight
   goes 8 → 4 → 2 */
@media (max-width: 1000px) {
  body.t-stringer .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 32px; }
  body.t-stringer .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.t-stringer .sc-about-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 560px) {
  body.t-stringer .product-grid { grid-template-columns: minmax(0, 1fr); }
  body.t-stringer .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stringer .sc-hero { min-height: 88vh; }
  body.t-stringer .sc-banner { min-height: 58vh; padding: 12vh 22px 14vh; }
}

/* NIGHT — the foam dust goes to the unlit bay at six in the morning and the ink
   slab inverts to white, because a black button on a black wall is a hole. The
   amber lifts two steps to the colour resin actually throws under a work lamp,
   so the rand figure, the ghost hairline and the label rule all still carry. */
html[data-theme="dark"] body.t-stringer {
  background: #121210;
  color: #dbd8cf;
  --st-amber: #e2a244;
  --st-amber-hi: #efb45c;
  --bg-flat: #121210;
  --header-bg: #121210;
  --surface: #121210;
  --surface-2: #1a1917;
  --line: #2a2925;
  --line-strong: #3e3d36;
  --heading: #f3f1ea;
  --text: #dbd8cf;
  --muted: #8a877d;
}
html[data-theme="dark"] body.t-stringer .sf-head, html[data-theme="dark"] body.t-stringer .sf-header,
html[data-theme="dark"] body.t-stringer .sf-foot, html[data-theme="dark"] body.t-stringer .sf-footer,
html[data-theme="dark"] body.t-stringer .sf-cats { background: #121210; border-color: #2a2925; }
html[data-theme="dark"] body.t-stringer .btn.brand { background: #f3f1ea; color: #121210; }
html[data-theme="dark"] body.t-stringer .btn.brand:hover { background: #ffffff; color: #121210; }
html[data-theme="dark"] body.t-stringer .sc-hero .btn.brand.sc-hero-ghost { background: transparent; color: #ffffff; }