/* Version 5 — Clay: poster-like and warm. Expanded uppercase type, terracotta on sand,
   arch-cropped photography, colour-blocked commodity tiles, deep green markets. */
:root[data-variant="clay"] {
  --chaff-50: #fff8ef;
  --chaff-100: #f4e7d7;
  --chaff-200: #ecd9c3;
  --chaff-300: #dcc1a2;
  --chaff-400: #c4a27f;
  --loam-950: #160c07;
  --loam-900: #1d3a2b;
  --loam-800: #2b1911;
  --loam-700: #3e271b;
  --loam-600: #66463a;
  --loam-500: #7f5f4f;
  --barley-200: #f6d4c1;
  --barley-300: #f2ae88;
  --barley-400: #c4532a;
  --barley-500: #a94420;
  --barley-700: #a3421d;
  --accent-ink: #fff8ef;
  --accent-hover: #a94420;
  --green: #1d3a2b;
  --mustard: #d9a03f;
  --line: rgb(43 25 17 / 0.14);
  --line-strong: rgb(43 25 17 / 0.34);

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --fs-base: 1.0625rem;
  --fs-2xl: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;

  --globe-dark: 1;
  --globe-diffuse: 1.3;
  --globe-map-brightness: 5.5;
  --globe-map-base: 0.03;
  --globe-base: 0.17 0.32 0.24;
  --globe-marker: 0.96 0.66 0.5;
  --globe-glow: 0.3 0.46 0.36;
}

:root[data-variant="clay"] h1,
:root[data-variant="clay"] h2,
:root[data-variant="clay"] h3 {
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
:root[data-variant="clay"] h3 { font-weight: 700; letter-spacing: 0; line-height: 1.05; }
:root[data-variant="clay"] .eyebrow,
:root[data-variant="clay"] .mono,
:root[data-variant="clay"] .fact dt,
:root[data-variant="clay"] .step-num,
:root[data-variant="clay"] .index-items {
  font-stretch: 87.5%;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-variant="clay"] .eyebrow { color: var(--barley-700); }
:root[data-variant="clay"] .eyebrow::before { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--barley-400); }
:root[data-variant="clay"] .on-dark .eyebrow { color: var(--barley-300); }
:root[data-variant="clay"] .btn { font-stretch: 112.5%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.875rem; }
:root[data-variant="clay"] .btn-dark { --btn-bg: var(--loam-800); }

:root[data-variant="clay"] .site-header .brand-mark rect { fill: var(--barley-400); }
:root[data-variant="clay"] .site-header .brand-mark path:first-of-type { stroke: var(--chaff-50); }
:root[data-variant="clay"] .site-header .brand-mark path:last-of-type { stroke: var(--loam-800); }
:root[data-variant="clay"] .nav-link { font-weight: 600; }

/* Hero: poster headline, arch photo, rotating badge */
:root[data-variant="clay"] .hero { min-height: 0; display: block; }
:root[data-variant="clay"] .hero-media { display: none; }
:root[data-variant="clay"] .hero-main {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-7);
  align-items: end;
  padding-top: calc(var(--header-h) + var(--sp-6));
}
:root[data-variant="clay"] .hero-copy { padding: 0 0 var(--sp-6); }
:root[data-variant="clay"] .hero-title { font-size: clamp(2.5rem, 1rem + 4.6vw, 5.75rem); line-height: 0.92; }
:root[data-variant="clay"] .hero-title em { font-style: normal; color: var(--barley-400); }
:root[data-variant="clay"] .hero-lede { color: var(--loam-600); }
:root[data-variant="clay"] .hero-actions .btn:not(.btn-primary) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; --btn-ring: var(--loam-800); }
:root[data-variant="clay"] .hero-gallery { display: block; position: relative; }
:root[data-variant="clay"] .hg-wheat-ears {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 50%;
  border-radius: 999px 999px 24px 24px;
}
:root[data-variant="clay"] .hero-badge {
  display: block;
  position: absolute;
  left: -3.25rem;
  bottom: 2.5rem;
  width: 9.5rem;
  height: 9.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--barley-400);
  fill: var(--chaff-50);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  font-stretch: 112.5%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 0 6px var(--chaff-100);
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-variant="clay"] .hero-badge text { transform-box: view-box; transform-origin: 100px 100px; animation: clay-spin 40s linear infinite; }
}
@keyframes clay-spin { to { transform: rotate(360deg); } }
:root[data-variant="clay"] .hero-index { padding-top: var(--sp-6); padding-bottom: 0; }
:root[data-variant="clay"] .index-panel { gap: var(--sp-3); padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-variant="clay"] .index-panel li { border: 0 !important; }
:root[data-variant="clay"] .index-link { padding: var(--sp-5); border-radius: var(--r-md); color: var(--chaff-50); }
:root[data-variant="clay"] .index-panel li:nth-child(1) .index-link { background: var(--barley-400); }
:root[data-variant="clay"] .index-panel li:nth-child(2) .index-link { background: var(--green); }
:root[data-variant="clay"] .index-panel li:nth-child(3) .index-link { background: var(--mustard); color: var(--loam-800); }
:root[data-variant="clay"] .index-panel li:nth-child(4) .index-link { background: var(--loam-800); }
:root[data-variant="clay"] .index-icon { background: rgb(255 255 255 / 0.18); color: inherit; }
:root[data-variant="clay"] .index-items,
:root[data-variant="clay"] .index-go { color: inherit; opacity: 0.8; }
:root[data-variant="clay"] .index-name { font-stretch: 112.5%; font-weight: 700; }
:root[data-variant="clay"] .index-link:active { filter: brightness(0.92); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="clay"] .index-link:hover { filter: brightness(1.06); }
  :root[data-variant="clay"] .index-panel li:nth-child(n) .index-link:hover .index-go { color: inherit; opacity: 1; }
}
@media (max-width: 52rem) {
  :root[data-variant="clay"] .hero-main { grid-template-columns: 1fr; gap: var(--sp-5); }
  :root[data-variant="clay"] .hero-gallery { max-width: 24rem; margin-inline: auto; width: 100%; }
  :root[data-variant="clay"] .hero-badge { left: -0.5rem; bottom: 1rem; width: 7rem; height: 7rem; }
}

/* Company */
:root[data-variant="clay"] .facts { border-top: 0; gap: var(--sp-3); }
:root[data-variant="clay"] .fact,
:root[data-variant="clay"] .fact + .fact { padding: var(--sp-5); border: 0; border-radius: var(--r-md); background: var(--chaff-200); }
:root[data-variant="clay"] .photo-pair .photo:first-child .photo-frame { border-radius: 999px 999px var(--r-md) var(--r-md); aspect-ratio: 16 / 11; }
:root[data-variant="clay"] .photo-pair .photo:last-child .photo-frame { border-radius: var(--r-md) var(--r-md) 999px 999px; }

/* Commodities: arch-topped images on sand cards */
:root[data-variant="clay"] .commodities { background: var(--chaff-200); }
:root[data-variant="clay"] .crop:nth-child(n) { grid-column: span 6; }
:root[data-variant="clay"] .crop { padding: 12px; border-radius: 32px; box-shadow: none; }
:root[data-variant="clay"] .crop-media { border-radius: 400px 400px 20px 20px; height: clamp(14rem, 9rem + 10vw, 20rem); }
:root[data-variant="clay"] .crop-tag { left: 50%; translate: -50% 0; top: var(--sp-5); background: var(--chaff-50); font-stretch: 87.5%; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display); }
:root[data-variant="clay"] .crop-body { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
:root[data-variant="clay"] .crop-body h3 { font-size: 1.75rem; }
:root[data-variant="clay"] .chip { background: var(--barley-200); box-shadow: none; font-weight: 600; }
:root[data-variant="clay"] .chip .icon { color: var(--barley-700); }
:root[data-variant="clay"] .crop-foot { border-top: 0; padding-top: 0; }
:root[data-variant="clay"] .crop-foot .btn-dark { --btn-bg: var(--barley-400); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="clay"] .crop:hover { box-shadow: 0 0 0 2px var(--barley-400); }
  :root[data-variant="clay"] .crop-foot .btn-dark:hover { --btn-bg: var(--barley-500); }
  :root[data-variant="clay"] .chip:hover { background: var(--barley-300); box-shadow: none; }
}
@media (max-width: 40rem) {
  :root[data-variant="clay"] .crop:nth-child(n) { grid-column: 1 / -1; }
}

/* Panorama: terracotta duotone */
:root[data-variant="clay"] .panorama-media img { filter: grayscale(1) contrast(1.15); }
:root[data-variant="clay"] .panorama-media::after { background: var(--barley-400); mix-blend-mode: multiply; opacity: 0.88; }
:root[data-variant="clay"] .panorama-copy blockquote { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1rem + 3.6vw, 4rem); line-height: 0.95; max-width: 16ch; }

/* Markets: deep green */
:root[data-variant="clay"] .markets {
  --bg: var(--green);
  --surface: #26473a;
  --text: var(--chaff-50);
  --text-muted: #cfd8c9;
  --text-subtle: #a9b8a8;
  --line: rgb(255 248 239 / 0.14);
  --line-strong: rgb(255 248 239 / 0.32);
  --accent-text: var(--barley-300);
  --focus: var(--barley-300);
}
:root[data-variant="clay"] .markets::before { display: none; }
:root[data-variant="clay"] .region-btn { border-radius: 999px; }
:root[data-variant="clay"] .region-btn[aria-pressed="true"] { background: var(--barley-400); box-shadow: none; color: var(--chaff-50); }
:root[data-variant="clay"] .region-btn[aria-pressed="true"] .region-dot { background: var(--chaff-50); box-shadow: inset 0 0 0 1.5px var(--chaff-50); }
:root[data-variant="clay"] .region-btn[aria-pressed="true"] .region-meta { color: rgb(255 248 239 / 0.75); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="clay"] .region-btn[aria-pressed="true"]:hover { box-shadow: none; background: var(--barley-500); }
}
:root[data-variant="clay"] .region-detail { border-radius: var(--r-lg); background: rgb(255 248 239 / 0.06); }
:root[data-variant="clay"] .region-dest .icon { color: var(--barley-300); }
:root[data-variant="clay"] .globe-stage::before { background: radial-gradient(circle at 38% 34%, #2f5544 0%, #183126 70%); box-shadow: none; }
:root[data-variant="clay"] .globe-label { background: var(--barley-400); color: var(--chaff-50); box-shadow: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-stretch: 87.5%; }

/* Process: big terracotta discs */
:root[data-variant="clay"] .step { padding-top: 5.5rem; }
:root[data-variant="clay"] .step::before { top: 2.25rem; height: 2px; background: repeating-linear-gradient(90deg, var(--barley-400) 0 8px, transparent 8px 16px); }
:root[data-variant="clay"] .step-marker { width: 4.5rem; height: 4.5rem; color: var(--chaff-50); box-shadow: 0 0 0 6px var(--chaff-100); }
:root[data-variant="clay"] .step-marker .icon { width: 1.75rem; height: 1.75rem; }
@media (max-width: 52rem) {
  :root[data-variant="clay"] .step { padding-top: 0; padding-inline-start: 6rem; min-height: 4.5rem; }
  :root[data-variant="clay"] .step::before { top: 4.5rem; left: 2.25rem; width: 2px; background: repeating-linear-gradient(180deg, var(--barley-400) 0 8px, transparent 8px 16px); }
}

/* Contact */
:root[data-variant="clay"] .contact { background: var(--chaff-200); }
:root[data-variant="clay"] .contact-copy .photo-frame { border-radius: 999px 999px var(--r-md) var(--r-md); aspect-ratio: 1; }
:root[data-variant="clay"] .form-card { border-radius: 32px; box-shadow: none; }
:root[data-variant="clay"] .notice { background: var(--barley-200); }
:root[data-variant="clay"] .notice .icon { color: var(--barley-700); }
:root[data-variant="clay"] .badge { background: var(--barley-400); color: var(--chaff-50); }
:root[data-variant="clay"] .input { border-radius: 14px; border-color: var(--line-strong); background: var(--chaff-100); }
:root[data-variant="clay"] .summary { background: var(--chaff-100); }

/* Footer */
:root[data-variant="clay"] .site-footer { background: var(--loam-800); }
:root[data-variant="clay"] .site-footer .brand-mark rect { fill: var(--barley-400); }
:root[data-variant="clay"] .site-footer .brand-mark path { stroke: var(--chaff-50); }

:root[data-variant="clay"] .markets-copy .h2 { max-width: none; }