/* ---- loam (Furrow — Market garden & farm shop 71) — oat paper, soil ink ----
   THE STRUCTURAL MOVE: the page's one full-bleed moment is a four-across wall
   of portrait photographs butted together with NO gap at all, carrying nothing
   but one word each — and it lands BEFORE the first price. Everything either
   side of it stays in the contained column on alternating oat and clay grounds
   painted by a clipped box-shadow, so the bands separate without a rule or a
   border anywhere on the page. The two strips are told apart by :has() and
   never :nth-of-type — the hero is always the first section element, so a
   type selector would silently point at the wrong band: the HEADINGLESS strip
   is the wall, the strip that carries a heading is the growers row, kept
   landscape and gapped so the two never read alike. All the saturated colour
   lives in the photographs; the chrome holds one dry-veld olive and nothing more. */
body.t-loam {
  background: #f2ece0;
  color: #241d16;
  --radius: 0;
  --header-bg: #f2ece0;
  --surface: #f8f4ea;
  --surface-2: #e7dfd0;
  --line: #ddd3c2;
  --line-strong: #cabfa9;
  --heading: #241d16;
  --text: #241d16;
  --muted: #5c5348;
}
body.t-loam .sf-head, body.t-loam .sf-foot, body.t-loam .sf-footer { background: #f2ece0; border-color: #ddd3c2; }

/* the opener is the whole window, and nothing on it sits off the centre line */
body.t-loam .sc-hero { min-height: 100vh; padding: 120px 20px; }
body.t-loam .sc-hero h1 { font-weight: 600; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.06; }

/* two blocks of words open the page: the centred statement on oat, then the
   split on clay — the alternation is the only thing dividing them */
body.t-loam .sc-richtext { max-width: 720px; padding: 96px 20px 92px; font-size: 17px; }
body.t-loam .sc-about-split { padding: 88px 20px; background: #e7dfd0; box-shadow: 0 0 0 100vw #e7dfd0; clip-path: inset(0 -100vw); }

/* THE WALL — the headingless strip: four portraits, no gap, no border, no
   radius, running the full width of the window with one word laid over each */
body.t-loam .sc-strip:not(:has(.sc-h2)) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
body.t-loam .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.t-loam .sc-strip:not(:has(.sc-h2)) .sc-strip-card { position: relative; }
body.t-loam .sc-strip:not(:has(.sc-h2)) .sc-strip-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); }
body.t-loam .sc-strip:not(:has(.sc-h2)) .sc-strip-img { aspect-ratio: 3 / 4; border: 0; }
body.t-loam .sc-strip:not(:has(.sc-h2)) .sc-strip-label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 22px; margin: 0; color: #f2ece0; text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 600; }

/* the growers row: the same four-up turned landscape, gapped, back on clay, so
   it reads as a caption to the page instead of a second wall */
body.t-loam .sc-strip:has(.sc-h2) { padding: 82px 20px 90px; background: #e7dfd0; box-shadow: 0 0 0 100vw #e7dfd0; clip-path: inset(0 -100vw); }
body.t-loam .sc-strip:has(.sc-h2) .sc-strip-img { aspect-ratio: 4 / 3; border-color: #d3c8b4; }
body.t-loam .sc-strip:has(.sc-h2) .sc-strip-label { color: #5f6539; font-size: 12.5px; letter-spacing: 0.1em; }

/* eight tiles, four across, two rows that fill — and the only place on the
   whole page a price is allowed to appear */
body.t-loam .sc-products { padding: 90px 20px 96px; }
body.t-loam .product-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 22px; padding-bottom: 0; }
body.t-loam .product-card, body.t-loam .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-loam .product-card .meta { padding: 13px 0 0; }
body.t-loam .product-card .p { color: #5f6539; font-weight: 600; }

/* the rhythm break, and then the quiet close on the darkest ground we own */
body.t-loam .sc-banner { min-height: 52vh; display: flex; align-items: center; margin: 0; }
body.t-loam .sc-contact-band { background: #241d16; padding: 96px 0 104px; }
body.t-loam .sc-contact-band .sc-h2, body.t-loam .sc-contact-band .sc-contact-sub, body.t-loam .sc-contact-band .sc-field label { color: #f2ece0; }
body.t-loam .sc-contact-band .sc-field input, body.t-loam .sc-contact-band .sc-field textarea { background: #2f261d; border-color: #453a2d; color: #f2ece0; }
body.t-loam .btn.brand { background: #5f6539; color: #f2ece0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-loam .btn.brand:hover { background: #4d5230; }
@media (max-width: 900px) {
  body.t-loam .product-grid, body.t-loam .sc-strip .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-loam .sc-hero { min-height: 88vh; padding: 96px 20px; }
}

/* NIGHT — the same farm after dark: the oat goes to wet soil, the clay band
   stays a half-shade up from the ground so the alternation survives, and the
   olive lifts to the colour dry grass actually is under a light, because
   #5f6539 on a near-black ground stops being an accent and becomes a stain. */
html[data-theme="dark"] body.t-loam {
  background: #17130f;
  color: #c9c0b2;
  --header-bg: #17130f;
  --surface: #1e1913;
  --surface-2: #231d16;
  --line: #322a21;
  --line-strong: #453a2d;
  --heading: #f0e9dd;
  --text: #c9c0b2;
  --muted: #8b8272;
}
html[data-theme="dark"] body.t-loam .sf-head, html[data-theme="dark"] body.t-loam .sf-foot,
html[data-theme="dark"] body.t-loam .sf-footer { background: #17130f; border-color: #322a21; }
html[data-theme="dark"] body.t-loam .sc-about-split,
html[data-theme="dark"] body.t-loam .sc-strip:has(.sc-h2) { background: #231d16; box-shadow: 0 0 0 100vw #231d16; }
html[data-theme="dark"] body.t-loam .sc-richtext p, html[data-theme="dark"] body.t-loam .sc-about-copy p { color: #b3aa9c; }
html[data-theme="dark"] body.t-loam .sc-strip:has(.sc-h2) .sc-strip-img { border-color: #322a21; }
html[data-theme="dark"] body.t-loam .sc-strip:has(.sc-h2) .sc-strip-label,
html[data-theme="dark"] body.t-loam .product-card .p { color: #a8b06a; }
html[data-theme="dark"] body.t-loam .sc-contact-band { background: #0f0c09; }
html[data-theme="dark"] body.t-loam .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-loam .sc-contact-band .sc-field textarea { background: #1e1913; border-color: #322a21; color: #f0e9dd; }
html[data-theme="dark"] body.t-loam .btn.brand { background: #a8b06a; color: #17130f; }
html[data-theme="dark"] body.t-loam .btn.brand:hover { background: #bcc37f; }