/* ============================== PLUME ==============================
   THE STRUCTURAL MOVE: the hero IS the page. A full-viewport four-slide
   carousel carries a typographic ladder — a small tracked grey eyebrow,
   one colossal 0.28em-letterspaced word, a half-size second line, then a
   word with a hairline under it — hung off a hard-left spine, and every
   block below it starts from that same line, which is how the
   reference's full-height left rail is bought back without laying a
   finger on the header. The platform's dark wash is blended away on the
   hero and the band, so ink type lands straight on a clean photograph;
   the workshop is the only picture in the shop allowed to go dark. No
   accent colour, no fill, no radius, no shadow — every control is a word
   with a 1px rule under it, and all the warmth on the page is tan hide
   and bone plume arriving through the pictures.
   Type, colour and spacing only: nothing here orders or positions a
   single item inside .sf-header. No :nth-of-type, no :first-of-type. */
body.t-plume {
  background: #f7f4ef;
  color: #0b0b0b;
  --pl-ink: #0b0b0b;
  --pl-grey: #7d7d7d;
  /* the spine — the exact left edge of a .container at every width, so a
     full-bleed section and a contained one start on the same line */
  --pl-spine: max(22px, calc(50vw - 520px));
  --bg-flat: #f7f4ef;
  --header-bg: #f7f4ef;
  --surface: #f7f4ef;
  --surface-2: #efeae1;
  --line: #ddd6c9;
  --line-strong: #0b0b0b;
  --heading: #0b0b0b;
  --text: #2b2926;
  --muted: #7d7d7d;
  --radius: 0;
  --shadow: none;
}

/* a flat oyster bar with one hairline under it — case, tracking and colour */
body.t-plume .sf-head, body.t-plume .sf-header,
body.t-plume .sf-foot, body.t-plume .sf-footer, body.t-plume .sf-cats {
  background: #f7f4ef; border-color: #ddd6c9;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-plume .sf-name, body.t-plume .sf-navlink { text-transform: uppercase; letter-spacing: 0.26em; font-size: 12px; font-weight: 400; }

/* every control in the shop is the same object: a tracked word with a 1px
   rule under it. No slab, no edge, no radius, no colour. */
body.t-plume .btn.brand {
  background: transparent; border: 0; border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--pl-ink); color: var(--pl-ink);
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 10.5px; font-weight: 500;
  padding: 0 2px 9px;
}
body.t-plume .btn.brand:hover,
body.t-plume .sc-hero .btn.brand.sc-hero-ghost:hover { background: transparent; color: var(--pl-grey); box-shadow: inset 0 -1px 0 var(--pl-grey); }

/* THE WHOLE FIRST SCREEN — four slides, and the platform scrim blended out
   of both the hero and the band so black type sits on clean photography */
body.t-plume .sc-hero, body.t-plume .sc-hero-slide, body.t-plume .sc-banner { background-blend-mode: lighten; }
body.t-plume .sc-hero { min-height: 100vh; padding: 132px var(--pl-spine) 104px; }
body.t-plume .sc-hero-left .sc-hero-inner { max-width: min(900px, 68vw); }
body.t-plume .sc-hero-inner::before {
  content: 'oudtshoorn · klein karoo · since 1996';
  display: block; margin: 0 0 30px;
  color: var(--pl-grey); font-size: 11px; font-weight: 500; letter-spacing: 0.3em;
}
body.t-plume .sc-hero h1 {
  color: var(--pl-ink); text-shadow: none; text-transform: uppercase;
  font-size: clamp(40px, 8.2vw, 116px); font-weight: 200; letter-spacing: 0.28em; line-height: 1.02; margin: 0 0 22px;
}
body.t-plume .sc-hero p {
  color: var(--pl-ink); text-shadow: none; text-transform: uppercase;
  font-size: clamp(19px, 4vw, 58px); font-weight: 200; letter-spacing: 0.19em; line-height: 1.1; margin: 0 0 46px;
}
body.t-plume .sc-hero .btn.brand.sc-hero-ghost {
  background: transparent; border-color: transparent; color: var(--pl-ink);
  box-shadow: inset 0 -1px 0 var(--pl-ink); padding: 0 2px 9px; letter-spacing: 0.3em;
}

/* the ladder repeats down the page: every section heading is the same
   letterspaced display word, hard left on the spine */
body.t-plume .sc-h2 {
  text-align: left; text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 40px); font-weight: 200; letter-spacing: 0.28em; line-height: 1.15;
  margin: 0 0 clamp(32px, 4vw, 52px);
}

/* FOUR TILES, NO GAP AND NO CONTAINER — the strip runs the full width of the
   window with one word under each picture */
body.t-plume .sc-strip { max-width: none; padding: 0 0 clamp(54px, 6vw, 86px); }
body.t-plume .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-plume .sc-strip-img { border: 0; aspect-ratio: 3 / 4; }
body.t-plume .sc-strip-label, body.t-plume .sc-look-cat, body.t-plume .sc-field label {
  color: var(--pl-grey); font-size: 10.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; margin: 16px 0 0;
}

/* the catalogue is six pictures in editorial pairs with a great deal of white
   between them, the name and the price set small underneath rather than beside */
body.t-plume .sc-lookbook {
  display: grid; grid-template-columns: 1fr 1fr; max-width: none;
  gap: clamp(56px, 7vw, 100px) clamp(34px, 5vw, 84px);
  padding: clamp(72px, 8vw, 116px) var(--pl-spine) clamp(64px, 7vw, 100px);
}
body.t-plume .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0; }
body.t-plume .sc-look-row { display: block; }
body.t-plume .sc-look-copy { padding: 6px 0 0; }
body.t-plume .sc-look-t { font-size: 13.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin: 14px 0 0; }
body.t-plume .sc-look-p { color: var(--pl-ink); font-size: 13.5px; font-weight: 400; letter-spacing: 0.16em; margin: 16px 0 20px; }

/* the one landscape in the shop, full-bleed and unscrimmed, with a single
   line of type set on the spine in the bottom third */
body.t-plume .sc-banner {
  min-height: 74vh; margin: 0 calc(50% - 50vw); padding: 0 0 clamp(46px, 6vw, 84px);
  display: flex; align-items: flex-end;
}
body.t-plume .sc-banner-inner { max-width: 880px; margin: 0 0 0 var(--pl-spine); text-align: left; }
body.t-plume .sc-banner h2 {
  color: var(--pl-ink); text-shadow: none; text-transform: uppercase;
  font-size: clamp(16px, 1.9vw, 24px); font-weight: 300; letter-spacing: 0.18em; line-height: 1.5; margin: 0;
}

/* the only dark picture on the page: the story runs as one unbroken column
   of 18px over the workshop, still hanging off the spine */
body.t-plume .sc-about-overlay { min-height: 76vh; padding: clamp(92px, 10vw, 142px) var(--pl-spine); display: flex; align-items: center; }
body.t-plume .sc-about-overlay-inner { max-width: 560px; margin: 0; text-align: left; }
body.t-plume .sc-about-overlay p { font-size: 18px; line-height: 1.95; text-shadow: none; }

/* the order strip: one hairline across the foot of the shop, the three
   fields side by side on it, and Send as one more ruled word */
body.t-plume .sc-contact-band { background: transparent; border-top: 1px solid var(--pl-ink); padding: clamp(80px, 9vw, 120px) 0 clamp(74px, 8vw, 110px); }
body.t-plume .sc-contact-band-inner { max-width: none; text-align: left; padding: 0 var(--pl-spine); }
body.t-plume .sc-contact-band .sc-h2::before {
  content: 'the workshop'; display: block; margin: 0 0 26px; text-transform: lowercase;
  color: var(--pl-grey); font-size: 11px; font-weight: 500; letter-spacing: 0.3em;
}
body.t-plume .sc-contact-band .sc-contact-sub { color: var(--pl-grey); font-size: 12.5px; letter-spacing: 0.12em; line-height: 2.3; white-space: pre-line; margin: 0 0 44px; }
body.t-plume .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(22px, 3vw, 46px); align-items: end; }
body.t-plume .sc-contact-band .sc-contact-form .btn { justify-self: start; margin-top: 10px; }
body.t-plume .sc-field input, body.t-plume .sc-field textarea {
  border: 0; border-radius: 0; background: transparent; padding: 9px 0; height: 44px; resize: vertical;
  box-shadow: inset 0 -1px 0 var(--pl-ink);
}

@media (max-width: 900px) {
  body.t-plume .sc-hero { min-height: 88vh; }
  body.t-plume .sc-strip-row { grid-template-columns: 1fr 1fr; }
  body.t-plume .sc-lookbook { grid-template-columns: 1fr; }
  body.t-plume .sc-banner { min-height: 56vh; }
  body.t-plume .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; gap: 18px; }
}

/* NIGHT — the two tones simply swap: ink becomes the ground and oyster
   becomes the type. The scrims come back on the hero and the band at the
   same moment, because pale type needs a dimmed photograph under it
   exactly where black type needed a clean one. Still no accent anywhere. */
html[data-theme="dark"] body.t-plume {
  background: #0b0b0b;
  color: #d9d5cd;
  --pl-ink: #f4f1ea;
  --pl-grey: #8d8981;
  --bg-flat: #0b0b0b;
  --header-bg: #0b0b0b;
  --surface: #0b0b0b;
  --surface-2: #141311;
  --line: #26241f;
  --line-strong: #f4f1ea;
  --heading: #f4f1ea;
  --text: #d9d5cd;
  --muted: #8d8981;
  --radius: 0;
  --shadow: none;
}
html[data-theme="dark"] body.t-plume .sf-head, html[data-theme="dark"] body.t-plume .sf-header,
html[data-theme="dark"] body.t-plume .sf-foot, html[data-theme="dark"] body.t-plume .sf-footer,
html[data-theme="dark"] body.t-plume .sf-cats { background: #0b0b0b; border-color: #26241f; }
html[data-theme="dark"] body.t-plume .sc-hero, html[data-theme="dark"] body.t-plume .sc-hero-slide,
html[data-theme="dark"] body.t-plume .sc-banner { background-blend-mode: normal; }