/* ---- krag (Krag — Boxing & strength gear 80) --------------------------------
   STRUCTURAL MOVE: the bleeds are rationed to exactly three. A 100vh cross-fading
   slider, ONE six-tile wall of photographs butted flush with zero gutter, and one
   dark banner — everything else, the catalogue included, stays inside a single
   centre column on chalk bone. The two strips are told apart by ITEM COUNT
   (:has(> :nth-child(5))) and never by :nth-of-type, because the hero is the first
   section element on the page and would swallow the match. Oxblood is rationed to
   three jobs: the solid buttons, the price figure and the bare band of figures. */
body.t-krag {
  background: #f4f1ec;
  color: #3a3733;
  --bg-flat: #f4f1ec;
  --surface: #f4f1ec;
  --surface-2: #eae6df;
  --line: #ddd8d0;
  --line-strong: #c6bfb4;
  --heading: #1c1b1a;
  --text: #3a3733;
  --muted: #837c73;
  --brand: #6b2028;
  --radius: 0;
  --shadow: none;
  --header-bg: rgba(244, 241, 236, 0.94);
}
body.t-krag .sf-header, body.t-krag .sf-footer { background: #f4f1ec; border-color: #ddd8d0; }

/* bleed 1 of 3 — full viewport, copy locked dead centre over the cross-fade */
body.t-krag .sc-hero { min-height: 100vh; padding: 140px 20px; }
body.t-krag .sc-hero h1 { font-size: clamp(42px, 8.6vw, 112px); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; }
body.t-krag .sc-hero p { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 34px; }

/* every heading below the hero is a small ruled kicker, never a display line */
body.t-krag .sc-h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #837c73; margin-bottom: 34px; }

/* the four rack tiles — contained, gapped, square, labels flush left under them */
body.t-krag .sc-strip { padding: 96px 20px 26px; }
body.t-krag .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 22px; }
body.t-krag .sc-strip-card { position: relative; text-align: left; }
body.t-krag .sc-strip-img { border: 0; border-radius: 0; background: #eae6df; }
body.t-krag .sc-strip-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; margin-top: 12px; color: #1c1b1a; }

/* bleed 2 of 3 — six photographs butted edge to edge, labels laid over them */
body.t-krag .sc-strip:has(.sc-strip-card:nth-child(5)) { max-width: none; padding: 0; }
body.t-krag .sc-strip-row:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); gap: 0; }
body.t-krag .sc-strip-row:has(> :nth-child(5)) .sc-strip-img { aspect-ratio: 4 / 3; }
body.t-krag .sc-strip-row:has(> :nth-child(5)) .sc-strip-label { position: absolute; left: 0; bottom: 0; margin: 0; padding: 11px 16px 10px; background: #1c1b1a; color: #f4f1ec; }

/* the hinge — four figures alone on the bone, no cards, no icons, no photograph */
body.t-krag .sc-richtext { max-width: 820px; padding: 122px 20px 106px; }
body.t-krag .sc-richtext p { font-size: clamp(21px, 3.2vw, 38px); line-height: 1.6; font-weight: 700; letter-spacing: -0.03em; color: #6b2028; font-variant-numeric: tabular-nums; }

/* the catalogue never leaves the column: two clean rows of three */
body.t-krag .sc-buygrid { padding: 24px 20px 100px; }
body.t-krag .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 30px; }
body.t-krag .sc-buy-card { text-align: left; align-items: stretch; }
body.t-krag .sc-buy-cat { color: #837c73; letter-spacing: 0.2em; font-size: 10px; }
body.t-krag .sc-buy-p { color: #6b2028; font-weight: 700; font-size: 15px; }

/* bleed 3 of 3 — the page's one dark moment */
body.t-krag .sc-banner { min-height: 62vh; display: flex; align-items: center; margin: 0 calc(50% - 50vw); }
body.t-krag .sc-banner h2 { font-size: clamp(28px, 4.6vw, 58px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }

body.t-krag .btn.brand { border: 0; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 17px 34px; }

/* address one side, form the other, on a hairline */
body.t-krag .sc-contact-split { gap: 0; padding: 100px 20px 112px; border-top: 1px solid #ddd8d0; }
body.t-krag .sc-contact-lead { padding-right: clamp(24px, 6vw, 76px); }
body.t-krag .sc-contact-lead p { font-size: 16.5px; line-height: 1.9; color: #3a3733; }

@media (max-width: 860px) {
  body.t-krag .sc-strip-row, body.t-krag .sc-strip-row:has(> :nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
  body.t-krag .sc-buy-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
}

/* night — the foundry after the lights go off. The bone ground drops to a warm
   near-black, the ink comes up to chalk, and the oxblood is lifted so the four
   figures and the price line still carry on the dark. */
html[data-theme="dark"] body.t-krag {
  background: #141312;
  color: #c2bcb2;
  --bg-flat: #141312;
  --surface: #141312;
  --surface-2: #1e1b19;
  --line: #2b2724;
  --line-strong: #3d3833;
  --heading: #f1ede6;
  --text: #c2bcb2;
  --muted: #877f75;
  --brand: #b8404e;
  --header-bg: rgba(20, 19, 18, 0.94);
}
html[data-theme="dark"] body.t-krag .sf-header, html[data-theme="dark"] body.t-krag .sf-footer { background: #141312; border-color: #2b2724; }
html[data-theme="dark"] body.t-krag .sc-strip-img { background: #1e1b19; }
html[data-theme="dark"] body.t-krag .sc-strip-label { color: #f1ede6; }
html[data-theme="dark"] body.t-krag .sc-strip-row:has(> :nth-child(5)) .sc-strip-label { background: #050504; }
html[data-theme="dark"] body.t-krag .sc-richtext p, html[data-theme="dark"] body.t-krag .sc-buy-p { color: #b8404e; }
html[data-theme="dark"] body.t-krag .sc-contact-split { border-top-color: #2b2724; }
html[data-theme="dark"] body.t-krag .sc-contact-lead p { color: #c2bcb2; }
html[data-theme="dark"] body.t-krag .btn.brand { color: #14110f; }