/* =========================================================
   Earthy Greens — Colors & Type foundations
   Inspired by quiet rural-modern web design (Hochhubergut, etc.)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&display=swap');

:root {
  /* ---------- Primary: Moss → Forest ---------- */
  --tq-50:  #F4F6F1;   /* page tints */
  --tq-100: #E3EAD9;   /* badge bg, active nav */
  --tq-200: #C7D5B5;   /* borders, dividers */
  --tq-300: #9BB287;   /* hover */
  --tq-400: #6E8A5A;   /* PRIMARY — buttons, links (moss) */
  --tq-500: #556E45;   /* primary hover (forest) */
  --tq-600: #3D5232;   /* text on light green (deep forest) */
  --tq-700: #283821;   /* almost-black forest */

  /* ---------- Secondary: Sage + Olive ---------- */
  --aq-100: #DCE5D2;   /* sage tint */
  --aq-200: #B6C8A1;   /* sage */
  --aq-300: #87A073;   /* olive */
  --cy-100: #E8E4D5;   /* warm linen */
  --cy-200: #CFC9B4;   /* dried grass */

  /* ---------- Accent: Terracotta + Clay ---------- */
  --coral:       #B86B4A;   /* terracotta accent */
  --coral-light: #EBD7CB;   /* clay tint */
  --beige:       #EDE4D2;   /* warm cards */
  --beige-mid:   #C9B894;   /* hay border */

  /* ---------- Neutral (warm, earth-leaning) ---------- */
  --neu-0:   #FFFFFF;
  --neu-50:  #F8F6F0;   /* page background — warm off-white */
  --neu-100: #EFEBE0;   /* surfaces */
  --neu-200: #D9D2C0;   /* borders */
  --neu-300: #B5AC95;
  --neu-400: #87806B;   /* placeholder */

  /* ---------- Text (deep forest / bark) ---------- */
  --text-primary:   #1F2A1A;
  --text-secondary: #3F4E33;
  --text-muted:     #6E7A60;

  /* ---------- Semantic tokens ---------- */
  --color-bg:         var(--neu-50);
  --color-surface:    var(--neu-0);
  --color-surface-2:  var(--neu-100);
  --color-border:     var(--neu-200);
  --color-border-soft: var(--tq-200);
  --color-fg:         var(--text-primary);
  --color-fg-soft:    var(--text-secondary);
  --color-fg-muted:   var(--text-muted);
  --color-primary:    var(--tq-400);
  --color-primary-hover: var(--tq-500);
  --color-primary-tint:  var(--tq-100);
  --color-accent:     var(--coral);
  --color-accent-tint: var(--coral-light);
  --color-success:    var(--tq-500);
  --color-warning:    #D9A441;
  --color-error:      var(--coral);

  /* ---------- Type ----------
     Display: Instrument Serif — modern editorial serif with optical sizing
              ideal for big quiet headlines. Italic carries personality.
     Sans:    Geist — Vercel's contemporary geometric grotesk; clean,
              functional, subtly humanist. Replaces DM Sans.
     ------------------------------------------------------- */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Geist', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Modern, more confident type scale — editorial-leaning,
     with looser line-heights and tighter tracking on display. */
  --h1-size: clamp(44px, 6vw, 84px);  --h1-lh: 1.02;  --h1-tracking: -0.025em;  --h1-weight: 400;
  --h2-size: clamp(32px, 4vw, 52px);  --h2-lh: 1.08;  --h2-tracking: -0.022em;  --h2-weight: 400;
  --h3-size: clamp(22px, 2.4vw, 28px);--h3-lh: 1.25;  --h3-tracking: -0.015em;  --h3-weight: 400;
  --h4-size: 12px;                    --h4-lh: 1.4;   --h4-tracking: 0.22em;    --h4-weight: 500;
  --body-size: 16px;                  --body-lh: 1.65;
  --lead-size: 19px;                  --lead-lh: 1.55;
  --caption-size: 12px;               --caption-lh: 1.5;

  /* ---------- Radius (reduced ~50% from original soft-UI scale) ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, moss-tinted) ---------- */
  --shadow-soft:  0 4px 24px rgba(85,110,69,0.10), 0 1px 6px rgba(85,110,69,0.06);
  --shadow-hover: 0 8px 32px rgba(85,110,69,0.16), 0 2px 8px rgba(85,110,69,0.08);
  --shadow-lifted: 0 18px 48px rgba(31,42,26,0.22), 0 4px 14px rgba(31,42,26,0.10);
  --shadow-inset: inset 0 1px 2px rgba(85,110,69,0.08);
  --focus-ring:   0 0 0 3px rgba(110,138,90,0.20);

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Motion ---------- */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --transition-base: all var(--dur-base) var(--ease-soft);
}

/* ---------- Base elements ---------- */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;            /* prevents horizontal scroll from full-bleed sections using 100vw */
}

/* Disable iOS tap-highlight flash everywhere */
* { -webkit-tap-highlight-color: transparent; }

/* Visually hidden helper (skip link, screen-reader-only) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.visually-hidden:focus {
  position: fixed; top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 10px 16px; clip: auto;
  background: var(--neu-0); color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); z-index: 100;
}

/* Mobile breakpoint — only affects < 1024px. Desktop (≥1024px) untouched. */
@media (max-width: 1023px) {
  /* Prevent iOS Safari zoom on focus — input font-size must be ≥16px */
  input, textarea, select { font-size: 16px !important; }

  /* Tablet: collapse hardcoded multi-column grids to 2 cols */
  [data-cols="4"], [data-cols="3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-cols="2"]                  { grid-template-columns: 1fr !important; }
  [data-cols="2-aspect"]           { grid-template-columns: 1fr !important; }
  [data-cols="form-sidebar"]       { grid-template-columns: 1fr !important; }
  [data-cols="content-aside"]      { grid-template-columns: 1fr !important; }
  [data-cols="kv"]                 { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 0 !important; }
  [data-cols="kv"] > span:first-child { font-size: 11px !important; opacity: 0.7; }
}

/* Convert 21:9 hero bands to 4:3 on mobile (don't show as thin slivers) */
@media (max-width: 639px) {
  .hero-band-21-9 { aspect-ratio: 4 / 3 !important; }
}

/* Phone: collapse 2-cols too */
@media (max-width: 639px) {
  [data-cols="4"], [data-cols="3"], [data-cols="2"],
  [data-cols="2-aspect"], [data-cols="form-sidebar"],
  [data-cols="content-aside"], [data-cols="input-pair"] {
    grid-template-columns: 1fr !important;
  }
  /* Tighter section gaps on phone */
  [data-section] > * { padding-top: 0; padding-bottom: 0; }
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-tracking);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-tracking);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-tracking);
  color: var(--text-primary);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--h4-weight);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  letter-spacing: var(--h4-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--text-muted);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--tq-600);
}
a {
  color: var(--tq-500);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--tq-600); }
em, .italic-display {
  font-style: italic;
  font-feature-settings: 'ss01';
}