/* ==========================================================================
   Efficient Street V3 — token layer
   Loaded before es-site.css. Contains: reset, palette, semantic art roles,
   type scale, art utility classes, focus + reduced-motion base.

   HEX RULE: raw hex values appear ONLY in the :root block below and in the
   es-sg* gradient stops inside partials/es-sprite.html (metallic bevel greys,
   deliberately outside the brand palette). Everywhere else uses var().
   ========================================================================== */

:root {
  /* ---- Block A: raw palette -------------------------------------------- */
  /* Core — re-sampled 2026-08-10 from the regenerated brand-kit sheet
     (references/brand/brandkitsheetcgpt.png), pixel-median per swatch, NOT
     its printed captions. This supersedes the 2026-08-08 "verified,
     unchanged" values — that call was specific to the earlier sheet, which
     had invalid RGB triplets and invented font names; this sheet's data
     checked out on inspection. See decisions/log.md 2026-08-10.
     Contrast note: leaf-on-cream and mint-on-forest both dropped below the
     4.5:1 AA text floor (4.10:1 / 4.04:1) — still fine for large text/UI,
     but any SMALL body text in leaf or mint should use --pine instead
     (8.91:1 on cream), the same substitution already used for the
     page-head eyebrow below. */
  --cream:     #f4e6c7;
  --cream-2:   #eddebc;
  --card:      #ffffff;
  --ink:       #121d17;
  --ink-2:     #3c4a43;
  --muted:     #75817a;
  --leaf:      #227d59;
  --forest:    #14442d;
  --pine:      #164432;
  --mint:      #3cad9d;

  /* Illustration sub-palette — re-sampled 2026-08-10 alongside the core
     palette above, same sheet, same method. Contrast on the new cream:
     asphalt 11.1:1, brick 3.85:1, awning/sky/wood unchanged (sheet doesn't
     cover them). Only asphalt may carry text; the other four are
     fill-only and must sit inside an --art-ink outline. */
  --illus-brick:   #bf5037;
  --illus-asphalt: #2d2d2d;
  --illus-sky:     #a8d8dc;
  /* Measured average of the top 4 rows of hero-main-street.jpg. The home
     hero's gradient lands on this so the CSS sky meets the raster plate
     without a seam. Re-sample if that plate is ever recropped. */
  --illus-sky-horizon: #87b7c4;
  --illus-wood:    #e2bb7f;
  --illus-awning:  #74c69d;

  /* ---- Block B: semantic art roles -------------------------------------
     SVG art names a role, never a raw color. Overriding one of these on any
     ancestor recolors every illustration beneath it — this is what lets the
     hero's day skyline and the CTA's dusk skyline share one set of shapes. */
  --art-ink:       var(--forest);
  --art-face:      var(--cream);
  --art-road:      var(--illus-asphalt);
  --art-road-dash: var(--cream);
  --art-sky:       var(--illus-sky);
  --art-brick:     var(--illus-brick);
  --art-wood:      var(--illus-wood);
  --art-awning-a:  var(--illus-awning);
  --art-awning-b:  var(--cream);
  --art-foliage:   var(--leaf);
  --art-foliage-2: var(--pine);
  --art-glass:     var(--illus-sky);
  --art-glass-lit: var(--mint);
  --art-stroke-w:  2;

  /* ---- Type --------------------------------------------------------------
     Re-sourced 2026-08-10 from the same brand-kit sheet as the palette
     above, replacing Fraunces/Inter. The sheet specifies three tiers —
     Heading (Oswald Bold), Subheading (Montserrat Semibold), Body
     (Montserrat Regular) — mapped onto the existing two-tier CSS as h1 =
     --font-display, h2/h3/h4 = --font-subhead, body = --font-body. */
  --font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-subhead: "Montserrat", system-ui, Arial, Helvetica, sans-serif;
  --font-body:    "Montserrat", system-ui, Arial, Helvetica, sans-serif;
  --font-sign:    "Oswald", "Arial Narrow", Arial, sans-serif;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Height of the asphalt road band. A token because the page-head skylines
     are absolutely positioned and must sit ON the road, not behind it —
     they offset by exactly this value. Change it here or they desync. */
  --road-h: clamp(34px, 4vw, 52px);

  /* ---- Depth: base -> elevated -> floating ------------------------------ */
  --sh-1: 0 1px 2px rgba(13, 47, 34, 0.06), 0 2px 6px rgba(13, 47, 34, 0.05);
  --sh-2: 0 2px 4px rgba(13, 47, 34, 0.07), 0 8px 20px rgba(13, 47, 34, 0.09);
  --sh-3: 0 4px 8px rgba(13, 47, 34, 0.09), 0 18px 42px rgba(13, 47, 34, 0.14);
  --sh-glow: 0 6px 22px rgba(30, 122, 82, 0.32);
  --sh-inset-line: inset 0 0 0 2px var(--cream);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ==========================================================================
   Type scale
   ========================================================================== */

h1, h2, h3, h4 {
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* h1 = Heading tier (Oswald Bold); h2-h4 = Subheading tier (Montserrat
   Semibold) — see --font-display / --font-subhead in the palette block. */
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.03em; }
h2 { font-family: var(--font-subhead); font-weight: 600; font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-family: var(--font-subhead); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; }
h4 { font-family: var(--font-subhead); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
p  { margin: 0; }

/* Oswald uppercase eyebrow — the "sign label" micro-type from BRAND.md */
.es-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sign);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
}
.es-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.es-eyebrow--light { color: var(--mint); }
.es-eyebrow--center { justify-content: center; }

.es-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Art utility classes
   For DIRECTLY-INLINED svg only. Inside <symbol> defs, bind with inline
   style="fill:var(--art-*)" instead — outer class selectors do not reliably
   match into a <use> shadow tree, but inherited custom properties do.
   ========================================================================== */

.a-ink     { fill: var(--art-ink); }
.a-face    { fill: var(--art-face); }
.a-road    { fill: var(--art-road); }
.a-brick   { fill: var(--art-brick); }
.a-wood    { fill: var(--art-wood); }
.a-glass   { fill: var(--art-glass); }
.a-lit     { fill: var(--art-glass-lit); }
.a-awn-a   { fill: var(--art-awning-a); }
.a-awn-b   { fill: var(--art-awning-b); }
.a-foliage { fill: var(--art-foliage); }
.a-foliage-2 { fill: var(--art-foliage-2); }

.a-stroke {
  fill: none;
  stroke: var(--art-ink);
  stroke-width: var(--art-stroke-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Outlined fill — the cartoon-flat idiom. Every non-asphalt illustration
   color must be enclosed by one of these. */
.a-out {
  stroke: var(--art-ink);
  stroke-width: var(--art-stroke-w);
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ==========================================================================
   Focus
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On dark bands leaf is too close to the ground — mint is 7.6:1 on forest. */
.es-on-dark :focus-visible { outline-color: var(--mint); }

::selection { background: var(--mint); color: var(--forest); }

.es-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  transition: top 180ms var(--ease);
}
.es-skip:focus-visible { top: 12px; }

.es-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Reveal + reduced motion
   The reduced-motion block sets the VISIBLE END STATE, not just zeroed
   durations. Zeroing alone leaves revealed content dependent on JS actually
   firing — this way the page is fully readable with reduced motion on AND
   with JS disabled.
   ========================================================================== */

.es-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.es-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .es-reveal, .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .es-ticker__track { animation: none !important; transform: none !important; }
}