/* ──────────────────────────────────────────────────────────────
   EC Brand Style Guide — main stylesheet (skeleton; B1)
   Colors, type scale, and spacing are NOT authored here.
   They reference CSS custom properties published by
   assets/tokens/css/tokens.css (generated in Ticket B2).
   Fallbacks below are minimal, neutral, and intentionally
   non-brand — they exist only so the skeleton renders before
   tokens land. They MUST NOT be treated as brand values.
   ────────────────────────────────────────────────────────────── */

/* ── Font faces ───────────────────────────────────────────────── */
/* Four approved type families, loaded from local TTFs in
   `assets/fonts/ttf/`. Family/weight/style mapping mirrors the
   docx (`Brand Style Guide.docx`) source of truth:
     Delight       — display only (Title)
     Inter Tight   — headings (H1/H2)
     Inter         — body
     IBM Plex Mono — code / numerics
   `font-display: swap` keeps text rendered during the brief load. */

@font-face {
  font-family: "Delight";
  src: url("../assets/fonts/ttf/Delight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("../assets/fonts/ttf/Delight-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("../assets/fonts/ttf/Delight-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/ttf/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/ttf/Inter-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/ttf/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/ttf/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/ttf/InterTight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/ttf/InterTight-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/ttf/InterTight-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/ttf/InterTight-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ttf/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ttf/IBMPlexMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ttf/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback font-family stacks for the skeleton. These are referenced
   wherever brand text appears and will be overridden by the generated
   tokens layer (B2). System fallbacks remain as the third tier so the
   page stays legible if a TTF fails to load. */
:root {
  --ec-font-display: "Delight", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ec-font-heading: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ec-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ec-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-color-scheme="light"] {
  --ec-color-bg: #FFFFFF;
  --ec-color-surface: #FAFBFC;
  /* Alternating top-level section stripe (`data-theme="interface-light"`).
     Maps to the documented Interface Light Functional Theme background
     (EC Neutral 050) and mirrors the rhythm used on the public site (www)
     where every other top-level section carries the same attribute. The
     value matches `--ec-color-surface` here because both originate from
     EC Neutral 050; they are kept as separate semantic tokens so card
     surfaces and section stripes can diverge if either palette role
     evolves in a future release. */
  --ec-color-bg-muted: #FAFBFC;
  --ec-color-text: #323E48;
  --ec-color-muted: #5B6670;
  --ec-color-heading: #002E6D;
  --ec-color-rule: #E8ECEE;
  --ec-color-focus: #007167;
  --ec-color-accent: #00C4B3;
  --ec-color-link: #5B6670;
  --ec-color-link-hover: #1D252C;
  --ec-color-selected: #E8ECEE;
  /* Tinted surface for coda/note callouts (blockquote, section-coda,
     and the production-rule / type-reference `--note` variants).
     A faint mint wash that complements the EC Teal accent border. */
  --ec-color-coda-bg: #F4FFFD;
  /* WCAG-tier badge inks (`[data-a11y-level]`). Sized against the badge's
     own rendered context (small bold text + 1px border on `--ec-color-bg`
     = `#FFFFFF` / `--ec-color-surface` = `#FAFBFC`); the badge text is
     ~0.7rem and so does not qualify for WCAG large-text relaxations.
     All three values stay inside the documented EC palette.
       AAA badge  → EC Green 800   #00524C : 9.09 : 1 (AAA normal)
       AA  badge  → EC Green 700   #007167 : 5.90 : 1 (AA  normal)
       Large-only → EC Neutral 500 #5B6670 : 5.87 : 1 (AA  normal)
     EC Tint 300 “Aztec Gold” #B79C53 was used here in v2.5.x / v2.6.0
     but measures only 2.66 : 1 on `#FFFFFF`, which fails both 1.4.3
     (text) and 1.4.11 (non-text) on the badge itself – so the badge
     advertised a WCAG tier it could not satisfy. Re-mapping the
     light-mode Large-only ink to EC Neutral 500 keeps the visual tier-
     ladder (depth: AAA > AA > Large-only, with Large-only desaturated to
     read as the most conservative tier) while making the badge legible.
     Dark-mode keeps Aztec Gold because it measures 5.83 : 1 on `#1D252C`. */
  --ec-color-a11y-aaa: #00524C;
  --ec-color-a11y-aa: #007167;
  --ec-color-a11y-large: #5B6670;
  /* Semantic state inks for editorial “Do / Don’t”, success / danger
     callouts, and any future affordance that needs a binary semantic
     pairing. Mapped to documented palette tokens (no off-palette values).
       success → EC Green 700  #007167  : 5.90 : 1 on EC Neutral 100 (AA normal)
       danger  → EC Accent 200 #C93C86  : 4.69 : 1 on EC Neutral 100 (AA normal)
                                          NOTE: this is a magenta-pink, used
                                          here as the *only* AA-clean warm
                                          chromatic currently in the palette.
                                          EC Accent 300 “Bittersweet” #FF6B5C
                                          was previously documented as
                                          “Error / Destructive” but measures
                                          2.80 : 1 on `#FFFFFF` and therefore
                                          fails AA-large at any text size on
                                          light surfaces – its role narrative
                                          in `scripts/main.js` has been
                                          corrected to “Dark-surface danger
                                          ink; decorative on light surfaces”.
                                          Whether the EC system should add a
                                          dedicated light-surface danger /
                                          destructive ink is an open brand-
                                          governance question tracked in
                                          `BACKLOG.md` › “Extended palette
                                          gaps” › Role A as an unranked set
                                          of options. No specific candidate
                                          color, hue family, or new token
                                          has been approved. Do not promote
                                          a candidate value from history,
                                          source comments, or prior reviews
                                          without explicit Brand Owner
                                          approval recorded in the release
                                          branch that lands it. */
  --ec-color-success: #007167;
  --ec-color-danger:  #C93C86;
  /* No `--ec-color-info` alias exists by design. Whether the EC system
     should carry a dedicated AA-normal-text Info ink on light surfaces
     is an open brand-governance question tracked in `BACKLOG.md` ›
     “Extended palette gaps” › Role C as an unranked set of options.
     No specific candidate color, hue family, or new token has been
     approved. Do not promote a candidate value from history, source
     comments, or prior reviews without explicit Brand Owner approval
     recorded in the release branch that lands it. */
}

/* Dark counterpart for the document chrome. Maps to the documented
   "Interface Dark" Functional Theme (background EC Neutral 900, body
   text EC Neutral 100, EC Teal 450/500 link pair). Only the chrome
   tokens flip — the in-page theme preview cards (`[data-theme-preview]`)
   own their own `--theme-*` variables and remain unaffected. The EC mark
   ink is also lifted to white so the inline SVG stays legible. */
:root[data-color-scheme="dark"] {
  --ec-color-bg: #1D252C;
  --ec-color-surface: #121820;
  /* Alternating top-level section stripe (`data-theme="interface-light"`)
     mapped into the dark palette. Lifted one tier from `--ec-color-bg`
     (EC Neutral 900 → EC Neutral 800 *Gunmetal Gray*) so the stripe
     reads as a subtle elevation rather than an inverted surface. Shares
     a value with `--ec-color-rule` and `--ec-color-selected` so all
     three lifted-surface roles stay coherent in dark mode. */
  --ec-color-bg-muted: #2E353A;
  --ec-color-text: #FFFFFF;
  --ec-color-muted: #C8CCD0;
  --ec-color-heading: #FFFFFF;
  --ec-color-rule: #2E353A;
  --ec-color-focus: #12B4A6;
  --ec-color-accent: #00C4B3;
  --ec-color-link: #12B4A6;
  --ec-color-link-hover: #00C4B3;
  --ec-color-selected: #2E353A;
  /* Deep teal-tinted surface for coda/note callouts; preserves the
     family relationship to the EC Teal accent border while meeting
     dark-mode contrast against white body text. */
  --ec-color-coda-bg: #0F2520;
  --ec-mark-ink: #FFFFFF;
  /* WCAG-tier badge inks lifted to lighter EC palette tokens so the
     badges remain legible on the dark chrome (`#1D252C`). All three
     stay inside the documented EC palette (no off-palette shades):
       AAA badge  → EC Teal 500              #00C4B3 : 7.05 : 1 (AAA normal)
       AA  badge  → EC Teal 450              #12B4A6 : 5.99 : 1 (AA  normal)
       Large-only → EC Tint 300 “Aztec Gold” #B79C53 : 5.83 : 1 (AA  normal) */
  --ec-color-a11y-aaa: #00C4B3;
  --ec-color-a11y-aa: #12B4A6;
  --ec-color-a11y-large: #B79C53;
  /* Semantic state inks (dark) lifted to lighter palette tokens for
     legibility on the dark chrome (`#1D252C`) and on the dark stripe
     (`--ec-color-bg-muted` = EC Neutral 800 *Gunmetal Gray* `#2E353A`).
     Both pairings stay inside the documented EC palette (no off-palette
     shades).
       success → EC Teal 450   #12B4A6  : same lift used by --ec-color-a11y-aa
                                          5.99 : 1 on `#1D252C` (AA normal)
       danger  → EC Accent 300 #FF6B5C  : the in-palette warm chromatic,
                                          lifted by the dark surface to
                                          4.45 : 1 on `#2E353A` (AA large text;
                                          falls 0.05 short of AA normal text
                                          4.5 — the in-palette canonicalization
                                          from off-palette `#2A323A` to EC
                                          Neutral 800 traded a tiny ratio loss
                                          for token-system cleanliness. Role is
                                          short status/error text, not long
                                          body copy, so AA large applies).
                                          Documented role is “dark-surface
                                          danger ink”; do not re-use it as a
                                          foreground ink on any light surface. */
  --ec-color-success: #12B4A6;
  --ec-color-danger:  #FF6B5C;
  /* No `--ec-color-info` alias exists by design (see the matching note
     in the light-mode block above). Role C in `BACKLOG.md` records the
     dark-mode complication explicitly: no in-palette token simultaneously
     passes AA normal text on both schemes, so the deferral applies to
     both schemes until at least one rendered Info consumer exists. */
}

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

html {
  /* `overflow-x: clip` (not `hidden`) prevents horizontal overflow without
     turning <html> into a scroll container. `hidden` silently breaks
     `position: sticky` on descendants (the sticky element's nearest
     scrolling ancestor becomes <html> and stops sticking to the viewport).
     `clip` is the modern equivalent that keeps sticky working. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Offset anchored jumps so the sticky header doesn't cover headings. */
  /* Offset anchored jumps so the sticky header doesn't cover headings.
     6 rem matches the 4.75 rem sticky header + ~1 rem breathing room
     (kept in sync with `.site-header` in this file and the same
     header height token in `../www`). */
  scroll-padding-top: var(--ec-header-offset, 6rem);
}

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

body {
  margin: 0;
  /* See <html> note above: `clip` (not `hidden`) preserves sticky behavior
     on the site header while still preventing horizontal page overflow. */
  overflow-x: clip;
  font-family: var(--ec-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  line-height: var(--ec-line-body, 1.6);
  color: var(--ec-color-text, #111);
  background: var(--ec-color-bg, #fff);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Skip link ────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #111);
  border: 2px solid currentColor;
  transform: translateY(-150%);
  transition: transform 0.15s ease-out;
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

/* ── Focus ────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ec-color-focus, #005fcc);
  outline-offset: 2px;
}

/* ── Header ───────────────────────────────────────────────────── */
/* Wordmark only. The full Logo + Tagline lockup (Appendix C.6)
   requires the tagline to render ≥ 14 px on screen, which forces
   the wordmark to ≥ ~157 px tall — too heavy for a compact sticky
   web header. CHANGELOG v1.8.1 explicitly directs sub-threshold
   contexts to fall back to a logo-only variant. The icon already
   carries brand presence in the footer.

   Sizing mirrors the public site (https://eliezerchavez.com/,
   `../www/styles/main.css` → `.brand-link img { width: 6.75rem;
   max-width: 46vw; }` inside a 4.75 rem min-height header). Keeping
   the same width/height token names and values means the brand
   lockup reads at identical visual weight across both surfaces. */
.site-header {
  --ec-lockup-logo-w: 6.75rem;
  --ec-lockup-logo-max-w: 46vw;
  --ec-site-header-min-h: 4.75rem;
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--ec-site-header-min-h);
  background: var(--ec-color-bg, #fff);
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
}

.site-header__inner {
  max-width: 80rem;
  min-height: var(--ec-site-header-min-h);
  margin: 0 auto;
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.site-header__logo {
  display: block;
  width: var(--ec-lockup-logo-w);
  max-width: var(--ec-lockup-logo-max-w);
  height: auto;
}

/* Header utilities slot. Houses the light/dark theme toggle so the
   control is reachable from the top of the page. The identical button
   also sits in `.site-footer__actions`; both mirror the public site
   (https://eliezerchavez.com/) which exposes the toggle in both
   header and footer. */
.site-header__utilities {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Theme toggle (light/dark) ────────────────────────────────── */
/* Compact icon button living in both the header utilities slot and
   the footer actions row. Visual weight matches the inline SVG marks
   on the page — transparent background, currentColor fill on Font
   Awesome moon/sun glyphs (same geometry as the public site's
   `#moon` / `#sun` sprite symbols), subtle hover surface. The sun/moon
   swap is driven entirely by [aria-pressed] on the button so the icon
   reliably mirrors the persisted state (no JS class shuffling needed
   beyond toggling the attribute). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ec-color-text, #323E48);
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    border-color 0.15s ease-out,
    color 0.15s ease-out;
}

.theme-toggle:hover {
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-link-hover, #1D252C);
  border-color: var(--ec-color-muted, #5B6670);
}

.theme-toggle .theme-toggle__icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  stroke: none;
}

/* Show the moon in light mode, the sun in dark mode. */
.theme-toggle .theme-toggle__icon--sun  { display: none; }
.theme-toggle .theme-toggle__icon--moon { display: block; }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--sun  { display: block; }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}

/* ── Page hero ────────────────────────────────────────────────── */
/* Single H1 for the document. Full-width band that sits between the
   sticky header and the two-column layout grid.

   Typography mirrors the docx source of truth:
    Title     — Delight ExtraBold, 28pt, right-aligned, EC Navy 900 #002E6D,
                 tight tracking (docx `w:spacing val="-10"` ≈ -0.025em).
     Subtitle  — Inter Tight SemiBold, 14pt, right-aligned.
   See `Brand Style Guide.docx` → styles.xml (Title / Subtitle). */
.page-hero {
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
  background: var(--ec-color-surface, #fafafa);
}

.page-hero__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: right;
}

.page-hero__title {
  margin: 0 0 0.25em;
  font-family: var(--ec-font-display);
  font-weight: 800;
  /* docx: 28pt → fluid web equivalent. */
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ec-color-heading, #002E6D);
}

.page-hero__subtitle {
  margin: 0;
  font-family: var(--ec-font-heading);
  font-weight: 600;
  font-size: 0.875rem; /* 14px — docx Subtitle floor */
  letter-spacing: 0.02em;
  color: var(--ec-color-muted, #555);
}

.page-hero__sep {
  margin: 0 0.5em;
  color: var(--ec-color-rule, #c8c8c8);
}

@media (max-width: 48rem) {
  .page-hero__inner {
    padding: 2rem 1rem;
  }
}

/* ── Brand mark (inline SVG) ──────────────────────────────────── */
/* Single inline SVG per mark (logo + icon). Fills bind to theme
   tokens so all six Functional Themes (3 Light + 3 Dark) can recolor
   the mark without swapping files. Fallback hex values in the SVG
   `fill` attributes mirror the Color Positive variant, so the mark
   renders correctly before tokens are applied.

     --ec-mark-ink            text glyphs (e-bars, c, ™)
     --ec-mark-accent         primary accent (cursor base, e bottom bar)
     --ec-mark-accent-shade   mid accent   (cursor top)
     --ec-mark-accent-deep    deep accent  (cursor wedge / shadow)

   For 1C variants, themes collapse all four tokens to a single ink.

   Sizing is owned by the instance class (`.site-header__logo`,
   `.site-footer__icon`); `.ec-mark` only sets display + transitions.
   Do NOT add `height` or `width` here — it would override those rules
   via cascade order and collapse the SVG. */
.ec-mark {
  display: block;
}

.ec-mark path {
  /* Smooth theme swaps; respected only when motion is allowed. */
  transition: fill 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ec-mark path {
    transition: none;
  }
}

/* ── Layout ───────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: minmax(14rem, 16rem) 1fr;
  gap: 2rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem;
}

@media (max-width: 48rem) {
  .layout {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

/* ── Sidebar nav ──────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: var(--ec-nav-top, var(--ec-header-offset, 6rem));
  left: max(2rem, calc((100vw - 80rem) / 2 + 2rem));
  width: min(16rem, calc(100vw - 4rem));
  z-index: 40;
  align-self: start;
  max-height: calc(100vh - var(--ec-nav-top, var(--ec-header-offset, 6rem)) - 1rem);
  overflow-y: auto;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-nav__list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--ec-color-text, #111);
  border-radius: 0 0.25rem 0.25rem 0;
}

.site-nav__list a:hover {
  background: var(--ec-color-surface, #f5f5f5);
}

.site-nav__list a[aria-current="true"] {
  border-left-color: currentColor;
  font-weight: 600;
  background: var(--ec-color-surface, #f5f5f5);
}

/* ── Main / sections ──────────────────────────────────────────── */
.site-main {
  grid-column: 2;
  min-width: 0;
}

@media (max-width: 48rem) {
  .site-nav {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  .site-main {
    grid-column: auto;
  }
}

.site-main > section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
}

.site-main > section:last-child {
  border-bottom: 0;
}

/* Alternating top-level section stripes.

   Top-level `<section>` elements tagged `data-theme="interface-light"`
   paint an edge-to-edge muted neutral behind the section, mirroring
   the section rhythm used on the public site (www) via the same
   attribute. The `.layout` grid container constrains the section's
   own box to the main content column (so the sidebar stays anchored
   on the left), but the bg paint is extended to viewport edges via
   a clipped box-shadow:

     - `box-shadow: 0 0 0 100vmax ...` paints the same color in a
       spread that reaches past the viewport on every side.
     - `clip-path: inset(0 -100vmax)` clips the spread back to the
       section\u2019s vertical bounds only, so the paint stays a
       horizontal stripe and never bleeds into neighboring sections.
     - `<html>` and `<body>` carry `overflow-x: clip`, so the
       horizontal overflow never produces a scrollbar.

   This pattern preserves the section\u2019s normal flow, leaves
   `position: sticky` descendants working, and requires no
   negative-margin breakout. */
.site-main > section[data-theme="interface-light"] {
  background: var(--ec-color-bg-muted, #FAFBFC);
  box-shadow: 0 0 0 100vmax var(--ec-color-bg-muted, #FAFBFC);
  clip-path: inset(0 -100vmax);
}

.site-main a:not(.theme-demo__button) {
  color: var(--ec-color-link, #5B6670);
  text-decoration-color: currentColor;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.site-main a:not(.theme-demo__button):hover,
.site-main a:not(.theme-demo__button):focus-visible {
  color: var(--ec-color-link-hover, #1D252C);
}

.site-main h2 {
  margin: 0 0 1rem;
  font-family: var(--ec-font-heading);
  /* docx Heading 1: Inter Tight Bold, 20pt, right-aligned, EC Navy 900.
     Section H2s here correspond to docx Heading 1 ("Brand Philosophy",
     "Palettes", "Typography System", …). */
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  line-height: 1.2;
  text-align: right;
  color: var(--ec-color-heading, #002E6D);
}

.content-pending {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-style: italic;
  color: var(--ec-color-muted, #555);
  background: var(--ec-color-surface, #f5f5f5);
  border: 1px dashed var(--ec-color-rule, #c8c8c8);
  border-radius: 0.25rem;
}

.palette-overview {
  margin-bottom: 0.75rem;
}

.palette-standards {
  display: grid;
  gap: 0;
  margin: 1rem 0 1.25rem;
  border-top: 1px solid var(--ec-color-rule, #E8ECEE);
}

.palette-standard {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.28fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
}

.palette-standard > dt {
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.site-main .palette-standard > dd {
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
  text-justify: auto;
  hyphens: manual;
}

.palette-body-use {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.palette-body-use > div {
  min-width: 0;
  padding-left: 0.65rem;
  border-left: 0.18rem solid var(--ec-color-rule, #E8ECEE);
}

.palette-body-use dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-main .palette-body-use dd {
  margin: 0.22rem 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: left;
  text-justify: auto;
  hyphens: manual;
}

@media (max-width: 760px) {
  .palette-standard,
  .palette-body-use {
    grid-template-columns: 1fr;
  }

  .palette-standard {
    gap: 0.45rem;
    padding: 0.9rem 0;
  }
}

.palette-panel-intro {
  margin: 0;
  padding: 0 0 0.25rem;
  font-size: 0.95rem;
}

.palette-panel-notes {
  margin: 0 0 0.5rem;
  padding: 0 1.85rem 0.5rem;
}

.palette-panel-notes li {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.palette-more-info {
  margin: 0.625rem 0 0;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
}

.palettes-tabs__panel > .palette-more-info:last-child {
  margin-bottom: 0;
}

.palette-more-info--global {
  margin: 0 0 1.25rem;
}

.palette-more-info summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.palette-more-info summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--ec-font-mono, monospace);
  font-size: 1rem;
  line-height: 1;
}

.palette-more-info[open] summary {
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
}

.palette-more-info[open] summary::after {
  content: "-";
}

.palette-more-info p,
.palette-more-info ul {
  margin: 0;
  padding: 0.7rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.palette-more-info p + p,
.palette-more-info p + ul,
.palette-more-info ul + p,
.palette-more-info ul + ul {
  padding-top: 0;
}

.palette-more-info ul {
  padding-left: 1.85rem;
}

.palette-more-info li + li {
  margin-top: 0.3rem;
}

.palette-more-info .palette-standards {
  margin: 0;
  padding: 0 0.75rem;
  border-top: 0;
}

.palette-more-info .palette-standard:last-child {
  border-bottom: 0;
}

.palette-more-info .typography-table-wrap {
  margin: 0;
  padding: 0 0.75rem 0.7rem;
}

.palette-more-info .typography-table {
  min-width: 0;
  border-top-color: var(--ec-color-rule, #E8ECEE);
  font-size: 0.875rem;
}

.palette-more-info .typography-table--mapping {
  border-top: 0;
}

.typography-table--mapping tbody th {
  width: 6rem;
  padding-left: 0.85rem;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--ec-color-surface, #FAFBFC);
  border-left: 3px solid var(--ec-color-heading, #002E6D);
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.typography-table--mapping td {
  vertical-align: middle;
  padding: 0.45rem 0.6rem;
}

.theme-construction__values--inline {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: 0.35rem;
}

.theme-construction__values--inline > div {
  flex: 1 1 7.5rem;
}

/* ── Palettes tabset ─────────────────────────────────────────── */
.palettes-tabs {
  --tabs-panel-padding: 0.875rem;
  margin-top: 1rem;
}

.palettes-tabs__list {
  display: flex;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.palettes-tabs__list [role="tab"] {
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #111);
  font-family: var(--ec-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.palettes-tabs__list [role="tab"][aria-selected="true"] {
  background: var(--ec-color-surface, #f5f5f5);
  border-color: var(--ec-color-text, #111);
}

.palettes-tabs__panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--tabs-panel-padding);
  overflow: hidden;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.5rem;
  background: var(--ec-color-bg, #fff);
}

.palette-status {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ec-color-muted, #555);
  background: var(--ec-color-surface, #f8f8f8);
}

.palette-status[data-level="warn"] {
  border-left: 3px solid var(--ec-color-danger, #C93C86);
}

.palette-status[data-level="info"] {
  border-left: 3px solid var(--ec-color-rule, #c8c8c8);
}

.palette-table-wrap {
  min-height: 16rem;
  max-height: 24rem;
  overflow: auto;
  padding: 0.5rem;
}

.palette-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-family: var(--ec-font-body);
  font-size: 0.9375rem;
}

.palette-table th:nth-child(1),
.palette-table td:nth-child(1) {
  width: 3.25rem;
  min-width: 3.25rem;
}

.color-workbench {
  --palette-card-width: 20rem;
  --color-row-height: 3.25rem;
  padding: 0.875rem 0;
}

.palette-scroll-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: layout paint;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.65rem;
  scroll-snap-type: x proximity;
}

.palette-color-card-grid {
  display: grid;
  width: max-content;
  grid-auto-columns: var(--palette-card-width);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 0.85rem;
}

.color-workbench[data-has-overflow="true"] .palette-color-card-grid {
  padding-right: 2.25rem;
}

.palette-scroll-hint {
  margin: 0.45rem 0 0;
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-mono, monospace);
  font-size: 0.65rem;
  line-height: 1.35;
  text-align: right;
}

.palette-color-card {
  display: grid;
  grid-template-rows: 8rem auto;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.5rem;
  background: var(--ec-color-bg, #fff);
  scroll-snap-align: start;
}

.palette-color-card__sample {
  display: grid;
  gap: 0.35rem;
  height: 8rem;
  place-content: center;
  padding: 1.1rem;
  background: var(--palette-card-bg);
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--palette-card-fg);
  text-align: center;
}

.palette-color-card__token {
  display: block;
  font-family: var(--ec-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
}

.palette-color-card__name {
  display: block;
  font-family: var(--ec-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}

.palette-color-card__body {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.palette-color-card__usage {
  display: grid;
  align-content: start;
  gap: 0.2rem;
}

.palette-color-card__usage > span {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.palette-color-card__role-list,
.palette-color-card__role-item {
  margin: 0;
  color: var(--ec-color-text, #323E48);
  font-family: var(--ec-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.palette-color-card__role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.palette-color-card__role-item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.12rem 0.38rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.25rem;
  background: var(--ec-color-surface, #FAFBFC);
  overflow-wrap: anywhere;
}

.palette-color-card__values,
.palette-color-card__a11y {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.palette-color-card__values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.palette-color-card__values > div,
.palette-color-card__a11y > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.palette-color-card__values dt,
.palette-color-card__a11y dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.palette-color-card__values dd,
.palette-color-card__a11y dd {
  min-width: 0;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.palette-color-card__values dd {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.palette-color-card__values dd .palette-note {
  flex: 0 0 auto;
  margin-left: 0;
}

.palette-color-card__values .palette-value-copy {
  display: inline-flex;
  max-width: 100%;
  justify-content: flex-start;
}

.palette-value--empty {
  color: var(--ec-color-muted, #5B6670);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.palette-color-card__a11y {
  grid-template-columns: 1fr;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ec-color-rule, #E8ECEE);
}

.palette-color-card__a11y > div {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
}

.palette-color-card [data-a11y-level] {
  max-width: 100%;
  white-space: normal;
}

.palette-color-card__ratio {
  font-family: var(--ec-font-mono, monospace);
}

.color-matrix-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 0.85fr) minmax(0, 1.35fr);
  align-items: stretch;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.375rem;
  overflow: hidden;
}

.contrast-matrix {
  --palette-card-width: 20rem;
  display: grid;
  gap: 0.85rem;
  padding: 0.875rem 0 0;
}

.contrast-switch {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.2rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
}

.contrast-switch button {
  border: 0;
  border-radius: 0.25rem;
  padding: 0.38rem 0.65rem;
  background: transparent;
  color: var(--ec-color-text, #323E48);
  font-family: var(--ec-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.contrast-switch button[aria-pressed="true"] {
  background: var(--ec-color-bg, #FFFFFF);
  color: var(--ec-color-heading, #002E6D);
  box-shadow: 0 0 0 1px var(--ec-color-rule, #E8ECEE);
}

.contrast-panels {
  min-height: 21rem;
}

.contrast-group[hidden] {
  display: none;
}

.contrast-group {
  display: grid;
  gap: 0.75rem;
}

.contrast-group__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.contrast-group__header h3 {
  margin: 0;
  font-family: var(--ec-font-heading);
  font-size: 1rem;
  color: var(--ec-color-heading, #002E6D);
}

.contrast-group__header p {
  margin: 0;
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-mono, monospace);
  font-size: 0.78rem;
}

.contrast-scroll-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: layout paint;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.65rem;
  scroll-snap-type: x proximity;
}

.contrast-card-grid {
  display: grid;
  width: max-content;
  grid-auto-columns: var(--palette-card-width);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 0.85rem;
}

.contrast-card {
  display: grid;
  grid-template-rows: minmax(8rem, auto) auto;
  overflow: hidden;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.5rem;
  background: var(--ec-color-bg, #fff);
  scroll-snap-align: start;
}

.contrast-card__sample {
  display: grid;
  gap: 0.2rem;
  min-height: 8rem;
  place-content: center;
  padding: 1.1rem;
  background: var(--contrast-bg);
  color: var(--contrast-fg);
  text-align: center;
}

.contrast-card__glyph {
  display: block;
  font-family: var(--ec-font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.contrast-card__line {
  display: block;
  font-size: 0.85rem;
  line-height: 1.25;
}

.contrast-card__body {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
}

.contrast-card__body h4 {
  margin: 0;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.95rem;
  line-height: 1.25;
}

.contrast-card__body dl {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.contrast-card__body dl > div {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.contrast-card__body dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contrast-card__body dd {
  min-width: 0;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
}

.contrast-card__ratio {
  font-family: var(--ec-font-mono, monospace);
}

.color-matrix-wrap {
  width: 100%;
  max-height: calc((var(--color-row-height) * 5) + 6px);
  min-height: 0;
  border-right: 1px solid var(--ec-color-rule, #c8c8c8);
  overflow-y: auto;
  overflow-x: hidden;
}

.color-matrix {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #111);
}

.color-matrix td,
.color-matrix th {
  height: var(--color-row-height);
  padding: 0;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  vertical-align: stretch;
}

.color-matrix__swatch-cell {
  position: relative;
  width: clamp(3.25rem, 9vw, 5rem);
}

.color-matrix__token-cell {
  width: auto;
}

.color-matrix tr[data-active="true"] .color-token-button--label {
  background: transparent;
  color: var(--ec-color-heading, #002E6D);
  box-shadow: inset 0.25rem 0 0 var(--ec-color-heading, #002E6D);
}

.color-matrix tr[data-active="true"] td,
.color-matrix tr[data-active="true"] th {
  border-color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-selected, #E8ECEE);
}

.color-matrix tr[data-active="true"] .color-token-button--label small {
  color: var(--ec-color-text, #323E48);
}

.color-token-button {
  width: 100%;
  min-width: 0;
  min-height: var(--color-row-height);
  height: var(--color-row-height);
  border: 0;
  background: transparent;
  color: var(--ec-color-text, #111);
  text-align: left;
  cursor: pointer;
}

.color-token-button[aria-pressed="true"] {
  background: transparent;
}

.color-token-button--swatch {
  display: grid;
  position: absolute;
  inset: 0;
  place-items: center;
  min-height: 0;
  padding: 0;
}

.color-token-button--swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ec-color-heading, #002E6D);
}

.color-token-button--label {
  display: grid;
  align-content: center;
  gap: 0.15rem;
  padding: 0.38rem 0.6rem;
}

.color-token-button__swatch {
  display: inline-block;
  width: 100%;
  height: 100%;
  min-height: var(--color-row-height);
  border: 0;
  border-radius: 0;
}

.color-token-button strong,
.color-token-button small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.color-token-button strong {
  font-family: var(--ec-font-mono);
  font-size: 0.78rem;
  line-height: 1.25;
}

.color-token-button small {
  margin-top: 0.1rem;
  font-family: var(--ec-font-body);
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--ec-color-muted, #555);
}

.color-matrix-detail {
  min-width: 0;
}

.color-detail {
  min-width: 0;
  min-height: calc((var(--color-row-height) * 5) + 6px);
  height: 100%;
  overflow: hidden;
  border-top: 0.35rem solid var(--detail-accent);
  background: var(--ec-color-bg, #FFFFFF);
  color: var(--ec-color-text, #323E48);
}

.color-detail__body {
  min-width: 0;
  padding: 0.25rem 0.55rem 0.45rem;
}

.color-detail h3 {
  margin: 0;
  font-family: var(--ec-font-heading);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ec-color-heading, #002E6D);
  overflow-wrap: anywhere;
}

.color-identity,
.color-values,
.color-a11y {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.color-identity {
  grid-template-columns: repeat(2, minmax(6rem, 1fr));
  margin: 0.05rem 0 0.4rem;
}

.color-identity > div:nth-child(3) {
  grid-column: 1 / -1;
}

.color-values {
  grid-template-columns: repeat(2, minmax(6.75rem, 1fr));
  margin-bottom: 0.4rem;
}

.color-identity > div,
.color-values > div,
.color-a11y > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.32rem 0.38rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-text, #323E48);
}

.color-identity dt,
.color-values dt,
.color-a11y dt {
  font-family: var(--ec-font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-color-muted, #5B6670);
}

.color-identity dd,
.color-values dd,
.color-a11y dd {
  margin: 0;
  font-family: var(--ec-font-mono);
  font-size: 0.78rem;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.color-identity dd {
  font-size: 0.74rem;
}

.color-values dd .palette-note {
  margin-left: 0.35rem;
}

.color-a11y {
  grid-template-columns: minmax(4.25rem, 0.75fr) minmax(8.75rem, 1.6fr) minmax(4.25rem, 0.8fr);
}

.color-a11y > div:nth-child(2) dt,
.color-a11y > div:nth-child(2) dd,
[data-a11y-level] {
  white-space: nowrap;
}

[data-a11y-level] {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font-family: var(--ec-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}

[data-a11y-level="AAA"] {
  color: var(--ec-color-a11y-aaa, #00524C);
}

[data-a11y-level="AA"] {
  color: var(--ec-color-a11y-aa, #007167);
}

[data-a11y-level="Large only"] {
  color: var(--ec-color-a11y-large, #B79C53);
}

[data-medium-level] {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font-family: var(--ec-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

[data-medium-level="Print"] {
  color: var(--ec-accent-550, #FF934F);
}

[data-medium-level="Screen"] {
  color: var(--ec-accent-500, #3A8DFF);
}

.palette-medium-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

@media (max-width: 760px) {
  .color-workbench {
    padding: 0.5rem;
  }

  .color-matrix-layout {
    grid-template-columns: 1fr;
  }

  .color-matrix-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--ec-color-rule, #c8c8c8);
  }

  .color-matrix,
  .color-matrix tbody,
  .color-matrix tr,
  .color-matrix td,
  .color-matrix th {
    display: block;
    width: 100%;
  }

  .color-matrix tr {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .color-identity,
  .color-values,
  .color-a11y {
    grid-template-columns: 1fr;
  }
}

.palette-table th:nth-child(2),
.palette-table td:nth-child(2) {
  width: 9.5rem;
  min-width: 9.5rem;
}

.palette-table th:nth-child(3),
.palette-table td:nth-child(3) {
  width: 11rem;
  min-width: 11rem;
}

.palette-table th:nth-child(4),
.palette-table td:nth-child(4) {
  min-width: 18rem;
}

.palette-table th,
.palette-table td {
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
  padding: 0.5rem 0.625rem;
  vertical-align: top;
  text-align: left;
}

.palette-table th:first-child,
.palette-table td:first-child {
  text-align: center;
}

.palette-table th {
  position: sticky;
  top: 0;
  background: var(--ec-color-surface, #f8f8f8);
  z-index: 1;
  font-family: var(--ec-font-heading);
  font-weight: 600;
}

.palette-table td .content-pending {
  margin: 0.15rem 0;
}

.palette-table td:nth-child(2),
.palette-table .mono {
  font-family: var(--ec-font-mono);
  font-size: 0.9em;
}

.palette-value-copy {
  all: unset;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-family: var(--ec-font-mono);
  color: inherit;
  padding: 0.1rem 0.2rem;
  border-radius: 0.25rem;
  cursor: pointer;
  user-select: none;
}

.palette-value-copy:hover,
.palette-value-copy:focus-visible,
.palette-value-copy[data-copied="true"] {
  background: var(--ec-color-surface, #f5f5f5);
}

.palette-table__swatch {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  background: transparent;
  vertical-align: middle;
  cursor: pointer;
}

.palette-table__swatch:hover,
.palette-table__swatch:focus-visible,
.palette-table__swatch[aria-expanded="true"] {
  outline: 2px solid var(--ec-color-focus, #005fcc);
  outline-offset: 2px;
}

.palette-table__swatch:not([style]) {
  opacity: 0.6;
}

.palette-swatch-cell {
  position: relative;
}

.palette-values-menu {
  position: fixed;
  z-index: 100;
  min-width: 18rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.75rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-top: 2px solid var(--ec-color-heading, #002E6D);
  background: var(--ec-color-bg, #fff);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.14);
}

.palette-values-menu dl {
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.palette-values-menu dl > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.palette-values-menu dt {
  font-family: var(--ec-font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-color-muted, #555);
}

.palette-values-menu dd {
  margin: 0;
  font-family: var(--ec-font-mono);
  font-size: 0.9rem;
  line-height: 1.35;
}

.palette-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  background: var(--ec-color-surface, #f5f5f5);
  font-family: var(--ec-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ec-color-muted, #555);
  cursor: default;
  vertical-align: middle;
}

.palette-note::after {
  content: attr(data-note);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  max-width: 22rem;
  min-width: 14rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.35rem;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #111);
  font-family: var(--ec-font-body);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 5;
}

.palette-note:hover::after,
.palette-note:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.copy-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-top: 2px solid var(--ec-color-heading, #002E6D);
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #111);
  font-family: var(--ec-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.14);
}

.theme-tabs {
  margin-top: 1rem;
}

.theme-card {
  --theme-bg: #fff;
  --theme-heading: #323E48;
  --theme-body: #323E48;
  --theme-link: #5B6670;
  --theme-hover: #1D252C;
  min-width: 0;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-bg, #fff);
  overflow: hidden;
}

.theme-card__sample {
  display: grid;
  gap: 1rem;
  min-height: 18rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--theme-bg);
  color: var(--theme-body);
}

.theme-demo__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid currentColor;
}

.theme-card__context {
  display: block;
  font-family: var(--ec-font-mono);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--theme-body);
}

.theme-demo__content {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.site-main .theme-card__sample h3 {
  margin: 0;
  font-family: var(--ec-font-heading);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--theme-heading);
}

.theme-card__sample p {
  max-width: 42rem;
  margin: 0;
  color: var(--theme-body);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

.theme-card__sample a {
  color: var(--theme-link);
  font-family: var(--ec-font-heading);
  font-weight: 600;
}

.theme-card__sample a:hover,
.theme-card__sample a:focus-visible {
  color: var(--theme-hover);
}

.theme-demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.theme-demo__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  text-decoration: none;
}

.theme-demo__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.theme-demo__metrics span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  color: var(--theme-body);
  font-size: 0.78rem;
  line-height: 1.35;
}

.theme-demo__metrics strong {
  color: var(--theme-heading);
  font-family: var(--ec-font-heading);
  font-size: 0.95rem;
  line-height: 1.2;
}

.theme-demo__usage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 0.45rem;
}

.theme-demo__usage > div {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  color: var(--theme-body);
}

.theme-demo__usage dt {
  color: var(--theme-heading);
  font-family: var(--ec-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.theme-demo__usage dd {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.theme-card__properties {
  border-top: 1px solid var(--ec-color-rule, #e5e5e5);
  background: var(--ec-color-bg, #fff);
}

.site-main .theme-card__properties h4 {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.theme-guidance-list {
  display: grid;
  gap: 0.25rem;
  margin: -0.25rem 0 1rem;
  padding-left: 1.1rem;
  color: var(--ec-color-text, #323E48);
}

.theme-guidance-list li {
  padding-left: 0.15rem;
}

.theme-context-note {
  margin: 1rem 0 0;
  padding: 0.65rem 0.75rem;
  border-left: 0.25rem solid var(--ec-color-heading, #002E6D);
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-text, #323E48);
  font-size: 0.92rem;
  line-height: 1.45;
}

.theme-construction__details {
  padding: 0.45rem;
}

.theme-construction__values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.2rem;
  margin: 0;
}

.theme-construction__values > div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.32rem 0.38rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-text, #323E48);
}

.theme-construction__values dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.theme-construction__values dd {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-family: var(--ec-font-mono);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.theme-construction__values a {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.theme-construction__values a:hover,
.theme-construction__values a:focus-visible {
  text-decoration: none;
}

.theme-spec-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 50%;
  background: var(--property-color, transparent);
  vertical-align: -0.08rem;
}

@media (max-width: 720px) {
  .theme-demo__bar {
    height: 5.0625rem;
    min-height: 0;
  }

  .theme-demo__usage {
    grid-template-columns: 1fr;
  }

  .theme-construction__values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .theme-construction__values {
    grid-template-columns: 1fr;
  }
}

.token-preview-popover {
  position: fixed;
  z-index: 120;
  width: min(var(--palette-card-width, 20rem), calc(100vw - 1.5rem));
  background: transparent;
  color: var(--ec-color-text, #323E48);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.14);
}

.token-preview-popover[hidden] {
  display: none;
}

.token-preview-popover .palette-color-card {
  box-shadow: none;
}

[data-theme-preview="editorial-light"] {
  --theme-bg: #FFFFFF;
  --theme-heading: #323E48;
  --theme-body: #323E48;
  --theme-link: #5B6670;
  --theme-hover: #1D252C;
}

[data-theme-preview="launchpad"] {
  --theme-bg: #FFFFFF;
  --theme-heading: #002E6D;
  --theme-body: #323E48;
  --theme-link: #5B6670;
  --theme-hover: #1D252C;
}

[data-theme-preview="interface-light"] {
  --theme-bg: #FAFBFC;
  --theme-heading: #323E48;
  --theme-body: #323E48;
  --theme-link: #5B6670;
  --theme-hover: #1D252C;
}

[data-theme-preview="operations-console"] {
  --theme-bg: #002E6D;
  --theme-heading: #FFFFFF;
  --theme-body: #FFFFFF;
  --theme-link: #12B4A6;
  --theme-hover: #00C4B3;
}

[data-theme-preview="interface-dark"] {
  --theme-bg: #1D252C;
  --theme-heading: #FFFFFF;
  --theme-body: #FFFFFF;
  --theme-link: #12B4A6;
  --theme-hover: #00C4B3;
}

[data-theme-preview="terminal"] {
  --theme-bg: #121820;
  --theme-heading: #FFFFFF;
  --theme-body: #FFFFFF;
  --theme-link: #12B4A6;
  --theme-hover: #00C4B3;
}

@media (max-width: 48rem) {
  .theme-card__sample {
    min-height: 11rem;
  }
}

/* ── Logo section ────────────────────────────────────────────── */
.logo-symbol-defs,
.ui-symbol-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo-workbench {
  --type-row-height: 3.5rem;
  --logo-pane-height: clamp(14rem, 31vw, 22rem);
  overflow: hidden;
}

.logo-matrix-layout {
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.55fr);
}

.logo-detail {
  min-width: 0;
  min-height: calc((var(--type-row-height) * 6) + 6px);
  height: 100%;
  overflow: hidden;
  border-top: 0.35rem solid var(--ec-color-heading, #002E6D);
  background: var(--ec-color-bg, #FFFFFF);
  color: var(--ec-color-text, #323E48);
}

.logo-workbench-preview {
  display: grid;
  position: relative;
  height: var(--logo-pane-height);
  min-height: var(--logo-pane-height);
  margin: 0.55rem 0.55rem 0;
  border-radius: 0.375rem;
}

.logo-workbench-preview .logo-preview {
  position: relative;
  z-index: 1;
  width: min(100%, 42rem);
  max-width: none;
  margin: 0 auto;
}

.logo-workbench-preview .logo-preview,
.logo-workbench-preview .icon-preview,
.logo-clearspace-diagram > svg,
.icon-clearspace-diagram > svg {
  pointer-events: none;
}

.logo-workbench-preview .logo-preview.logo-preview--construction-interactive,
.logo-workbench-preview .icon-preview.icon-preview--construction-interactive,
.logo-clearspace-diagram > svg.logo-preview--construction-interactive,
.icon-clearspace-diagram > svg.icon-preview--construction-interactive {
  pointer-events: auto;
}

.logo-preview-set {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0.55rem;
  align-items: stretch;
}

.logo-preview-set--count-2 {
  grid-template-rows: minmax(0, 1fr);
}

.logo-preview-set--count-4 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.logo-preview-set__item {
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0.85rem;
  place-items: center;
}

.logo-preview-set__item .logo-preview {
  width: min(100%, 17rem);
  max-height: 5.75rem;
}

.logo-preview-set--count-4 .logo-preview {
  width: min(100%, 13rem);
  max-height: 3.6rem;
}

.logo-preview-set__item figcaption {
  position: relative;
  z-index: 1;
  font-family: var(--ec-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: inherit;
  text-align: center;
}

.logo-preview-card--grid {
  height: var(--logo-pane-height);
  min-height: var(--logo-pane-height);
  background:
    linear-gradient(to right, rgba(0, 46, 109, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 46, 109, 0.16) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 46, 109, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 46, 109, 0.06) 1px, transparent 1px),
    #fff;
  background-size:
    calc(100% / 6) calc(100% / 6),
    calc(100% / 6) calc(100% / 6),
    calc(100% / 24) calc(100% / 24),
    calc(100% / 24) calc(100% / 24);
}

.logo-preview-card--grid::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(0, 46, 109, 0.35);
  pointer-events: none;
}

.logo-preview-card--construction,
.logo-preview-card--pane-fit,
.logo-preview-card--variant {
  place-items: center;
  align-items: center;
  padding: 0;
}

.logo-preview-card--construction .logo-preview,
.logo-preview-card--pane-fit .logo-preview,
.logo-preview-card--variant .logo-preview {
  width: auto;
  height: calc(var(--logo-pane-height) * 0.47);
  max-width: 73%;
}

.logo-detail__body {
  min-width: 0;
  padding: 0.55rem;
}

.logo-detail--construction {
  --logo-pane-height: clamp(24rem, 44vw, 35rem);
  min-height: 0;
  height: auto;
}

.logo-detail--construction .logo-detail__body {
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.25rem;
}

.logo-detail--construction .logo-clearspace-diagram {
  margin: 0;
}

.logo-detail--construction .logo-workbench-preview .logo-preview {
  width: min(100%, 68rem);
  height: calc(var(--logo-pane-height) * 0.68);
  max-width: 92%;
}

.logo-detail__heading-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.logo-detail__heading-row--controls-only {
  justify-content: flex-end;
}

.logo-variants-full {
  min-width: 0;
}

.logo-detail--variant {
  --logo-pane-height: clamp(24rem, 44vw, 35rem);
  min-height: 0;
  height: auto;
}

.logo-detail--variant .logo-workbench-preview {
  height: var(--logo-pane-height);
  min-height: var(--logo-pane-height);
  margin: 0.55rem 0.55rem 0;
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 0;
}

.logo-detail--variant .logo-detail__body {
  display: grid;
  gap: 0.75rem;
}

.logo-detail--variant .logo-preview-card--variant .logo-preview {
  width: 100%;
  height: 100%;
  max-width: none;
}

.logo-variant-pane-controls {
  position: absolute;
  inset: 0.75rem;
  z-index: 3;
  pointer-events: none;
  /* The pane-control rails float over the permanently-white logo
     variant canvas, so the entire overlay is theme-locked to the
     light-mode chrome tokens. Without this, dark-mode `--ec-color-text`
     and `--ec-color-heading` (white) would render white-on-white inside
     the white rails. Pressed buttons keep using `--ec-color-bg` /
     `--ec-color-heading` and resolve to navy-pill + white-ink, which
     reads correctly on the white rail in both themes. */
  --ec-color-bg: #FFFFFF;
  --ec-color-surface: #FAFBFC;
  --ec-color-text: #323E48;
  --ec-color-heading: #002E6D;
  --ec-color-muted: #5B6670;
  --ec-color-rule: #E8ECEE;
}

.logo-variant-pane-controls__group {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  max-width: calc(100% - 1.5rem);
}

.logo-variant-pane-controls__group--family {
  top: 0;
  left: 0;
  max-width: calc(100% - 4.25rem);
  justify-content: flex-start;
}

.logo-variant-pane-controls__group--download {
  top: 0;
  right: 0;
  justify-content: flex-end;
}

.logo-variant-pane-controls__group--options {
  bottom: 0;
  left: 0;
  justify-content: flex-start;
}

.logo-variant-pane-controls__group--tm {
  right: 0;
  bottom: 0;
  justify-content: flex-end;
}

.logo-variant-pane-controls .logo-variant-category-controls,
.logo-variant-pane-controls .logo-variant-controls,
.logo-variant-pane-controls .logo-download-menu > summary,
.logo-variant-pane-controls .logo-tagline-control,
.logo-variant-pane-controls .logo-trademark-control {
  pointer-events: auto;
  border-color: rgba(29, 37, 44, 0.14);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.35rem 1rem rgba(29, 37, 44, 0.08);
}

.logo-variant-category-controls,
.logo-variant-controls {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #f5f5f5);
}

.logo-download-menu {
  position: relative;
  pointer-events: auto;
}

.logo-download-menu > summary {
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #f5f5f5);
  color: var(--ec-color-heading, #002E6D);
  cursor: pointer;
  list-style: none;
}

.logo-download-menu > summary::-webkit-details-marker {
  display: none;
}

.logo-download-menu > summary::marker {
  content: "";
}

.logo-download-menu > summary:hover,
.logo-download-menu > summary:focus-visible,
.logo-download-menu[open] > summary {
  border-color: var(--ec-color-heading, #002E6D);
  /* Lift to the page background so the active state contrasts the
     resting `--ec-color-surface`. Theme-tokenized so dark mode reads
     navy-on-dark instead of the previous hardcoded white. */
  background: var(--ec-color-bg, #fff);
}

.logo-download-menu__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 5;
  display: grid;
  min-width: min(17rem, calc(100vw - 2rem));
  padding: 0.45rem;
  border: 1px solid rgba(29, 37, 44, 0.14);
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0.6rem 1.5rem rgba(29, 37, 44, 0.14);
}

.logo-download-menu__panel strong {
  min-width: 0;
  padding: 0.35rem 0.45rem 0.45rem;
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.logo-download-menu__panel a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.25rem;
  color: var(--ec-color-text, #323E48);
  font-family: var(--ec-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.logo-download-menu__panel a:hover,
.logo-download-menu__panel a:focus-visible {
  background: var(--ec-color-surface, #f5f5f5);
  color: var(--ec-color-heading, #002E6D);
}

.logo-trademark-control {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #f5f5f5);
}

.logo-tagline-control {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #f5f5f5);
}

.logo-variant-category-controls button,
.logo-variant-controls button,
.logo-tagline-control button,
.logo-trademark-control button {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--ec-color-text, #323E48);
  font-family: var(--ec-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.logo-variant-category-controls button[aria-pressed="true"],
.logo-variant-controls button[aria-pressed="true"],
.logo-tagline-control button[aria-pressed="true"],
.logo-trademark-control button[aria-pressed="true"] {
  border-color: var(--ec-color-heading, #002E6D);
  /* Theme-tokenized so the pressed pill flips to dark-navy bg / white
     ink in dark mode instead of collapsing to white-on-white. */
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-heading, #002E6D);
}

.logo-lockup-tagline {
  fill: var(--logo-tagline, var(--logo-tm, var(--logo-c, #002E6D)));
  font-family: "Delight", "Inter Tight", system-ui, sans-serif;
  font-size: 152px;
  font-weight: 400;
}

.logo-construction__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.logo-construction__region-hint {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: 18rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(91, 102, 112, 0.22);
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.84);
  /* The hint floats over the permanently-white logo canvas, so its ink
     is theme-locked (EC Neutral 500) rather than tracking the document
     `--ec-color-muted` which inverts to a light gray in dark mode. */
  color: #5B6670;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 0.25rem 0.8rem rgba(29, 37, 44, 0.05);
  cursor: default;
}

.logo-construction__progress {
  display: flex;
  gap: 0.35rem;
  margin: 0.45rem 0 0.75rem;
  padding: 0;
  list-style: none;
}

.logo-construction__progress li {
  flex: 1 1 0;
  min-width: 0;
}

.logo-construction__progress li span {
  display: block;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--ec-color-rule, #c8c8c8);
}

.logo-construction__progress li[data-active="true"] span {
  background: var(--ec-color-heading, #002E6D);
}

.logo-construction__player {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.logo-construction__player button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  min-height: 2.1rem;
  /* Theme-tokenized so the resting pill is white-on-light /
     navy-on-dark instead of a fixed translucent white that washes out
     against the dark surface. */
  border: 1px solid var(--ec-color-rule, rgba(0, 46, 109, 0.28));
  border-radius: 0.25rem;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-body);
  font-size: 0;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.logo-construction__player {
  padding: 0.4rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #f5f5f5);
}

.logo-construction__player button[aria-pressed="true"] {
  border-color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-heading, #002E6D);
  /* Use the page background as the ink so it inverts cleanly in both
     themes (navy-pressed-bg + white-ink in light, white-pressed-bg +
     navy-ink in dark). */
  color: var(--ec-color-bg, #fff);
}

.logo-transport-icon {
  display: inline-grid;
  position: relative;
  width: 1rem;
  height: 1rem;
  color: currentColor;
}

.logo-transport-icon::before,
.logo-transport-icon::after {
  content: "";
  position: absolute;
}

.logo-transport-icon--prev::before,
.logo-transport-icon--next::before,
.logo-transport-icon--play-pause::before {
  top: 0.18rem;
  width: 0;
  height: 0;
  border-block: 0.32rem solid transparent;
}

.logo-transport-icon--prev::before {
  left: 0.22rem;
  border-right: 0.48rem solid currentColor;
}

.logo-transport-icon--next::before {
  left: 0.32rem;
  border-left: 0.48rem solid currentColor;
}

.logo-transport-icon--play-pause::before {
  left: 0.16rem;
  border-left: 0.36rem solid currentColor;
}

.logo-transport-icon--first::before,
.logo-transport-icon--last::after {
  top: 0.18rem;
  width: 0.12rem;
  height: 0.64rem;
  border-radius: 999px;
  background: currentColor;
}

.logo-transport-icon--first::before {
  left: 0.16rem;
}

.logo-transport-icon--first::after,
.logo-transport-icon--last::before {
  top: 0.18rem;
  width: 0;
  height: 0;
  border-block: 0.32rem solid transparent;
}

.logo-transport-icon--first::after {
  left: 0.4rem;
  border-right: 0.44rem solid currentColor;
}

.logo-transport-icon--last::before {
  left: 0.18rem;
  border-left: 0.44rem solid currentColor;
}

.logo-transport-icon--last::after {
  right: 0.16rem;
}

.logo-transport-icon--play-pause::after {
  top: 0.18rem;
  right: 0.18rem;
  width: 0.11rem;
  height: 0.64rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -0.2rem 0 0 currentColor;
}

.logo-construction__details {
  display: block;
}

.logo-construction__mode {
  display: inline-flex;
  width: fit-content;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #f5f5f5);
}

.logo-construction__mode button {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--ec-color-text, #323E48);
  font-family: var(--ec-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.logo-mode-mark {
  display: inline-block;
  width: 1.1rem;
  height: 0.7rem;
  border-radius: 999px;
}

.logo-mode-mark--color {
  background: linear-gradient(to right, #007167 0 33%, #00C4B3 33% 66%, #002E6D 66% 100%);
}

.logo-mode-mark--gray {
  background: linear-gradient(to right, #A2A9AD 0 33%, #5B6670 33% 66%, #1D252C 66% 100%);
}

.logo-construction__mode button[aria-pressed="true"] {
  border-color: var(--ec-color-heading, #002E6D);
  /* Theme-tokenized (see variant-controls note above). */
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-heading, #002E6D);
}

.logo-construction__identity,
.logo-construction__values {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.logo-construction__identity {
  grid-template-columns: repeat(2, minmax(6rem, 1fr));
}

.logo-construction__values {
  grid-template-columns: repeat(2, minmax(6.75rem, 1fr));
}

.logo-construction__identity > div,
.logo-construction__values > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.32rem 0.38rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-text, #323E48);
}

.logo-construction__identity dt,
.logo-construction__values dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logo-construction__identity dd,
.logo-construction__values dd {
  min-width: 0;
  margin: 0;
  font-family: var(--ec-font-mono);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.logo-construction__swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background: var(--swatch);
  vertical-align: -0.1rem;
}

.logo-construction__steps {
  display: grid;
  grid-template-columns: repeat(var(--step-count, 4), minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-construction__step {
  display: grid;
  position: relative;
  align-content: start;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.7rem 0.42rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.5rem;
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-text, #323E48);
}

.logo-construction__step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -0.65rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--step-bg, #002E6D);
}

.logo-construction__step[data-active="true"] {
  border-color: var(--ec-color-heading, #002E6D);
  box-shadow: 0 0 0 2px var(--ec-color-bg, #FFFFFF), 0 0 0 4px var(--ec-color-heading, #002E6D);
}

.logo-construction__step-label,
.logo-construction__step-token {
  display: block;
  min-width: 0;
  color: inherit;
  font-family: var(--ec-font-heading);
  overflow-wrap: anywhere;
}

.logo-construction__step-label {
  color: var(--ec-color-muted, #5B6670);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.logo-construction__step-token {
  align-self: end;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.1;
}

.logo-construction__step-token a {
  color: var(--ec-color-heading, #002E6D);
  text-decoration: none;
}

@media (max-width: 44rem) {
  .logo-construction__steps,
  .logo-construction__steps--icon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 28rem) {
  .logo-construction__steps,
  .logo-construction__steps--icon {
    grid-template-columns: 1fr;
  }
}

.logo-production-more-info {
  margin-top: 0;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
}

.logo-production-more-info > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.logo-production-more-info > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--ec-font-mono, monospace);
  font-size: 1rem;
  line-height: 1;
}

.logo-production-more-info[open] > summary {
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
}

.logo-production-more-info[open] > summary::after {
  content: "-";
}

.logo-production-rules {
  display: grid;
  gap: 0.45rem;
  margin-top: 0;
  padding: 0.75rem;
}

.logo-production-rule {
  min-width: 0;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-bg, #FFFFFF);
  overflow: hidden;
}

.logo-production-rule summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.65rem 0.75rem;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  cursor: pointer;
}

.logo-production-rule summary::after {
  content: "+";
  font-family: var(--ec-font-mono, monospace);
  font-size: 1rem;
  line-height: 1;
}

.logo-production-rule[open] summary {
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
}

.logo-production-rule[open] summary::after {
  content: "-";
}

.logo-production-rule__title {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.logo-production-rule__fields {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem;
}

.logo-production-rule__fields > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
}

.logo-production-rule__fields > .logo-production-rule__field--note {
  border-left: 0.25rem solid var(--ec-color-accent, #007167);
  background: var(--ec-color-coda-bg, #F4FFFD);
}

.logo-production-rule__fields dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.logo-production-rule__fields dd {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.logo-production-rule__fields dd span {
  display: block;
}

.logo-production-rule__field--note dd {
  display: block;
}

.logo-detail--clearspace .logo-detail__body {
  display: grid;
  gap: 0.75rem;
}

.logo-clearspace-diagram {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: #00524C;
  --logo-cursor-base: #00C4B3;
  --logo-e-bottom: #00C4B3;
  --logo-e-middle: #002E6D;
  --logo-e-top: #002E6D;
  --logo-c: #002E6D;
  margin-top: 0.55rem;
  height: var(--logo-pane-height);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.375rem;
  background: #fff;
}

.logo-clearspace-diagram > .logo-clearspace-controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  justify-content: flex-end;
}

.logo-clearspace-diagram > .logo-clearspace-controls button {
  background: rgba(255, 255, 255, 0.92);
  /* Overlay sits on a permanently-white logo canvas, so ink is
     theme-locked (see .logo-construction__region-hint). */
  color: #323E48;
  box-shadow: 0 0.35rem 1rem rgba(29, 37, 44, 0.08);
}

[data-clearspace-info] {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ec-color-rule, #e5e5e5);
}

.logo-clearspace-diagram svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-construction-ghost,
.icon-construction-ghost {
  opacity: 0.14;
  pointer-events: none;
}

.logo-construction-ghost {
  --logo-cursor-top: #002E6D;
  --logo-cursor-wedge: #002E6D;
  --logo-cursor-base: #002E6D;
  --logo-e-bottom: #002E6D;
  --logo-e-middle: #002E6D;
  --logo-e-top: #002E6D;
  --logo-c: #002E6D;
}

.icon-construction-ghost {
  --icon-cursor-top: #002E6D;
  --icon-cursor-wedge: #002E6D;
  --icon-cursor-base: #002E6D;
  --icon-prompt: #002E6D;
}

.mark-region-overlay {
  pointer-events: auto;
}

.mark-region-hit {
  fill: rgba(58, 141, 255, 0);
  stroke: transparent;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
  cursor: default;
  pointer-events: all;
}

.mark-region-hit[data-region-visible="false"] {
  display: none;
  pointer-events: none;
}

.mark-region-hit:hover,
.mark-region-hit:focus-visible {
  fill: rgba(58, 141, 255, 0.07);
  stroke: rgba(58, 141, 255, 0.74);
  outline: none;
}

.logo-clearspace-guides path {
  fill: none;
  stroke: #3A8DFF;
  stroke-width: 3.4375;
  stroke-dasharray: 13.75 10.3125;
  stroke-miterlimit: 8;
}

.logo-clearspace-measurements text {
  fill: #3A8DFF;
  font-family: var(--ec-font-heading);
  font-size: 83px;
}

.logo-clearspace-measurements path {
  fill: none;
  stroke: #3A8DFF;
  stroke-width: 6.875;
  stroke-miterlimit: 8;
}

.logo-clearspace-diagram[data-field="false"] [data-clearspace-layer="field"],
.logo-clearspace-diagram[data-guides="false"] [data-clearspace-layer="guides"],
.logo-clearspace-diagram[data-measurements="false"] [data-clearspace-layer="measurements"],
.logo-clearspace-diagram[data-detail-measurements="false"] [data-clearspace-layer="detail-measurements"],
.logo-clearspace-diagram[data-diagonals="false"] [data-clearspace-layer="diagonals"] {
  display: none;
}

.logo-clearspace-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  justify-content: flex-end;
}

.logo-clearspace-controls button {
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.25rem;
  background: var(--ec-color-surface, #f5f5f5);
  color: var(--ec-color-text, #323E48);
  font-family: var(--ec-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.logo-clearspace-controls button[aria-pressed="true"] {
  border-color: var(--ec-color-heading, #002E6D);
  /* Theme-tokenized (see variant-controls note above). */
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-heading, #002E6D);
}

.logo-detail__rule-note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ec-color-rule, #e5e5e5);
}

.site-main .logo-detail h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.2;
}

.logo-subtabs {
  margin-top: 0;
}

.logo-subtabs > .palettes-tabs__list {
  gap: 0.375rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
}

.logo-subtabs > .palettes-tabs__list [role="tab"] {
  padding: 0.4rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ec-color-muted, #555);
}

.logo-subtabs > .palettes-tabs__list [role="tab"][aria-selected="true"] {
  color: var(--ec-color-heading, #002E6D);
  border-color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-surface, #f5f5f5);
}

.logo-subtabs > .palettes-tabs__panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.logo-panel-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) 1fr;
  gap: 1rem;
  align-items: start;
}

.logo-preview-card {
  display: grid;
  gap: 0.75rem;
  align-items: center;
  min-height: 10rem;
  padding: 1rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.5rem;
}

.logo-preview-card--light {
  background: #fff;
}

.logo-preview-card--dark,
.logo-preview-card--carved {
  background: #1D252C;
  color: #fff;
}

.logo-preview-card--navy {
  background: #002E6D;
  color: #fff;
}

.logo-preview-card--gunmetal {
  background: #1D252C;
  color: #fff;
}

.logo-preview-card span {
  font-family: var(--ec-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
}

.logo-preview {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: #00524C;
  --logo-cursor-base: #00C4B3;
  --logo-e-bottom: #00C4B3;
  --logo-e-middle: #002E6D;
  --logo-e-top: #002E6D;
  --logo-c: #002E6D;
  --logo-tm: var(--logo-c, #002E6D);
  --logo-stroke: none;
  --logo-stroke-width: 0;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-preview--navy {
  --logo-cursor-top: #002E6D;
  --logo-cursor-wedge: #002E6D;
  --logo-cursor-base: #002E6D;
  --logo-e-bottom: #002E6D;
  --logo-e-middle: #002E6D;
  --logo-e-top: #002E6D;
  --logo-c: #002E6D;
  --logo-tm: #002E6D;
}

.logo-preview--white {
  --logo-cursor-top: #fff;
  --logo-cursor-wedge: #fff;
  --logo-cursor-base: #fff;
  --logo-e-bottom: #fff;
  --logo-e-middle: #fff;
  --logo-e-top: #fff;
  --logo-c: #fff;
  --logo-tm: #fff;
}

.logo-preview--gunmetal {
  --logo-cursor-top: #1D252C;
  --logo-cursor-wedge: #1D252C;
  --logo-cursor-base: #1D252C;
  --logo-e-bottom: #1D252C;
  --logo-e-middle: #1D252C;
  --logo-e-top: #1D252C;
  --logo-c: #1D252C;
  --logo-tm: #1D252C;
}

.logo-preview--color-negative {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: #00524C;
  --logo-cursor-base: #00C4B3;
  --logo-e-bottom: #00C4B3;
  --logo-e-middle: #fff;
  --logo-e-top: #fff;
  --logo-c: #fff;
  --logo-tm: #fff;
}

.logo-preview--grayscale {
  --logo-cursor-top: #5B6670;
  --logo-cursor-wedge: #323E48;
  --logo-cursor-base: #A2A9AD;
  --logo-e-bottom: #A2A9AD;
  --logo-e-middle: #1D252C;
  --logo-e-top: #1D252C;
  --logo-c: #1D252C;
  --logo-tm: #1D252C;
}

.logo-preview--grayscale-negative {
  --logo-cursor-top: #5B6670;
  --logo-cursor-wedge: #323E48;
  --logo-cursor-base: #A2A9AD;
  --logo-e-bottom: #A2A9AD;
  --logo-e-middle: #fff;
  --logo-e-top: #fff;
  --logo-c: #fff;
  --logo-tm: #fff;
}

.logo-preview--outline {
  --logo-cursor-top: transparent;
  --logo-cursor-wedge: transparent;
  --logo-cursor-base: transparent;
  --logo-e-bottom: transparent;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
  --logo-stroke: #002E6D;
  --logo-stroke-width: 6;
}

.logo-preview--outline-neutral,
.logo-preview--outline-navy,
.logo-preview--outline-white {
  --logo-cursor-top: transparent;
  --logo-cursor-wedge: transparent;
  --logo-cursor-base: transparent;
  --logo-e-bottom: transparent;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
  --logo-stroke-width: 6;
}

.logo-preview--outline-neutral {
  --logo-stroke: #1D252C;
  --logo-tm: #1D252C;
}

.logo-preview--outline-navy {
  --logo-stroke: #002E6D;
  --logo-tm: #002E6D;
}

.logo-preview--outline-white {
  --logo-stroke: #fff;
  --logo-tm: #fff;
}

.logo-preview--construction-step-1 {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: transparent;
  --logo-cursor-base: transparent;
  --logo-e-bottom: transparent;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
}

.logo-preview--construction-step-2 {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: #00524C;
  --logo-cursor-base: transparent;
  --logo-e-bottom: transparent;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
}

.logo-preview--construction-step-3 {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: #00524C;
  --logo-cursor-base: #00C4B3;
  --logo-e-bottom: #00C4B3;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
}

.logo-preview--construction-step-4 {
  --logo-cursor-top: #007167;
  --logo-cursor-wedge: #00524C;
  --logo-cursor-base: #00C4B3;
  --logo-e-bottom: #00C4B3;
  --logo-e-middle: #002E6D;
  --logo-e-top: #002E6D;
  --logo-c: #002E6D;
}

.logo-preview--construction-grayscale-step-1 {
  --logo-cursor-top: #5B6670;
  --logo-cursor-wedge: transparent;
  --logo-cursor-base: transparent;
  --logo-e-bottom: transparent;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
}

.logo-preview--construction-grayscale-step-2 {
  --logo-cursor-top: #5B6670;
  --logo-cursor-wedge: #323E48;
  --logo-cursor-base: transparent;
  --logo-e-bottom: transparent;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
}

.logo-preview--construction-grayscale-step-3 {
  --logo-cursor-top: #5B6670;
  --logo-cursor-wedge: #323E48;
  --logo-cursor-base: #A2A9AD;
  --logo-e-bottom: #A2A9AD;
  --logo-e-middle: transparent;
  --logo-e-top: transparent;
  --logo-c: transparent;
}

.logo-preview--construction-grayscale-step-4 {
  --logo-cursor-top: #5B6670;
  --logo-cursor-wedge: #323E48;
  --logo-cursor-base: #A2A9AD;
  --logo-e-bottom: #A2A9AD;
  --logo-e-middle: #1D252C;
  --logo-e-top: #1D252C;
  --logo-c: #1D252C;
}

.logo-preview--carved:not(.logo-preview--variant-canvas) {
  filter: url(#ec-logo-carved-filter);
}

.logo-preview--variant-canvas.logo-preview--carved .logo-preview__brand-mark {
  filter: url(#ec-logo-carved-filter);
}

.icon-workbench {
  --type-row-height: 3.5rem;
  --logo-pane-height: clamp(13rem, 27vw, 18rem);
  overflow: hidden;
}

.icon-workbench .logo-detail--construction,
.icon-workbench .logo-detail--variant {
  --logo-pane-height: clamp(24rem, 44vw, 35rem);
}

.icon-preview-card--workbench {
  place-items: center;
  align-items: center;
  padding: 0;
}

.icon-preview-card--workbench .icon-preview,
.logo-preview-card--variant .icon-preview,
.icon-preview-card--pane-fit .icon-preview {
  width: auto;
  height: calc(var(--logo-pane-height) * 0.56);
  max-width: 70%;
}

.icon-preview-card--construction::after {
  inset: 1rem;
}

.icon-clearspace-diagram {
  display: grid;
  place-items: center;
  position: relative;
  height: var(--logo-pane-height);
  min-height: var(--logo-pane-height);
  overflow: hidden;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.375rem;
  background: #fff;
}

.icon-detail--construction .icon-clearspace-diagram {
  margin: 0;
}

.icon-clearspace-diagram > .logo-clearspace-controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  justify-content: flex-end;
}

.icon-clearspace-diagram > .logo-clearspace-controls button {
  background: rgba(255, 255, 255, 0.92);
  /* The icon clearspace overlay sits on a permanently-white canvas, so
     ink is theme-locked (see .logo-construction__region-hint). */
  color: #323E48;
  box-shadow: 0 0.35rem 1rem rgba(29, 37, 44, 0.08);
}

.icon-clearspace-diagram svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.logo-detail--variant .logo-preview-card--variant .icon-preview--variant-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.icon-clearspace-diagram[data-field="false"] [data-clearspace-layer="field"],
.icon-clearspace-diagram[data-guides="false"] [data-clearspace-layer="guides"],
.icon-clearspace-diagram[data-measurements="false"] [data-clearspace-layer="measurements"],
.icon-clearspace-diagram[data-diagonals="false"] [data-clearspace-layer="diagonals"] {
  display: none;
}

.icon-preview-card {
  display: grid;
  place-items: center;
  min-height: 14rem;
  padding: 1.25rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.5rem;
  background: #fff;
}

.icon-preview-card--clearspace::before {
  content: "";
  grid-area: 1 / 1;
  width: min(11rem, 70%);
  aspect-ratio: 1;
  border: 1px dashed var(--ec-color-rule, #c8c8c8);
}

.icon-preview-card--clearspace .icon-preview {
  grid-area: 1 / 1;
  width: min(9rem, 58%);
}

.icon-preview {
  --icon-cursor-top: #007167;
  --icon-cursor-wedge: #00524C;
  --icon-cursor-base: #00C4B3;
  --icon-prompt: #00C4B3;
  --icon-stroke: none;
  --icon-stroke-width: 0;
  display: block;
  width: min(100%, 8rem);
  height: auto;
  overflow: visible;
}

.icon-preview--navy {
  --icon-cursor-top: #002E6D;
  --icon-cursor-wedge: #002E6D;
  --icon-cursor-base: #002E6D;
  --icon-prompt: #002E6D;
}

.icon-preview--gunmetal {
  --icon-cursor-top: #1D252C;
  --icon-cursor-wedge: #1D252C;
  --icon-cursor-base: #1D252C;
  --icon-prompt: #1D252C;
}

.icon-preview--white {
  --icon-cursor-top: #fff;
  --icon-cursor-wedge: #fff;
  --icon-cursor-base: #fff;
  --icon-prompt: #fff;
}

.icon-preview--grayscale {
  --icon-cursor-top: #5B6670;
  --icon-cursor-wedge: #323E48;
  --icon-cursor-base: #A2A9AD;
  --icon-prompt: #A2A9AD;
}

.icon-preview--outline {
  --icon-cursor-top: transparent;
  --icon-cursor-wedge: transparent;
  --icon-cursor-base: transparent;
  --icon-prompt: transparent;
  --icon-stroke: #002E6D;
  --icon-stroke-width: 6;
}

.icon-preview--outline-neutral,
.icon-preview--outline-navy,
.icon-preview--outline-white {
  --icon-cursor-top: transparent;
  --icon-cursor-wedge: transparent;
  --icon-cursor-base: transparent;
  --icon-prompt: transparent;
  --icon-stroke-width: 6;
}

.icon-preview--outline-neutral {
  --icon-stroke: #1D252C;
}

.icon-preview--outline-navy {
  --icon-stroke: #002E6D;
}

.icon-preview--outline-white {
  --icon-stroke: #fff;
}

.icon-preview--construction-step-1 {
  --icon-cursor-top: #007167;
  --icon-cursor-wedge: transparent;
  --icon-cursor-base: transparent;
  --icon-prompt: transparent;
}

.icon-preview--construction-step-2 {
  --icon-cursor-top: #007167;
  --icon-cursor-wedge: #00524C;
  --icon-cursor-base: transparent;
  --icon-prompt: transparent;
}

.icon-preview--construction-step-3 {
  --icon-cursor-top: #007167;
  --icon-cursor-wedge: #00524C;
  --icon-cursor-base: #00C4B3;
  --icon-prompt: #00C4B3;
}

.icon-preview--construction-grayscale-step-1 {
  --icon-cursor-top: #5B6670;
  --icon-cursor-wedge: transparent;
  --icon-cursor-base: transparent;
  --icon-prompt: transparent;
}

.icon-preview--construction-grayscale-step-2 {
  --icon-cursor-top: #5B6670;
  --icon-cursor-wedge: #323E48;
  --icon-cursor-base: transparent;
  --icon-prompt: transparent;
}

.icon-preview--construction-grayscale-step-3 {
  --icon-cursor-top: #5B6670;
  --icon-cursor-wedge: #323E48;
  --icon-cursor-base: #A2A9AD;
  --icon-prompt: #A2A9AD;
}

.logo-variant-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.logo-color-list,
.logo-rule-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.logo-color-list li,
.logo-rule-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: baseline;
  font-size: 0.95rem;
  line-height: 1.5;
}

.logo-rule-list li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--ec-color-heading, #002E6D);
}

.logo-color-chip {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.2rem;
  background: var(--chip);
  transform: translateY(0.12rem);
}

@media (max-width: 760px) {
  .logo-panel-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Do's and Don'ts ─────────────────────────────────────────── */
.dos-standards {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 1rem;
  border-top: 1px solid var(--ec-color-rule, #E8ECEE);
}

.dos-standard {
  display: grid;
  grid-template-columns: minmax(7rem, 0.22fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
}

.dos-standard h3,
.dos-preflight h3 {
  margin: 0;
  font-family: var(--ec-font-heading);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ec-color-heading, #002E6D);
}

.dos-standard h3 {
  padding-top: 0.1rem;
}

.dos-standard__matrix {
  display: grid;
  gap: 0;
  margin: 0;
}

.dos-standard__matrix > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  min-width: 0;
  padding: 0.45rem 0;
  border-top: 1px solid var(--ec-color-rule, #E8ECEE);
}

.dos-standard__matrix > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.dos-standard__matrix > div:last-child {
  padding-bottom: 0;
}

.dos-standard__matrix dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-main .dos-standard__matrix dd {
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.42;
  text-align: left;
  text-justify: auto;
  hyphens: manual;
  overflow-wrap: normal;
}

.dos-preflight {
  display: grid;
  grid-template-columns: minmax(7rem, 0.22fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 0.2rem solid var(--ec-color-heading, #002E6D);
  background: transparent;
}

.dos-preflight ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dos-preflight;
}

.site-main .dos-preflight li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  color: var(--ec-color-text, #323E48);
  font-size: 0.9rem;
  line-height: 1.42;
  text-align: left;
  text-justify: auto;
  hyphens: manual;
  counter-increment: dos-preflight;
}

.site-main .dos-preflight li::before {
  content: counter(dos-preflight, decimal-leading-zero);
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .dos-standard,
  .dos-preflight,
  .dos-standard__matrix,
  .dos-standard__matrix > div,
  .dos-preflight ol {
    grid-template-columns: 1fr;
  }

  .dos-standard__matrix > div {
    gap: 0.2rem;
  }

  .dos-standard {
    gap: 0.75rem;
    padding: 1.15rem 0;
  }

  .dos-preflight {
    gap: 0.75rem;
  }

  .dos-standard__matrix > div {
    padding: 0.6rem 0;
  }

  .dos-standard__matrix > div:first-child {
    padding-top: 0;
  }

  .dos-standard__matrix dt {
    font-size: 0.7rem;
  }

  .dos-standard__matrix dd,
  .dos-preflight li {
    font-size: 0.92rem;
    line-height: 1.46;
  }
}

/* ── Typography tabset ───────────────────────────────────────── */
.typography-subtabs {
  margin-top: 0;
}

.typography-subtabs > .palettes-tabs__list {
  gap: 0.375rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
}

.typography-subtabs > .palettes-tabs__list [role="tab"] {
  padding: 0.4rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ec-color-muted, #555);
}

.typography-subtabs > .palettes-tabs__list [role="tab"][aria-selected="true"] {
  color: var(--ec-color-heading, #002E6D);
  border-color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-surface, #f5f5f5);
}

.typography-subtabs > .palettes-tabs__panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.typography-subtabs .typography-table-wrap:last-child {
  margin-bottom: 0;
}

.typography-workbench {
  --type-card-width: 22rem;
  --type-row-height: 3.25rem;
}

.type-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
}

.site-main .type-download-bar p {
  margin: 0;
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.type-card-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: layout paint;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.65rem;
  scroll-snap-type: x proximity;
}

.type-card-rail {
  display: grid;
  width: max-content;
  grid-auto-columns: var(--type-card-width);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 0.85rem;
  align-items: stretch;
}

.type-card {
  display: grid;
  grid-template-rows: 6.75rem 1fr;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.5rem;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #323E48);
  scroll-snap-align: start;
}

.type-card--families {
  grid-template-rows: 8rem 1fr;
}

.type-card__sample {
  display: grid;
  position: relative;
  min-height: 0;
  place-content: center;
  padding: 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-heading, #002E6D);
  text-align: center;
}

.type-card__sample span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.15;
  white-space: nowrap;
}

.type-card--families .type-card__sample span {
  font-size: 2rem;
}

.type-card--rules-core .type-card__sample span,
.type-card--rules-accessibility .type-card__sample span,
.type-card--rules-implementation .type-card__sample span {
  font-size: 1.1rem;
}

.type-card__body {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.type-card--families .type-card__body {
  position: relative;
  grid-template-rows: 8.25rem 15rem;
}

.type-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  height: 5rem;
  min-height: 0;
}

.type-card--families .type-card__header {
  height: 4rem;
  min-height: 0;
}

.type-card__family-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.type-card--rules-core .type-card__header,
.type-card--rules-accessibility .type-card__header,
.type-card--rules-implementation .type-card__header {
  height: 4.25rem;
  min-height: 0;
}

.type-card--families .type-card__header > div {
  display: grid;
  align-content: start;
  min-height: 2rem;
  min-width: 0;
}

.type-card__eyebrow {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-mono, monospace);
  font-size: 0.72rem;
}

.type-card__header h4 {
  margin: 0;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: normal;
  white-space: nowrap;
}

.type-card__header p {
  margin: 0.2rem 0 0;
  color: var(--ec-color-muted, #5B6670);
  font-size: 0.84rem;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.type-card__weights,
.type-card__fields {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.type-card--families .type-card__fields {
  grid-template-rows: 4.7rem 4.7rem auto;
}

.type-card__weights > div,
.type-card__fields > div {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.type-card--families .type-card__weights > div {
  grid-template-columns: minmax(0, 1fr) 4rem;
  align-items: center;
  column-gap: 0.55rem;
}

.type-card__weights dt,
.type-card__fields dt {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.type-card__weights dd,
.type-card__fields dd {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.type-card--families .type-card__fields dt,
.type-card--families .type-card__fields dd {
  display: block;
  overflow: visible;
}

.type-card__weights dd {
  justify-content: flex-end;
  font-family: var(--ec-font-mono, monospace);
  font-size: 0.78rem;
  white-space: nowrap;
}

.type-card__weights .type-card__weight-name {
  color: var(--ec-color-text, #323E48);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.font-download-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.25rem;
  color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-bg, #FFFFFF);
  text-decoration: none;
}

.font-download-link:hover,
.font-download-link:focus-visible {
  background: var(--ec-color-surface, #FAFBFC);
  border-color: currentColor;
}

.font-download-link--compact {
  width: 1.35rem;
  height: 1.35rem;
}

.font-download-link--bundle {
  gap: 0.4rem;
  width: auto;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  font-family: var(--ec-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.font-download-link--family {
  margin-top: 0.1rem;
  width: 2rem;
  min-width: 2rem;
  padding: 0;
  white-space: nowrap;
}

.font-download-link--all-fonts {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--ec-color-bg, #FFFFFF);
  border-color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-heading, #002E6D);
}

.font-download-link--all-fonts:hover,
.font-download-link--all-fonts:focus-visible {
  color: var(--ec-color-bg, #FFFFFF);
  background: #00524C;
}

.type-reference-list {
  display: grid;
  gap: 0.65rem;
}

.type-reference-item {
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-bg, #FFFFFF);
}

.type-reference-item summary {
  display: grid;
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.65rem 0.75rem;
  color: var(--ec-color-heading, #002E6D);
  cursor: pointer;
}

.type-reference-item summary::after {
  content: "+";
  font-family: var(--ec-font-mono, monospace);
  font-size: 1rem;
  line-height: 1;
}

.type-reference-item[open] summary {
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
}

.type-reference-item[open] summary::after {
  content: "-";
}

.type-reference-item__title {
  font-family: var(--ec-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.type-reference-item__meta {
  min-width: 0;
  overflow: hidden;
  color: var(--ec-color-muted, #5B6670);
  font-size: 0.82rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#palettes [data-palette-target],
#typography [data-palette-target] {
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-weight: 700;
  text-decoration: none;
}

#palettes [data-palette-target]:hover,
#palettes [data-palette-target]:focus-visible,
#typography [data-palette-target]:hover,
#typography [data-palette-target]:focus-visible {
  text-decoration: none;
}

.type-reference-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem;
}

.type-reference-fields > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
}

.type-reference-fields > .type-reference-field--wide {
  grid-column: 1 / -1;
}

.type-reference-fields > .type-reference-field--note {
  border-left: 0.25rem solid var(--ec-color-accent, #007167);
  background: var(--ec-color-coda-bg, #F4FFFD);
}

.type-reference-fields dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.type-reference-fields dd {
  min-width: 0;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.font-download-link .ui-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.type-matrix-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.45fr);
  align-items: stretch;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.375rem;
  overflow: hidden;
}

.type-matrix-wrap {
  width: 100%;
  max-height: calc((var(--type-row-height) * 7) + 6px);
  min-height: 0;
  border-right: 1px solid var(--ec-color-rule, #c8c8c8);
  overflow-y: auto;
  overflow-x: hidden;
}

.type-matrix {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #111);
}

.type-matrix th {
  height: var(--type-row-height);
  padding: 0;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  vertical-align: stretch;
}

.type-matrix tr[data-active="true"] th {
  border-color: var(--ec-color-heading, #002E6D);
  background: var(--ec-color-selected, #E8ECEE);
}

.type-matrix tr[data-active="true"] .type-item-button {
  color: var(--ec-color-heading, #002E6D);
  box-shadow: inset 0.25rem 0 0 var(--ec-color-heading, #002E6D);
}

.type-matrix tr[data-active="true"] .type-item-button small {
  color: var(--ec-color-text, #323E48);
}

.type-item-button {
  display: grid;
  align-content: center;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
  min-height: var(--type-row-height);
  height: var(--type-row-height);
  padding: 0.38rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ec-color-text, #111);
  text-align: left;
  cursor: pointer;
}

.type-item-button strong,
.type-item-button small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.type-item-button strong {
  font-family: var(--ec-font-heading);
  font-size: 0.82rem;
  line-height: 1.25;
}

.type-item-button small {
  margin-top: 0.1rem;
  font-family: var(--ec-font-body);
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--ec-color-muted, #555);
}

.type-matrix-detail {
  min-width: 0;
}

.type-detail {
  min-width: 0;
  min-height: calc((var(--type-row-height) * 7) + 6px);
  height: 100%;
  overflow: hidden;
  border-top: 0.35rem solid var(--ec-color-heading, #002E6D);
  background: var(--ec-color-bg, #FFFFFF);
  color: var(--ec-color-text, #323E48);
}

.type-detail__body {
  min-width: 0;
  padding: 0.55rem;
}

.site-main .type-detail h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.2;
}

.type-detail-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin: 0;
}

.type-detail-fields > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.375rem;
  background: var(--ec-color-surface, #FAFBFC);
  color: var(--ec-color-text, #323E48);
}

.type-detail-fields dt {
  font-family: var(--ec-font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ec-color-muted, #5B6670);
}

.type-detail-fields dd {
  margin: 0;
  font-family: var(--ec-font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.type-detail-fields dd.type-detail-fields__mono {
  font-family: var(--ec-font-mono);
  font-variant-numeric: tabular-nums;
}

.type-weight-sample {
  display: inline-block;
  margin: 0 0.35rem 0.25rem 0;
  padding: 0.12rem 0.3rem;
  border: 1px solid var(--ec-color-rule, #e5e5e5);
  border-radius: 0.25rem;
  background: var(--ec-color-bg, #fff);
  color: var(--ec-color-text, #323E48);
}

@media (max-width: 760px) {
  .typography-workbench {
    --type-card-width: 20rem;
  }

  .type-reference-item summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .type-reference-item__meta {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .type-reference-fields {
    grid-template-columns: 1fr;
  }

  .type-matrix-layout {
    grid-template-columns: 1fr;
  }

  .type-matrix-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--ec-color-rule, #c8c8c8);
  }

  .type-detail-fields {
    grid-template-columns: 1fr;
  }
}

.typography-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

.typography-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  border-top: 2px solid var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ec-color-text, #323E48);
}

.typography-table th,
.typography-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
  vertical-align: top;
  text-align: left;
}

.typography-table thead th {
  font-family: var(--ec-font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ec-color-heading, #002E6D);
}

.typography-table tbody th {
  width: 13rem;
  font-family: var(--ec-font-heading);
  font-weight: 600;
  color: var(--ec-color-heading, #002E6D);
}

.typography-table-wrap--wide .typography-table {
  min-width: 48rem;
}

/* ── Section prose ────────────────────────────────────────────── */
/* docx `Normal` is justified (`w:jc="both"`). For this guide we follow
   that direction in the web rendition as requested: section prose spans
   the full main content column and is justified. */
.site-main p {
  margin: 0 0 1em;
  max-width: none;
  font-family: var(--ec-font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.site-main .palette-scroll-hint {
  margin: 0.45rem 0 0;
  font-family: var(--ec-font-mono, monospace);
  font-size: 0.65rem;
  line-height: 1.35;
  text-align: right;
  text-justify: auto;
  hyphens: manual;
}

.section-lede {
  font-size: 1.0625rem;
}

/* ── Portrait System matrix ──────────────────────────────────── */
/* Cards share row tracks via CSS subgrid so the property rows
   (Role, Use, Vibe) align to the same vertical position across every
   card in a matrix row, regardless of copy length. Row schema:
   1 = media, 2 = title, 3 = Role, 4 = Use, 5 = Vibe. */
.portrait-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0.875rem;
  margin: 0;
}

.portrait-matrix-panel {
  --tabs-panel-padding: 0.875rem;
  margin-top: 1rem;
}

.portrait-more-info {
  margin-top: var(--tabs-panel-padding);
}

.portrait-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  min-width: 0;
  border: 1px solid var(--ec-color-rule, #c8c8c8);
  border-radius: 0.5rem;
  background: var(--ec-color-bg, #FFFFFF);
  color: var(--ec-color-text, #323E48);
  overflow: hidden;
}

.portrait-card__media {
  grid-row: 1;
  display: grid;
  place-items: center;
  position: relative;
  min-width: 0;
  height: clamp(12rem, 18vw, 15rem);
  overflow: hidden;
  border-bottom: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--ec-color-surface, #FAFBFC);
}

.portrait-card__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  transition: transform 0.18s ease-out;
}

.portrait-card:hover .portrait-card__media img,
.portrait-card:focus-within .portrait-card__media img {
  transform: scale(1.08);
}

.site-main .portrait-card__download {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-radius: 0.375rem;
  background: var(--ec-color-bg, #FFFFFF);
  color: var(--ec-color-link, #5B6670);
  text-decoration: none;
  box-shadow: 0 0.25rem 0.75rem rgba(18, 24, 32, 0.18);
}

.site-main .portrait-card__download:hover,
.site-main .portrait-card__download:focus-visible {
  color: var(--ec-color-link-hover, #1D252C);
  background: var(--ec-color-surface, #FAFBFC);
}

.portrait-card__body {
  grid-row: 2 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem;
}

.site-main .portrait-card h3 {
  grid-row: 1;
  margin: 0;
  color: var(--ec-color-heading, #002E6D);
  text-align: left;
  font-size: 1rem;
  line-height: 1.25;
}

.portrait-card dl {
  grid-row: 2 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0.55rem;
  margin: 0;
}

.portrait-card dl > div {
  min-width: 0;
}

.portrait-card dt {
  color: var(--ec-color-muted, #5B6670);
  font-family: var(--ec-font-heading);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.portrait-card dd {
  margin: 0.12rem 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
}

@media (max-width: 58rem) {
  .portrait-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  .portrait-matrix {
    grid-template-columns: 1fr;
  }

  .portrait-card__media {
    height: clamp(15rem, 74vw, 22rem);
  }
}

/* ── Blockquote (DOCX Quote style parity) ───────────────────── */
/* `Brand Style Guide.docx` Quote style uses: left border,
   0.3in left/right indents, italic text, muted tone, and compact
   before/after spacing. This maps that intent to web while keeping
   markdown-like familiarity. */
.site-main blockquote,
.section-coda {
  margin: 0.85rem 0;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  border: 1px solid var(--ec-color-rule, #E8ECEE);
  border-left: 0.25rem solid var(--ec-color-accent, #007167);
  border-radius: 0.375rem;
  background: var(--ec-color-coda-bg, #F4FFFD);
  color: var(--ec-color-text, #323E48);
  font-style: normal;
}

.site-main blockquote p,
.section-coda p {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
  text-justify: auto;
  hyphens: manual;
}

.site-main blockquote p:last-child,
.section-coda p:last-child {
  margin-bottom: 0;
}

.section-coda strong {
  display: inline-block;
  color: var(--ec-color-heading, #002E6D);
  font-family: var(--ec-font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-coda--conversion {
  margin: 0.625rem 0.875rem 0;
  padding: 0.7rem 0.75rem;
}

.section-coda--conversion p {
  margin-bottom: 0.3rem;
}

.site-main h3 {
  margin: 2.25rem 0 0.75rem;
  font-family: var(--ec-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ec-color-heading, #002E6D);
}

.site-main .color-detail h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.site-main h4 {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--ec-font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}

.site-main ul {
  margin: 0 0 1em;
  padding-left: 1.25rem;
  max-width: none;
}

.site-main li {
  margin-bottom: 0.35em;
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ── Do / Don't columns ──────────────────────────────────────── */
/* Comparative pattern; columns stack on narrow viewports so each
   list keeps the parallel "do this / not that" reading order.

   The heading is sized into the WCAG 1.4.3 "large text" bracket
   (≥ 18.66 px bold) so even the dark-mode danger ink
   (`--ec-color-danger`, EC Accent 300 Bittersweet on the lifted
   dark stripe) qualifies under AA-large at 3 : 1. In light mode
   the danger ink (EC Accent 200 Smitten) actually clears AA-normal
   at 4.69 : 1 on `#FFFFFF`, so the larger heading is structural
   defence rather than the bare floor. The colored bottom-border
   provides the non-color redundancy cue required by WCAG 1.4.1
   ("color is not the only means of conveying information"). */
.do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1rem 0 2rem;
}

.do-dont__col h4 {
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid currentColor;
  font-size: 1.125rem; /* 18 px @ 16 px root */
  font-weight: 700;
  line-height: 1.25;
}

.do-dont__col--do h4 {
  color: var(--ec-color-success, #007167);
}

.do-dont__col--dont h4 {
  color: var(--ec-color-danger, #FF6B5C);
}

@media (max-width: 32rem) {
  .do-dont {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ── Trait list (Core Personality Traits) ────────────────────── */
/* `<dl>` with each `<dt>`/`<dd>` pair wrapped in a `<div>` so we can
   use grid columns (HTML5 explicitly permits grouping `<dt>`/`<dd>`
   pairs in a `<div>` inside `<dl>`). Hanging term column gives the
   trait names typographic weight without bullets. */
.trait-list {
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0;
  max-width: none;
  counter-reset: trait-row;
}

.trait-list > .trait {
  display: grid;
  grid-template-columns: 2.25rem minmax(9rem, 12rem) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ec-color-rule, #e5e5e5);
  counter-increment: trait-row;
}

.trait-list > .trait::before {
  content: counter(trait-row, decimal-leading-zero);
  font-family: var(--ec-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ec-color-muted, #555);
}

.trait-list dt {
  display: block;
  grid-column: 2;
  font-family: var(--ec-font-heading);
  font-weight: 600;
  color: var(--ec-color-heading, #002E6D);
  text-align: right;
}

.trait-list dd {
  display: block;
  grid-column: 3;
  margin: 0;
  font-family: var(--ec-font-body);
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 32rem) {
  .trait-list > .trait {
    grid-template-columns: 1.75rem 1fr;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 0;
  }

  .trait-list dt {
    grid-column: 2;
    text-align: left;
  }

  .trait-list dd {
    grid-column: 2;
  }
}

/* ── Footer ───────────────────────────────────────────────────── */
/* Mirrors the README footer: icon stacked over compact ownership and
   contact metadata, right-aligned. Icon height is intentionally smaller
   than the header lockup so the mark reads as a quiet sign-off rather
   than a second masthead. The 2 rem value keeps the cursor icon visually
   subordinate to the 6.75 rem-wide header lockup (≈ 30 % shorter), in
   the same spirit as the public site's secondary footer brand stamp. */
.site-footer {
  --ec-footer-icon-h: 2rem;
  border-top: 1px solid var(--ec-color-rule, #e5e5e5);
}

.site-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.site-footer__icon {
  height: var(--ec-footer-icon-h);
  width: auto;
}

.site-footer__contact {
  font-family: var(--ec-font-body, inherit);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ec-color-muted, #555);
}

.site-footer__contact a {
  color: inherit;
}

.site-footer__notice {
  margin: 0;
  color: var(--ec-color-muted, #555);
  font-family: var(--ec-font-body, inherit);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: right;
}

/* Site display controls row (light/dark toggle, etc.). Mirrors the
   public site's `.site-footer__actions` slot. */
.site-footer__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

@media (max-width: 48rem) {
  .site-footer__inner {
    align-items: flex-start;
  }

  .site-footer__notice {
    max-width: 100%;
    text-align: left;
  }
}