/* ---- vloer (Vloer — Hand-knotted rugs & floor coverings 183) ---------------
   THE STRUCTURAL MOVE: THE SAME PART, TWICE, AT OPPOSITE SCALES. Four large
   photographs weld gapless onto the floor of the stage — no container, no
   gutters, caption printed on bone BENEATH the picture — and then the identical
   strip part runs again six across at fibre-macro size, small and gapped in
   every direction. Nothing sits between them and no prose block appears
   anywhere on the page, which is the honest read of a reference carrying almost
   no body copy: four full-bleed photographic bands before the page pulls into a
   container for the first time at the buy grid. The second strip is reached
   through `.sc-strip + .sc-strip` — a CLASS adjacency, because both strips are
   <section> elements and an nth-of-type would count the hero and silently miss.
   Madder is spent only on the price and the buy slab, so the buy grid is the
   one band on the page carrying colour and the photographs do the rest. */
body.t-vloer {
  background: #f5f1e8;
  color: #33302a;
  --vl-madder: #8f2f2a;
  --radius: 0;
  --shadow: none;
  --header-bg: #f5f1e8;
  --surface: #fbf9f3;
  --surface-2: #ece6d8;
  --line: #ddd4c2;
  --line-strong: #c5b99f;
  --heading: #1a1815;
  --text: #33302a;
  --muted: #7b7568;
}

/* a solid opaque bar on its own strip — the stage begins underneath it rather
   than behind it, and nothing blurs or inverts over the photograph */
body.t-vloer .sf-head, body.t-vloer .sf-header,
body.t-vloer .sf-foot, body.t-vloer .sf-footer, body.t-vloer .sf-cats {
  background: #f5f1e8; border-color: #ddd4c2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-vloer .btn.brand { background: var(--vl-madder); border: 0; color: #f7f2e8; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 11px; padding: 15px 30px; }

/* the stage: three slides, the whole first screen, copy dead centre in open floor */
body.t-vloer .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-vloer .sc-hero h1 { font-weight: 500; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.02em; }

/* THE WELD — four tiles fused to the floor of the stage. The strip gives up its
   container, its padding and its gutters entirely; the caption prints on bone
   under the photograph, separated only by a taupe hairline. */
body.t-vloer .sc-hero + .sc-strip { max-width: none; width: 100%; margin: 0; padding: 0; }
body.t-vloer .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-vloer .sc-hero + .sc-strip .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }
body.t-vloer .sc-hero + .sc-strip .sc-strip-label { margin: 0; padding: 22px 24px 30px; background: #f5f1e8; border-right: 1px solid #ddd4c2; text-align: left; font-size: clamp(13px, 1.35vw, 17px); font-weight: 500; line-height: 1.3; color: var(--heading); }

/* THE RHYTHM ROW — the weld's opposite. Six square macros at a fraction of the
   scale, gapped in every direction, under a hairline uppercase heading. */
body.t-vloer .sc-strip + .sc-strip { padding: 76px 20px 68px; }
body.t-vloer .sc-strip + .sc-strip .sc-h2 { font-size: clamp(12px, 1.4vw, 15px); text-transform: uppercase; letter-spacing: 0.26em; font-weight: 700; color: var(--muted); margin-bottom: 34px; }
body.t-vloer .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
body.t-vloer .sc-strip + .sc-strip .sc-strip-img { aspect-ratio: 1; border: 1px solid var(--line); }
body.t-vloer .sc-strip + .sc-strip .sc-strip-label { margin-top: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--muted); }

/* one wide full-bleed band, and only then does the page pull in to a container */
body.t-vloer .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: center; justify-content: center; }
body.t-vloer .sc-buygrid { padding: 84px 20px 92px; border-bottom: 1px solid var(--line); }
body.t-vloer .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 30px; }
body.t-vloer .sc-buy-media img { aspect-ratio: 1; }
body.t-vloer .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; font-size: 10px; }
body.t-vloer .sc-buy-p { color: var(--vl-madder); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

/* the page closes centred and short, exactly where the newsletter sat */
body.t-vloer .sc-contact { padding: 78px 20px 96px; }
body.t-vloer .sc-contact-form .btn { align-self: center; }

@media (max-width: 1000px) {
  body.t-vloer .sc-hero { min-height: 86vh; }
  body.t-vloer .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-vloer .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-vloer .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-vloer .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the workshop after the roller door comes down. Bone goes to a warm
   near-black rather than a neutral one, because the wool tones on the
   photographs turn grey against cold ink. The weld caption bar is painted a
   literal bone in day, so it has to be repainted here or the captions float on
   a white band under dark photographs. Madder lifts two steps: #8f2f2a was
   chosen to hold against bone and goes to dried blood on a dark ground, so the
   slab takes dark type at night. */
html[data-theme="dark"] body.t-vloer {
  background: #16140f;
  color: #c2bbab;
  --vl-madder: #c9584b;
  --header-bg: #16140f;
  --surface: #1e1b15;
  --surface-2: #262219;
  --line: #322d23;
  --line-strong: #4a4335;
  --heading: #f3ece0;
  --text: #c2bbab;
  --muted: #8b8474;
}
html[data-theme="dark"] body.t-vloer .sf-head, html[data-theme="dark"] body.t-vloer .sf-header,
html[data-theme="dark"] body.t-vloer .sf-foot, html[data-theme="dark"] body.t-vloer .sf-footer,
html[data-theme="dark"] body.t-vloer .sf-cats { background: #16140f; border-color: #322d23; }
html[data-theme="dark"] body.t-vloer .btn.brand { color: #1a120f; }
html[data-theme="dark"] body.t-vloer .sc-hero + .sc-strip .sc-strip-label { background: #16140f; border-right-color: #322d23; }