/* ==========================================================================
   WEREWOLF EXECUTIVE MANAGEMENT SERVICES
   base.css — reset, semantic token layer, typography, accessibility
   Built on the "Slash" midnight-vault system (see ../../DESIGN.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Semantic token layer
   Raw palette values live in /variables.css. Components MUST consume the
   semantic aliases below, never raw hex. (UX rule: color-semantic)
   -------------------------------------------------------------------------- */

:root {
  /* --- Display serif -----------------------------------------------------
     Ivy Presto is a commercial licence. DESIGN.md names Playfair Display as
     the approved substitute; it is loaded from Google Fonts and given a real
     serif fallback stack (the one in variables.css falls back to a sans,
     which would collapse the serif/sans collision the system depends on).  */
  --font-ivy-presto: 'Playfair Display', 'Ivy Presto', Georgia, 'Times New Roman', Times, serif;

  /* --- Brand gold scale, sampled from the Werewolf sigil ------------------ */
  --gold-deep: #6f5a2e;
  --gold-shadow: #8a6f38;
  --gold: #ae9357;
  --gold-bright: #d8bd7e;
  --gold-light: #fff0cc;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg: var(--surface-void);          /* #08080a page canvas               */
  --bg-card: var(--surface-card);     /* #040406 contained blocks          */
  --bg-panel: var(--surface-panel);   /* #121317 elevated panels           */
  --bg-float: var(--surface-floating);/* #1c1d22 wells, chips              */
  --bg-scrim: rgba(4, 4, 6, 0.86);

  /* --- Text -------------------------------------------------------------- */
  --fg: var(--color-bone);            /* body copy — never pure white      */
  --fg-strong: var(--color-paper-white);
  --fg-muted: var(--color-mist);
  --fg-subtle: var(--color-fog);

  /* The palette's Ash (#5e616e) reads at only 3.25:1 on the page canvas and
     Smoke (#464853) at 2.20:1 — below the 4.5:1 floor for body-sized text.
     The faintest *text* step is lifted to the value below (4.9:1); Ash and
     Smoke stay in the palette for the non-text roles they were designed for. */
  --fg-faint: #7c7f8d;
  --fg-placeholder: #7f8290;          /* 4.6:1 on the input fill           */

  /* --- Lines ------------------------------------------------------------- */
  --line: var(--color-graphite);      /* hairline — decorative structure   */
  --line-strong: var(--color-slate);  /* secondary border                  */
  /* Borders that *are* the boundary of an interactive control need 3:1
     (WCAG 1.4.11); the decorative hairlines above deliberately do not. */
  --line-control: #5f6270;
  --line-gold: rgba(174, 147, 87, 0.34);
  --line-gold-strong: rgba(216, 189, 126, 0.6);

  /* --- Accent ------------------------------------------------------------ */
  --accent: var(--color-copper);      /* #cc9166 editorial punctuation     */
  --accent-quiet: rgba(204, 145, 102, 0.14);
  --gilded: var(--gradient-gilded-gradient);
  --gilded-text: linear-gradient(96deg, #ae9357 0%, #f2dfae 38%, #d8bd7e 62%, #ae9357 100%);

  /* --- State ------------------------------------------------------------- */
  --focus: var(--gold-bright);
  --danger: #d97c6a;
  --positive: #86a68a;

  /* --- Fluid type scale --------------------------------------------------
     Lands on the DESIGN.md desktop values at >=1216px, degrades gracefully.
     The serif never falls below 28px, the sans never rises above 48px.      */
  --fs-display: clamp(2.75rem, 1.05rem + 7.1vw, 5.5rem);   /* 44 → 88 */
  --fs-h1: clamp(2.25rem, 1.0rem + 5.2vw, 4rem);           /* 36 → 64 */
  --fs-h2: clamp(2rem, 1.15rem + 3.6vw, 3.25rem);          /* 32 → 52 */
  --fs-h3: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);       /* 28 → 44 */
  --fs-h4: clamp(1.375rem, 1.16rem + 0.9vw, 1.75rem);      /* 22 → 28 */
  --fs-lead: clamp(1.0625rem, 1.0rem + 0.45vw, 1.25rem);   /* 17 → 20 */
  --fs-body: 1rem;                                          /* 16      */
  --fs-sm: 0.875rem;                                        /* 14      */
  --fs-xs: 0.8125rem;                                       /* 13      */

  /* --- Rhythm ------------------------------------------------------------ */
  --gap-section: clamp(5.5rem, 2rem + 11vw, 10rem);         /* 88 → 160 */
  --gap-band: clamp(3rem, 1.5rem + 5vw, 5.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --shell: var(--page-max-width);
  --shell-narrow: 760px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 380ms;

  /* --- Layering (z-index scale) ------------------------------------------ */
  --z-substrate: 0;
  --z-content: 10;
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 100;
  --z-toast: 1000;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the fixed nav when jumping to an anchor. */
  scroll-padding-top: 6.5rem;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-inter);
  font-size: var(--fs-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  letter-spacing: -0.007em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

p,
li { text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

a { color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background: rgba(174, 147, 87, 0.32);
  color: var(--fg-strong);
}

/* --------------------------------------------------------------------------
   3. Typography — the serif/sans collision system
   Serif (Playfair Display, standing in for Ivy Presto) >= 28px only.
   Sans (Inter) for everything below 28px. Never cross the boundary.
   -------------------------------------------------------------------------- */

.display,
.h1, .h2, .h3, .h4,
h1, h2, h3 {
  font-family: var(--font-ivy-presto);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  color: var(--fg-strong);
}

.display {
  font-size: var(--fs-display);
  line-height: 1.0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.13;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: 1.22;
}

.h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
}

/* Sub-28px headings drop back to the sans — boundary enforced. */
h4, h5, h6 {
  font-family: var(--font-inter);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.018em;
  color: var(--fg-strong);
  line-height: 1.35;
}

h4 { font-size: 1.25rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: var(--fs-sm); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.018em;
  color: var(--fg-subtle);
  font-weight: var(--font-weight-light);
}

.prose {
  max-width: 68ch;
}

.prose p + p { margin-top: 1.1em; }

.muted { color: var(--fg-subtle); }
.faint { color: var(--fg-faint); }

.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

/* Tabular figures for all data surfaces (UX rule: number-tabular). */
.tnum,
td,
.metric__value,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Gilded text — reserved for the wordmark and single hero words ------- */
.gilded {
  background: var(--gilded-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for any engine that ignores background-clip. */
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gilded {
    color: var(--gold-bright);
    -webkit-text-fill-color: currentColor;
  }
}

/* --- Eyebrow: the dossier index label ----------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-inter);
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.eyebrow--center { justify-content: center; }

.eyebrow__index {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  opacity: 0.85;
}

.eyebrow__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  background: linear-gradient(90deg, var(--line-gold), transparent);
}

/* --------------------------------------------------------------------------
   4. Accessibility utilities
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: var(--z-toast);
  padding: 0.75rem 1.5rem;
  background: var(--gold-bright);
  color: #08080a;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: translate var(--dur) var(--ease-out);
}

.skip-link:focus-visible { translate: -50% 0; }

/* Focus ring — visible, 2px, offset. Never removed. (UX rule: focus-states) */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Only suppress the ring for pointer users who already get a hover state. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   5. Reduced motion
   Honour the OS preference everywhere, including canvas-driven scenes
   (JS reads this via matchMedia). (UX rule: reduced-motion)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything staged for a scroll reveal must simply be present. */
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    clip-path: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. Print — a principal may well print the engagement page.
   -------------------------------------------------------------------------- */

@media print {
  .site-nav,
  .site-footer,
  .substrate,
  .ledger-spine,
  canvas { display: none !important; }

  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}