/* ---- plafon (Plafon — Pressed-tin ceilings, cornices & roses 285) ---------
   THE STRUCTURAL MOVE: the catalogue is not one wall but TWO, cut apart by
   category on the ids the renderer already emits (#products / #products-2) —
   each a two-column Pinterest stagger of four enormous tiles, one product to
   half the page — with the only other wide moment on the page wedged between
   them: a full-bleed photograph whose copy sits on the floor of the picture
   rather than centred in a band. The opener answers it with a gapless
   two-panel split, no gutter at all: the finished room holds the left half for
   good while the right half breathes between the stack and the fly press.
   :nth-child is safe on the slides and the tiles — every child of
   .sc-hero-slides is a slide div and every child of .sc-mas-grid is a tile —
   and no :nth-of-type is used anywhere. Chalk lime-wash ground, near-black
   headings at the lightest weight the face has, zinc-grey prose, and one
   oxidised rust rationed to exactly three homes: the rand figure, the short
   rule under each category, and the arrow after every control. There is no
   filled slab on the page, so all the real colour comes out of the metal. */
body.t-plafon {
  background: #f6f3ec;
  color: #6d6f6e;
  --pl-rust: #9c4a2f;
  --bg-flat: #f6f3ec;
  --header-bg: #f6f3ec;
  --surface: #fffdf8;
  --surface-2: #eeeae0;
  --line: #e2ddd1;
  --line-strong: #c9c3b4;
  --heading: #17181a;
  --text: #6d6f6e;
  --muted: #8b8d8b;
  --radius: 0;
  --shadow: none;
}

/* flat lime-wash bars under one hairline — no glass, nothing rounded. Type
   only on the wordmark and the links; nothing here is moved or reordered. */
body.t-plafon .sf-header, body.t-plafon .sf-head, body.t-plafon .sf-footer,
body.t-plafon .sf-foot, body.t-plafon .sf-cats {
  background: #f6f3ec; border-color: #e2ddd1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-plafon .sf-name, body.t-plafon .sf-navlink { text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 600; }

/* NO SLABS — every control on the shop is a rust label with a thin arrow after
   it, so the accent never covers more than a few characters */
body.t-plafon .btn.brand { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--pl-rust); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; }
body.t-plafon .btn.brand::after { content: '\2192'; padding-left: 11px; letter-spacing: 0; transition: padding-left 0.25s ease; }
body.t-plafon .btn.brand:hover::after { padding-left: 20px; }

/* THE GAPLESS SPLIT — two photographs butted with no gutter: slide one takes
   the left half permanently, slide two the right, and slide three fades the
   press in over it and back out. If a merchant strips the extra slides the
   section's own picture still paints the right half, so it never goes blank. */
body.t-plafon .sc-hero { min-height: 100vh; align-items: flex-end; padding: clamp(44px, 9vh, 104px) clamp(20px, 5vw, 64px); background-color: #17181a; background-size: 50% 100%, 50% 100%; background-position: right center, right center; background-repeat: no-repeat; }
body.t-plafon .sc-hero-slide:nth-child(1), body.t-plafon .sc-hero-slide:nth-child(2) { opacity: 1; }
body.t-plafon .sc-hero-slide:nth-child(1) { right: 50%; }
body.t-plafon .sc-hero-slide:nth-child(2), body.t-plafon .sc-hero-slide:nth-child(3) { left: 50%; }
body.t-plafon .sc-hero-inner { max-width: min(430px, 38vw); }
body.t-plafon .sc-hero h1 { font-size: clamp(34px, 5.4vw, 76px); font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; text-shadow: none; margin: 0 0 18px; }
body.t-plafon .sc-hero p { text-transform: uppercase; letter-spacing: 0.24em; font-size: 10.5px; font-weight: 600; text-shadow: none; margin: 0 0 24px; }

/* headings are labels, not chapters — the pictures carry the page */
body.t-plafon .sc-h2 { text-transform: uppercase; letter-spacing: 0.26em; font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: left; margin: 0 0 clamp(26px, 4vh, 46px); }

/* THE WALL, TWICE — real column flow in two columns so the sides stagger
   against each other, and tiles big enough that the products are the layout */
body.t-plafon .sc-masonry { padding: clamp(64px, 10vh, 118px) 0 clamp(18px, 3vh, 32px); }
body.t-plafon .sc-mas-grid { column-count: 2; column-gap: clamp(18px, 2.6vw, 42px); }
body.t-plafon .sc-mas-item { margin: 0 0 clamp(44px, 7vh, 86px); text-align: center; }
body.t-plafon .sc-mas-item .sc-mas-media img { aspect-ratio: 1; }
body.t-plafon .sc-mas-item:nth-child(1) .sc-mas-media img,
body.t-plafon .sc-mas-item:nth-child(4) .sc-mas-media img,
body.t-plafon .sc-mas-item:nth-child(6) .sc-mas-media img { aspect-ratio: 3 / 4; }
body.t-plafon .sc-mas-item:nth-child(5) .sc-mas-media img { aspect-ratio: 16 / 9; }
/* the cut: ceilings in the first wall, trim in the second. A store with no
   stock yet renders the sample grid instead, which these rules never touch. */
body.t-plafon #products .sc-mas-item:nth-child(n + 5),
body.t-plafon #products-2 .sc-mas-item:nth-child(-n + 4) { display: none; }

/* category, a short rust rule, then title and price — all under the frame */
body.t-plafon .sc-mas-cat { margin-top: 20px; text-transform: uppercase; letter-spacing: 0.24em; font-size: 10px; font-weight: 700; color: var(--muted); }
body.t-plafon .sc-mas-cat::after { content: ''; display: block; width: 24px; height: 1px; background: var(--pl-rust); margin: 13px auto 12px; }
body.t-plafon .sc-mas-t { font-weight: 300; font-size: clamp(19px, 2.1vw, 26px); letter-spacing: -0.02em; }
body.t-plafon .sc-mas-p { margin-top: 9px; color: var(--pl-rust); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; }

/* THE WEDGE — the copy stands on the floor of the photograph, hard left */
body.t-plafon .sc-banner { min-height: 84vh; display: flex; align-items: flex-end; text-align: left; padding: clamp(44px, 9vh, 104px) clamp(20px, 6vw, 76px); margin: clamp(54px, 8vh, 96px) calc(50% - 50vw); }
body.t-plafon .sc-banner-inner { max-width: 540px; margin: 0; }
body.t-plafon .sc-banner h2 { font-weight: 300; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.025em; text-shadow: none; }
body.t-plafon .sc-banner p { font-size: 14.5px; line-height: 1.8; text-shadow: none; }

/* the one page of prose: a wide plate of the press room, a narrow column */
body.t-plafon .sc-about-split { grid-template-columns: 1.35fr 0.65fr; gap: clamp(28px, 4vw, 60px); align-items: start; padding: clamp(72px, 11vh, 132px) 20px; }
body.t-plafon .sc-about-copy .sc-h2 { text-transform: none; letter-spacing: -0.02em; font-size: clamp(20px, 2.3vw, 28px); font-weight: 300; color: var(--heading); margin-bottom: 20px; }
body.t-plafon .sc-about-copy p { font-size: 15px; line-height: 2; }

/* THE CLOSE — a slim strip, not a page of form: three fields and a rust label
   on one line, with the workshop's own details ruled underneath */
body.t-plafon .sc-contact-band { background: transparent; border-top: 1px solid var(--line); padding: clamp(40px, 6vh, 62px) 0 clamp(52px, 8vh, 84px); }
body.t-plafon .sc-contact-band-inner { max-width: none; text-align: left; }
body.t-plafon .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr 1.7fr auto; gap: 16px clamp(16px, 2.4vw, 34px); align-items: end; }
body.t-plafon .sc-contact-band .sc-contact-form .btn { align-self: end; margin: 0 0 13px; }
body.t-plafon .sc-contact-band textarea { height: 44px; min-height: 44px; resize: vertical; }
body.t-plafon .sc-contact-band .sc-field label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 700; color: var(--muted); }
body.t-plafon .sc-contact-band label[for="sc-msg"] { font-size: 0; }
body.t-plafon .sc-contact-band label[for="sc-msg"]::after { content: 'Town, and the size of the room'; font-size: 10px; }
body.t-plafon .sc-contact-band-inner::after { content: 'Workshop 4, Bourke Street, Graaff-Reinet 6280 \00b7 049 892 4417 \00b7 Monday to Thursday 7am to 4pm, Friday until 1pm'; display: block; margin-top: 28px; font-size: 11.5px; color: var(--muted); }

@media (max-width: 820px) {
  body.t-plafon .sc-hero-slide:nth-child(1) { right: 0; bottom: 50%; }
  body.t-plafon .sc-hero-slide:nth-child(2), body.t-plafon .sc-hero-slide:nth-child(3) { left: 0; top: 50%; }
  body.t-plafon .sc-hero-inner { max-width: none; }
  body.t-plafon .sc-mas-grid { column-count: 1; }
  body.t-plafon .sc-about-split { grid-template-columns: 1fr; }
  body.t-plafon .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
  body.t-plafon .sc-contact-band .sc-contact-form .btn { margin: 4px 0 0; }
}

/* NIGHT — the same lime-wash room after the workshop lights go off: chalk to
   cold zinc, and the rust has to lift, because #9c4a2f on a near-black ground
   stops reading as oxidised metal and starts reading as brown. */
html[data-theme="dark"] body.t-plafon {
  background: #141514;
  color: #a9aca8;
  --pl-rust: #cd6a45;
  --bg-flat: #141514;
  --header-bg: #141514;
  --surface: #1b1c1a;
  --surface-2: #212320;
  --line: #2b2d2a;
  --line-strong: #3b3e3a;
  --heading: #f4f1ea;
  --text: #a9aca8;
  --muted: #7e817d;
}
html[data-theme="dark"] body.t-plafon .sf-header, html[data-theme="dark"] body.t-plafon .sf-head,
html[data-theme="dark"] body.t-plafon .sf-footer, html[data-theme="dark"] body.t-plafon .sf-foot,
html[data-theme="dark"] body.t-plafon .sf-cats { background: #141514; border-color: #2b2d2a; }
html[data-theme="dark"] body.t-plafon .sc-contact-band { border-top-color: #2b2d2a; }
html[data-theme="dark"] body.t-plafon .btn.brand:hover { color: #e08a66; }