/* ---- korf (Korf — Beekeeping supply & raw honey 160) ----------------------
   THE STRUCTURAL MOVE: THE ANNOUNCED BLOCK, TWICE. The identical centred build —
   a short display heading over one paragraph choked to 62ch, with more air above
   and below it than anything else on the page gets — stands in front of BOTH
   catalogue bands, so the page announces itself, shows the range, announces
   itself again and then prices it. Between the two announcements sits the thing
   worth taking from the reference: six photographic panels welded two per row
   across three rows with zero gutters, the picture running edge to edge behind
   the type and the words pinned into the bottom-right corner inside deep
   padding, so image-to-text is close to total. Both centred blocks share one
   selector because both render as .sc-richtext while the third richtext is an
   overlay and renders as .sc-about-overlay — no element-type selector needed and
   none used. Cappings cream ground, warm bark ink, and propolis amber rationed
   to exactly two homes: the controls and the tiny uppercase category caps. The
   two full-bleed moments — the four-tile weld under the stage and the copy-free
   closing band — both go to smoked bark so white type sits clean on them, and no
   green appears anywhere. --------------------------------------------------- */
body.t-korf {
  background: #f7f0e2;
  color: #33291f;
  --kf-amber: #c07818;
  --kf-bark: #181310;
  --radius: 0;
  --shadow: none;
  --header-bg: #f7f0e2;
  --surface: #fffaf0;
  --surface-2: #efe5d1;
  --line: #ded1b8;
  --line-strong: #c6b696;
  --heading: #1c1712;
  --text: #33291f;
  --muted: #6f6252;
}
body.t-korf .sf-head, body.t-korf .sf-header,
body.t-korf .sf-foot, body.t-korf .sf-footer, body.t-korf .sf-cats {
  background: #f7f0e2; border-color: #ded1b8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* the bar floats over the stage with no ground of its own and rides off with it —
   the CSS-only reading of the reference's transparent-then-solid fixed nav. The
   wordmark stays hard left where the header markup already puts it; the caps
   links stay hard right. */
body.t-korf:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; }
body.t-korf:has(.sc-hero) .sf-name, body.t-korf:has(.sc-hero) .sf-navlink,
body.t-korf:has(.sc-hero) .sf-cart, body.t-korf:has(.sc-hero) .theme-toggle { color: #f7f0e2; }
body.t-korf .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; }
body.t-korf .btn.brand { background: var(--kf-amber); border: 0; color: #fff8ec; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 17px 34px; }

/* THE STAGE — three slides, the whole first screen, copy dead centre and one
   solid slab under it. Nothing is set to the right on this page. */
body.t-korf .sc-hero { min-height: 100vh; padding: 152px 20px 110px; }
body.t-korf .sc-hero h1 { font-weight: 800; font-size: clamp(38px, 7vw, 88px); line-height: 0.97; letter-spacing: -0.035em; text-transform: uppercase; }

/* THE WELD — four labelled figures fused to the floor of the stage on a band of
   smoked bark. Four cells, so the row fills and nothing hangs off the end. */
body.t-korf .sc-hero + .sc-strip { max-width: none; width: 100%; margin: 0; padding: 0; background: var(--kf-bark); }
body.t-korf .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-korf .sc-hero + .sc-strip .sc-strip-img { aspect-ratio: 5 / 4; border: 0; border-radius: 0; }
body.t-korf .sc-hero + .sc-strip .sc-strip-label { margin: 0; padding: 22px 26px 28px; text-align: left; color: #f2e6cf; font-size: clamp(14px, 1.5vw, 19px); font-weight: 700; line-height: 1.26; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* THE ANNOUNCED BLOCK — one rule, both centred richtexts, identical in build */
body.t-korf .sc-richtext { max-width: 820px; padding: 128px 20px 104px; }
body.t-korf .sc-richtext .sc-h2 { font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -0.03em; margin-bottom: 22px; }
body.t-korf .sc-richtext p { max-width: 62ch; margin: 0 auto; color: var(--text); font-size: 17px; line-height: 1.95; }

/* THE WALL — six panels, two per row, three rows, zero gutters. The photograph
   is lifted out of the flow and stretched to fill the panel, every remaining
   child is re-positioned so the picture cannot paint over it, and the type lands
   in the bottom-right corner inside deep padding. */
body.t-korf .sc-showcase > .container { padding: 0 20px 46px; }
body.t-korf .sc-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
body.t-korf .sc-show-item, body.t-korf .sc-show-item:nth-child(4n + 2),
body.t-korf .sc-show-item:nth-child(4n + 3) { background: var(--kf-bark); }
body.t-korf .sc-show-inner { position: relative; align-items: flex-end; justify-content: flex-end; text-align: right; min-height: min(70vh, 600px); padding: clamp(30px, 4vw, 58px); }
body.t-korf .sc-show-inner > * { position: relative; z-index: 1; }
body.t-korf .sc-show-media { position: absolute; inset: 0; z-index: 0; display: block; padding: 0; }
body.t-korf .sc-show-media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
body.t-korf .sc-show-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 19, 16, 0.88), rgba(24, 19, 16, 0.34) 52%, rgba(24, 19, 16, 0.04)); }
body.t-korf .sc-show-t { color: #fdf6e8; font-size: clamp(19px, 2.4vw, 32px); text-transform: none; letter-spacing: -0.025em; }
body.t-korf .sc-show-price { color: #fdf6e8; font-variant-numeric: tabular-nums; }
body.t-korf .sc-show-cat, body.t-korf .sc-buy-cat { color: var(--kf-amber); letter-spacing: 0.22em; font-size: 10px; }

/* THE PRICED PASS — the same six held contained, three across over two rows,
   then the one copy-free dark band and a narrow centred close. */
body.t-korf .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 32px; }
body.t-korf .sc-buy-p { color: var(--heading); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.t-korf .sc-about-overlay { min-height: 58vh; display: flex; align-items: center; background-color: var(--kf-bark); padding: 132px 20px; }
body.t-korf .sc-contact { max-width: 560px; padding: 112px 20px 128px; }

@media (max-width: 900px) {
  body.t-korf .sc-hero { min-height: 84vh; padding: 126px 20px 84px; }
  body.t-korf .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-korf .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-korf .sc-richtext { padding: 88px 20px 72px; }
}

/* NIGHT — the shed after dark. Cream drops to burnt bark and the two full-bleed
   moments drop a step further, so the weld and the closing band still read as
   painted things rather than dissolving into the ground. Propolis amber was
   picked against cream and goes muddy on near-black, so it lifts two steps and
   the slab takes dark type instead of light. */
html[data-theme="dark"] body.t-korf {
  background: #16120e;
  color: #c3b6a2;
  --kf-amber: #e2a04a;
  --kf-bark: #0e0b08;
  --header-bg: #16120e;
  --surface: #1e1913;
  --surface-2: #26201a;
  --line: #342c22;
  --line-strong: #4a3f31;
  --heading: #f5ede0;
  --text: #c3b6a2;
  --muted: #8d7f6c;
}
html[data-theme="dark"] body.t-korf .sf-head, html[data-theme="dark"] body.t-korf .sf-header,
html[data-theme="dark"] body.t-korf .sf-foot, html[data-theme="dark"] body.t-korf .sf-footer,
html[data-theme="dark"] body.t-korf .sf-cats { background: #16120e; border-color: #342c22; }
html[data-theme="dark"] body.t-korf:has(.sc-hero) .sf-header { background: transparent; }
html[data-theme="dark"] body.t-korf .btn.brand { color: #191007; }