/* ---- fynbos (Sewejaar 61) — paper white end to end, one dry khaki ---------
   The structural move: there is NO hero. The page opens on a contained 28vh
   band holding one enormous lowercase word, the catalogue then breaks out to
   the full width of the browser as a near-gapless wall of unequal tiles whose
   captions exist only under the pointer, and the page closes on a contact
   column set to the same 560px measure and the same centre axis as that
   opening band. The ground never changes: the one dark rectangle anywhere on
   the page is the band photograph below the wall. */
body.t-fynbos {
  background: #f6f4ee;
  color: #171512;
  --radius: 0;
  --header-bg: #f6f4ee;
  --surface: #f6f4ee;
  --surface-2: #eeebe2;
  --line: #e0dcd0;
  --line-strong: #cbc5b4;
  --heading: #171512;
  --text: #171512;
  --muted: #6f6a5c;
}
/* a solid slab that stays put — never glass floating over anything */
body.t-fynbos .sf-header, body.t-fynbos .sf-footer { backdrop-filter: none; -webkit-backdrop-filter: none; background: #f6f4ee; border-color: #e0dcd0; }
/* ONE measure, used exactly twice: the opening title band and the closing form */
body.t-fynbos .sc-richtext, body.t-fynbos .sc-contact, body.t-fynbos .sc-about-overlay-inner { max-width: 560px; }
/* the title band — a 28vh room for one word, standing where a hero would be */
body.t-fynbos .sc-richtext { min-height: 28vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(64px, 11vh, 132px) 20px clamp(40px, 6vh, 76px); }
body.t-fynbos .sc-richtext .sc-h2 { font-size: clamp(54px, 12.5vw, 146px); line-height: 0.88; letter-spacing: -0.045em; font-weight: 500; text-transform: lowercase; color: var(--heading); margin: 0 0 22px; }
body.t-fynbos .sc-richtext p { font-size: 15px; line-height: 1.65; color: var(--muted); }
/* the wall runs to both edges, and its heading is a label, not a title */
body.t-fynbos .sc-masonry .container { max-width: none; padding: 0; }
body.t-fynbos .sc-masonry .sc-h2 { font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 0 0 clamp(18px, 3vh, 34px); }
body.t-fynbos .sc-mas-grid { column-count: 4; column-gap: 3px; }
body.t-fynbos .sc-mas-item { position: relative; margin: 0 0 3px; }
/* deliberately unequal tiles, so no two columns ever land level with each other */
body.t-fynbos .sc-mas-item:nth-child(4n + 1) .sc-mas-media img { aspect-ratio: 5 / 7; }
body.t-fynbos .sc-mas-item:nth-child(4n + 2) .sc-mas-media img,
body.t-fynbos .sc-mas-item:nth-child(4n + 4) .sc-mas-media img { aspect-ratio: 1; }
body.t-fynbos .sc-mas-item:nth-child(4n + 3) .sc-mas-media img { aspect-ratio: 4 / 5; }
/* captions do not exist until you point at a tile, and then they cover it */
body.t-fynbos .sc-mas-item::after { content: ''; position: absolute; inset: 0; background: rgba(23, 21, 18, 0.66); opacity: 0; transition: opacity 0.25s ease; }
body.t-fynbos .sc-mas-cat, body.t-fynbos .sc-mas-t, body.t-fynbos .sc-mas-p {
  position: absolute; left: clamp(16px, 1.8vw, 26px); right: clamp(16px, 1.8vw, 26px);
  margin: 0; z-index: 2; opacity: 0; transition: opacity 0.25s ease; text-align: left; }
body.t-fynbos .sc-mas-cat { top: clamp(16px, 1.8vw, 26px); font-size: 10.5px; letter-spacing: 0.22em; color: #b7a972; }
body.t-fynbos .sc-mas-t { bottom: 44px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: #f6f4ee; }
body.t-fynbos .sc-mas-p { bottom: clamp(16px, 1.8vw, 26px); font-size: 14px; color: #b7a972; }
body.t-fynbos .sc-mas-item:hover::after, body.t-fynbos .sc-mas-item:hover .sc-mas-cat,
body.t-fynbos .sc-mas-item:hover .sc-mas-t, body.t-fynbos .sc-mas-item:hover .sc-mas-p { opacity: 1; }
/* the closing column: the most air on the page, and the khaki send button */
body.t-fynbos .sc-contact { padding: clamp(92px, 15vh, 168px) 20px clamp(100px, 17vh, 180px); }
body.t-fynbos .sc-about-overlay .sc-h2, body.t-fynbos .sc-contact .sc-h2 { font-size: clamp(25px, 3.4vw, 38px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 16px; }
body.t-fynbos .btn.brand { background: #7e7247; border-color: #7e7247; color: #f6f4ee; box-shadow: none; }
/* a phone has no pointer, so the wall halves and the captions simply stay up */
@media (max-width: 900px) { body.t-fynbos .sc-mas-grid { column-count: 2; } }
@media (hover: none) { body.t-fynbos .sc-mas-item::after, body.t-fynbos .sc-mas-cat, body.t-fynbos .sc-mas-t, body.t-fynbos .sc-mas-p { opacity: 1; } }

/* NIGHT — the shed once the light goes on. The paper goes to dry soot and the
   khaki lifts to the colour the dried heads actually are under a bulb. */
html[data-theme="dark"] body.t-fynbos {
  background: #16150f; color: #e9e5d9;
  --header-bg: #16150f; --surface: #16150f; --surface-2: #1e1c15;
  --line: #2e2c23; --line-strong: #45412f; --heading: #f2efe4; --text: #e9e5d9; --muted: #918b7a;
}
html[data-theme="dark"] body.t-fynbos .sf-header, html[data-theme="dark"] body.t-fynbos .sf-footer { background: #16150f; border-color: #2e2c23; }
html[data-theme="dark"] body.t-fynbos .btn.brand { background: #b7a972; border-color: #b7a972; color: #16150f; }