/* ---------- Selvedge — Raw denim, jackets & repairs 216 (store) ----------
   THE STRUCTURAL MOVE: width does all the pacing. A full-viewport three-slide
   stage and a full-bleed promotional band bracket two deliberately contained
   blocks — a plain, boxless six-across rail and a spaced four-across catalogue
   whose heading is ranged LEFT instead of centred — and the closing contact
   band bleeds again and is painted the same ink as the footer welded under it,
   so the page shuts on the bottom edge with no rule and no gap. Nothing on the
   page is bordered, rounded or shadowed; the container edge is the entire
   rhythm. The hero copy and the catalogue heading share one left axis, so the
   contained width is legible from the first screen. Indigo-black ground, ecru
   type, raw-denim blue on every hover, and one brass rivet rationed to two
   jobs: the buttons and the price line. -------------------------------- */
body.t-selvedge {
  background: #10141d;
  color: #b9b2a3;
  --sv-brass: #b98a3c;
  --sv-lit: #d3a253;
  --sv-denim: #4a6ea0;
  --sv-lift: #161b26;
  --sv-ink: #0a0d14;
  --bg-flat: #10141d;
  --header-bg: #10141d;
  --surface: #161b26;
  --surface-2: #1c2230;
  --line: #232b3a;
  --line-strong: #33405a;
  --heading: #ece5d6;
  --text: #b9b2a3;
  --muted: #7e8494;
  --radius: 0;
  --shadow: none;
}

/* the platform's own bar, restyled in type only — brand hard left, links right,
   nothing moved and nothing reordered */
body.t-selvedge .sf-name, body.t-selvedge .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; }
body.t-selvedge .sf-navlink:hover, body.t-selvedge .sc-strip-card:hover .sc-strip-label { color: var(--sv-denim); }

/* BRASS 1 of 2 — every control is a flat brass slab with no edge on it */
body.t-selvedge .btn.brand { background: var(--sv-brass); border: 0; color: #10141d; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-selvedge .btn.brand:hover { background: var(--sv-lit); color: #10141d; }

/* THE STAGE — a whole window of denim, three slides cross-fading, the copy set
   on the same left axis the catalogue heading uses far below it */
body.t-selvedge .sc-hero { min-height: 100vh; padding: 120px max(24px, calc(50vw - 566px)); }
body.t-selvedge .sc-hero h1 { text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 5.6vw, 64px); line-height: 1.03; letter-spacing: -0.008em; max-width: 15ch; }

/* CONTAINED — the three blocks that pull in from the edge, all on one width
   and one vertical rhythm, so the page pinches and releases four times */
body.t-selvedge .sc-strip, body.t-selvedge .sc-products, body.t-selvedge .sc-about-split { max-width: 1180px; padding: 96px 24px; }

/* BLEEDING — no margin at all, so the photograph butts straight against the
   contained block's own air rather than adding a second gap of its own */
body.t-selvedge .sc-banner { margin: 0 calc(50% - 50vw); min-height: 60vh; display: flex; align-items: center; padding: 92px 24px; }
body.t-selvedge .sc-banner h2 { text-transform: uppercase; font-weight: 800; letter-spacing: -0.005em; font-size: clamp(22px, 3.6vw, 40px); }

/* ranged LEFT, never centred — the tell of the contained half of the page */
body.t-selvedge .sc-products .sc-h2, body.t-selvedge .sc-strip .sc-h2 { text-align: left; color: var(--heading); text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; margin: 0 0 32px; }

/* THE RAIL — six photographs in one plain row with no border, no box and no
   corner on them; purely a rhythm break between the two big image blocks */
body.t-selvedge .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
body.t-selvedge .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 4 / 5; background: var(--sv-lift); }
body.t-selvedge .sc-strip-label { margin-top: 13px; text-align: left; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; color: var(--muted); }

/* THE CATALOGUE — spaced, never gapless: four across, two full rows, and the
   price sitting under the picture instead of lying on it */
body.t-selvedge .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 26px; padding: 0; }
body.t-selvedge .product-card, body.t-selvedge .product-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-selvedge .product-card .ph { aspect-ratio: 3 / 4; background: var(--sv-lift); }
body.t-selvedge .product-card .meta { padding: 16px 0 0; }
body.t-selvedge .product-card .t { text-transform: uppercase; letter-spacing: 0.13em; font-size: 11px; font-weight: 700; line-height: 1.6; }
/* BRASS 2 of 2 — the rand figure, and it appears nowhere else on the page */
body.t-selvedge .product-card .p { color: var(--sv-brass); font-weight: 700; font-size: 14px; margin-top: 8px; }

body.t-selvedge .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.95; }

/* THE WELD AT THE FOOT — band and footer share one ink and lose the rule and
   the margin between them, so the page ends on the window edge */
body.t-selvedge .sf-foot, body.t-selvedge .sf-footer, body.t-selvedge .sc-contact-band { background: var(--sv-ink); border-color: var(--sv-ink); margin-top: 0; }
body.t-selvedge .sc-contact-band { padding: 104px 0 116px; }

@media (max-width: 900px) {
  body.t-selvedge .sc-hero { min-height: 84vh; }
  body.t-selvedge .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-selvedge .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the indigo drops two stops toward black, the brass lifts to hold the
   price line and the buttons against it, and the closing ink goes deeper again
   so the weld at the foot stays a shade below the page it ends. Every colour on
   this theme is a token, so the whole page turns on this one block. */
html[data-theme="dark"] body.t-selvedge {
  background: #0a0d14;
  color: #aca596;
  --sv-brass: #cb9c4b;
  --sv-lit: #e0b163;
  --sv-denim: #5b81b6;
  --sv-lift: #10141d;
  --sv-ink: #05070b;
  --bg-flat: #0a0d14;
  --header-bg: #0a0d14;
  --surface: #10141d;
  --surface-2: #161b26;
  --line: #1b2230;
  --line-strong: #2a3549;
  --heading: #f3ecdd;
  --text: #aca596;
  --muted: #757b8a;
}