/* ---- poplin (Poplin — Shirtmaker 69) — bone paper, chambray indigo ---------
   THE STRUCTURAL MOVE: nothing here is a scene. Every block is a SHALLOW band
   opened by a hairline that runs the full width of the window while the words
   stay pinned to one medium centred column, so the page reads as a stack of
   ledger rows rather than a sequence of pictures. The rule is drawn by a
   full-bleed ::before on each band — that is what lets the GROUND escape the
   1080px container without the COPY escaping with it. The hero is the
   shallowest on the platform at 45vh, a type-led welcome rather than a cover
   shot, and the header is a flat slab above it that scrolls away and never
   comes back. One indigo, on captions, prices and the buy slab, nowhere else. */
body.t-poplin {
  background: #f7f5f0;
  color: #16161a;
  --radius: 0;
  --header-bg: #f7f5f0;
  --surface: #fdfcfa;
  --surface-2: #efece5;
  --line: #ded9cf;
  --line-strong: #c7c1b5;
  --heading: #16161a;
  --text: #16161a;
  --muted: #5c5f68;
}
body.t-poplin .sf-head, body.t-poplin .sf-foot, body.t-poplin .sf-footer { background: #f7f5f0; border-color: #ded9cf; }
/* a flat one-pager bar that scrolls away with the hero and never returns — with
   nothing sticky left to clear, the anchor offset would only open a dead gap */
body.t-poplin .sf-header { position: static; background: #f7f5f0; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #ded9cf; }
body.t-poplin .sc-hero, body.t-poplin .sc-richtext, body.t-poplin .sc-about-split,
body.t-poplin .sc-strip, body.t-poplin .sc-buygrid, body.t-poplin .sc-contact-band { scroll-margin-top: 0; }

/* the shallowest opener on the platform, and its copy lines up with the column
   the rest of the page is set on instead of running out to the window edge */
body.t-poplin .sc-hero { min-height: 45vh; padding: 46px 20px; }
body.t-poplin .sc-hero .sc-hero-inner { max-width: 1040px; margin: 0 auto; }
body.t-poplin .sc-hero h1 { font-weight: 500; font-size: clamp(28px, 4.2vw, 50px); line-height: 1.12; margin-bottom: 10px; }
body.t-poplin .sc-hero p { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; margin-bottom: 28px; }

/* THE LEDGER: one band rhythm for every block, and a rule the band draws itself */
body.t-poplin .sc-richtext, body.t-poplin .sc-about-split, body.t-poplin .sc-strip, body.t-poplin .sc-buygrid { position: relative; padding: 76px 20px 80px; }
body.t-poplin .sc-richtext::before, body.t-poplin .sc-about-split::before,
body.t-poplin .sc-strip::before, body.t-poplin .sc-buygrid::before {
  content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: #ded9cf;
}
body.t-poplin .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: clamp(11px, 1.2vw, 12.5px); color: #33456b; margin-bottom: 30px; }

/* the four measured lines: a narrow column with no photograph anywhere near it */
body.t-poplin .sc-richtext { max-width: 660px; }
body.t-poplin .sc-richtext p { font-size: 16px; line-height: 1.95; color: #3b3d45; }
/* the ONE place on the page a photograph sits beside a sentence */
body.t-poplin .sc-about-split { grid-template-columns: 5fr 6fr; gap: 48px; }

/* the only wide row above the catalogue: four tiles, one word under each */
body.t-poplin .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 24px; }
body.t-poplin .sc-strip-img { aspect-ratio: 4 / 5; border-color: #ded9cf; }
body.t-poplin .sc-strip-label, body.t-poplin .sc-buy-cat { margin-top: 12px; text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; font-weight: 700; color: #33456b; }

/* the catalogue lands two thirds down: six tiles, three across, two clean rows */
body.t-poplin .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 46px 34px; }
body.t-poplin .sc-buy-p { color: #33456b; font-weight: 600; }
@media (max-width: 900px) {
  body.t-poplin .sc-buy-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
  body.t-poplin .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
}

/* the doubled ask: two shallow photo bands butted straight onto the rows above */
body.t-poplin .sc-banner { min-height: 34vh; display: flex; align-items: center; justify-content: center; margin-top: 0; margin-bottom: 0; padding: 56px 28px; }
/* the page ends on type — a narrow band a half-shade down, no map, no picture */
body.t-poplin .sc-contact-band { background: #efece5; padding: 70px 0 84px; }
body.t-poplin .sc-contact-band-inner { max-width: 500px; }
body.t-poplin .sc-contact-form .btn { align-self: center; }
body.t-poplin .btn.brand { background: #33456b; color: #f7f5f0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 14px 28px; }
body.t-poplin .btn.brand:hover { background: #263553; }

/* NIGHT — the same workshop under the strip light: the bone goes to slate ink,
   the ledger rules hold, and the chambray lifts to the blue it reads as on a
   dark cloth, because #33456b on a near-black ground stops being an accent. */
html[data-theme="dark"] body.t-poplin {
  background: #14151a;
  color: #cfd0d6;
  --header-bg: #14151a;
  --surface: #1b1d23;
  --surface-2: #1f222a;
  --line: #2b2f39;
  --line-strong: #3a3f4c;
  --heading: #f2f1ec;
  --text: #cfd0d6;
  --muted: #8b909c;
}
html[data-theme="dark"] body.t-poplin .sf-header, html[data-theme="dark"] body.t-poplin .sf-head,
html[data-theme="dark"] body.t-poplin .sf-foot, html[data-theme="dark"] body.t-poplin .sf-footer { background: #14151a; border-color: #2b2f39; }
html[data-theme="dark"] body.t-poplin .sc-richtext::before, html[data-theme="dark"] body.t-poplin .sc-about-split::before,
html[data-theme="dark"] body.t-poplin .sc-strip::before, html[data-theme="dark"] body.t-poplin .sc-buygrid::before { background: #2b2f39; }
html[data-theme="dark"] body.t-poplin .sc-h2, html[data-theme="dark"] body.t-poplin .sc-strip-label,
html[data-theme="dark"] body.t-poplin .sc-buy-cat, html[data-theme="dark"] body.t-poplin .sc-buy-p { color: #93a8d4; }
html[data-theme="dark"] body.t-poplin .sc-richtext p, html[data-theme="dark"] body.t-poplin .sc-about-copy p,
html[data-theme="dark"] body.t-poplin .sc-contact-sub { color: #a7abb6; }
html[data-theme="dark"] body.t-poplin .sc-strip-img { border-color: #2b2f39; }
html[data-theme="dark"] body.t-poplin .sc-contact-band { background: #1b1d23; }
html[data-theme="dark"] body.t-poplin .sc-field input, html[data-theme="dark"] body.t-poplin .sc-field textarea { background: #1b1d23; border-color: #2b2f39; color: #f2f1ec; }
html[data-theme="dark"] body.t-poplin .btn.brand { background: #93a8d4; color: #14151a; }
html[data-theme="dark"] body.t-poplin .btn.brand:hover { background: #a9bce2; }