/* ---------- Bokseil — Canvas tents, bedrolls & tarpaulins 240 (store) ----------
   THE STRUCTURAL MOVE: on this page anything carrying a photograph gives up its
   gutters and runs edge to edge, and anything made of words stays contained and
   centred on bare duck. The headingless workshop strip welds into a gapless
   four-across wall, and the catalogue runs THREE across over two filled rows with
   the copy laid INSIDE the picture rather than under it — so the bottom half of
   the page is one uninterrupted sheet of canvas photography with nothing framing
   it. The two strips are told apart with :not(:has(.sc-h2)) and never a
   positional selector: the transport-road row is the only strip carrying a
   heading, so it alone keeps its gaps, its hairline and its captions. */
body.t-bokseil {
  background: #efe7d8;
  color: #16140f;
  --bk-olive: #6b6a45;
  --bk-rust: #9c4a2a;
  --bg-flat: #efe7d8;
  --surface: #f6f1e6;
  --surface-2: #e6ddca;
  --line: #d8cdb6;
  --line-strong: #c2b499;
  --heading: #16140f;
  --text: #16140f;
  --muted: #6b6355;
  --header-bg: #efe7d8;
  --radius: 0;
  --shadow: none;
}

/* the bar is stencilled straight onto the duck — no panel and no blur behind it */
body.t-bokseil .sf-header, body.t-bokseil .sf-head,
body.t-bokseil .sf-footer, body.t-bokseil .sf-foot, body.t-bokseil .sf-cats {
  background: #efe7d8; border-color: #d8cdb6;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-bokseil .sf-name { font-weight: 800; font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; }

/* one dusty olive slab on every control, and the twine red ONLY under a cursor */
body.t-bokseil .btn.brand { background: var(--bk-olive); border: 0; box-shadow: none; color: #f6f1e6; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 34px; }
body.t-bokseil .btn.brand:hover { background: var(--bk-rust); color: #f6f1e6; opacity: 1; }
body.t-bokseil .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--bk-rust); color: #f6f1e6; }
body.t-bokseil .sc-h2 { font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bk-olive); margin-bottom: 30px; }

/* the stage owns the whole window; the three plates cross-fade behind the type */
body.t-bokseil .sc-hero { min-height: 100vh; padding: 30px 20px; }
body.t-bokseil .sc-hero h1 { font-size: clamp(32px, 5.8vw, 70px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; }

/* THE BREATHER — the counter band, carrying no heading and no picture at all */
body.t-bokseil .sc-richtext { max-width: 780px; padding: 128px 20px 116px; }
body.t-bokseil .sc-richtext p { color: var(--heading); font-size: clamp(18px, 2.4vw, 26px); line-height: 1.66; letter-spacing: -0.015em; }

/* THE ROADS — the one strip with a heading, so gutters, frame and captions stay */
body.t-bokseil .sc-strip:has(.sc-h2) { padding: 92px 20px 30px; }
body.t-bokseil .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-bokseil .sc-strip-label { margin-top: 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.8; color: var(--bk-olive); }

/* THE WALL — the headingless strip, four square plates welded, wordless */
body.t-bokseil .sc-strip:not(:has(.sc-h2)) { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-bokseil .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-bokseil .sc-strip:not(:has(.sc-h2)) .sc-strip-img { border: 0; }
body.t-bokseil .sc-strip:not(:has(.sc-h2)) .sc-strip-label { display: none; }

/* THE CATALOGUE — three across, no gutters, the words lying inside the picture */
body.t-bokseil .sc-show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-bokseil .sc-show-inner { position: relative; align-items: flex-start; justify-content: flex-end; text-align: left; min-height: min(66vh, 560px); padding: clamp(26px, 3.2vw, 46px); }
body.t-bokseil .sc-show-inner > * { position: relative; z-index: 1; }
body.t-bokseil .sc-show-media { position: absolute; inset: 0; z-index: 0; display: block; padding: 0; }
body.t-bokseil .sc-show-media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
body.t-bokseil .sc-show-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22, 20, 15, 0.34), rgba(22, 20, 15, 0.18) 38%, rgba(22, 20, 15, 0.86)); }
body.t-bokseil .sc-show-cat { color: #d9d0b3; letter-spacing: 0.24em; font-size: 10px; }
body.t-bokseil .sc-show-t, body.t-bokseil .sc-show-price { color: #efe7d8; font-variant-numeric: tabular-nums; }
body.t-bokseil .sc-show-rule { background: var(--bk-olive); opacity: 1; width: 54px; margin: 18px 0 16px; }

/* the band, and a close that ends on a form rather than on a button */
body.t-bokseil .sc-banner { min-height: 52vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); }
body.t-bokseil .sc-contact-split { padding: 104px 20px 116px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  body.t-bokseil .sc-strip:has(.sc-h2) .sc-strip-row,
  body.t-bokseil .sc-strip:not(:has(.sc-h2)) .sc-strip-row,
  body.t-bokseil .sc-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-bokseil .sc-show-inner { min-height: 44vh; }
}
@media (max-width: 620px) {
  body.t-bokseil .sc-show-grid { grid-template-columns: minmax(0, 1fr); }
}

/* NIGHT — the loft after the lights go off. The cream drops to wet-proofed
   canvas brown and the ink inverts, but the photograph wall and the six
   overlaid panels do not change at all, because neither of them has a ground
   of its own. The olive lifts far enough to keep carrying every control against
   the dark, and the twine red still only shows itself under a cursor. */
html[data-theme="dark"] body.t-bokseil {
  background: #17150f;
  color: #e8e0cf;
  --bk-olive: #a8a678;
  --bk-rust: #cf6b3c;
  --bg-flat: #17150f;
  --surface: #201d15;
  --surface-2: #26221a;
  --line: #342f23;
  --line-strong: #453f2f;
  --heading: #f2ecdc;
  --text: #e8e0cf;
  --muted: #948b76;
  --header-bg: #17150f;
}
html[data-theme="dark"] body.t-bokseil .sf-header, html[data-theme="dark"] body.t-bokseil .sf-head,
html[data-theme="dark"] body.t-bokseil .sf-footer, html[data-theme="dark"] body.t-bokseil .sf-foot,
html[data-theme="dark"] body.t-bokseil .sf-cats { background: #17150f; border-color: #342f23; }
html[data-theme="dark"] body.t-bokseil .btn.brand { color: #17150f; }
html[data-theme="dark"] body.t-bokseil .btn.brand:hover { color: #f6f1e6; }
html[data-theme="dark"] body.t-bokseil .sc-contact-split { border-top-color: #342f23; }