/* One type system. Body and UI sizes are one scale times --tm, and --tm has a
   single step below 900px so body copy lands in the readable range instead of
   being scaled down with an artboard. The handful of display roles that would
   grow absurd on a phone (hero, page title, statement, CTA, tabs) are fluid
   between a phone floor and their desktop size; each lands on its current
   desktop value at 1440, so the wide layout is unchanged. */
:root {
  --tm: 1;   /* one step for body and UI type; the only size knob */
  --ts: 1;   /* the reader's text-size choice (A / A+ / A++), set by canvas.js */
}

/* type.css — typography only. No positioning, no colour literals. */

.nav-link {
  font-size: calc(clamp(14px, 1.05vw, 15px) * var(--ts)); font-weight: 600; line-height: 1;
  color: var(--c-header-ink-dim); text-decoration: none; white-space: nowrap;
}
.nav-link:hover      { color: var(--c-header-ink); }
.nav-link.is-active  { color: var(--c-header-ink); font-weight: 700; }

.cta {
  font-size: calc(clamp(15px, 1.3vw, 18.75px) * var(--ts)); font-weight: 700; line-height: 1;
  color: var(--c-cta-ink); text-decoration: none; white-space: nowrap;
}

.ts-trigger,
.ts-panel button {
  font-family: var(--f-sans);
  font-size: calc(13px * var(--tm) * var(--ts)); font-weight: 700; line-height: 1;
}
.ts-trigger { font-size: calc(clamp(14px, 1.13vw, 16.25px) * var(--ts)); }

/* Display type is the one role that cannot be a fixed size in canvas units:
   72px is 5% of the 1440 canvas but 19% of the 430 one, where it wrapped to
   four lines and swallowed the Hyena trigger. Fluid between a floor and the
   desktop size, still driven by the one multiplier. */
.hero-title {
  font-size: calc(clamp(32px, 5vw, 72px) * var(--ts)); font-weight: 700; line-height: 1.05;
  letter-spacing: -.03em; margin: 0; text-align: center;
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.page-title {
  font-size: calc(clamp(30px, 3.2vw, 46px) * var(--ts)); font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em; margin: 0; color: var(--c-ink);
}



/* --- footer type --- */
.entity-copy,
.entity-compliance {
  font-size: calc(10px * var(--tm) * var(--ts)); line-height: 1.6; margin: 0;
  color: var(--c-slate-dark); white-space: nowrap;
}
.entity-compliance { text-align: right; }
.entity-badges li {
  font-size: calc(9.5px * var(--tm) * var(--ts)); font-weight: 600; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.footer-label {
  font-family: var(--f-mono);
  font-size: calc(11px * var(--tm) * var(--ts)); font-weight: 600; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-slate-dark); margin: 0;
}
.footer-contact { font-size: calc(14px * var(--tm) * var(--ts)); line-height: 1; }

/* --- entity card type --- */
.entity-heading {
  font-family: var(--f-mono);
  font-size: calc(9px * var(--tm) * var(--ts)); font-weight: 600; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-slate-dark); margin: 0;
}
.entity-facts dt { font-size: calc(9px * var(--tm) * var(--ts)); line-height: 1.3; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-slate-dark); }
.entity-facts dd {
  font-family: var(--f-mono);
  font-size: calc(11px * var(--tm) * var(--ts)); line-height: 1.3; color: var(--c-ink);
}
.entity-contact {
  font-size: calc(11px * var(--tm) * var(--ts)); line-height: 1.3; font-family: var(--f-mono);
}

/* --- hyena helper type --- */
.hyena-trigger {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--tm) * var(--ts)); font-weight: 600; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
.hyena-heading {
  font-size: calc(11px * var(--tm) * var(--ts)); font-weight: 700; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-ink); opacity: .5; margin: 0 0 12px;
}
/* Base first, then the gap. The previous order had margin:0 on a
   higher-specificity selector, which silently cancelled the p + p spacing. */
.hyena-panel p {
  font-size: calc(12px * var(--tm) * var(--ts)); line-height: 1.65; margin: 0; color: var(--c-muted);
}
.hyena-panel p + p { margin-top: 12px; }
.hyena-panel .hyena-close {
  margin-top: 16px;
  font-weight: 600; color: var(--c-ink); opacity: .85;
}

/* --- content container copy --- */
/* Statement setting, not body copy: larger, heavier, full-strength ink and
   tighter tracking so it lands as the page's claim. */
/* Display type, same reasoning as .hero-title: 31px is 2.2% of the desktop
   canvas but 8% of the phone one, where it rendered at 35.6px and overflowed
   its panel. */
.reveal-text {
  font-size: calc(clamp(19px, 2.15vw, 31px) * var(--ts));
  font-weight: 700; line-height: 1.4;
  letter-spacing: -.015em;
  margin: 0; max-width: 1080px; text-align: center;
  color: var(--c-ink);
}

/* Supporting line: the claim above states what we do, this states why it is
   credible. Deliberately unanimated so it is readable while the statement
   above is still assembling. */
.statement-support {
  font-size: calc(clamp(15px, 1.11vw, 16px) * var(--ts)); font-weight: 400; line-height: 1.65;
  margin: 20px 0 0; max-width: 1000px; text-align: center;
  color: var(--c-muted);
}

/* --- section scaffold heading --- */
/* The page title outranks everything on it. Where a section heading carries the
   h1 (Leadership), it takes the display size. */
h1.section-heading { font-size: calc(30px * var(--tm) * var(--ts)); line-height: 1.15; }

.section-heading {
  font-size: calc(20px * var(--tm) * var(--ts)); font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; margin: 0; color: var(--c-ink);
}

/* --- founder card type --- */
.founder-name  { font-size: calc(20px * var(--tm) * var(--ts)); font-weight: 700; line-height: 1.15; margin: 0; color: var(--c-header-ink); }
.founder-role  { font-size: calc(11.5px * var(--tm) * var(--ts)); font-weight: 600; line-height: 1.2; margin: 3px 0 0;
                 letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-blue); }
.founder-loc   { font-size: calc(11.5px * var(--tm) * var(--ts)); line-height: 1.2; margin: 2px 0 0; color: var(--c-slate-dark); }
.founder-bio   { font-size: calc(13px * var(--tm) * var(--ts)); line-height: 1.6; margin: 16px 0 0; color: var(--c-muted); }
.founder-exp-label {
  font-family: var(--f-mono);
  font-size: calc(9px * var(--tm) * var(--ts)); font-weight: 600; line-height: 1; margin: 0;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-slate-dark);
}
.founder-expertise li { font-size: calc(11.5px * var(--tm) * var(--ts)); line-height: 1.55; color: var(--c-muted); }
.founder-edu li { font-size: calc(11.5px * var(--tm) * var(--ts)); line-height: 1.5; color: var(--c-muted); }
.founder-edu strong { color: var(--c-ink); font-weight: 600; }
.founder-degree { color: var(--c-slate-dark); }
.founder-link { font-size: calc(11.5px * var(--tm) * var(--ts)); font-weight: 600; }

/* --- founding principle sub-section headings --- */
.principle-heading {
  font-size: calc(17px * var(--tm) * var(--ts)); font-weight: 700; line-height: 1.3;
  letter-spacing: -.005em; margin: 0; color: var(--c-header-ink);
}

.principle-body p {
  font-size: calc(13px * var(--tm) * var(--ts)); line-height: 1.7; margin: 10px 0 0;
  color: var(--c-muted);
}

/* ==========================================================================
   BELOW 900px. Not a second type system: one step of the same multiplier, so
   every ratio between sizes is identical to desktop. Body copy lands at 16.9px
   rather than the 13px that a scaled artboard produced.
   ========================================================================== */
@media (max-width: 899px) {
  :root { --tm: 1.3; }
}