/* ---- Gantry — workwear & safety counter, Isando ---------------------------
   Bone-white contained bands over a navy-graphite ink, with ONE hi-vis lime
   rationed to the buttons, the price figure and the six flush tile labels.
   STRUCTURAL MOVE — the hinge, not the opening. A narrowly contained, widely
   gapped four-up sits between the full-viewport hero and a SIX-cell band welded
   flush to the page edges in navy-graphite (`.sc-strip + .sc-strip` — exact,
   and it cannot misfire the way an :nth-of-type on a section would), so the
   page breathes, tightens and goes dark before the two full-bleed prose bands.
   The lookbook is then pulled out of its default alternating full-bleed rows
   into one contained three-across grid — the single hard cut into type.
   `--brand` is pinned to the ink so the lime never leaks past its three jobs. */
body.t-gantry {
  --gy-ink: #1b2430;
  --gy-bone: #f2f1ea;
  --gy-lime: #cfe80c;
  --gy-lime-ink: #6d7a05;
  --brand: #1b2430;
  --heading: #1b2430;
  --muted: #56616f;
  --line: #dcd8cc;
  --line-strong: #cfcabc;
  --surface: #ffffff;
  --surface-2: #e7e5db;
  --header-bg: #f2f1ea;
  --radius: 0;
  background: #f2f1ea;
  color: #1b2430;
}
/* the nameplate scrolls away with the page — it is inert, not a toolbar */
body.t-gantry .sf-header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* the fold is exactly the viewport, less the nameplate above it */
body.t-gantry .sc-hero { min-height: calc(100vh - 70px); padding: 40px 22px; }
body.t-gantry .sc-hero h1 { font-size: clamp(33px, 5.8vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; max-width: 17ch; margin: 0 auto 16px; text-shadow: none; }
body.t-gantry .btn.brand { background: var(--gy-lime); border-color: var(--gy-lime); color: var(--gy-ink); box-shadow: none; border-radius: 0; padding: 15px 30px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
body.t-gantry .sc-h2 { color: inherit; text-align: left; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1.2vw, 12.5px); font-weight: 800; margin: 0 0 34px; }

/* first strip: contained tighter than the page, four gapped tiles, a lot of white */
body.t-gantry .sc-strip { max-width: 940px; margin: 0 auto; padding: clamp(78px, 9vw, 128px) 20px clamp(74px, 8vw, 116px); }
body.t-gantry .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3.6vw, 50px); }
body.t-gantry .sc-strip-label { margin-top: 14px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 800; }

/* THE HINGE: the second strip breaks the container, goes edge to edge and inverts */
body.t-gantry .sc-strip + .sc-strip { max-width: none; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: clamp(62px, 7vw, 98px) 0 0; background: var(--gy-ink); color: var(--gy-bone); --line: rgba(0, 0, 0, 0); }
body.t-gantry .sc-strip + .sc-strip .sc-h2 { padding: 0 clamp(20px, 4vw, 46px); margin-bottom: clamp(30px, 4vw, 46px); }
body.t-gantry .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-gantry .sc-strip + .sc-strip .sc-strip-img { aspect-ratio: 16 / 9; }
body.t-gantry .sc-strip + .sc-strip .sc-strip-label { margin: 0; padding: 15px 20px 26px; text-align: left; color: var(--gy-lime); }

/* first prose band: full bleed, photograph filling one half */
body.t-gantry .sc-about-split { max-width: none; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0; gap: 0; align-items: stretch; }
body.t-gantry .sc-about-media img { height: 100%; min-height: clamp(320px, 62vh, 640px); aspect-ratio: auto; }
body.t-gantry .sc-about-copy { padding: clamp(52px, 7vw, 104px) clamp(24px, 6vw, 92px); }
/* second prose band: the side flips and the copy sits over the whole photograph */
body.t-gantry .sc-about-overlay-inner { margin: 0 auto 0 clamp(4px, 5vw, 78px); text-align: left; }

/* the hard cut: the lookbook loses its alternating rows and becomes a contained 3 x 2 */
body.t-gantry .sc-lookbook { max-width: 1080px; margin: 0 auto; padding: clamp(80px, 9vw, 132px) 20px clamp(76px, 8vw, 114px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 58px) clamp(22px, 2.6vw, 34px); }
body.t-gantry .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0; }
body.t-gantry .sc-look-row { display: flex; flex-direction: column; }
body.t-gantry .sc-look-copy { padding: 16px 0 0; }
body.t-gantry .sc-look-t { font-size: clamp(15.5px, 1.4vw, 18px); margin: 8px 0 0; }
body.t-gantry .sc-look-p { color: var(--gy-lime-ink); font-size: 20px; margin: 13px 0 16px; }

@media (max-width: 900px) {
  body.t-gantry .sc-strip-row,
  body.t-gantry .sc-strip + .sc-strip .sc-strip-row,
  body.t-gantry .sc-lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-gantry .sc-hero { min-height: 78vh; }
  body.t-gantry .sc-about-media img { min-height: 300px; }
}

/* night: the same two inversions, read the other way up — the bands lift off a
   darker ground instead of dropping out of a bone one, and the lime comes back
   to full strength for the price figure because it is legible on dark. */
html[data-theme="dark"] body.t-gantry {
  --gy-ink: #0c1117;
  --gy-bone: #eef1f4;
  --gy-lime-ink: #cfe80c;
  --brand: #8d99a8;
  --heading: #eef1f4;
  --muted: #98a3b1;
  --line: #2b3542;
  --line-strong: #3a4552;
  --surface: #171d25;
  --surface-2: #1e2732;
  --header-bg: #12171e;
  background: #12171e;
  color: #eef1f4;
}