/* ============================== FABEL ==============================
   THE STRUCTURAL MOVE: two green screens with a bone-white middle
   between them. A full-viewport stage — three photographs cross-fading,
   each of them blended down through a chalky fynbos sage ground so the
   whole fold reads as one green screen — opens the page; a flat sage
   band closes it; and everything caught between the two stands on bare
   paper with no panel, no card and no second ground anywhere. Under the
   stage the page drops without a breath into a contained, gapped
   four-across of squares, and that collapse from one entire screen of
   photograph into a short band is the signature, so the strip carries
   almost nothing above it. Terracotta is spent twice only: the controls
   and the rand figure. The illustrations supply every other colour.
   Nothing here orders, positions or reflows anything in the header. */
body.t-fabel {
  background: #f6f3ea;
  color: #45423a;
  --fb-sage: #7d9b8a;
  --fb-clay: #c9663f;
  --fb-ink: #14130f;
  --bg-flat: #f6f3ea;
  --header-bg: #f6f3ea;
  --surface: #ffffff;
  --surface-2: #ece9de;
  --line: #ddd9cc;
  --line-strong: #c3bfae;
  --heading: #14130f;
  --text: #45423a;
  --muted: #837e70;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the paper, so the stage begins beneath it
   rather than behind it. Colour, size and tracking only. */
body.t-fabel .sf-head, body.t-fabel .sf-header,
body.t-fabel .sf-foot, body.t-fabel .sf-footer, body.t-fabel .sf-cats {
  background: #f6f3ea; border-color: #e4e0d3;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-fabel .sf-name { text-transform: uppercase; letter-spacing: 0.44em; font-size: 13px; font-weight: 700; color: var(--fb-ink); }
body.t-fabel .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* CLAY 1 of 2 — every control is a flat terracotta slab with no edge on it */
body.t-fabel .btn.brand { background: var(--fb-clay); border: 0; box-shadow: none; color: #fdf6f1; text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 700; padding: 15px 34px; }
body.t-fabel .btn.brand:hover { background: #b0552f; color: #ffffff; }

/* GREEN SCREEN 1 — the whole first fold and nothing else on it. The sage sits
   under the photograph and the photograph is soft-lit into it, so three quite
   different pictures cross-fade as one chalky green stage. The short tracked
   line is lifted above the title, the way the reference sets it. */
body.t-fabel .sc-hero { min-height: 100vh; padding: 96px 20px; background-color: var(--fb-sage); background-blend-mode: normal, soft-light; }
body.t-fabel .sc-hero-slide { background-color: var(--fb-sage); background-blend-mode: normal, soft-light; }
body.t-fabel .sc-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 880px; }
body.t-fabel .sc-hero-inner p { order: -1; margin: 0 0 28px; font-size: 12px; font-weight: 500; letter-spacing: 0.46em; text-transform: uppercase; text-shadow: none; }
body.t-fabel .sc-hero h1 { font-size: clamp(40px, 7.4vw, 96px); font-weight: 700; letter-spacing: 0.05em; line-height: 1.04; margin: 0 0 38px; text-shadow: 0 2px 30px rgba(16, 22, 18, 0.45); }

/* display type is ink-black, enormous and widely tracked, with the empty space
   around it left to do the rest of the work */
body.t-fabel .sc-h2 { color: var(--fb-ink); font-weight: 700; font-size: clamp(23px, 3.8vw, 44px); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; margin-bottom: 30px; }

/* THE COLLAPSE — a full screen of photograph, then immediately a contained,
   gapped four-across of squares, and nothing at all in between */
body.t-fabel .sc-strip { padding: 16px 20px 0; }
body.t-fabel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-fabel .sc-strip-img { border: 0; border-radius: 0; background: var(--surface-2); }
body.t-fabel .sc-strip-label { margin-top: 15px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* the white middle: bare paper and wide gutters — a portrait plate beside the
   prose first, then prose with nothing beside it at all */
body.t-fabel .sc-about-split { max-width: 1020px; padding: 124px 20px 110px; gap: 68px; grid-template-columns: 0.82fr 1fr; }
body.t-fabel .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-fabel .sc-richtext { max-width: 720px; padding: 112px 20px 116px; }
body.t-fabel .sc-about-copy p, body.t-fabel .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* the catalogue is huge pictures with very few words beside them: a square
   plate holding half the screen, the category dropped to grey so the accent
   lands once per row, and CLAY 2 of 2 on the rand figure */
body.t-fabel .sc-lookbook { padding: 86px 0 0; }
body.t-fabel .sc-look-media img { aspect-ratio: 1; }
body.t-fabel .sc-look-copy { padding: 48px clamp(24px, 6vw, 92px); }
body.t-fabel .sc-look-cat { color: var(--muted); letter-spacing: 0.24em; font-size: 10px; }
body.t-fabel .sc-look-t { font-size: clamp(21px, 2.6vw, 32px); font-weight: 700; letter-spacing: 0.01em; }
body.t-fabel .sc-look-p { color: var(--fb-clay); font-size: 20px; font-weight: 700; }

/* the second and last full photograph on the whole page, which is exactly why
   it lands: words held in the upper third, the rest left to the light */
body.t-fabel .sc-banner { min-height: 74vh; padding: 15vh 22px 0; margin: 0 calc(50% - 50vw); }
body.t-fabel .sc-banner h2 { font-size: clamp(24px, 4vw, 48px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }

/* GREEN SCREEN 2 — the page closes on the colour it opened, flat this time */
body.t-fabel .sc-contact-band { background: var(--fb-sage); padding: 116px 0 122px; }
body.t-fabel .sc-contact-band .sc-h2 { color: #fbf9f4; }
body.t-fabel .sc-contact-band .sc-contact-sub, body.t-fabel .sc-contact-band .sc-field label { color: #eaf1ec; }
body.t-fabel .sc-contact-band .sc-field input, body.t-fabel .sc-contact-band .sc-field textarea { background: #f6f3ea; border-color: #f6f3ea; color: #14130f; }

@media (max-width: 900px) {
  body.t-fabel .sc-hero { min-height: 86vh; }
  body.t-fabel .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-fabel .sc-banner { min-height: 52vh; padding: 12vh 20px 0; }
}

/* NIGHT — the paper turns to an olive-black so the two green screens stay the
   only lit things on the page. The sage drops to a deep fynbos and the clay is
   lifted to meet it, which keeps the rand figures legible against the dark. */
html[data-theme="dark"] body.t-fabel {
  background: #14150f;
  color: #c9c5b8;
  --fb-sage: #4c6459;
  --fb-clay: #d97b52;
  --fb-ink: #f3efe3;
  --bg-flat: #14150f;
  --header-bg: #14150f;
  --surface: #1b1d16;
  --surface-2: #22251c;
  --line: #2b2e25;
  --line-strong: #3d4136;
  --heading: #f3efe3;
  --text: #c9c5b8;
  --muted: #857f71;
}
html[data-theme="dark"] body.t-fabel .sf-head, html[data-theme="dark"] body.t-fabel .sf-header,
html[data-theme="dark"] body.t-fabel .sf-foot, html[data-theme="dark"] body.t-fabel .sf-footer,
html[data-theme="dark"] body.t-fabel .sf-cats { background: #14150f; border-color: #2b2e25; }
html[data-theme="dark"] body.t-fabel .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-fabel .sc-contact-band .sc-field textarea { background: #22251c; border-color: #3d4136; color: #f3efe3; }