/* ============================================================
   site.css — shared foundation for the whole site.

   SINGLE SOURCE OF TRUTH for cross-page typography, color, and
   fonts. Page-specific sizes still live on each page (the heroes
   are deliberately different sizes); the values that must NOT
   drift across pages live here, once.

   Linked by every page:
     root pages    <link rel="stylesheet" href="site.css">
     case studies  <link rel="stylesheet" href="../../site.css">

   How pages consume this file:
   - Fonts: @font-face below. url() resolves relative to THIS file
     (site.css at the site root), so the same rules serve nested
     case-study pages with no path juggling — never re-declare
     @font-face on a page.
   - Colors: --bg / --ink / etc. are read by each page's JS token
     object (T) and CHROME_T as 'var(--ink)' etc., and by the
     global body/selection rules. Change a value here to restyle
     every page at once.
   - Accent is a DEFAULT here. Pages may override --accent in their
     own :root (loaded after this link), and services.html's Tweaks
     panel sets it live via setProperty('--accent', …) — both still
     win over these defaults, so accent stays tweakable.
   - H1 tracking: each page's hero/title H1 reads
       letterSpacing: 'var(--h1-tracking, -0.01em)'
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Brandon Text';
  src: url('fonts/Brandon-Text-Bold.otf') format('opentype');
  font-weight: 700;
}
@font-face {
  font-family: 'Brandon Text';
  src: url('fonts/Brandon-Text-Regular.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'Brandon Text';
  src: url('fonts/Brandon-Text-Light.otf') format('opentype');
  font-weight: 300;
}

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Neutrals (warm editorial palette) */
  --bg:       #F4F4F2;  /* page background */
  --surface:  #FAFAFA;  /* cards / elevated panels */
  --ink:      #141412;  /* primary text */
  --muted:    #4E4E49;  /* secondary text */
  --faint:    #6E6E68;  /* captions / tertiary */
  --border:   #D6D6D0;  /* hairline borders */
  --divider:  #E8E8E4;  /* subtle fills / dividers */
  --dark:     #141412;  /* inverse / dark sections */

  /* Accent (olive green) — DEFAULTS; pages & Tweaks may override */
  --accent:      #849832;
  --accent-hover:#677826;
  --accent-soft: #C5D08A;
  --accent-on:   #141412;  /* text/icon color on an accent fill */

  /* Letter-spacing for every page's hero / page-title H1.
     Change here to re-track all H1s at once. */
  --h1-tracking: -0.01em;

  /* Letter-spacing for every page's section H2s.
     Change here to re-track all H2s at once. */
  --h2-tracking: 0em;
}

h1 { letter-spacing: var(--h1-tracking, -0.01em); }
h2, .section-h2 { letter-spacing: var(--h2-tracking, 0em); }

/* Case-study section subheads (.section-h2, 32px Bold) gain +2px of
   leading when they wrap at the mobile breakpoint:
   32px x 1.1 = 35.2px  ->  32px x 1.1625 = 37.2px. */
@media (max-width: 720px) {
  .section-h2 { line-height: 1.1625 !important; }
}

/* ── Shared ContactForm (contact-form.jsx) ── */
.field { display: flex; flex-direction: column; }
.field-label {
  font-family: 'Brandon Text', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #96968F;
  margin-bottom: 7px;
}
.field-label .req { color: var(--accent); margin-left: 4px; }
.field-label .opt { color: #6E6E68; font-weight: 400; letter-spacing: 0.06em; margin-left: 6px; text-transform: none; }
.field-input {
  font-family: 'Brandon Text', sans-serif; font-size: 16px; font-weight: 400;
  color: #F4F4F2; background: rgba(250,250,250,0.05); border: 1.5px solid rgba(250,250,250,0.12);
  border-radius: 4px; padding: 12px 16px; outline: none; transition: border-color 150ms;
}
.field-input::placeholder { color: #6E6E68; }
.field-input:focus { border-color: var(--accent); }
.field-input.error { border-color: #E0795C; }
textarea.field-input { resize: vertical; min-height: 120px; line-height: 1.5; }
.field-error { font-family: 'Brandon Text', sans-serif; font-size: 12px; color: #E0795C; margin-top: 7px; }
.contact-form-wrap { width: 50%; min-width: 320px; }
@media (max-width: 700px) {
  .contact-form-wrap { width: 100%; min-width: 0; }
}

/* Honeypot — must stay visually and spatially hidden, never display:none
   (some bots skip fields hidden that way) */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }