/* ============================== VENTIEL ==============================
   THE STRUCTURAL MOVE: the page is one uninterrupted photographic
   surface. A full-viewport four-slide stage opens it, four category
   tiles butt straight against one another with no gutter and no gap at
   all, the catalogue runs as image-led rows that hold the reference's
   picture-to-text ratio, and one wide band restates it — every
   photograph edge to edge, nothing framed, nothing inset, nothing with
   a radius on it. It breaks EXACTLY ONCE, for a narrow imageless
   column of workshop prose, which is the only place the page stops
   being a photograph and the only real body text in the shop. Lacquered
   brass is spent three times and never a fourth: the hairline on the
   ghost control, the rule above each rand figure, and the submit in the
   closing band — everything else is bone on near-black. Type, colour
   and spacing only; nothing here moves, stacks, centres or reorders a
   single item inside the header. */
body.t-ventiel {
  background: #0d0b09;
  color: #d3cabb;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --vt-brass: #b08d57;
  --vt-lit: #c9a469;
  --vt-bone: #f2ece2;
  --bg-flat: #0d0b09;
  --header-bg: #0d0b09;
  --surface: #151210;
  --surface-2: #1b1712;
  --line: #241f1a;
  --line-strong: #3a3229;
  --heading: #f2ece2;
  --text: #d3cabb;
  --muted: #8a8073;
  --radius: 0;
  --shadow: none;
}

/* a flat bar the same near-black as the page, so the stage begins beneath it
   rather than behind it. Wordmark in the display serif, links in tracked small
   caps — colour, size and tracking only, no order and no positioning. */
body.t-ventiel .sf-head, body.t-ventiel .sf-header,
body.t-ventiel .sf-foot, body.t-ventiel .sf-footer, body.t-ventiel .sf-cats {
  background: #0d0b09; border-color: #241f1a;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-ventiel .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 21px; letter-spacing: 0.01em; }
body.t-ventiel .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* every control on the page is a flat bone slab with no edge on it — the brass
   is saved for the three places below and nowhere else */
body.t-ventiel .btn.brand { background: var(--vt-bone); border-color: var(--vt-bone); box-shadow: none; color: #0d0b09; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 15px 32px; }

/* THE STAGE — the whole first screen and nothing else on it: four photographs
   cross-fading, one line of display type dead centre, one short sub, one
   hairline control. The type is the only mark on the picture. */
body.t-ventiel .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-ventiel .sc-hero h1, body.t-ventiel .sc-h2, body.t-ventiel .sc-look-t { font-family: var(--sf-serif); font-weight: 400; }
body.t-ventiel .sc-hero h1 { font-size: clamp(33px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 18px; }
/* BRASS 1 of 3 — a hairline outline and no fill, so the photograph is never
   interrupted by a solid slab */
body.t-ventiel .sc-hero .btn.brand.sc-hero-ghost { border-color: var(--vt-brass); border-width: 1px; color: var(--vt-bone); }
body.t-ventiel .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--vt-brass); color: #0d0b09; }
body.t-ventiel .sc-h2 { color: var(--vt-bone); font-size: clamp(21px, 2.7vw, 31px); letter-spacing: -0.01em; }

/* FOUR TILES, NO GUTTER — the strip breaks out of its container and the four
   photographs run screen edge to screen edge with nothing between them. The
   label is laid over the foot of its own picture in a single shared grid cell
   rather than under it, so no strip of ground ever gets in the way. */
body.t-ventiel .sc-strip { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-ventiel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-ventiel .sc-strip-card { display: grid; grid-template-areas: 'tile'; }
body.t-ventiel .sc-strip-img, body.t-ventiel .sc-strip-label { grid-area: tile; }
body.t-ventiel .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; }
body.t-ventiel .sc-strip-label { align-self: end; margin: 0; padding: 76px 16px 26px; color: var(--vt-bone); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; background: linear-gradient(rgba(13, 11, 9, 0), rgba(13, 11, 9, .74)); }

/* THE LOOKBOOK — six image-led rows butted hard against the tiles above and the
   band below, the picture taller than a square so it keeps the upper hand over
   the words the way the reference does. */
body.t-ventiel .sc-lookbook { padding: 0; }
body.t-ventiel .sc-lookbook > .container { padding: 108px 20px 42px; }
body.t-ventiel .sc-look-media img { aspect-ratio: 3 / 4; }
body.t-ventiel .sc-look-copy { padding: 40px clamp(24px, 6vw, 96px); }
body.t-ventiel .sc-look-cat { color: var(--muted); letter-spacing: 0.22em; font-size: 10px; }
body.t-ventiel .sc-look-desc { color: var(--text); max-width: 42ch; }
/* BRASS 2 of 3 — the rule above the rand figure, and the only rule anywhere on
   the page. The category above it stays muted so the accent lands once a row. */
body.t-ventiel .sc-look-p { color: var(--vt-bone); font-weight: 600; font-variant-numeric: tabular-nums; }
body.t-ventiel .sc-look-p::before { content: ''; display: block; width: 34px; height: 1px; background: var(--vt-brass); margin-bottom: 16px; }

/* WIDE, TWICE AND LAST — the only second full photograph on the page, flush top
   and bottom, with the words held in the upper third */
body.t-ventiel .sc-banner { min-height: 78vh; margin: 0 calc(50% - 50vw); padding: 18vh 24px 0; }
body.t-ventiel .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.14; }

/* THE ONE BREAK — no photograph at all, a narrow column of small type with a
   great deal of air over and under it */
body.t-ventiel .sc-richtext { max-width: 560px; padding: 150px 20px 146px; }
body.t-ventiel .sc-richtext p { color: var(--text); font-size: 15px; line-height: 2.05; }

/* the page closes as wide as it opened — a tinted strip on the full measure,
   the way the reference's footer restates its header. BRASS 3 of 3 is the
   submit, and the accent does not appear again. */
body.t-ventiel .sc-contact-band { background: #151210; border-top: 1px solid var(--line); padding: 116px 0 124px; }
body.t-ventiel .sc-contact-band .btn.brand { background: var(--vt-brass); border-color: var(--vt-brass); color: #0d0b09; }
body.t-ventiel .sc-contact-band .btn.brand:hover { background: var(--vt-lit); }

@media (max-width: 900px) {
  body.t-ventiel .sc-hero { min-height: 88vh; }
  body.t-ventiel .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-ventiel .sc-banner { min-height: 58vh; padding: 14vh 20px 0; }
  body.t-ventiel .sc-richtext { padding: 98px 20px 94px; }
}

/* NIGHT — the near-black goes its last stop toward true black so the
   photographs become the only lit thing in the room, and the brass is lifted a
   shade to stay legible against it. The bone warms rather than brightens. */
html[data-theme="dark"] body.t-ventiel {
  background: #060505;
  color: #c8bfb1;
  --vt-brass: #c3a06a;
  --vt-lit: #d8b87e;
  --vt-bone: #f6f1e8;
  --bg-flat: #060505;
  --header-bg: #060505;
  --surface: #0e0c0a;
  --surface-2: #14110e;
  --line: #1c1815;
  --line-strong: #2e2822;
  --heading: #f6f1e8;
  --text: #c8bfb1;
  --muted: #7d7468;
}
html[data-theme="dark"] body.t-ventiel .sf-head, html[data-theme="dark"] body.t-ventiel .sf-header,
html[data-theme="dark"] body.t-ventiel .sf-foot, html[data-theme="dark"] body.t-ventiel .sf-footer,
html[data-theme="dark"] body.t-ventiel .sf-cats { background: #060505; border-color: #1c1815; }
html[data-theme="dark"] body.t-ventiel .sc-contact-band { background: #0e0c0a; }