/* ================================ VOILE ================================
   THE STRUCTURAL MOVE: the catalogue is re-gridded into a WALL. The shared
   lookbook's alternating half-width bands are flattened into EIGHT portrait
   frames, four across and two rows deep, welded edge to edge with no gutter,
   no card, no border and no shadow, running the full width of the window,
   with nothing under each frame but a name and a rand figure. The wordless
   four-tile band directly above it is the same wall at a quarter height, so
   the two read as one continuous photographic surface and the first sentence
   of prose on the page does not arrive until below both of them. There is no
   accent hue anywhere in the chrome — the only colour is cloth, skin and a
   grey seamless — so the whole design runs off three slab tokens that the
   closing band and night mode simply swap. Sections are picked out by class
   and by :not(:has(.sc-h2)), never by nth-of-type, and nothing here touches
   the header, the nav, or the order or position of anything inside them. */
body.t-voile {
  background: #f6f3ee;
  color: #4a463e;
  --vl-slab: #16140f;
  --vl-slab-ink: #f6f3ee;
  --vl-slab-hov: #45403a;
  --bg-flat: #f6f3ee;
  --header-bg: #f6f3ee;
  --surface: #f6f3ee;
  --surface-2: #efebe4;
  --line: #ddd8ce;
  --line-strong: #c8c2b6;
  --heading: #16140f;
  --text: #4a463e;
  --muted: #8b857a;
  --radius: 0;
  --shadow: none;
}

/* the bar is the same paper as the page, so the stage reaches the top of the
   window — colour and letterform only, nothing moved and nothing reordered */
body.t-voile .sf-head, body.t-voile .sf-header,
body.t-voile .sf-foot, body.t-voile .sf-footer, body.t-voile .sf-cats {
  background: #f6f3ee; border-color: #e6e1d7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-voile .sf-name, body.t-voile .sf-navlink, body.t-voile .sf-cats a {
  text-transform: lowercase; font-weight: 400; letter-spacing: 0.02em;
}

/* no accent, ever: every control is a flat ink slab on bone */
body.t-voile .btn.brand {
  background: var(--vl-slab); color: var(--vl-slab-ink);
  border: 0; box-shadow: none;
  text-transform: lowercase; font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.04em; padding: 14px 26px;
}
body.t-voile .btn.brand:hover { background: var(--vl-slab-hov); color: var(--vl-slab-ink); }

/* the stage: the whole window, three frames cross-fading, one lowercase word
   on the midline and not another mark on the fold */
body.t-voile .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-voile .sc-hero h1 {
  text-transform: lowercase; font-weight: 200; line-height: 1;
  font-size: clamp(56px, 13vw, 158px); letter-spacing: -0.045em;
  margin: 0; text-shadow: none;
}
body.t-voile .sc-h2 {
  text-transform: lowercase; font-weight: 400; letter-spacing: 0.03em;
  font-size: clamp(18px, 2.2vw, 26px); color: var(--heading);
}

/* ★ THE BAND — headingless, so it is the one strip allowed out of the
   container: four tiles welded across the whole window, captions off */
body.t-voile .sc-strip:not(:has(.sc-h2)) { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-voile .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-voile .sc-strip:not(:has(.sc-h2)) .sc-strip-img { border: 0; }
body.t-voile .sc-strip:not(:has(.sc-h2)) .sc-strip-label,
body.t-voile .sc-look-cat, body.t-voile .sc-look-desc { display: none; }

/* ★ THE WALL — eight portrait frames, four across, two rows that fill
   exactly, gapless, with the label sitting under the frame */
body.t-voile .sc-lookbook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 0 14px; }
body.t-voile .sc-lookbook > .container { grid-column: 1 / -1; padding-top: 104px; padding-bottom: 36px; }
body.t-voile .sc-look-row { display: block; }
body.t-voile .sc-look-media img { aspect-ratio: 3 / 4; }
body.t-voile .sc-look-copy { padding: 18px 18px 46px; text-align: center; }
body.t-voile .sc-look-t, body.t-voile .sc-look-p {
  margin: 0; font-size: 14px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.55;
}
body.t-voile .sc-look-p { color: var(--muted); margin: 4px 0 16px; }

/* the pause: two paragraphs beside the empty fitting room, the one frame on
   the page with nobody in it */
body.t-voile .sc-about-split { max-width: 1040px; padding: 112px 20px 100px; gap: 64px; }

/* one photograph, one line, welded top and bottom */
body.t-voile .sc-banner { min-height: 74vh; margin: 0 calc(50% - 50vw); display: grid; align-content: center; }
body.t-voile .sc-banner h2 {
  text-transform: lowercase; font-weight: 200; letter-spacing: -0.02em;
  font-size: clamp(26px, 4.2vw, 48px); line-height: 1.16; text-shadow: none;
}

/* the talkative close — the reference's footer promoted to page content: the
   fitting room again, full-bleed and dimmed, with the slab and surface tokens
   flipped locally so the whole form inverts with the ground and no extra rule
   is needed for the fields or the button */
body.t-voile .sc-contact-band {
  padding: 112px 0 120px; color: #f6f3ee;
  background-color: #16140f;
  background-image: linear-gradient(rgba(18, 16, 12, 0.84), rgba(18, 16, 12, 0.9)), url("/media/samples/vle_story_fitting.jpg");
  background-size: cover; background-position: center;
  --heading: #f6f3ee;
  --muted: rgba(246, 243, 238, 0.76);
  --surface: rgba(246, 243, 238, 0.07);
  --line: rgba(246, 243, 238, 0.3);
  --vl-slab: #f6f3ee;
  --vl-slab-ink: #16140f;
  --vl-slab-hov: #cfc9bd;
}

@media (max-width: 900px) {
  body.t-voile .sc-hero { min-height: 82vh; }
  body.t-voile .sc-lookbook,
  body.t-voile .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-voile .sc-banner { min-height: 54vh; }
}

/* NIGHT — the paper inverts to a warm charcoal and the ink to bone. The
   photographs are untouched and there is still no colour anywhere: only the
   ground and the three slab tokens move. */
html[data-theme="dark"] body.t-voile {
  background: #131210;
  color: #b2aca1;
  --vl-slab: #efeae1;
  --vl-slab-ink: #131210;
  --vl-slab-hov: #c4bdb1;
  --bg-flat: #131210;
  --header-bg: #131210;
  --surface: #131210;
  --surface-2: #1a1814;
  --line: #38342e;
  --line-strong: #4f4a42;
  --heading: #efeae1;
  --text: #b2aca1;
  --muted: #847e73;
}
html[data-theme="dark"] body.t-voile .sf-head, html[data-theme="dark"] body.t-voile .sf-header,
html[data-theme="dark"] body.t-voile .sf-foot, html[data-theme="dark"] body.t-voile .sf-footer,
html[data-theme="dark"] body.t-voile .sf-cats { background: #131210; border-color: #24211c; }
html[data-theme="dark"] body.t-voile .sc-contact-band {
  background-image: linear-gradient(rgba(8, 7, 6, 0.82), rgba(8, 7, 6, 0.9)), url("/media/samples/vle_story_fitting.jpg");
}