/* ---- poppekas (Poppekas — Puppet workshop & mask makers 297) ---------------
   THE STRUCTURAL MOVE: the four-up photographic rail arrives BEFORE any prose
   at all — the second screen of the page is a row of pictures, not a
   paragraph — and after it the page goes wide exactly twice: the full-viewport
   opener and one low band. Everything caught between the two sits in a
   contained column on unbleached calico, and the jelutong-sawdust tone is
   spent only on the bands that paint themselves (the about split and the
   get-in-touch band), which is what keeps the centred column of words the
   lightest thing on the page. Ox-blood is rationed to three homes: the
   controls, the rand figure, and the hairline under each rail label.
   Nothing here touches the header beyond its ground colour and its type —
   no order, no position, no nth-of-type anywhere near it. The two richtext
   blocks are told apart by their own classes (.sc-about-split against
   .sc-richtext), never by a type selector. */
body.t-poppekas {
  background: #f4efe3;
  color: #1b1815;
  --pk-red: #7a2226;
  --pk-lit: #93292e;
  --pk-saw: #e7dcc4;
  --radius: 0;
  --shadow: none;
  --bg-flat: #f4efe3;
  --header-bg: #f4efe3;
  --surface: #faf6ec;
  --surface-2: #e7dcc4;
  --line: #ddd1b7;
  --line-strong: #c7b795;
  --heading: #14120f;
  --text: #1b1815;
  --muted: #6b6256;
}

/* a flat calico bar the same colour as the page, so the opener begins beneath
   it rather than behind it. Ground, border and type only. */
body.t-poppekas .sf-head, body.t-poppekas .sf-header,
body.t-poppekas .sf-foot, body.t-poppekas .sf-footer, body.t-poppekas .sf-cats {
  background: #f4efe3; border-color: #ddd1b7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-poppekas .sf-name, body.t-poppekas .sf-navlink { text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 600; }

/* RED 1 of 3 — every control is a flat ox-blood slab with no edge on it */
body.t-poppekas .btn.brand { background: var(--pk-red); border: 0; box-shadow: none; color: #f4efe3; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 32px; }
body.t-poppekas .btn.brand:hover { background: var(--pk-lit); color: #fffaf0; }

/* WIDE, ONCE — the whole first screen: three slides cross-fading, copy hard
   left over the frame and nothing else on the fold */
body.t-poppekas .sc-hero { min-height: 100vh; padding: 110px 20px; }
body.t-poppekas .sc-hero h1 { font-size: clamp(32px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 18px; }
body.t-poppekas .sc-h2 { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.005em; margin-bottom: 30px; }

/* THE RAIL, AND IT COMES BEFORE THE PROSE — four contained gapped tiles
   directly under the opener, portraits dropped straight onto the calico with
   no border and no radius, labels hard left. RED 2 of 3 is the hairline under
   each one, and it is the only rule on the page. */
body.t-poppekas .sc-strip { padding: 86px 20px 92px; }
body.t-poppekas .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: left; }
body.t-poppekas .sc-strip-img { border: 0; aspect-ratio: 4 / 5; background: var(--pk-saw); }
body.t-poppekas .sc-strip-label { margin-top: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; }
body.t-poppekas .sc-strip-label::after { content: ''; display: block; width: 34px; height: 2px; background: var(--pk-red); margin-top: 12px; }

/* THE CONTAINED BAND — the about split paints itself in sawdust inside the
   1080 column rather than bleeding, so the page's one colour band is visibly
   contained and the two photographic bleeds keep their monopoly on width.
   Roughly 40/60, picture to prose. */
body.t-poppekas .sc-about-split { grid-template-columns: 4fr 6fr; gap: 46px; padding: 88px 44px 92px; background: var(--pk-saw); }
body.t-poppekas .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-poppekas .sc-about-copy p, body.t-poppekas .sc-richtext p { color: #3a332b; font-size: 16.5px; line-height: 1.95; }

/* WIDE, TWICE AND LAST — the only wide photograph after the opener, butted
   flush top and bottom so it cuts a hole straight through the column */
body.t-poppekas .sc-banner { min-height: 66vh; margin: 0 calc(50% - 50vw); padding: 13vh 24px 0; }

/* SIX TILES, THREE ACROSS, TWO ROWS THAT BOTH FILL — the card chrome comes
   off entirely so the puppets are the only objects standing on the calico.
   RED 3 of 3 is the rand figure and nothing else in the block takes colour. */
body.t-poppekas .sc-products { padding: 92px 20px 96px; }
body.t-poppekas .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 30px; padding-bottom: 0; }
body.t-poppekas .product-card, body.t-poppekas .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-poppekas .product-card .ph { aspect-ratio: 4 / 5; }
body.t-poppekas .product-card .meta { padding: 14px 0 0; }
body.t-poppekas .product-card .p { color: var(--pk-red); font-weight: 700; font-size: 15px; }

/* the lightest band on the page and the only one carrying nothing but words */
body.t-poppekas .sc-richtext { max-width: 640px; padding: 100px 20px 104px; }

/* the get-in-touch band, on sawdust, absorbing everything a footer would carry */
body.t-poppekas .sc-contact-band { background: var(--pk-saw); padding: 84px 0 92px; }
body.t-poppekas .sc-contact-band .sc-field input, body.t-poppekas .sc-contact-band .sc-field textarea { background: #f4efe3; border-color: #d2c4a6; }

@media (max-width: 900px) {
  body.t-poppekas .sc-hero { min-height: 84vh; padding: 92px 20px; }
  body.t-poppekas .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-poppekas .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-poppekas .sc-about-split { padding: 56px 24px 60px; }
  body.t-poppekas .sc-banner { min-height: 52vh; padding: 11vh 20px 0; }
}

/* NIGHT — the calico goes to the colour of the shed after the lamp is off, the
   sawdust band drops to a half-shade above it so the contained band survives,
   and the ox-blood is lifted to the red a curtain actually is under a working
   light, because #7a2226 on a near-black ground stops being an accent and
   becomes a bruise. */
html[data-theme="dark"] body.t-poppekas {
  background: #16130f;
  color: #cdc4b4;
  --pk-red: #a8353a;
  --pk-lit: #c04249;
  --pk-saw: #211b14;
  --bg-flat: #16130f;
  --header-bg: #16130f;
  --surface: #1c1811;
  --surface-2: #211b14;
  --line: #2f271d;
  --line-strong: #453a2a;
  --heading: #f1e9d9;
  --text: #cdc4b4;
  --muted: #8a8071;
}
html[data-theme="dark"] body.t-poppekas .sf-head, html[data-theme="dark"] body.t-poppekas .sf-header,
html[data-theme="dark"] body.t-poppekas .sf-foot, html[data-theme="dark"] body.t-poppekas .sf-footer,
html[data-theme="dark"] body.t-poppekas .sf-cats { background: #16130f; border-color: #2f271d; }
html[data-theme="dark"] body.t-poppekas .sc-about-copy p, html[data-theme="dark"] body.t-poppekas .sc-richtext p { color: #b8afa0; }
html[data-theme="dark"] body.t-poppekas .btn.brand { color: #f7f1e6; }
html[data-theme="dark"] body.t-poppekas .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-poppekas .sc-contact-band .sc-field textarea { background: #16130f; border-color: #382f22; }