/* Version 4 — Dusk: dark and cinematic. Deep field green with gold, a soft serif display
   face, centred full-bleed sunset hero, four-up commodity strip, dark form controls. */
:root[data-variant="dusk"] {
  color-scheme: dark;
  /* Light ramp remapped to dark surfaces so shared components follow */
  --chaff-50: #1a251f;
  --chaff-100: #121b16;
  --chaff-200: #0c130f;
  --chaff-300: #24322a;
  --chaff-400: #3a4a40;
  --barley-200: #3a3322;
  --barley-300: #ecca8a;
  --barley-400: #d9b26a;
  --barley-500: #c49a4e;
  --barley-700: #e4c27f;

  --bg: #0e1511;
  --surface: #151f19;
  --surface-sunk: #0b110d;
  --text: #efe9dc;
  --text-muted: #b8b2a3;
  --text-subtle: #918b7d;
  --line: rgb(239 233 220 / 0.12);
  --line-strong: rgb(239 233 220 / 0.28);
  --accent: #d9b26a;
  --accent-hover: #ecca8a;
  --accent-ink: #0e1511;
  --accent-text: #e4c27f;
  --focus: #ecca8a;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-text: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --fs-base: 1.0625rem;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-ring: 0 0 0 1px rgb(239 233 220 / 0.1);
  --shadow-lift: 0 0 0 1px rgb(239 233 220 / 0.14), 0 24px 48px -20px rgb(0 0 0 / 0.7);

  --globe-dark: 1;
  --globe-diffuse: 1.3;
  --globe-map-brightness: 6;
  --globe-map-base: 0.02;
  --globe-base: 0.13 0.19 0.15;
  --globe-marker: 0.93 0.76 0.44;
  --globe-glow: 0.26 0.3 0.2;
}
:root[data-variant="dusk"] .on-dark {
  --bg: #0a100c;
  --surface: #151f19;
  --text: #efe9dc;
  --text-muted: #b8b2a3;
  --text-subtle: #918b7d;
  --line: rgb(239 233 220 / 0.12);
  --line-strong: rgb(239 233 220 / 0.28);
}
:root[data-variant="dusk"] ::selection { background: #d9b26a; color: #0e1511; }

:root[data-variant="dusk"] h1,
:root[data-variant="dusk"] h2,
:root[data-variant="dusk"] h3 { font-weight: 400; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 50; }
:root[data-variant="dusk"] h3 { font-variation-settings: "opsz" 48, "SOFT" 50; }
:root[data-variant="dusk"] .eyebrow,
:root[data-variant="dusk"] .mono,
:root[data-variant="dusk"] .fact dt,
:root[data-variant="dusk"] .step-num { letter-spacing: 0.16em; font-weight: 600; }
:root[data-variant="dusk"] .eyebrow { color: var(--accent-text); }

:root[data-variant="dusk"] .btn-dark { --btn-bg: #efe9dc; --btn-fg: #0e1511; }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="dusk"] .btn-dark:hover { --btn-bg: #ffffff; }
  :root[data-variant="dusk"] .btn:hover { --btn-ring: var(--text); }
}

/* Header over a dark hero */
:root[data-variant="dusk"] .site-header .brand-mark rect { fill: #d9b26a; }
:root[data-variant="dusk"] .site-header .brand-mark path:first-of-type { stroke: #0e1511; }
:root[data-variant="dusk"] .site-header .brand-mark path:last-of-type { stroke: #0e1511; }
:root[data-variant="dusk"] .site-header.is-scrolled,
:root[data-variant="dusk"] .site-header.is-open { background: rgb(14 21 17 / 0.88); }

/* Hero: full-bleed sunset, centred copy */
:root[data-variant="dusk"] .hero-media { display: none; }
:root[data-variant="dusk"] .hero { min-height: max(44rem, min(100svh, 64rem)); }
:root[data-variant="dusk"] .hero-gallery { display: block; position: absolute; inset: 0; z-index: -1; overflow: clip; }
:root[data-variant="dusk"] .hg-sunset { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
:root[data-variant="dusk"] .hero-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(14 21 17 / 0.7) 0%, rgb(14 21 17 / 0.25) 35%, rgb(14 21 17 / 0.45) 65%, rgb(14 21 17 / 0.96) 100%);
}
:root[data-variant="dusk"] .hero-main { display: grid; align-content: center; text-align: center; }
:root[data-variant="dusk"] .hero-copy { max-width: 62rem; margin-inline: auto; padding-top: calc(var(--header-h) + var(--sp-7)); }
:root[data-variant="dusk"] .hero .eyebrow { justify-content: center; }
:root[data-variant="dusk"] .hero .eyebrow::after { content: ""; width: 1.75rem; height: 1px; background: var(--accent); }
:root[data-variant="dusk"] .hero .eyebrow::before { height: 1px; }
:root[data-variant="dusk"] .hero-title {
  font-size: clamp(3rem, 1.4rem + 5.8vw, 7.25rem);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-inline: auto;
}
:root[data-variant="dusk"] .hero-title em { font-style: italic; color: var(--accent); font-weight: 300; }
:root[data-variant="dusk"] .hero-lede { margin-inline: auto; color: #e3dccb; max-width: 44ch; }
:root[data-variant="dusk"] .hero-actions { justify-content: center; }
:root[data-variant="dusk"] .hero-actions .btn:not(.btn-primary) { background: rgb(14 21 17 / 0.35); --btn-ring: rgb(239 233 220 / 0.4); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-variant="dusk"] .hero-gallery { animation: settle 2.4s var(--ease-out) both; }
}
:root[data-variant="dusk"] .index-panel { background: rgb(14 21 17 / 0.62); box-shadow: 0 0 0 1px rgb(239 233 220 / 0.14); }
:root[data-variant="dusk"] .index-icon { background: rgb(217 178 106 / 0.14); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="dusk"] .index-link:hover { background: rgb(239 233 220 / 0.06); }
}
:root[data-variant="dusk"] .index-link:active { background: rgb(239 233 220 / 0.1); }

/* Company */
:root[data-variant="dusk"] .intro-body p:first-child { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.35; }
:root[data-variant="dusk"] .fact dd { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
:root[data-variant="dusk"] .photo-frame::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }

/* Commodities: four-up strip of tall image cards */
:root[data-variant="dusk"] .crop { background: var(--surface); }
:root[data-variant="dusk"] .crop:nth-child(n) { grid-column: span 3; }
:root[data-variant="dusk"] .crop-media { height: clamp(16rem, 10rem + 12vw, 24rem); }
:root[data-variant="dusk"] .crop-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(21 31 25 / 0.9) 0%, rgb(21 31 25 / 0) 45%); }
:root[data-variant="dusk"] .crop-tag { background: rgb(14 21 17 / 0.7); color: var(--text); z-index: 1; }
:root[data-variant="dusk"] .crop-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); gap: var(--sp-3); }
:root[data-variant="dusk"] .crop-body h3 { font-size: 1.625rem; margin-top: calc(var(--sp-7) * -1); position: relative; }
:root[data-variant="dusk"] .crop-body p { font-size: 0.9375rem; }
:root[data-variant="dusk"] .crop-foot { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
:root[data-variant="dusk"] .crop-foot .btn { white-space: normal; text-align: center; min-height: 2.75rem; padding-block: var(--sp-2); }
:root[data-variant="dusk"] .chip { background: rgb(239 233 220 / 0.06); }
:root[data-variant="dusk"] .chip:active { background: rgb(239 233 220 / 0.12); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="dusk"] .chip:hover { background: rgb(239 233 220 / 0.1); }
}
@media (max-width: 75rem) {
  :root[data-variant="dusk"] .crop:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 40rem) {
  :root[data-variant="dusk"] .crop:nth-child(n) { grid-column: 1 / -1; }
}

/* Panorama */
:root[data-variant="dusk"] .panorama-media::after { background: linear-gradient(0deg, rgb(14 21 17 / 0.92) 0%, rgb(14 21 17 / 0.2) 60%, rgb(14 21 17 / 0.6) 100%); }
:root[data-variant="dusk"] .panorama-copy blockquote { font-weight: 350; font-style: italic; }

/* Markets */
:root[data-variant="dusk"] .markets::before { background: radial-gradient(50% 60% at 70% 50%, rgb(217 178 106 / 0.08), transparent 70%); mask-image: none; -webkit-mask-image: none; }
:root[data-variant="dusk"] .region-detail h3 { font-size: 1.75rem; }
:root[data-variant="dusk"] .region-dest .icon { color: var(--accent); }
:root[data-variant="dusk"] .globe-stage::before { background: radial-gradient(circle at 38% 34%, #22302a 0%, #101814 70%); box-shadow: 0 0 90px 10px rgb(217 178 106 / 0.08); }
:root[data-variant="dusk"] .globe-label { background: rgb(10 16 12 / 0.85); box-shadow: inset 0 0 0 1px rgb(217 178 106 / 0.5); font-family: var(--font-text); font-weight: 600; letter-spacing: 0.02em; }

/* Process */
:root[data-variant="dusk"] .step-marker { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-variant="dusk"] .step::before { background: linear-gradient(90deg, rgb(217 178 106 / 0.5), rgb(239 233 220 / 0.12)); }
:root[data-variant="dusk"] .step h3 { font-size: 1.75rem; }

/* Contact */
:root[data-variant="dusk"] .form-card { background: var(--surface); }
:root[data-variant="dusk"] .notice { color: var(--text); }
:root[data-variant="dusk"] .notice .icon { color: var(--accent); }
:root[data-variant="dusk"] .badge { color: var(--accent); }
:root[data-variant="dusk"] .input { background: #0e1511; border-color: var(--line-strong); color: var(--text); }
:root[data-variant="dusk"] .input::placeholder { color: var(--text-subtle); }
:root[data-variant="dusk"] .input:focus-visible { border-color: var(--accent); }
:root[data-variant="dusk"] .select-wrap select option { background: #121b16; color: var(--text); }
:root[data-variant="dusk"] .field-error,
:root[data-variant="dusk"] .input[aria-invalid="true"] { --danger: #f2a08a; }
:root[data-variant="dusk"] .field-error { color: #f2a08a; }
@keyframes dusk-prefill {
  0% { background-color: rgb(217 178 106 / 0.45); }
  100% { background-color: #3a3322; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-variant="dusk"] .field.is-prefilled .input { animation-name: dusk-prefill; }
}
:root[data-variant="dusk"] .form-result .result-icon { color: var(--accent); }
:root[data-variant="dusk"] .summary { background: #0e1511; }

/* Footer */
:root[data-variant="dusk"] .site-footer { background: #080d0a; }
:root[data-variant="dusk"] .site-footer .brand-mark rect { fill: #d9b26a; }
:root[data-variant="dusk"] .site-footer .brand-mark path { stroke: #0e1511; }

/* Shared rules that use the light ramp as text; Dusk remaps that ramp to dark surfaces */
:root[data-variant="dusk"] .panorama,
:root[data-variant="dusk"] .region-btn[aria-pressed="true"],
:root[data-variant="dusk"] .globe-label,
:root[data-variant="dusk"] .footer-top .brand,
:root[data-variant="dusk"] .skip-link { color: #efe9dc; }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="dusk"] .region-btn:hover,
  :root[data-variant="dusk"] .footer-nav a:hover,
  :root[data-variant="dusk"] .footer-legal a:hover { color: #ffffff; }
}

/* Interface text stays in the sans; the serif is for headlines */
:root[data-variant="dusk"] .btn,
:root[data-variant="dusk"] .nav-link,
:root[data-variant="dusk"] .brand-name,
:root[data-variant="dusk"] .chip,
:root[data-variant="dusk"] .text-link,
:root[data-variant="dusk"] .index-name,
:root[data-variant="dusk"] .region-btn,
:root[data-variant="dusk"] .field label,
:root[data-variant="dusk"] .field-error,
:root[data-variant="dusk"] .input,
:root[data-variant="dusk"] .footer-nav a,
:root[data-variant="dusk"] .notice strong,
:root[data-variant="dusk"] .skip-link { font-family: var(--font-text); }