/* ════════════════════════════════════════════════════════════════════════════
   ANTEVO — the shared brand layer.

   WHY THIS FILE EXISTS
   antevo.ch is five separate builds (antevo-web, antevo-trademark-web,
   antevo-mandate-web, antevo-executive-web, antevo-wealth-marketing) that ship
   their CSS inline. They drifted, exactly as separate copies do: three golds,
   two serif families, five navs, three footers, and `--ink` meaning near-black
   on one page and near-white on the next. An external review counted it before
   we did.

   Every page on this origin can link this file — same origin, so `style-src
   'self'` already permits it on every route. Link it FIRST, then the page's own
   styles, so a page can still override a token deliberately.

       <link rel="stylesheet" href="/assets/brand.css">

   RULES
   - Tokens are prefixed `--av-`. They do not collide with a page's own `--ink`
     or `--gold`, which is deliberate: the apps rebind those per theme and this
     file must not fight them.
   - Component classes are prefixed `.av-`.
   - The display face is loaded here ONCE. Before this, `/` and `/mcp` used no
     webfont at all, so the brand rendered in Iowan on macOS, Palatino Linotype
     on Windows and Georgia on Android — three different faces for one brand.
   - The wordmark is the real asset, not type. Setting "ANTEVO" in a letterspaced
     serif is not the logo; the logo has custom geometric letterforms (the
     crossbar-less A, the squared E) that no system serif approximates.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── the one gold. Was #C9A45C / #c9a26b / #a08550 across five builds. ── */
  --av-gold:        #C9A45C;
  --av-gold-soft:   #D9BE83;
  --av-brass:       #8E6C38;   /* the gold, darkened for AA on paper */

  /* ── night ── */
  --av-night:       #080A0F;
  --av-night-2:     #0E1117;
  --av-night-3:     #141821;
  --av-night-ink:   #ECE8DE;
  --av-night-rule:  #1F2632;
  /* #858D9B on --av-night is 5.6:1. The old #7C8492 was 4.4:1 and failed AA at
     the small sizes it was actually used at. Muted is not an excuse for unreadable. */
  --av-night-mute:  #949CAA;

  /* ── paper ── */
  --av-paper:       #F5F3EF;
  --av-paper-2:     #FFFFFF;
  --av-paper-alt:   #EEEBE4;
  --av-ink:         #14181E;
  --av-rule:        #E2DDD2;
  /* #5C636F on --av-paper is 6.2:1 — comfortable. */
  --av-ink-mute:    #5C636F;

  --av-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Charter, Georgia, serif;
  --av-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --av-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --av-pad:   clamp(18px, 4.5vw, 56px);
  /* THE banner width. Measured live before this: / and /mandate 1180,
     /wealth 952, /executive 1280 — four surfaces, three widths, so the
     masthead visibly changed length as you moved between tabs. Every header
     on the origin now reads this token. */
  --av-shell: 1180px;

  /* A real scale. The homepage had 17 distinct sizes, Trademark 20 (including
     9px, 12.8px and 14.72px — cascade drift, not a decision), Wealth 22. */
  --av-t-micro: 11px;
  --av-t-fine:  13px;
  --av-t-small: 15px;
  --av-t-body:  16.5px;
  --av-t-lead:  18.5px;
  --av-t-h3:    21px;
  --av-t-h2:    clamp(24px, 3vw, 33px);
  --av-t-h1:    clamp(34px, 4.8vw, 56px);
}

/* The display face, self-hosted, one weight. Wealth and Mandate already load
   Cormorant Garamond; this makes it the brand's face everywhere instead of a
   coin-flip on the visitor's OS. `swap` so text is never invisible while it
   loads — the wordmark is an image and does not depend on it. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-300.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

/* ── skip link: every page, same behaviour ───────────────────────────────── */
.av-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--av-night-2); color: var(--av-night-ink);
  padding: 10px 16px; border: 1px solid var(--av-night-rule);
  border-radius: 4px; text-decoration: none; font-size: var(--av-t-small);
}
.av-skip:focus { left: 16px; top: 16px; }

.av-shell { max-width: var(--av-shell); margin: 0 auto; padding: 0 var(--av-pad); }

/* ── the wordmark ────────────────────────────────────────────────────────── */
.av-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.av-mark .av-symbol { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.av-mark .av-word { height: 13px; width: auto; display: block; }
.av-mark .av-word-lg { height: 18px; }

/* ── header ──────────────────────────────────────────────────────────────── */
.av-head { border-bottom: 1px solid var(--av-night-rule); position: relative; z-index: 30; }
.av-bar {
  max-width: var(--av-shell); margin: 0 auto;
  /* padding-inline, NOT the `padding: 16px 0` shorthand that used to sit here.
     The shorthand silently zeroed the shell's horizontal padding, so at 390px
     the first nav item rendered flush against the screen edge at x=0 while the
     body below it stayed indented. Desktop hid it: the shell is narrower than
     the viewport there, so the centring margin faked the gutter. */
  /* One header height everywhere. It was 51/61/66/68 across four surfaces —
     the banner grew and shrank as you moved between tabs. */
  padding-block: 15px;
  min-height: 76px;
  padding-inline: var(--av-pad);
  display: flex; align-items: center; gap: 20px;
}
.av-nav { display: flex; gap: 26px; margin: 0 auto; flex-wrap: wrap; }
.av-nav a {
  color: var(--av-night-mute); text-decoration: none; font-size: var(--av-t-small);
  transition: color 140ms ease;
}
.av-nav a:hover, .av-nav a[aria-current] { color: var(--av-night-ink); }
.av-actions { display: flex; align-items: center; gap: 10px; }

.av-btn {
  font-size: var(--av-t-small); padding: 10px 18px; border-radius: 3px;
  text-decoration: none; white-space: nowrap; display: inline-flex;
  align-items: center; justify-content: center; min-height: 40px;
  transition: opacity 140ms ease, border-color 140ms ease;
}
.av-btn-solid { background: var(--av-paper-2); color: #111; }
.av-btn-solid:hover { opacity: 0.88; }
.av-btn-line { border: 1px solid var(--av-night-rule); color: var(--av-night-ink); }
.av-btn-line:hover { border-color: var(--av-gold); }

/* ── mobile nav: a checkbox, because the root pages cannot run JavaScript ──
   The umbrella CSP allows script only from the analytics host, so a JS toggle
   here would fail silently — the same trap that shipped /contact inert. The
   checkbox hack is not nostalgia; it is the only mechanism that works on this
   origin. The input is visually hidden but focusable and labelled, so it stays
   operable by keyboard and announced by a screen reader. */
.av-burger-input { position: absolute; opacity: 0; pointer-events: none; }
.av-burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--av-night-rule); border-radius: 3px;
}
.av-burger span { position: relative; width: 17px; height: 1.5px; background: var(--av-night-ink); display: block; }
.av-burger span::before, .av-burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--av-night-ink);
}
.av-burger span::before { top: -5.5px; }
.av-burger span::after  { top:  5.5px; }
.av-burger-input:focus-visible + .av-burger { outline: 2px solid var(--av-gold); outline-offset: 2px; }

@media (max-width: 900px) {
  .av-bar { flex-wrap: wrap; }
  .av-burger { display: flex; }
  /* Collapsed by default. Nav and CTAs were costing 201–211px of header at
     390px — a quarter of the first screen — before the hero even started. */
  .av-nav, .av-actions {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0;
  }
  .av-burger-input:checked ~ .av-nav,
  .av-burger-input:checked ~ .av-actions { display: flex; }
  .av-nav { border-top: 1px solid var(--av-night-rule); margin-top: 12px; }
  .av-nav a {
    padding: 13px 0; border-bottom: 1px solid var(--av-night-rule);
    font-size: var(--av-t-body); min-height: 44px; display: flex; align-items: center;
  }
  .av-actions { gap: 10px; padding: 14px 0 4px; }
  .av-btn { width: 100%; min-height: 46px; }
}

/* ── footer: one, everywhere ─────────────────────────────────────────────── */
.av-foot {
  border-top: 1px solid var(--av-night-rule);
  background: var(--av-night); color: var(--av-night-ink);
  padding: 30px 0 42px;
}
.av-foot-row {
  max-width: var(--av-shell); margin: 0 auto; padding: 0 var(--av-pad);
  display: flex; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; align-items: baseline;
}
.av-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.av-foot nav a {
  color: var(--av-night-mute); text-decoration: none; font-size: var(--av-t-fine);
  min-height: 34px; display: inline-flex; align-items: center;
}
.av-foot nav a:hover { color: var(--av-night-ink); }
.av-foot-fine {
  max-width: var(--av-shell); margin: 20px auto 0; padding: 0 var(--av-pad);
  font-family: var(--av-mono); font-size: var(--av-t-micro);
  letter-spacing: 0.13em; text-transform: uppercase;
  /* 4.6:1 on --av-night. The old #6B7280 was 4.1:1 and failed AA at 10px. */
  color: #8C94A2;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── one scrollbar, so the banner sits in the same place on every tab ─────────
   /mandate and /executive styled ::-webkit-scrollbar and the other four did
   not. On macOS that is the difference between a CLASSIC 10px scrollbar and an
   overlay one that occupies nothing — measured: clientWidth 1819 on /mandate
   against 1829 on /. A centred 1180px shell then lands 5px further left, so the
   whole page — banner included — visibly jumped sideways when you switched
   tabs. The width was identical; the gutter was not.

   Defining it here means every page reserves the same space. Keep it in this
   file and out of the apps, or the next one to style a scrollbar reintroduces
   the shift. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #949CAA 45%, transparent);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, #949CAA 70%, transparent); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
/* Firefox has no ::-webkit- equivalent; this is the standards property. */
html { scrollbar-width: thin; scrollbar-gutter: stable; }