/* ---------- Sillage — Perfumer & fragrance house 197 (store) ----------
   THE STRUCTURAL MOVE: the opening screen is a hard vertical two-colour field —
   ink-violet across the left 48%, bone white across the right, meeting on a
   dead-straight seam with no rule, gradient or shadow — and the one oversized
   monochrome portrait carries straight THROUGH that seam rather than being cut
   by it. The photograph is the section's own background, so the split is laid
   over it as a two-stop gradient set to multiply: the sitter goes violet left
   of the seam and stays plain on the bone right, which is the only way to get a
   cut-out straddling a colour field without a second element. The dim wash the
   shared hero bakes into its inline background is cancelled with
   background-blend-mode: screen — black screened onto anything is a no-op — so
   both fields stay flat and saturated instead of muddy. Everything below the
   hero is corner-anchored rather than centred: every heading flush left, the
   about facts stacked hard to the right edge against a full-bleed workbench,
   and the contact band welded to the bottom edge with the footer painted the
   same violet so nothing floats under it. Pale iris carries the letterspaced
   label lines on violet grounds; on bone those same lines take the violet
   itself, so there is still only one hue anywhere on the page. */
body.t-sillage {
  background: #f7f5f1;
  color: #2c2833;
  --sl-violet: #2e1a47;
  --sl-iris: #c9bedd;
  --bg-flat: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #efece5;
  --line: #e2ddd3;
  --line-strong: #cac3b5;
  --heading: #16141a;
  --text: #2c2833;
  --muted: #6a6472;
  --header-bg: #f7f5f1;
  --radius: 0;
  --shadow: none;
}

/* the bar is flat bone with a hairline, wordmark hard left in letterspaced caps
   — nothing glassy, nothing blurred, nothing centred */
body.t-sillage .sf-header, body.t-sillage .sf-head, body.t-sillage .sf-cats {
  background: #f7f5f1; border-color: #e2ddd3;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-sillage .sf-name { font-weight: 600; font-size: 15px; letter-spacing: 0.26em; text-transform: uppercase; }
body.t-sillage .btn.brand {
  background: var(--sl-violet); border-color: var(--sl-violet); color: #f7f5f1;
  box-shadow: none; border-radius: 0; padding: 15px 30px;
  font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
body.t-sillage .btn.brand:hover { background: #1f1130; border-color: #1f1130; }

/* THE SPLIT — full viewport, portrait oversized and anchored to the bottom
   right so it bleeds off both edges, the dim wash screened away */
body.t-sillage .sc-hero {
  min-height: 100vh; padding: 0 clamp(20px, 7vw, 130px);
  background-color: #f7f5f1; background-size: cover; background-position: 62% 100%;
  background-blend-mode: screen, normal;
  isolation: isolate;
}
body.t-sillage .sc-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--sl-violet) 0 48%, #f7f5f1 48%);
  mix-blend-mode: multiply;
}
body.t-sillage .sc-hero-inner { margin: 0; max-width: 42vw; }
body.t-sillage .sc-hero h1 {
  font-weight: 600; font-size: clamp(34px, 5.4vw, 78px); line-height: 1.06;
  letter-spacing: -0.02em; text-shadow: none; margin: 0;
}
/* the deliberate empty gap the reference leaves between the name and the one
   letterspaced contact line */
body.t-sillage .sc-hero p {
  color: var(--sl-iris); text-shadow: none;
  margin: clamp(56px, 13vh, 130px) 0 30px;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}

body.t-sillage .sc-h2 {
  text-align: left; font-weight: 600; color: var(--heading);
  font-size: clamp(19px, 2.3vw, 26px); letter-spacing: 0.02em; margin-bottom: 26px;
}

/* THE FACTS — workbench full-bleed to the section edge on one half, three
   clipped labelled facts stacked hard against the far edge of the other */
body.t-sillage .sc-about-split { max-width: none; padding: 0; gap: 0; align-items: stretch; }
body.t-sillage .sc-about-media img { aspect-ratio: auto; height: 100%; min-height: 64vh; border-radius: 0; }
body.t-sillage .sc-about-copy {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  padding: 96px clamp(24px, 6vw, 96px) 84px 6vw;
}
body.t-sillage .sc-about-copy .sc-h2, body.t-sillage .sc-about-copy p { width: 100%; max-width: 340px; }
body.t-sillage .sc-about-copy p { color: var(--text); font-size: 17px; line-height: 1.62; }

/* four material macros, gapped, one row that fills */
body.t-sillage .sc-strip { padding: 94px 20px 86px; }
body.t-sillage .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.t-sillage .sc-strip-card { text-align: left; }
body.t-sillage .sc-strip-img { border-radius: 0; border: 0; background: #ffffff; aspect-ratio: 3 / 4; }
body.t-sillage .sc-strip-label {
  margin-top: 14px; color: var(--sl-violet); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
}

/* six bottles, three across in two rows that fill, flat-lays on plain white */
body.t-sillage .sc-buygrid { padding: 24px 20px 100px; }
body.t-sillage .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 42px; }
body.t-sillage .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-sillage .sc-buy-media { background: #ffffff; }
body.t-sillage .sc-buy-media img { aspect-ratio: 3 / 4; }
body.t-sillage .sc-buy-cat { color: var(--sl-violet); font-size: 10px; letter-spacing: 0.2em; }
body.t-sillage .sc-buy-p { color: var(--heading); }

/* the one full-bleed break, copy flush left and never centred */
body.t-sillage .container:has(> .sc-banner) { max-width: none; padding: 0; }
body.t-sillage .sc-banner {
  border-radius: 0; min-height: 56vh; text-align: left;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 clamp(24px, 7vw, 130px);
}
body.t-sillage .sc-banner-inner { margin: 0; max-width: 470px; }
body.t-sillage .sc-banner h2 { text-shadow: none; font-weight: 600; }

/* THE WELD — violet band hard against the bottom edge, hairline baselines
   instead of boxes, and the footer painted the same colour so nothing opens
   underneath it */
body.t-sillage .sc-contact-band { background: var(--sl-violet); color: #ffffff; padding: 98px 0 92px; }
body.t-sillage .sc-contact-band-inner { max-width: none; text-align: left; }
body.t-sillage .sc-contact-band .sc-h2 { color: #ffffff; }
body.t-sillage .sc-contact-band .sc-contact-sub { color: var(--sl-iris); max-width: 520px; line-height: 1.7; }
body.t-sillage .sc-contact-band .sc-contact-form { max-width: 620px; gap: 26px; }
body.t-sillage .sc-contact-band .sc-field label {
  color: var(--sl-iris); font-weight: 600; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
body.t-sillage .sc-contact-band .sc-field input, body.t-sillage .sc-contact-band .sc-field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(201, 190, 221, 0.45);
  border-radius: 0; padding: 8px 0; color: #ffffff;
}
body.t-sillage .sc-contact-band .btn.brand { background: #f7f5f1; border-color: #f7f5f1; color: var(--sl-violet); }
body.t-sillage .sf-footer, body.t-sillage .sf-foot {
  margin-top: 0; background: var(--sl-violet); border-top: 0; color: var(--sl-iris);
}
body.t-sillage .sf-footer a { color: var(--sl-iris); }

@media (max-width: 900px) {
  body.t-sillage .sc-hero-inner { max-width: none; }
  body.t-sillage .sc-hero::before { background: var(--sl-violet); }
  body.t-sillage .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-sillage .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-sillage .sc-about-media img { min-height: 46vh; }
  body.t-sillage .sc-about-copy { align-items: flex-start; padding: 56px 20px 60px; }
}

/* NIGHT — bone drops to ink and the violet lifts, so the seam stays a seam.
   The right field of the split cannot go dark or multiplying it would crush the
   portrait to black, so it becomes a mid grey: the photograph dims to a lit
   panel beside the violet instead of disappearing. Product and material grounds
   go off-black so the glass and the resin stay the brightest things in frame. */
html[data-theme="dark"] body.t-sillage {
  background: #141218;
  color: #cdc7d4;
  --sl-violet: #3b2359;
  --sl-iris: #b7a8d2;
  --bg-flat: #141218;
  --surface: #1c1922;
  --surface-2: #221e2b;
  --line: #2e2937;
  --line-strong: #453f52;
  --heading: #f2eff6;
  --text: #cdc7d4;
  --muted: #8b8497;
  --header-bg: #141218;
}
html[data-theme="dark"] body.t-sillage .sf-header, html[data-theme="dark"] body.t-sillage .sf-head,
html[data-theme="dark"] body.t-sillage .sf-cats { background: #141218; border-color: #2e2937; }
html[data-theme="dark"] body.t-sillage .sc-hero::before {
  background: linear-gradient(90deg, var(--sl-violet) 0 48%, #5a5364 48%);
}
html[data-theme="dark"] body.t-sillage .sc-strip-img,
html[data-theme="dark"] body.t-sillage .sc-buy-media { background: #1c1922; }
html[data-theme="dark"] body.t-sillage .sc-contact-band .btn.brand { background: #efe9f7; border-color: #efe9f7; color: #1a0f2a; }
html[data-theme="dark"] body.t-sillage .btn.brand { color: #f2eff6; }
@media (max-width: 900px) {
  html[data-theme="dark"] body.t-sillage .sc-hero::before { background: var(--sl-violet); }
}