/* ─────────────────────────────────────────────────────────────────────────────
   GENERATED FILE — DO NOT EDIT.

   Copied from  Arena AI/Style Guide/arena-macro.css
   Source hash  4f424ab2f1ab
   Regenerate   node "Arena AI/Style Guide/sync-tokens.mjs"

   Edit the source, then re-run the sync. An edit here is silently reverted on the
   next run, and `--check` will fail the build in the meantime.
   ───────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   ARENA MACRO — design tokens
   Arena Hall's digital brand. Locked 2026-08-01.
   Doc: ./ARENA-MACRO.md   Source: JDI, Figma "Arena Macro Brand V2"

   Import this. Do not copy the hex values into another stylesheet — a brand in
   five copy-pasted files stops being one brand.

   Colours were sampled from the exported artwork, not picked by eye.
   ============================================================================ */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --am-ink:    #272728;  /* primary dark  */
  --am-paper:  #F7F5F2;  /* primary light */
  --am-sand:   #D1C4B8;  /* warm neutral  */
  --am-sage:   #8F946D;  /* accent        */
  --am-olive:  #61624A;  /* deep accent   */
  --am-bronze: #B89358;  /* THE hot accent — once or twice per layout, never a fill */
  --am-arch:   #2E2D22;  /* arch card ground only */

  /* Derived, for hairlines and muted type. Kept as tokens so nobody invents
     their own 40%-opacity ink and drifts. */
  --am-rule:        color-mix(in srgb, var(--am-ink) 16%, transparent);
  --am-rule-invert: color-mix(in srgb, var(--am-paper) 22%, transparent);
  --am-muted:       color-mix(in srgb, var(--am-ink) 58%, transparent);
  --am-muted-invert:color-mix(in srgb, var(--am-paper) 62%, transparent);

  /* ---- Type ------------------------------------------------------------
     Blair ITC is a LICENSED ITC/Monotype face — not on Google Fonts, and the
     desktop files JDI designed with may not be served from a website.
     Until a webfont licence exists, --am-display falls through to Inter.
     That is deliberate: a wrong-flavoured display face (Cinzel, Copperplate,
     Julius Sans One) reads as a DIFFERENT brand, whereas plain Inter reads as
     unfinished — honest, and a one-line swap later.
     When the licence lands: add the @font-face and delete the fallback note. */
  --am-display: "Blair ITC Medium", "Blair ITC", Inter, system-ui, sans-serif;
  --am-body:    Inter, system-ui, -apple-system, sans-serif;

  --am-display-weight: 500;   /* Blair Medium */
  --am-body-weight:    300;   /* Inter Light  */

  /* Headlines are set in caps with open tracking. */
  --am-display-tracking: 0.06em;
  --am-label-tracking:   0.16em;   /* small-caps labels and eyebrows */

  /* ---- Space ----------------------------------------------------------- */
  --am-gap-xs: 0.35rem;
  --am-gap-s:  0.7rem;
  --am-gap-m:  1.4rem;
  --am-gap-l:  2.6rem;
  --am-gap-xl: 4.5rem;   /* the whitespace IS the brand — don't tighten this */
  --am-measure: 34rem;   /* body copy sits in columns, never full-bleed */
}

/* Dark ground. Both polarities are first-class in this brand — every layout in
   the guide exists light and dark, so no component may assume a light ground. */
.am-dark {
  --am-fg:      var(--am-paper);
  --am-bg:      var(--am-ink);
  --am-rule-c:  var(--am-rule-invert);
  --am-muted-c: var(--am-muted-invert);
  background: var(--am-bg);
  color: var(--am-fg);
}
.am-light {
  --am-fg:      var(--am-ink);
  --am-bg:      var(--am-paper);
  --am-rule-c:  var(--am-rule);
  --am-muted-c: var(--am-muted);
  background: var(--am-bg);
  color: var(--am-fg);
}

/* ---- Wordmark: always stacked, never on one line ------------------------ */
.am-wordmark { line-height: 0.92; }
.am-wordmark .arena {
  display: block; font-family: var(--am-body); font-weight: 300;
  font-size: 0.62em; letter-spacing: var(--am-label-tracking); text-transform: uppercase;
}
.am-wordmark .macro {
  display: block; font-family: var(--am-display); font-weight: var(--am-display-weight);
  font-size: 1.6em; letter-spacing: var(--am-display-tracking); text-transform: uppercase;
}

/* ---- Type roles -------------------------------------------------------- */
.am-h1, .am-h2 {
  font-family: var(--am-display); font-weight: var(--am-display-weight);
  letter-spacing: var(--am-display-tracking); text-transform: uppercase;
  line-height: 1.06; margin: 0;
}
.am-h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.am-h2 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }

.am-label {   /* eyebrows, captions, small-caps labels */
  font-family: var(--am-body); font-weight: 400; font-size: 0.7rem;
  letter-spacing: var(--am-label-tracking); text-transform: uppercase;
  color: var(--am-muted-c);
}
.am-body {
  font-family: var(--am-body); font-weight: var(--am-body-weight);
  font-size: 1rem; line-height: 1.7; max-width: var(--am-measure);
}

/* ---- Key Numbers — the signature device -------------------------------- */
.am-keynumbers { display: flex; flex-direction: column; gap: var(--am-gap-s); }
.am-keynumber {
  border-left: 3px solid var(--am-bronze);
  padding: var(--am-gap-xs) 0 var(--am-gap-xs) var(--am-gap-s);
}
.am-keynumber .figure {
  font-family: var(--am-display); font-weight: var(--am-display-weight);
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1;
  letter-spacing: var(--am-display-tracking);
}
.am-keynumber:nth-child(3n+2) { border-left-color: var(--am-sage); }
.am-keynumber:nth-child(3n+3) { border-left-color: var(--am-sand); }

/* ---- Percentage blocks: staggered, each on a short coloured bar --------- */
.am-pcts { display: flex; flex-wrap: wrap; gap: var(--am-gap-m); align-items: flex-start; }
.am-pct { min-width: 5.5rem; }
.am-pct .bar { display: block; height: 4px; width: 3.2rem; background: var(--am-bronze); margin-bottom: var(--am-gap-xs); }
.am-pct:nth-child(2n) { margin-top: var(--am-gap-m); }        /* stagger, never a tidy row */
.am-pct:nth-child(2n) .bar { background: var(--am-sage); }
.am-pct:nth-child(3n) .bar { background: var(--am-olive); }
.am-pct .figure {
  font-family: var(--am-display); font-weight: var(--am-display-weight);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: var(--am-display-tracking);
}

/* ---- Ruled divider: a STACK of hairlines, never a single rule ----------- */
.am-rules { display: flex; flex-direction: column; gap: 3px; margin: var(--am-gap-l) 0; }
.am-rules::before, .am-rules::after,
.am-rules > i { display: block; height: 1px; background: var(--am-rule-c); content: ""; }

/* ---- Time stamp: events carry their hour as a design element ------------ */
.am-time {
  font-family: var(--am-display); font-weight: var(--am-display-weight);
  letter-spacing: var(--am-display-tracking); font-size: 1.05rem;
}
.am-time::before { content: "@ "; color: var(--am-bronze); }

/* ---- Duotone photography: monochrome, banded. Never a colour photo. ----- */
.am-duotone { filter: grayscale(1) contrast(1.08); width: 100%; display: block; }

/* ---- Single CTA. Bronze is punctuation; one per view. ------------------- */
.am-cta {
  display: inline-block; font-family: var(--am-body); font-weight: 400;
  font-size: 0.78rem; letter-spacing: var(--am-label-tracking); text-transform: uppercase;
  padding: 0.62rem 1.3rem; border: none; cursor: pointer;
  background: var(--am-bronze); color: var(--am-ink); text-decoration: none;
}
.am-cta.ghost { background: none; color: inherit; border: 1px solid var(--am-rule-c); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }