/* ==========================================================================
   FULLSTACK — Global stylesheet
   Layer order: tokens → reset → base → layout → components → header → footer
   Source of truth for tokens: reference-designs "1c Reusable Design System".
   ========================================================================== */

/* ==========================================================================
   00. FONTS
   Self-hosted, latin subset. Archivo ships as one variable file (400–900).
   Fallback metrics are overridden so the swap causes no layout shift.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks — these render before the webfont arrives and
   occupy near-identical space, so `font-display: swap` produces no CLS. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  ascent-override: 92.5%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 103.5%;
}

@font-face {
  font-family: 'Plex Mono Fallback';
  src: local('Menlo'), local('Consolas'), local('DejaVu Sans Mono');
  ascent-override: 104%;
  descent-override: 28%;
  line-gap-override: 0%;
  size-adjust: 96%;
}

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --fs-graphite: #0b0d0e;
  --fs-warm-white: #f5f5f2;
  --fs-lime: #b7ff3c;

  /* Accent is indirected so a single override re-themes the site,
     mirroring the `--acc` prop in the reference exports. */
  --fs-accent: var(--fs-lime);
  --fs-accent-bright: #d9ff4f;
  --fs-accent-ink: #3d6b00; /* accessible lime on LIGHT grounds — text-safe */
  --fs-accent-link: #5e8a14; /* link hover on light grounds */

  /* ---- Dark surfaces ---------------------------------------------------- */
  --fs-dark-bg: #0b0d0e;
  --fs-dark-bg-raised: #101418; /* card fill on dark */
  --fs-dark-grid: #15191c; /* background grid lines */
  --fs-dark-hairline: #1a1e21; /* header/footer/section rules */
  --fs-dark-divider: #22262a; /* 1px gaps between grid cells */
  --fs-dark-border: #262b2f; /* card border, rest state */
  --fs-dark-border-strong: #33383c; /* inputs, secondary buttons */

  /* ---- Light surfaces --------------------------------------------------- */
  --fs-light-bg: #f5f5f2;
  --fs-light-bg-alt: #edede8; /* alternating light section */
  --fs-light-bg-deep: #e8e8e3;
  --fs-light-border: #d6d6cf;
  --fs-light-border-soft: #ddddd6;

  /* ---- Text on dark ----------------------------------------------------- */
  --fs-text-on-dark: #f5f5f2;
  --fs-text-on-dark-2: #c9cdc9; /* nav links, footer links */
  --fs-text-on-dark-3: #b4b8b4; /* body copy */
  --fs-text-on-dark-muted: #8a8f8a; /* mono labels */
  --fs-text-on-dark-faint: #7a7f7a; /* legal, column eyebrows — 4.77:1 on #0b0d0e */

  /* ---- Text on light ---------------------------------------------------- */
  --fs-text-on-light: #0b0d0e;
  --fs-text-on-light-2: #3a3d3a; /* body copy */
  --fs-text-on-light-3: #555855; /* mono labels */
  --fs-text-on-light-display: #7f8478; /* second line of headings — 3.5:1 on #f5f5f2, 3.3:1 on the alt ground */
  --fs-text-on-light-faint: #6b6f6b;

  /* ---- Status ----------------------------------------------------------- */
  --fs-status-live: var(--fs-accent);
  --fs-status-live-ink: var(--fs-accent-ink);
  --fs-status-caution: #8a4444;
  --fs-status-error-border: #7a3038;
  --fs-status-error-text: #e89aa2;

  /* ---- Semantic aliases -------------------------------------------------
     Every component reads these, never the raw scale. A section flips theme
     by reassigning them (see .fs-section--light / --dark). Default = dark. */
  --fs-bg: var(--fs-dark-bg);
  --fs-bg-raised: var(--fs-dark-bg-raised);
  --fs-fg: var(--fs-text-on-dark);
  --fs-fg-body: var(--fs-text-on-dark-3);
  --fs-fg-muted: var(--fs-text-on-dark-muted);
  --fs-fg-faint: var(--fs-text-on-dark-faint);
  --fs-fg-display-2: var(--fs-text-on-dark-muted);
  --fs-border: var(--fs-dark-border);
  --fs-border-strong: var(--fs-dark-border-strong);
  --fs-hairline: var(--fs-dark-hairline);
  --fs-divider: var(--fs-dark-divider);
  --fs-accent-text: var(--fs-accent);

  /* ---- Typography ------------------------------------------------------- */
  --fs-font-sans: 'Archivo', 'Archivo Fallback', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fs-font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid display scale. Each clamp runs from the 390px mobile reference to
     the 1440px desktop reference; the vw term is tuned to meet at 1280px. */
  --fs-text-d1: clamp(3.25rem, 1.2rem + 7.3vw, 6rem); /* 52 → 96 */
  --fs-text-d2: clamp(2.375rem, 1.0rem + 4.9vw, 4.75rem); /* 38 → 76 */
  --fs-text-d3: clamp(1.875rem, 0.95rem + 3.3vw, 3.5rem); /* 30 → 56 */
  --fs-text-d4: clamp(1.75rem, 0.95rem + 2.9vw, 3.25rem); /* 28 → 52 */
  --fs-text-h1: clamp(1.75rem, 1.0rem + 2.7vw, 2.75rem); /* 28 → 44 */
  --fs-text-h2: clamp(1.5rem, 0.95rem + 2.0vw, 2.375rem); /* 24 → 38 */
  --fs-text-h2-sm: clamp(1.4375rem, 1.15rem + 1.0vw, 1.875rem); /* 23 → 30 */
  --fs-text-h3: clamp(1.25rem, 0.95rem + 1.1vw, 1.5rem); /* 20 → 24 */
  --fs-text-h4: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem); /* 17 → 19 */

  /* Oversized statistic numerals (credibility grid, story timeline). */
  --fs-text-metric: clamp(2.125rem, 0.6rem + 5.4vw, 4.75rem); /* 34 → 76 */

  --fs-text-lead: clamp(0.96875rem, 0.88rem + 0.37vw, 1.1875rem); /* 15.5 → 19 */
  --fs-text-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 → 17 */
  --fs-text-sm: 0.875rem; /* 14 */
  --fs-text-xs: 0.8125rem; /* 13 */

  --fs-text-mono-lg: 0.8125rem; /* 13 */
  --fs-text-mono: 0.6875rem; /* 11 */
  --fs-text-mono-sm: 0.625rem; /* 10 */

  --fs-weight-regular: 400;
  --fs-weight-medium: 500;
  --fs-weight-semibold: 600;
  --fs-weight-bold: 700;
  --fs-weight-extrabold: 800;
  --fs-weight-black: 900;

  --fs-leading-display: 0.95;
  --fs-leading-heading: 1.05;
  --fs-leading-snug: 1.3;
  --fs-leading-body: 1.65;

  --fs-tracking-display: -0.035em;
  --fs-tracking-heading: -0.025em;
  --fs-tracking-tight: -0.01em;
  --fs-tracking-mono: 0.16em;
  --fs-tracking-mono-wide: 0.2em;
  --fs-tracking-mono-eyebrow: 0.22em;

  /* ---- Space ------------------------------------------------------------ */
  --fs-space-1: 0.25rem;
  --fs-space-2: 0.5rem;
  --fs-space-3: 0.75rem;
  --fs-space-4: 1rem;
  --fs-space-5: 1.25rem;
  --fs-space-6: 1.5rem;
  --fs-space-8: 2rem;
  --fs-space-10: 2.5rem;
  --fs-space-12: 3rem;
  --fs-space-14: 3.5rem;
  --fs-space-16: 4rem;
  --fs-space-20: 5rem;

  /* Vertical rhythm: 110px desktop → 56px mobile (design system rule). */
  --fs-section-y: clamp(3.5rem, 1.4rem + 6.6vw, 6.875rem);
  /* 64px header→content gap, scaled down on small screens. */
  --fs-section-gap: clamp(2rem, 1.1rem + 2.8vw, 4rem);

  /* ---- Layout ----------------------------------------------------------- */
  --fs-container-max: 1360px;
  --fs-gutter: 2.5rem; /* 40px, stepped down at breakpoints */
  --fs-grid-gap: clamp(1.25rem, 0.6rem + 2vw, 2.5rem);
  --fs-header-height: 76px;
  --fs-header-height-compact: 60px;

  /* ---- Borders & elevation ---------------------------------------------
     Corners are 0 everywhere — the identity is rectilinear. */
  --fs-radius: 0;
  --fs-border-width: 1px;
  --fs-border-emphasis: 2px;
  --fs-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.4);
  --fs-shadow-light: 0 2px 16px rgba(11, 13, 14, 0.06);

  /* ---- Motion ----------------------------------------------------------- */
  --fs-ease: cubic-bezier(0.3, 0.7, 0.2, 1);
  --fs-duration-fast: 140ms;
  --fs-duration: 220ms;
  --fs-duration-slow: 380ms;

  --fs-z-header: 100;
  --fs-z-nav-panel: 110;
  --fs-z-skip-link: 200;
}

/* Gutter steps. Mobile references use a 20px gutter at 390px. */
@media (max-width: 1200px) {
  :root { --fs-gutter: 2rem; }
}
@media (max-width: 1023px) {
  :root { --fs-gutter: 1.5rem; --fs-header-height: 64px; }
}
@media (max-width: 600px) {
  :root { --fs-gutter: 1.25rem; }
}

/* ==========================================================================
   02. RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--fs-header-height) + 1rem);
}

body {
  margin: 0;
  background-color: var(--fs-dark-bg);
  color: var(--fs-text-on-dark);
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-body);
  font-weight: var(--fs-weight-regular);
  line-height: var(--fs-leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Prevents horizontal scroll from deliberate bleed elements. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/*
 * Wrapped in :where() so the rule carries zero specificity. Written as
 * `ul[class]` it scores 0,1,1 and silently beats every single-class margin a
 * component sets on a list — spacing then depends on whether some sibling
 * happens to mask it.
 */
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }

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

img, video {
  height: auto;
  /* Reserves space from width/height attributes — no layout shift. */
}

svg { fill: currentColor; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

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

hr {
  border: 0;
  border-top: var(--fs-border-width) solid var(--fs-hairline);
  margin: var(--fs-space-10) 0;
}

:where(:focus-visible) {
  outline: var(--fs-border-emphasis) solid var(--fs-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--fs-accent);
  color: var(--fs-graphite);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /*
     * Delays must be zeroed too. Collapsing only the duration still leaves a
     * staggered reveal invisible for the length of its delay — a 1.6s blank
     * for the element that waits longest — which is exactly the experience
     * reduced-motion users are asking to avoid.
     */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   03. BASE TYPOGRAPHY
   ========================================================================== */

.fs-display-1,
.fs-display-2,
.fs-display-3,
.fs-display-4 {
  font-weight: var(--fs-weight-black);
  line-height: var(--fs-leading-display);
  letter-spacing: var(--fs-tracking-display);
  text-wrap: balance;
}

.fs-display-1 { font-size: var(--fs-text-d1); }
.fs-display-2 { font-size: var(--fs-text-d2); }
.fs-display-3 {
  font-size: var(--fs-text-d3);
  line-height: var(--fs-leading-heading);
  letter-spacing: var(--fs-tracking-heading);
}
.fs-display-4 {
  font-size: var(--fs-text-d4);
  line-height: var(--fs-leading-heading);
  letter-spacing: var(--fs-tracking-heading);
}

.fs-heading-1,
.fs-heading-2,
.fs-heading-3 {
  font-weight: var(--fs-weight-black);
  line-height: var(--fs-leading-heading);
  letter-spacing: var(--fs-tracking-heading);
  text-wrap: balance;
}

.fs-heading-1 { font-size: var(--fs-text-h1); }
.fs-heading-2 { font-size: var(--fs-text-h2); }
.fs-heading-3 {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
}

.fs-heading-4 {
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
  line-height: var(--fs-leading-snug);
  letter-spacing: var(--fs-tracking-tight);
}

/* The recurring "second line drops to 40% ink" display treatment. */
.fs-display-mute { color: var(--fs-fg-display-2); }

.fs-lead {
  font-size: var(--fs-text-lead);
  font-weight: var(--fs-weight-medium);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
  max-width: 41.25rem; /* 660px — design system rule */
}

.fs-body {
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
  max-width: 41.25rem;
}

.fs-text-sm { font-size: var(--fs-text-sm); }
.fs-text-xs { font-size: var(--fs-text-xs); }

/* Mono label — the single most repeated element in the design. */
.fs-mono {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  font-weight: var(--fs-weight-medium);
  letter-spacing: var(--fs-tracking-mono);
  line-height: 1.4;
  color: var(--fs-fg-muted);
  text-transform: uppercase;
}

.fs-mono--lg {
  font-size: var(--fs-text-mono-lg);
  letter-spacing: var(--fs-tracking-mono-wide);
}

.fs-mono--sm {
  font-size: var(--fs-text-mono-sm);
  letter-spacing: 0.14em;
}

.fs-accent { color: var(--fs-accent-text); }

/* ==========================================================================
   04. LAYOUT — container, section, grid
   ========================================================================== */

.fs-container {
  width: 100%;
  max-width: calc(var(--fs-container-max) + var(--fs-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--fs-gutter);
}

.fs-container--narrow { max-width: calc(56.25rem + var(--fs-gutter) * 2); } /* 900 */
.fs-container--prose { max-width: calc(41.25rem + var(--fs-gutter) * 2); } /* 660 */
.fs-container--flush { padding-inline: 0; }

/* Section: owns vertical rhythm and its own colour theme. */
.fs-section {
  position: relative;
  background-color: var(--fs-bg);
  color: var(--fs-fg);
  padding-block: var(--fs-section-y);
}

.fs-section--flush { padding-block: 0; }
.fs-section--tight { padding-block: calc(var(--fs-section-y) * 0.55); }
.fs-section--ruled { border-bottom: var(--fs-border-width) solid var(--fs-hairline); }
.fs-section--ruled-top { border-top: var(--fs-border-width) solid var(--fs-hairline); }

/* Theme flips: reassign the semantic aliases, nothing else.
   Any element that paints the opposite ground has to appear in one of these
   lists. Painting a background without flipping the aliases leaves the
   section's colours on the new ground — which is how a product name ended up
   white on white and an accent mark ended up olive on near-black. */
.fs-theme-dark,
.fs-section--dark,
.fs-process__step--invert,
.fs-metric--invert,
.fs-product__visual,
.fs-work-card__visual {
  --fs-bg: var(--fs-dark-bg);
  --fs-bg-raised: var(--fs-dark-bg-raised);
  --fs-fg: var(--fs-text-on-dark);
  --fs-fg-body: var(--fs-text-on-dark-3);
  --fs-fg-muted: var(--fs-text-on-dark-muted);
  --fs-fg-faint: var(--fs-text-on-dark-faint);
  --fs-fg-display-2: var(--fs-text-on-dark-muted);
  --fs-border: var(--fs-dark-border);
  --fs-border-strong: var(--fs-dark-border-strong);
  --fs-hairline: var(--fs-dark-hairline);
  --fs-divider: var(--fs-dark-divider);
  --fs-accent-text: var(--fs-accent);
}

.fs-theme-light,
.fs-section--light,
.fs-section--light-alt,
.fs-work-card {
  --fs-bg: var(--fs-light-bg);
  --fs-bg-raised: var(--fs-light-bg);
  --fs-fg: var(--fs-text-on-light);
  --fs-fg-body: var(--fs-text-on-light-2);
  --fs-fg-muted: var(--fs-text-on-light-3);
  --fs-fg-faint: var(--fs-text-on-light-faint);
  --fs-fg-display-2: var(--fs-text-on-light-display);
  --fs-border: var(--fs-light-border);
  --fs-border-strong: var(--fs-light-border);
  --fs-hairline: var(--fs-light-border);
  --fs-divider: var(--fs-light-border);
  /* Lime is never used as text on light grounds — swap to the olive ink. */
  --fs-accent-text: var(--fs-accent-ink);
}

.fs-section--light-alt { --fs-bg: var(--fs-light-bg-alt); }

/* Background grid mark used behind hero and feature sections. */
.fs-grid-mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--fs-dark-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-dark-grid) 1px, transparent 1px);
  background-size: clamp(52px, 5.5vw, 80px) clamp(52px, 5.5vw, 80px);
}

.fs-section--light .fs-grid-mark,
.fs-section--light-alt .fs-grid-mark {
  background-image:
    linear-gradient(var(--fs-light-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-light-border) 1px, transparent 1px);
  opacity: 0.55;
}

/* Content sits above the grid mark. */
.fs-section > .fs-container { position: relative; }

/* --- Grid utilities ------------------------------------------------------
   12-column base. Card grids collapse 3→2→1 and 4→2→1 automatically. */

.fs-grid {
  display: grid;
  gap: var(--fs-grid-gap);
}

.fs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Asymmetric splits that recur in the references. */
.fs-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fs-grid--split-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.fs-grid--sidebar { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }

/* Hairline-separated cell grid: 1px gap filled by the divider colour. */
.fs-grid--ruled {
  gap: 1px;
  background-color: var(--fs-divider);
  border: var(--fs-border-width) solid var(--fs-divider);
}

.fs-grid--ruled > * {
  background-color: var(--fs-bg);
  min-width: 0;
}

.fs-grid > * { min-width: 0; }

@media (max-width: 1023px) {
  .fs-grid--4,
  .fs-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-grid--sidebar,
  .fs-grid--split-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .fs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-grid--split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .fs-grid--2,
  .fs-grid--3,
  .fs-grid--4,
  .fs-grid--5 { grid-template-columns: minmax(0, 1fr); }
  /* Metrics stay 2-up at 390px per the mobile references. */
  .fs-grid--keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Helpers ------------------------------------------------------------- */

.fs-stack { display: flex; flex-direction: column; }
.fs-stack--2 { gap: var(--fs-space-2); }
.fs-stack--3 { gap: var(--fs-space-3); }
.fs-stack--4 { gap: var(--fs-space-4); }
.fs-stack--6 { gap: var(--fs-space-6); }

.fs-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-3);
}

.fs-flow > * + * { margin-top: var(--fs-space-4); }

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

.fs-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--fs-z-skip-link);
  padding: var(--fs-space-3) var(--fs-space-5);
  background: var(--fs-accent);
  color: var(--fs-graphite);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-bold);
  transform: translateY(-120%);
  transition: transform var(--fs-duration-fast) var(--fs-ease);
}

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

/* ==========================================================================
   05. COMPONENTS
   ========================================================================== */

/* --- 5.1 Buttons ---------------------------------------------------------
   Interaction states are taken verbatim from spec block 1b:
     primary   → white fill on hover, arrow shifts +4px
     secondary → border lights to warm white
     text link → lime underline, fills upward on hover
   No radius, no scaling. */

.fs-btn {
  --fs-btn-bg: transparent;
  --fs-btn-fg: var(--fs-fg);
  --fs-btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  padding: 0.8125rem 1.375rem; /* 13px 22px */
  background-color: var(--fs-btn-bg);
  color: var(--fs-btn-fg);
  border: var(--fs-border-width) solid var(--fs-btn-border);
  border-radius: var(--fs-radius);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--fs-duration) var(--fs-ease),
    border-color var(--fs-duration) var(--fs-ease),
    color var(--fs-duration) var(--fs-ease);
}

/* The arrow is a separate span so it can translate independently. */
.fs-btn__arrow {
  display: inline-block;
  transition: transform var(--fs-duration) var(--fs-ease);
  will-change: transform;
}

.fs-btn:hover .fs-btn__arrow,
.fs-btn:focus-visible .fs-btn__arrow { transform: translateX(4px); }

.fs-btn--primary {
  --fs-btn-bg: var(--fs-accent);
  --fs-btn-fg: var(--fs-graphite);
  --fs-btn-border: var(--fs-accent);
}

.fs-btn--primary:hover,
.fs-btn--primary:focus-visible {
  --fs-btn-bg: var(--fs-warm-white);
  --fs-btn-border: var(--fs-warm-white);
}

.fs-btn--secondary {
  --fs-btn-border: var(--fs-border-strong);
  --fs-btn-fg: var(--fs-fg);
}

.fs-btn--secondary:hover,
.fs-btn--secondary:focus-visible { --fs-btn-border: var(--fs-fg); }

/* On light grounds the secondary outline uses the ink colour. */
.fs-theme-light .fs-btn--secondary,
.fs-section--light .fs-btn--secondary,
.fs-section--light-alt .fs-btn--secondary { --fs-btn-border: var(--fs-light-border); }

.fs-btn--inverse {
  --fs-btn-bg: var(--fs-graphite);
  --fs-btn-fg: var(--fs-warm-white);
  --fs-btn-border: var(--fs-graphite);
}

.fs-btn--inverse:hover,
.fs-btn--inverse:focus-visible {
  --fs-btn-bg: transparent;
  --fs-btn-fg: var(--fs-graphite);
}

/* Narrow viewports swap to the compact label from the mobile references.
   The long label stays in the accessibility tree; the short one is aria-hidden. */
.fs-btn__label--short { display: none; }

.fs-btn--sm { padding: 0.5625rem 0.875rem; font-size: var(--fs-text-xs); }
.fs-btn--lg { padding: 1rem 1.375rem; font-size: 0.9375rem; }
.fs-btn--block { display: flex; width: 100%; }

/* Text link with the lime underline that fills upward on hover. */
.fs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  padding-bottom: 3px;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-fg);
  border-bottom: var(--fs-border-emphasis) solid var(--fs-accent);
  background-image: linear-gradient(var(--fs-accent), var(--fs-accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0;
  transition:
    background-size var(--fs-duration) var(--fs-ease),
    border-color var(--fs-duration) var(--fs-ease);
}

.fs-link:hover,
.fs-link:focus-visible {
  background-size: 100% 40%;
  border-bottom-color: var(--fs-fg);
}

.fs-link:hover .fs-btn__arrow,
.fs-link:focus-visible .fs-btn__arrow { transform: translateX(4px); }

/* --- 5.2 Labels & status indicators -------------------------------------- */

.fs-label {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.fs-label--live {
  color: var(--fs-accent-text);
  padding: 0;
}

.fs-label--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}

.fs-label--outline {
  color: var(--fs-fg-muted);
  border: var(--fs-border-width) solid var(--fs-border-strong);
  padding: 3px 8px;
}

.fs-label--solid {
  background-color: var(--fs-warm-white);
  color: var(--fs-graphite);
  font-size: var(--fs-text-mono-sm);
  letter-spacing: 0.1em;
  padding: 4px 8px;
}

.fs-label--accent {
  background-color: var(--fs-accent);
  color: var(--fs-graphite);
  font-size: var(--fs-text-mono-sm);
  letter-spacing: 0.1em;
  padding: 4px 8px;
}

.fs-label--caution { color: var(--fs-status-caution); }

/* --- 5.3 Section header --------------------------------------------------
   "NN / SECTION NAME" eyebrow → display statement → supporting copy. */

.fs-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  margin-bottom: var(--fs-section-gap);
}

.fs-section-header__eyebrow {
  font-family: var(--fs-font-mono);
  font-size: 0.75rem; /* 12 */
  font-weight: var(--fs-weight-medium);
  letter-spacing: var(--fs-tracking-mono-wide);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-section-header__title {
  font-size: var(--fs-text-h2);
  font-weight: var(--fs-weight-black);
  line-height: 1.02;
  letter-spacing: var(--fs-tracking-heading);
  color: var(--fs-fg);
  text-wrap: balance;
}

.fs-section-header__text {
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
  max-width: 41.25rem;
}

/* 1:1 split variant — statement left, supporting copy right. */
.fs-section-header--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--fs-grid-gap);
}

.fs-section-header--split .fs-section-header__eyebrow { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .fs-section-header--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* --- 5.4 Card ------------------------------------------------------------
   Hover: translate -4px, border lights, shadow. Never scale. */

.fs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6);
  background-color: var(--fs-bg-raised);
  color: var(--fs-fg);
  border: var(--fs-border-width) solid var(--fs-border);
  border-radius: var(--fs-radius);
  transition:
    transform var(--fs-duration) var(--fs-ease),
    border-color var(--fs-duration) var(--fs-ease),
    box-shadow var(--fs-duration) var(--fs-ease);
}

.fs-card--interactive:hover,
.fs-card--interactive:focus-within {
  transform: translateY(-4px);
  border-color: var(--fs-fg);
  box-shadow: var(--fs-shadow-card);
}

.fs-section--light .fs-card--interactive:hover,
.fs-section--light-alt .fs-card--interactive:hover,
.fs-section--light .fs-card--interactive:focus-within,
.fs-section--light-alt .fs-card--interactive:focus-within {
  box-shadow: var(--fs-shadow-light);
  border-color: var(--fs-graphite);
}

.fs-card__title {
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-extrabold);
  line-height: var(--fs-leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--fs-tracking-tight);
}

.fs-card__text {
  font-size: var(--fs-text-sm);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

/* Stretched link: makes the whole card clickable without nesting anchors. */
.fs-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- 5.5 Form elements ---------------------------------------------------- */

.fs-field { display: flex; flex-direction: column; gap: var(--fs-space-2); }

.fs-field__label {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-input,
.fs-textarea,
.fs-select {
  width: 100%;
  padding: 0.8125rem 0.875rem;
  background-color: transparent;
  color: var(--fs-fg);
  border: var(--fs-border-width) solid var(--fs-border-strong);
  border-radius: var(--fs-radius);
  font-size: 0.84375rem;
  line-height: 1.4;
  transition: border-color var(--fs-duration) var(--fs-ease),
    box-shadow var(--fs-duration) var(--fs-ease);
}

.fs-input::placeholder,
.fs-textarea::placeholder { color: var(--fs-fg-muted); }

.fs-input:focus,
.fs-textarea:focus,
.fs-select:focus {
  outline: none;
  border-color: var(--fs-fg);
  box-shadow: 0 0 0 1px var(--fs-fg);
}

.fs-input[aria-invalid='true'],
.fs-textarea[aria-invalid='true'] {
  border-color: var(--fs-status-error-border);
  color: var(--fs-status-error-text);
}

.fs-field__error {
  font-size: var(--fs-text-xs);
  color: var(--fs-status-error-text);
}

.fs-textarea { min-height: 8rem; resize: vertical; }

/* --- 5.6 Logo ------------------------------------------------------------- */

.fs-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--fs-fg);
}

.fs-logo__mark { flex: none; }

.fs-logo__mark .fs-logo__mark-accent { fill: var(--fs-accent); }

.fs-logo__text {
  display: flex;
  font-size: 1.0625rem;
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1;
}

/* The wordmark's clipped F and K echo the mark's stepped bars. */
.fs-logo__text-start {
  clip-path: polygon(0 0, calc(100% - 0.16em) 0, 100% 0.16em, 100% 100%, 0 100%);
}

.fs-logo__text-end {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.16em), calc(100% - 0.16em) 100%, 0 100%);
}

.fs-logo:hover { color: var(--fs-fg); }

/* ==========================================================================
   06. SITE HEADER
   ========================================================================== */

.fs-header {
  position: sticky;
  top: 0;
  z-index: var(--fs-z-header);
  border-bottom: var(--fs-border-width) solid var(--fs-dark-hairline);
  color: var(--fs-text-on-dark);
  transition: height var(--fs-duration) var(--fs-ease);
}

/*
 * The translucent blurred ground is painted by a pseudo-element rather than
 * the header itself. `backdrop-filter` makes an element the containing block
 * for its position:fixed descendants — with it on .fs-header, the mobile
 * panel's `inset: <header-height> 0 0` resolved against the 76px bar and
 * collapsed the panel to zero height.
 */
.fs-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(11, 13, 14, 0.92);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .fs-header::before {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.fs-header__inner {
  display: flex;
  align-items: center;
  gap: var(--fs-space-10);
  height: var(--fs-header-height);
  transition: height var(--fs-duration) var(--fs-ease);
}

/* Flex items default to min-width:auto, which lets a long CTA push the whole
   document wider than the viewport. These keep the row inside its container. */
.fs-header__inner > * { min-width: 0; }
.fs-header__branding { flex: 0 1 auto; overflow: hidden; }
.fs-header__cta .fs-btn__label { white-space: nowrap; }

.fs-header__branding { margin-right: auto; }

/* Compact state, applied by JS once the page scrolls past the threshold. */
.fs-header.is-scrolled { --fs-header-height: var(--fs-header-height-compact); }
.fs-header.is-scrolled .fs-logo__text { font-size: 0.9375rem; }

/* --- Primary navigation --------------------------------------------------- */

.fs-nav {
  display: flex;
  align-items: center;
}

.fs-nav__list {
  display: flex;
  align-items: center;
  gap: var(--fs-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-nav__link {
  display: inline-block;
  padding-bottom: 2px;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-text-on-dark-2);
  border-bottom: var(--fs-border-emphasis) solid transparent;
  transition:
    color var(--fs-duration-fast) var(--fs-ease),
    border-color var(--fs-duration-fast) var(--fs-ease);
}

.fs-nav__link:hover,
.fs-nav__link:focus-visible,
.fs-nav__item.is-current > .fs-nav__link {
  color: var(--fs-text-on-dark);
  border-bottom-color: var(--fs-accent);
}

.fs-header__cta { flex: none; }

/* Nav tightens before it collapses so it still fits at 1024px. */
@media (max-width: 1200px) {
  .fs-header__inner { gap: var(--fs-space-6); }
  .fs-nav__list { gap: var(--fs-space-6); }
  .fs-nav__link { font-size: var(--fs-text-xs); }
}

/* --- Mobile nav toggle ----------------------------------------------------
   The two-bar asymmetric hamburger from the mobile references (22px / 14px),
   morphing into an X when open. */

.fs-nav-toggle {
  /* Shown only at the mobile breakpoint, and only when JS is running. */
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 44px; /* 44px touch target */
  padding: 0;
  flex: none;
}

.fs-nav-toggle__bar {
  display: block;
  height: 2px;
  width: 22px;
  background-color: var(--fs-text-on-dark);
  transition:
    width var(--fs-duration) var(--fs-ease),
    transform var(--fs-duration) var(--fs-ease),
    transform-origin var(--fs-duration) var(--fs-ease);
  transform-origin: left center;
}

/* The lower bar is short — the asymmetry echoes the logo's stepped bars.
   Targeted by adjacency, not :last-child: the button's last element is the
   visually hidden label. */
.fs-nav-toggle__bar + .fs-nav-toggle__bar { width: 14px; }

/*
 * Open state: both bars equalise and cross into an X. The bar centres sit
 * 7px apart (2px bar + 5px gap), so each travels 3.5px to meet in the middle,
 * and the origin moves to the centre — rotating both about their left edge
 * would splay them into a chevron instead of crossing them.
 */
.fs-nav-toggle[aria-expanded='true'] .fs-nav-toggle__bar {
  width: 24px;
  transform-origin: center;
  transform: translateY(3.5px) rotate(45deg);
}

.fs-nav-toggle[aria-expanded='true'] .fs-nav-toggle__bar + .fs-nav-toggle__bar {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Mobile nav panel ------------------------------------------------------ */

/* Without JS the panel is a plain, always-visible list under the header and
   the toggle is hidden. Every collapsing rule below is scoped to .fs-js, which
   the inline head script sets, so the no-JS path is the default. */

.fs-mobile-nav {
  background-color: var(--fs-dark-bg);
  color: var(--fs-text-on-dark);
  border-top: var(--fs-border-width) solid var(--fs-dark-hairline);
}

.fs-js .fs-mobile-nav {
  position: fixed;
  inset: var(--fs-header-height) 0 0;
  z-index: var(--fs-z-nav-panel);
  display: flex;
  flex-direction: column;
  border-top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Collapsed without display:none so the transition has something to run on.
     [hidden] is applied by JS as well, for assistive technology. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--fs-duration) var(--fs-ease),
    transform var(--fs-duration) var(--fs-ease),
    visibility 0s linear var(--fs-duration);
}

.fs-js .fs-mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.fs-mobile-nav[hidden] { display: none; }

.fs-mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-8);
  padding-block: var(--fs-space-8) var(--fs-space-12);
  flex: 1;
}

.fs-mobile-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--fs-border-width) solid var(--fs-dark-hairline);
}

.fs-mobile-nav__item {
  border-bottom: var(--fs-border-width) solid var(--fs-dark-hairline);
}

.fs-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  padding-block: var(--fs-space-4);
  font-size: 1.375rem;
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
  color: var(--fs-text-on-dark);
  transition: color var(--fs-duration-fast) var(--fs-ease);
}

.fs-mobile-nav__link::after {
  content: '→';
  color: var(--fs-text-on-dark-faint);
  transition:
    transform var(--fs-duration) var(--fs-ease),
    color var(--fs-duration-fast) var(--fs-ease);
}

.fs-mobile-nav__link:hover::after,
.fs-mobile-nav__link:focus-visible::after,
.fs-mobile-nav__item.is-current .fs-mobile-nav__link::after {
  color: var(--fs-accent);
  transform: translateX(4px);
}

.fs-mobile-nav__item.is-current .fs-mobile-nav__link { color: var(--fs-accent); }

.fs-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-4);
  margin-top: auto;
}

.fs-mobile-nav__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-4);
  color: var(--fs-text-on-dark-faint);
}

/* Locks background scroll while the panel is open. */
body.fs-nav-open { overflow: hidden; }

/* --- Header breakpoint ----------------------------------------------------
   Measured: logo + 5 links + CTA needs ~1003px including gutters. */

@media (max-width: 1023px) {
  .fs-nav { display: none; }
  .fs-js .fs-nav-toggle { display: flex; }
  .fs-header__inner { gap: var(--fs-space-4); }
  .fs-header__cta { font-size: var(--fs-text-xs); padding: 0.5625rem 0.8125rem; }
  .fs-logo__text { font-size: 0.9375rem; }
}

@media (min-width: 1024px) {
  /* The desktop nav is authoritative above this width; the panel never shows,
     with or without JS, so it can never be left open on resize. */
  .fs-mobile-nav { display: none; }
}

/* Below this width "Partner With Us" plus the logo and toggle no longer fit
   on one 390px row, so the header switches to the compact label. */
@media (max-width: 480px) {
  .fs-header__cta .fs-btn__label--long { display: none; }
  .fs-header__cta .fs-btn__label--short { display: inline; }
}

/* ==========================================================================
   07. SITE FOOTER
   ========================================================================== */

.fs-footer {
  background-color: var(--fs-dark-bg);
  color: var(--fs-text-on-dark);
  border-top: var(--fs-border-width) solid var(--fs-dark-hairline);
}

.fs-footer__inner {
  padding-block: clamp(2.25rem, 1.2rem + 3.2vw, 4.5rem) var(--fs-space-10);
}

.fs-footer__columns {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: var(--fs-space-10);
}

.fs-footer__brand { display: flex; flex-direction: column; gap: 0.875rem; }

.fs-footer__tagline {
  font-size: var(--fs-text-sm);
  color: var(--fs-text-on-dark-muted);
}

.fs-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: var(--fs-text-sm);
  color: var(--fs-text-on-dark-2);
}

.fs-footer__col-title {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  font-weight: var(--fs-weight-medium);
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-text-on-dark-faint);
  margin-bottom: var(--fs-space-1);
}

.fs-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-footer__link {
  color: var(--fs-text-on-dark-2);
  transition: color var(--fs-duration-fast) var(--fs-ease);
}

.fs-footer__link:hover,
.fs-footer__link:focus-visible { color: var(--fs-accent); }

.fs-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-6);
  flex-wrap: wrap;
  margin-top: var(--fs-space-14);
  padding-top: var(--fs-space-6);
  border-top: var(--fs-border-width) solid var(--fs-dark-hairline);
  font-size: 0.78125rem; /* 12.5 */
  color: var(--fs-text-on-dark-faint);
}

.fs-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--fs-space-6);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1023px) {
  .fs-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fs-space-8);
  }
  .fs-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  /* Mobile reference collapses to two columns with stacked groups. */
  .fs-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fs-space-3);
    margin-top: var(--fs-space-8);
    font-size: var(--fs-text-mono);
  }
  .fs-footer__legal { gap: var(--fs-space-4); }
}

/* ==========================================================================
   08. WORDPRESS / GUTENBERG BRIDGE
   ========================================================================== */

.alignwide,
.alignfull { margin-inline: auto; }

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.aligncenter { margin-inline: auto; text-align: center; }
.alignleft { float: left; margin: 0 var(--fs-space-6) var(--fs-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--fs-space-4) var(--fs-space-6); }

.wp-caption-text,
.wp-element-caption {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.1em;
  color: var(--fs-fg-muted);
  margin-top: var(--fs-space-3);
}

.fs-content > * + * { margin-top: var(--fs-space-6); }

.fs-content h2 {
  font-size: var(--fs-text-h2);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-heading);
  line-height: var(--fs-leading-heading);
  margin-top: var(--fs-space-12);
}

.fs-content h3 {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
  margin-top: var(--fs-space-10);
}

.fs-content p,
.fs-content li {
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

.fs-content ul,
.fs-content ol { padding-left: 1.25rem; }
.fs-content ul { list-style: square; }
.fs-content li + li { margin-top: var(--fs-space-2); }

.fs-content a:not([class]) {
  color: var(--fs-fg);
  border-bottom: var(--fs-border-width) solid var(--fs-accent);
  transition: color var(--fs-duration-fast) var(--fs-ease);
}

.fs-content a:not([class]):hover { color: var(--fs-accent-text); }

.fs-content blockquote {
  border-left: var(--fs-border-emphasis) solid var(--fs-accent);
  padding-left: var(--fs-space-6);
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-medium);
  color: var(--fs-fg);
}

.fs-content code,
.fs-content pre {
  font-family: var(--fs-font-mono);
  font-size: 0.84375rem;
}

.fs-content pre {
  padding: var(--fs-space-6);
  background-color: var(--fs-bg-raised);
  border: var(--fs-border-width) solid var(--fs-border);
  overflow-x: auto;
}

/* ==========================================================================
   09. SPACING UTILITIES
   A deliberately small set — templates use these instead of inline styles.
   ========================================================================== */

.fs-mt-4 { margin-top: var(--fs-space-4); }
.fs-mt-6 { margin-top: var(--fs-space-6); }
.fs-mt-8 { margin-top: var(--fs-space-8); }
.fs-mt-gap { margin-top: var(--fs-section-gap); }

.fs-mb-4 { margin-bottom: var(--fs-space-4); }
.fs-mb-gap { margin-bottom: var(--fs-section-gap); }

/* Pagination inherits the link treatment rather than shipping its own. */
.fs-main .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-4);
  align-items: center;
  margin-top: var(--fs-section-gap);
  padding-top: var(--fs-space-6);
  border-top: var(--fs-border-width) solid var(--fs-hairline);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-main .nav-links .current { color: var(--fs-accent-text); }
.fs-main .nav-links a:hover { color: var(--fs-fg); }