/* ---- trommel (Trommel — Trunks, luggage & travel goods 219) ----------------
   THE STRUCTURAL MOVE: the page is contained chalk bands under very generous
   air, broken by exactly ONE dark full-bleed moment, and it closes on a
   photographic slab. Two things carry that. First the catalogue: the shared
   lookbook is alternating half-width rows, and here it is flattened into a
   four-across wall of tall frames with the rand price sitting under each one,
   two full rows of four and no orphan. Second the close: the detail band is
   eight frames welded edge to edge with a 2px hairline of ground between them
   and no caption at all — written as TWO headingless strips of four because
   the section parser caps a strip at six items, then pulled together by the
   adjacent-sibling rule so they render as one slab. The two strips are told
   apart from the category row the honest way, by :not(:has(.sc-h2)), never by
   a positional selector. Saddle tan is spent on three jobs only: the price,
   the filled slabs and the two hairlines ruling the about band. The banner
   deepens to wet slate by blending a slate ground under the inline photograph,
   so the one dark interruption needs no second accent. */
body.t-trommel {
  background: #faf9f6;
  color: #23211d;
  --trm-tan: #b08050;
  --bg-flat: #faf9f6;
  --surface: #faf9f6;
  --surface-2: #f1efe9;
  --line: #e0dbd1;
  --line-strong: #c8c1b3;
  --heading: #121110;
  --text: #23211d;
  --muted: #7a746a;
  --header-bg: #faf9f6;
  --radius: 0;
  --shadow: none;
}

/* paper bar and paper foot, flat and unblurred */
body.t-trommel .sf-header, body.t-trommel .sf-head,
body.t-trommel .sf-footer, body.t-trommel .sf-foot, body.t-trommel .sf-cats {
  background: #faf9f6; border-color: #e0dbd1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-trommel .sf-name { font-weight: 700; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }

/* a flat tan slab — no ring, no shadow, no rounded corner */
body.t-trommel .btn.brand { background: var(--trm-tan); border-color: var(--trm-tan); color: #fff8ef; border-radius: 0; box-shadow: none; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 28px; }
body.t-trommel .btn.brand:hover { background: #121110; border-color: #121110; color: #faf9f6; opacity: 1; }

/* the stage: three plates, one short cut, one tracked line and a ghost */
body.t-trommel .sc-hero { min-height: 100vh; padding: 26px 20px; }
body.t-trommel .sc-hero h1 { font-weight: 700; font-size: clamp(30px, 5.6vw, 74px); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; max-width: 900px; margin: 0 auto 20px; }
body.t-trommel .sc-hero p { font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 34px; }

body.t-trommel .sc-h2 { font-size: clamp(12px, 1.5vw, 15px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--heading); margin: 0 0 34px; }

/* the category row: six gapped tiles, caption under the picture */
body.t-trommel .sc-strip { padding: 92px 20px 0; }
body.t-trommel .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(6, 1fr); gap: 18px; }
body.t-trommel .sc-strip-img { aspect-ratio: 4 / 5; border: 0; border-radius: 0; background: var(--surface-2); }
body.t-trommel .sc-strip-label { margin-top: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

/* THE CLOSE — two headingless strips of four, welded into one gapless slab of
   eight detail frames with nothing written on it */
body.t-trommel .sc-strip:not(:has(.sc-h2)) { width: 100vw; max-width: 100vw; margin: 96px calc(50% - 50vw) 0; padding: 0; }
body.t-trommel .sc-strip:not(:has(.sc-h2)) + .sc-strip:not(:has(.sc-h2)) { margin-top: 2px; }
body.t-trommel .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 2px; }
body.t-trommel .sc-strip:not(:has(.sc-h2)) .sc-strip-label { display: none; }

/* THE WALL — alternating rows flattened to four across, price under the frame */
body.t-trommel .sc-lookbook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 52px 22px; max-width: 1160px; margin: 0 auto; padding: 0 20px 26px; }
body.t-trommel .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 100px 0 0; text-align: center; }
body.t-trommel .sc-look-row { display: block; }
body.t-trommel .sc-look-cat, body.t-trommel .sc-look-desc { display: none; }
body.t-trommel .sc-look-copy { padding: 14px 0 0; }
body.t-trommel .sc-look-t { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; }
body.t-trommel .sc-look-p { margin: 5px 0 14px; font-size: 15px; font-weight: 700; color: var(--trm-tan); }

/* the about band is the one place the tan hairline rules the column */
body.t-trommel .sc-about-split { border-top: 1px solid var(--trm-tan); border-bottom: 1px solid var(--trm-tan); margin-top: 96px; padding: 88px 20px; gap: 64px; }

/* the ONE dark interruption: the photograph blended down onto wet slate */
body.t-trommel .sc-banner { margin: 100px calc(50% - 50vw) 0; padding: 15vh 28px; background-color: #2b3238; background-blend-mode: multiply; }
body.t-trommel .sc-banner h2 { font-size: clamp(24px, 4vw, 48px); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 14px; }

@media (max-width: 900px) {
  body.t-trommel .sc-lookbook { grid-template-columns: repeat(2, 1fr); }
  body.t-trommel .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(3, 1fr); }
  body.t-trommel .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-trommel .sc-about-split { gap: 34px; padding: 56px 20px; }
}

/* NIGHT — the chalk goes to a warm near-black, the tan lifts because it is
   still carrying the price and every slab on its own, and the slabs invert on
   hover so the ink-black hover state cannot vanish into the ground. */
html[data-theme="dark"] body.t-trommel {
  background: #15130f;
  color: #c8c3b9;
  --trm-tan: #cfa068;
  --bg-flat: #15130f;
  --surface: #1c1915;
  --surface-2: #232019;
  --line: #302b23;
  --line-strong: #453e33;
  --heading: #f4f1ea;
  --text: #c8c3b9;
  --muted: #8b8478;
  --header-bg: #15130f;
}
html[data-theme="dark"] body.t-trommel .sf-header, html[data-theme="dark"] body.t-trommel .sf-head,
html[data-theme="dark"] body.t-trommel .sf-footer, html[data-theme="dark"] body.t-trommel .sf-foot,
html[data-theme="dark"] body.t-trommel .sf-cats { background: #15130f; border-color: #302b23; }
html[data-theme="dark"] body.t-trommel .btn.brand { color: #15130f; }
html[data-theme="dark"] body.t-trommel .btn.brand:hover { background: #f4f1ea; border-color: #f4f1ea; color: #15130f; }
html[data-theme="dark"] body.t-trommel .sc-strip-img { background: #232019; }