/* PELMET — a curtain workroom hung behind a mount. TWO devices carry the whole
   theme and nothing else is touched. First, the mat: a 28px bone-white frame
   fixed to the VIEWPORT (not the document), with the body padded by the same
   28px, so every "full-bleed" band stops at the mount and no copy is ever
   hidden under it. Second, the same four-across row run TWICE off-centre —
   the strip and the buy grid both start a quarter of the way in on a half-tone
   of the ground — with the one perfectly centred manifesto wedged between them
   so the asymmetry reads as deliberate rather than broken. Only the strip runs
   out past the right-hand mat; the priced row stays whole, because a clipped
   add-to-cart is a bug, not a device. The manifesto ships as a `split`
   richtext (the centred layout drops its image) and is re-stacked here with
   `column-reverse` into one centred column, photograph beneath the copy. The
   mirrored project band and the manifesto are both reached through ADJACENT
   CLASS selectors — every section renders as <section>, so :nth-of-type would
   count the hero and silently miss. */
body.t-pelmet {
  background: #f4f1ec;
  color: #34302b;
  padding: var(--pm-mat-w);
  --pm-mat-w: 28px;
  --pm-mat: #fcfaf6;
  --pm-clay: #b4623f;
  --pm-half: #eae4da;
  --pm-off: 26%;
  --radius: 0;
  --shadow: none;
  --header-bg: #f4f1ec;
  --surface: #f4f1ec;
  --surface-2: #eae4da;
  --line: #ddd6c9;
  --line-strong: #c3b9a6;
  --heading: #1b1917;
  --text: #34302b;
  --muted: #7d7367;
}

/* THE MAT — fixed, so it frames the glass rather than the document. Every band
   below scrolls under it and nothing ever bleeds off the screen. */
body.t-pelmet::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  border: var(--pm-mat-w) solid var(--pm-mat);
}

/* both sticky bars drop below the mount instead of sliding beneath it */
body.t-pelmet .sf-header, body.t-pelmet .sf-head, body.t-pelmet .sf-searchpanel,
body.t-pelmet .sf-foot, body.t-pelmet .sf-footer, body.t-pelmet .sf-cats {
  top: var(--pm-mat-w);
  background: #f4f1ec;
  border-color: #ddd6c9;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.t-pelmet .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 21px; letter-spacing: 0.22em; text-transform: uppercase; }
body.t-pelmet .btn.brand { background: var(--pm-clay); border: 0; color: #f7f3ee; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; padding: 15px 30px; }

/* THE STAGE — three slides filling the mat opening exactly, copy held a third
   in from the LEFT. The sub is re-ordered above the heading, which is how the
   eyebrow stays real editable copy instead of generated text. */
body.t-pelmet .sc-hero { min-height: calc(100vh - var(--pm-mat-w) * 2); padding: 120px 28px; }
body.t-pelmet .sc-hero-left .sc-hero-inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 620px; margin-left: min(30vw, 420px); }
body.t-pelmet .sc-hero-inner p { order: -1; margin: 0 0 22px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; text-shadow: none; }
body.t-pelmet .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(40px, 7.4vw, 92px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 34px; text-shadow: none; }
body.t-pelmet .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-color: var(--pm-clay); color: #f7f3ee; }
body.t-pelmet .sc-h2, body.t-pelmet .pdp h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(22px, 3vw, 34px); letter-spacing: -0.01em; text-align: left; }

/* TWO PROJECT BANDS, MIRRORED — 8:4 both times, the photograph outweighing the
   words two to one. Band two is the ADJACENT split, never :nth-of-type. */
body.t-pelmet .sc-about-split { grid-template-columns: 2fr 1fr; gap: 48px; align-items: end; max-width: 1180px; padding: 96px 28px 0; }
body.t-pelmet .sc-about-split + .sc-about-split { grid-template-columns: 1fr 2fr; padding-top: 88px; }
body.t-pelmet .sc-about-split + .sc-about-split .sc-about-media { order: 2; }

/* THE BREATH — the only symmetric band on the page, sitting between the two
   off-centre rows. column-reverse puts the copy above the photograph without a
   second rule, and a short clay rule stands in for the eyebrow. */
body.t-pelmet .sc-strip + .sc-about-split { display: flex; flex-direction: column-reverse; align-items: center; gap: 46px; max-width: 780px; padding: 116px 28px 104px; text-align: center; }
body.t-pelmet .sc-strip + .sc-about-split .sc-h2 { text-align: center; font-size: clamp(46px, 8vw, 104px); line-height: 1; margin: 0 0 24px; }
body.t-pelmet .sc-strip + .sc-about-split .sc-h2::before { content: ''; display: block; width: 44px; height: 1px; background: var(--pm-clay); margin: 0 auto 28px; }

/* THE SAME ROW, TWICE, OFF-CENTRE — both give up the container, take the
   half-tone ground and start a quarter of the way in, heading included. Only
   the strip runs out past the right-hand mat, and it is clipped, not scrolled. */
body.t-pelmet .sc-strip, body.t-pelmet .sc-buygrid { max-width: none; width: 100%; overflow: hidden; background: var(--pm-half); padding: 78px 0 90px var(--pm-off); }
body.t-pelmet .sc-strip-row, body.t-pelmet .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; width: 100%; }
body.t-pelmet .sc-strip-row { width: calc(100% + 13vw); }
body.t-pelmet .sc-strip-label, body.t-pelmet .sc-buy-cat { margin-top: 14px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
body.t-pelmet .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-pelmet .sc-buy-p { color: var(--pm-clay); font-weight: 600; font-size: 16px; }

/* the inverted band, welded onto the foot of the priced row: the photograph is
   multiplied down into near-black so the bone type is the only bright thing in
   the lower third. The right-hand padding, not an auto margin, is what holds
   the copy off centre. */
body.t-pelmet .sc-banner { background-color: #1b1917; background-blend-mode: multiply; width: auto; max-width: none; margin: 0 calc(50% - 50vw); min-height: 56vh; display: flex; align-items: center; padding: 104px 44vw 104px 8vw; text-align: left; }
body.t-pelmet .sc-banner h2, body.t-pelmet .sc-banner p { color: #f4f1ec; text-shadow: none; }

@media (max-width: 900px) {
  body.t-pelmet { --pm-mat-w: 14px; }
  body.t-pelmet .sc-hero-left .sc-hero-inner { margin-left: 0; }
  body.t-pelmet .sc-strip-row, body.t-pelmet .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body.t-pelmet .sc-strip, body.t-pelmet .sc-buygrid { padding: 58px 20px 64px; }
  body.t-pelmet .sc-banner { padding: 72px 24px; }
}

/* NIGHT — the workroom after the lights go off. The mat inverts with the page,
   because a bone frame around a near-black page reads as a fault rather than a
   mount; it is a token, so the fixed frame flips without a second rule. Clay
   lifts two steps — #b4623f was chosen against bone paper and goes to dried
   blood on a near-black ground. The half-tone keeps its job of being one step
   off the ground, so the two off-centre rows stay legible as shapes. */
html[data-theme="dark"] body.t-pelmet {
  background: #131211;
  color: #b8b1a6;
  --pm-mat: #080807;
  --pm-clay: #d07a50;
  --pm-half: #1b1a17;
  --header-bg: #131211;
  --surface: #131211;
  --surface-2: #1b1a17;
  --line: #2a2724;
  --line-strong: #3d3833;
  --heading: #f2ede4;
  --text: #b8b1a6;
  --muted: #8a8175;
}
html[data-theme="dark"] body.t-pelmet .sf-header, html[data-theme="dark"] body.t-pelmet .sf-head,
html[data-theme="dark"] body.t-pelmet .sf-searchpanel, html[data-theme="dark"] body.t-pelmet .sf-foot,
html[data-theme="dark"] body.t-pelmet .sf-footer, html[data-theme="dark"] body.t-pelmet .sf-cats {
  background: #131211; border-color: #2a2724;
}
html[data-theme="dark"] body.t-pelmet .sc-banner { background-color: #050504; }