/* ---------- Outfit (self-hosted) ---------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/outfit-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: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f5f1ea;
  --bg-soft: #ede8df;
  --bg-card: #fbf8f2;
  --fg: #0e0d0a;
  --fg-soft: #1c1a16;
  --muted: #6e6860;
  --muted-soft: #6a635a;
  --muted-inv: #9c958a; /* muted label on the theme's inverted surface */
  --rule: #d9d2c2;
  --rule-strong: #2a2722;
  --accent: #b23f19; /* fallout orange, AA on paper */
  --chip-fg: #5e5952; /* text on a --rule-filled chip, AA on --rule */

  /* functional status set — severity badges, admonition stripes */
  --status-slate: #5a636d;
  --status-moss: #466b41;
  --status-amber: #86590f;
  --status-brick: #a83b2a;

  /* tints kept low so badge/callout labels stay AA on their own fill */
  --tint-badge: 6%;
  --tint-callout: 3%;

  /* focus ring; inverted surfaces override it below */
  --focus-ring: var(--fg);

  /* Type ramp. Every font-size in this sheet resolves to one of these steps;
     the only exceptions are em-relative sizes (arrows, inline code) which
     scale with their context, and .team-photo-fallback, whose glyph is sized
     to its avatar circle rather than to the text ramp. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-3xs: 0.65rem;   /* micro labels: table heads, stacked-row labels, badges */
  --fs-2xs: 0.72rem;   /* label layer: kickers, tile numbers, tags, mono labels */
  --fs-xs: 0.8rem;     /* metadata: dates, pills, footnotes */
  --fs-sm: 0.875rem;   /* dense UI: tables, code, secondary rows, nav */
  --fs-md: 0.95rem;    /* supporting copy */
  --fs-lg: 1rem;       /* body */
  --fs-xl: 1.1rem;     /* card and tile titles */
  --fs-2xl: 1.35rem;   /* prose h2, blog card titles */

  --fs-lede: clamp(1.05rem, 1.7vw, 1.2rem);      /* ledes, chapo, contact CTA */
  --fs-subhead: clamp(1.3rem, 2.6vw, 1.7rem);    /* group titles, team names */
  --fs-heading: clamp(1.5rem, 2.6vw, 2rem);      /* section h2 */
  --fs-post: clamp(1.85rem, 4.2vw, 2.6rem);      /* post title, narrow column */
  --fs-title: clamp(2rem, 5vw, 3rem);            /* page heroes */
  --fs-display: clamp(2.2rem, 4.6vw, 3.4rem);    /* home hero, type specimen */

  --max-w: 1120px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --r-md: 12px;
  --r-lg: 18px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Inverted surfaces (The Inversion Rule) paint ink where the page paints paper,
   so the ring has to flip with them or it lands invisible on its own colour. */
.panel,
.schema-root,
.post-body pre {
  --focus-ring: var(--bg);
}

.footer {
  --focus-ring: var(--bg);
}

html.dark .footer {
  --focus-ring: var(--fg); /* dark footer sits on --bg-soft, not inverted */
}

html.dark .post-body pre {
  --focus-ring: var(--fg); /* dark code blocks sit on their own ink, not inverted */
}

/* Skip link — visually hidden until focused (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 200;
  padding: 0.7rem 1rem;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--fg);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- Nav ---------- */
.nav {
  position: relative; /* anchors the mobile nav panel */
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-logo {
  border-radius: 6px;
  flex-shrink: 0;
}

.brand-name {
  font-size: var(--fs-lg);
}

.nav-contact {
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.nav-contact:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.nav-links a {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* Hamburger — hidden until the pre-paint script confirms JS by stamping
   html.js-nav, so a reader without JS keeps the links laid out inline. */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 160ms ease;
}

.nav-toggle:hover {
  border-color: var(--fg);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 200ms ease, background 160ms ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -5px;
}

.nav-toggle-bars::after {
  top: 5px;
}

/* Open: the two outer bars close into a cross, the middle one drops out. */
.nav.is-open .nav-toggle-bars {
  background: transparent;
}

.nav.is-open .nav-toggle-bars::before {
  transform: translateY(5px) rotate(45deg);
}

.nav.is-open .nav-toggle-bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- Layout ---------- */
main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.hero-title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.hero-lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.6;
}

.hero-proof {
  font-size: var(--fs-md);
  color: var(--muted);
  margin-top: 0.25rem;
}

.hero-proof a {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.hero-proof a:hover {
  border-bottom-color: var(--accent);
}

.hero-proof-arrow {
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 200ms ease;
}

.hero-proof a:hover .hero-proof-arrow {
  transform: translateX(3px);
}

/* ---------- Hero schema (umbrella) ---------- */
.hero-schema {
  margin: 0;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.schema-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: 10px;
}

.schema-root .schema-kicker {
  font-size: var(--fs-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-inv);
  font-weight: 600;
}

.schema-root .schema-name {
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.005em;
}

.schema-arrow {
  color: var(--muted-soft);
  font-size: var(--fs-md);
  line-height: 1;
}

.schema-branches {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

.schema-branches li {
  border-bottom: 1px solid var(--rule);
}

.schema-branches li:last-child {
  border-bottom: none;
}

.schema-branches a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: inherit;
  transition: background 160ms ease, color 160ms ease;
}

.schema-branches a:hover {
  background: var(--bg-soft);
  color: var(--fg);
}

.schema-arrow-link {
  margin-left: auto;
  color: var(--muted-soft);
  font-size: var(--fs-md);
  transition: transform 200ms ease, color 160ms ease;
}

.schema-branches a:hover .schema-arrow-link {
  transform: translateX(3px);
  color: var(--fg);
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(2.5rem, 4vw, 3.75rem) 0;
}

.section + .section,
.prev + .section {
  border-top: 1px solid var(--rule);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  max-width: 60ch;
}

.kicker {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
}

.section-head h2 {
  font-size: var(--fs-heading);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.section-head p {
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Previously-at strip ---------- */
.prev {
  border-top: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.prev-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.prev-logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-width: 160px;
  text-align: center;
}

.prev-logos img {
  max-height: 34px;
  max-width: 150px;
  width: auto;
  height: auto;
  opacity: 0.62;
  transition: opacity 200ms ease;
}

.prev-logos li:hover img {
  opacity: 0.9;
}

.prev-name {
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- Services grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.tile {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color 160ms ease, transform 200ms ease, box-shadow 220ms ease;
}

.tile:hover {
  border-color: var(--fg);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -22px rgba(14, 13, 10, 0.35);
}

.tile h3 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.018em;
}

.tile p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- Research list (home) ---------- */
.research-list {
  border-top: 1px solid var(--rule);
}

.research-list li {
  border-bottom: 1px solid var(--rule);
}

.research-list a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.9rem 0.2rem;
  transition: background 160ms ease;
}

.research-list a:hover {
  background: var(--bg-soft);
}

.research-date {
  flex: 0 0 6.5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.research-title {
  font-weight: 500;
  letter-spacing: -0.005em;
}

.research-item-arrow {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--muted-soft);
  transition: transform 200ms ease, color 160ms ease;
}

.research-list a:hover .research-item-arrow {
  transform: translateX(3px);
  color: var(--fg);
}

.research-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-top: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.research-foot a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  transition: color 160ms ease;
}

.research-foot a:hover {
  color: var(--fg);
}

.research-cve {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
  letter-spacing: 0.01em;
}

.research-foot-arrow {
  transition: transform 200ms ease;
}

.research-foot a:hover .research-foot-arrow {
  transform: translateX(3px);
}

/* ---------- Products (quiet) & track-record panel ---------- */
.products-note {
  margin-top: 0.7rem;
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
}

.section-track .panel h2 {
  max-width: 30ch;
  text-wrap: balance;
}

.section-products {
  padding: clamp(2rem, 3vw, 3rem) 0;
}

.panel {
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 100%;
}

.panel .kicker-light {
  color: var(--muted-inv);
}

.panel h2 {
  font-size: var(--fs-heading);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 22ch;
}

.panel p {
  font-size: var(--fs-lg);
  /* softened against the panel's own ink; follows the theme instead of a
     hard-coded paper value that needed a dark-mode twin */
  color: color-mix(in srgb, currentColor 78%, transparent);
  line-height: 1.6;
  max-width: 60ch;
}

/* ---------- Contact ---------- */
.section-contact {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.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;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
}

.contact-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted-soft);
  cursor: pointer;
  transition: color 160ms ease;
}

.contact-copy:hover,
.contact-copy:focus-visible {
  color: var(--fg);
}

.contact-copy svg {
  width: 15px;
  height: 15px;
}

.contact-copy-tick {
  display: none;
  color: var(--accent);
}

.contact-copy.is-copied {
  color: var(--accent);
}

.contact-copy.is-copied .contact-copy-clip {
  display: none;
}

.contact-copy.is-copied .contact-copy-tick {
  display: block;
}

.contact-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1.9;
}

/* Links are colour-inherit site-wide, so a link in this note needs the rule
   underline to read as one at all. */
.contact-note a:not([class]) {
  color: var(--fg-soft);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact-note a:not([class]):hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.contact-pgp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.contact-pgp:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: var(--fs-lede);
  font-weight: 500;
  letter-spacing: -0.005em;
  align-self: flex-start;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.contact-cta:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.contact-arrow {
  font-size: 1.1em;
  transition: transform 200ms ease;
}

.contact-cta:hover .contact-arrow {
  transform: translateX(3px);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--rule-strong);
  background: var(--fg);
  color: var(--bg);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) clamp(1.5rem, 3vw, 2rem);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.footer-brand .brand-logo {
  margin-top: 2px;
}

.footer-name {
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.005em;
  color: var(--bg);
  margin-bottom: 0.25rem;
}

.footer-meta {
  font-size: var(--fs-sm);
  color: var(--muted-inv);
  line-height: 1.55;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--muted-inv);
}

.footer-nav a {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.footer-nav a:hover {
  color: var(--bg);
  border-bottom-color: var(--bg);
}

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem var(--pad-x) 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  color: var(--muted-inv);
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* ---------- Legal pages ---------- */
.legal-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.legal-hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
}

.legal-hero .kicker {
  display: inline-block;
  margin-bottom: 0.85rem;
}

.legal-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

.legal-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* These pages are read looking for one clause, not front to back, so the
   numbered sections get an index. A blog post already had one; a 14-clause
   legal notice needed it more. */
.legal-toc {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg-card);
}

.legal-toc-title {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-soft);
  margin-bottom: 0.6rem;
}

.legal-toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.35rem 1.5rem;
}

.legal-toc-list a {
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.legal-toc-list a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.legal-body {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.prose-legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--fg);
}

.prose-legal h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 2rem;
  margin-bottom: 0.1rem;
  scroll-margin-top: 1.5rem; /* jumped to from .legal-toc */
}

.prose-legal h2:first-child {
  margin-top: 0;
}

.prose-legal a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  transition: border-color 160ms ease;
}

.prose-legal a:hover {
  border-bottom-color: var(--fg);
}

.prose-legal strong {
  font-weight: 600;
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.legal-list li::marker {
  color: var(--muted-soft);
}

/* ---------- Blog ---------- */
.blog-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Category filter — client-side, revealed by JS (hidden without it, so the
   no-JS reader still gets every card). Pills follow the tag idiom; the active
   one inverts (ink on paper) per the Inversion rule. */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.blog-filter[hidden] {
  display: none;
}

.blog-filter-btn {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted-soft);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.blog-filter-btn:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.blog-filter-btn.is-active {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.blog-list {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.blog-list-empty {
  font-size: var(--fs-md);
  color: var(--muted);
  padding: 2rem 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 0.5rem;
  color: inherit;
  transition: background-color 200ms ease;
}

/* rules between cards only — the hero bounds the top, the footer the bottom */
.blog-card + .blog-card {
  border-top: 1px solid var(--rule);
}

/* Filtering hides cards with [hidden]; .blog-card's own display:flex would
   otherwise beat the UA rule. .is-lead is set by JS on the first visible card
   so a filtered list never shows a stray top rule. */
.blog-card[hidden] {
  display: none;
}

.blog-card.is-lead {
  border-top: 0;
}

.blog-card:hover {
  background: var(--bg-soft);
}

.blog-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.blog-card-cat {
  color: var(--muted-soft);
}

.blog-card-date {
  font-size: var(--fs-2xs);
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.blog-card-title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.blog-card-desc {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.55;
  max-width: 64ch;
  margin-bottom: 0.2rem;
}

.blog-card-foot {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--muted-soft);
}

.blog-card-author {
  color: var(--muted);
  font-weight: 500;
}

.blog-card-sep {
  opacity: 0.5;
}

.blog-card-read {
  font-variant-numeric: tabular-nums;
}

.blog-card-tags {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: 0.15rem;
}

.blog-card-tag {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  color: var(--chip-fg);
  background: var(--rule);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.blog-card-arrow {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--muted-soft);
  transition: transform 200ms ease, color 160ms ease;
}

.blog-card:hover .blog-card-arrow {
  transform: translateX(3px);
  color: var(--fg);
}

/* ---------- Single post ---------- */
.post-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.post-hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}

.post-hero .kicker {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: var(--muted-soft);
}

.post-title {
  font-size: var(--fs-post);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.post-byline {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
}

.post-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  filter: grayscale(0.2) saturate(0.92);
}

.post-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted-soft);
  background: linear-gradient(150deg, var(--bg-soft) 0%, var(--rule) 100%);
}

.post-byline-text {
  min-width: 0;
}

.post-author {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.post-meta {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.post-meta .post-meta-sep {
  margin: 0 0.55rem;
  color: var(--muted-soft);
}

.post-author-link {
  color: inherit;
  transition: color 160ms ease;
}

.post-author-link:hover {
  color: var(--accent);
}

.post-author-sep {
  margin: 0 0.5rem;
  font-weight: 400;
  color: var(--muted-soft);
}

.post-author-role {
  font-weight: 400;
  color: var(--muted);
}

.post-avatar-link {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 50%;
}

.post-avatar-link:hover .post-avatar {
  border-color: var(--fg);
}

/* Chapô / dek */
.post-dek {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.003em;
}

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 80ms linear;
  z-index: 100;
}

/* Table of contents */
.post-toc {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg-card);
}

.post-toc-title {
  margin: 0 0 0.6rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.post-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.post-toc-list li {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.post-toc-list li::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted-soft);
}

.post-toc-list a {
  color: var(--fg-soft);
  font-size: var(--fs-md);
  line-height: 1.4;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.post-toc-list a:hover {
  color: var(--fg);
  border-bottom-color: var(--rule);
}

.post-body {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--fg);
}

.post-body > * + * {
  margin-top: 1rem;
}

.post-body h2 {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
  scroll-margin-top: 1.5rem;
}

.post-body h3 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
  scroll-margin-top: 1.5rem;
}

.post-body p {
  font-size: var(--fs-lg);
  line-height: 1.75;
}

.post-body a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  transition: border-color 160ms ease;
}

.post-body a:hover {
  border-bottom-color: var(--fg);
}

.post-body strong {
  font-weight: 600;
}

.post-body em {
  font-style: italic;
}

.post-body ul,
.post-body ol {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.post-body ul {
  list-style: disc;
}

.post-body ol {
  list-style: decimal;
}

.post-body li::marker {
  color: var(--muted-soft);
}

.post-body code {
  padding: 0.12rem 0.4rem;
  background: var(--rule);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  /* hashes and symbol names offer no break opportunity and would otherwise
     push the whole page wider than the viewport */
  overflow-wrap: anywhere;
}

.post-body pre {
  position: relative;
  background: var(--fg);
  color: var(--bg);
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-top: 1.25rem;
}

.post-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal; /* pre scrolls horizontally rather than wrapping */
}

.code-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(245, 241, 234, 0.55);
  background: transparent;
  border: 1px solid rgba(245, 241, 234, 0.18);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.code-copy svg {
  display: block;
}

.post-body pre:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

.code-copy:hover {
  color: rgba(245, 241, 234, 0.95);
  border-color: rgba(245, 241, 234, 0.42);
  background: rgba(245, 241, 234, 0.06);
}

.code-copy.copied {
  color: rgba(245, 241, 234, 0.95);
  border-color: rgba(245, 241, 234, 0.42);
  opacity: 1;
}

.post-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--muted);
}

.post-body blockquote p {
  margin: 0;
}

/* ---------- Callouts (note / tip / warning / danger) ---------- */
.post-body .admonition {
  --callout-stripe: var(--muted-soft);

  margin: 1.5rem 0;
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--callout-stripe) var(--tint-callout), var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--callout-stripe) 30%, var(--rule));
  border-radius: var(--r-md);
  color: var(--fg-soft);
  font-size: var(--fs-md);
  line-height: 1.7;
}

.post-body .admonition > * + * {
  margin-top: 0.5rem;
}

.post-body .admonition p {
  margin: 0;
}

.post-body .admonition-title {
  margin: 0 0 0.15rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--callout-stripe);
}

.post-body .admonition.note    { --callout-stripe: var(--status-slate); }
.post-body .admonition.tip     { --callout-stripe: var(--status-moss); }
.post-body .admonition.warning { --callout-stripe: var(--accent); }
.post-body .admonition.danger  { --callout-stripe: var(--status-brick); }

.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 1.5rem auto;
}

.post-body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r-md);
  margin: 1.75rem 0;
  background: #14110d; /* Containment Dark letterbox; the system has no pure black */
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: 1.25rem 0;
}

.post-body th,
.post-body td {
  text-align: center;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.post-body th {
  font-weight: 600;
  color: var(--fg);
}

/* Post CTA — a post ends on the offer it belongs to, not on a link back to the
   index. The hairline that used to open .post-footer now opens this block. */
.post-cta {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-cta-line {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 56ch;
}

.post-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.35rem;
}

.post-cta-service {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.post-cta-service:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.post-cta-arrow {
  transition: transform 200ms ease;
}

.post-cta-service:hover .post-cta-arrow {
  transform: translateX(3px);
}

.post-footer {
  padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.post-tag {
  border: 1px solid var(--rule);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.back-to-blog {
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 160ms ease, border-color 160ms ease;
}

.back-to-blog:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* ---------- Team ---------- */
.team-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.team-hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}

.team-hero .kicker {
  margin-bottom: 0.5rem;
}

.team-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.team-lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.65;
}

.team-meta {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 0.4rem;
}

.team-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.75rem, 5vw, 3.75rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.team-empty {
  font-size: var(--fs-md);
  color: var(--muted);
  padding: 2rem 0;
  text-align: center;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 420px;
}

.team-photo {
  position: relative;
  width: clamp(124px, 18vw, 156px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  container-type: inline-size;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  margin-bottom: 1.1rem;
  transition: border-color 200ms ease, box-shadow 240ms ease;
}

.team-member:hover .team-photo {
  border-color: var(--fg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule);
}

.team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.2) saturate(0.92);
  transition: filter 280ms ease, transform 380ms ease;
}

.team-member:hover .team-photo img {
  filter: none;
  transform: scale(1.04);
}

.team-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--bg-soft) 0%, var(--rule) 100%);
  color: var(--muted-soft);
  font-size: 26cqw; /* initials track the avatar circle, not the text ramp */
  font-weight: 600;
  letter-spacing: -0.02em;
  user-select: none;
}

.team-role {
  font-size: var(--fs-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}

.team-name {
  font-size: var(--fs-subhead);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.team-profession {
  margin-top: 0.4rem;
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.55;
  max-width: 38ch;
}

/* Credential: a compact degree line under the profession */
.team-credential {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

.team-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.team-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.005em;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.team-link:hover {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.team-link-arrow {
  transition: transform 200ms ease;
  font-size: 0.95em;
}

.team-link:hover .team-link-arrow {
  transform: translateX(2px);
}

.team-divider {
  width: 32px;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

.team-talks {
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.team-talks-kicker {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  margin: 0 0 1rem;
  text-align: center;
}

.talk-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.talk-row {
  display: grid;
  grid-template-columns: 5.25em 5em minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: baseline;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.talk-date {
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.talk-role {
  color: var(--muted-soft);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.talk-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.talk-title {
  color: var(--fg);
  font-weight: 500;
  align-self: flex-start;
}

a.talk-title {
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

a.talk-title:hover {
  border-bottom-color: var(--fg);
}

.talk-arrow {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.85em;
  color: var(--muted);
  transition: transform 200ms ease;
}

a.talk-title:hover .talk-arrow {
  transform: translateX(2px);
  color: var(--fg);
}

.talk-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* ---------- Advisories ---------- */
.adv-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.adv-hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}

.adv-hero .kicker {
  margin-bottom: 0.5rem;
}

.adv-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.adv-lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.65;
}

.adv-meta {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 0.4rem;
}

.adv-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.adv-empty {
  font-size: var(--fs-md);
  color: var(--muted);
  padding: 2rem 0;
  text-align: center;
}

/* ---- groups ---- */
.adv-group-head {
  margin-bottom: 1rem;
}

.adv-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: var(--fs-subhead);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.adv-group-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--chip-fg);
  background: var(--rule);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-variant-numeric: tabular-nums;
}

.adv-group-blurb {
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* ---- table ---- */
.adv-table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
}

.adv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.adv-table thead th {
  text-align: left;
  font-size: var(--fs-3xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.adv-table thead th { padding: 0.7rem 0.75rem; }

.adv-table tbody td {
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--fg-soft);
}

.adv-table tbody tr:last-child td {
  border-bottom: none;
}

.adv-row {
  transition: background 160ms ease;
}

.adv-row:hover {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}

.adv-table { table-layout: fixed; }

.adv-col-sev    { width: 5.5rem; }
.adv-col-class  { width: 8rem; }
.adv-col-credit { width: 7rem; }
.adv-col-status { width: 9rem; }
.adv-col-date   { width: 6.5rem; }

.adv-c-sev,
.adv-c-credit,
.adv-c-status,
.adv-c-date { white-space: nowrap; }

.adv-c-vuln { overflow-wrap: anywhere; }

.adv-c-date {
  font-variant-numeric: tabular-nums;
  color: var(--muted-soft);
}

.adv-row-title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
}

a.adv-row-title {
  transition: color 160ms ease;
}

a.adv-row-title:hover {
  color: var(--accent);
}

.adv-row-arrow {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.85em;
  color: var(--muted);
  transition: transform 200ms ease, color 160ms ease;
}

a.adv-row-title:hover .adv-row-arrow {
  transform: translate(2px, -2px);
  color: var(--accent);
}

.adv-row-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.adv-c-credit a {
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.adv-c-credit a:hover {
  border-bottom-color: var(--fg);
}

.adv-dash { color: var(--muted-soft); }

/* ---- embargoed rows ---- */
.adv-row-embargo td { color: var(--muted); }

.adv-embargo {
  font-style: italic;
  font-weight: 500;
  color: var(--muted);
}

.adv-lock {
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.7;
}

.adv-sev-muted { opacity: 0.62; }

.adv-status-embargo {
  --adv-badge: var(--status-slate);
  border-style: dashed;
}

/* ---- badges (shared) ---- */
.adv-status,
.adv-sev {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--adv-badge, var(--rule));
  color: var(--adv-badge, var(--muted));
  background: color-mix(in srgb, var(--adv-badge, var(--rule)) var(--tint-badge), transparent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.adv-status-assigned { --adv-badge: var(--status-moss); font-family: var(--font-mono); letter-spacing: 0; }
.adv-status-pending  { --adv-badge: var(--status-amber); }
.adv-status-none     { --adv-badge: var(--status-slate); }

.adv-sev-low      { --adv-badge: var(--status-slate); }
.adv-sev-medium   { --adv-badge: var(--status-amber); }
.adv-sev-high     { --adv-badge: var(--accent); }
.adv-sev-critical { --adv-badge: var(--status-brick); }

.adv-class-name { display: block; }

.adv-cwe {
  display: inline-block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--chip-fg);
  background: var(--rule);
  padding: 0.05em 0.35em;
  border-radius: 6px;
  white-space: nowrap;
}

/* ---- responsive: stack rows into cards ---- */
@media (max-width: 720px) {
  .adv-table,
  .adv-table thead,
  .adv-table tbody,
  .adv-table tr,
  .adv-table td { display: block; width: auto; }

  .adv-table thead { display: none; }
  .adv-table colgroup { display: none; }

  .adv-table tbody tr {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--rule);
  }

  .adv-table tbody tr:last-child { border-bottom: none; }

  .adv-table tbody td {
    border: none;
    padding: 0.16rem 0;
    white-space: normal;
    min-width: 0;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
  }

  .adv-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 4.5rem;
    font-size: var(--fs-3xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-soft);
    font-weight: 600;
    padding-top: 0.15rem;
  }

  .adv-table tbody td.adv-c-vuln {
    display: block;
    order: -1;
    margin-bottom: 0.5rem;
  }

  .adv-table tbody td.adv-c-vuln::before { display: none; }
}

/* ---------- Brand kit ---------- */
.brand-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.brand-hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

.brand-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.brand-lede {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 64ch;
  line-height: 1.65;
}

.brand-lede a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  transition: border-color 160ms ease;
}

.brand-lede a:hover {
  border-bottom-color: var(--fg);
}

.brand-section {
  padding: clamp(2rem, 3.5vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}

.brand-section-end {
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.85rem;
}

.brand-grid-social {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

.logo-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 100%;
}

.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  height: 200px;
}

.logo-preview img {
  max-height: 96px;
  max-width: 80%;
  width: auto;
  height: auto;
}

.logo-preview-light {
  background: #f5f1ea;
}

.logo-preview-dark {
  background: #14110d;
}

.logo-preview-wide {
  padding: 2rem 1.5rem;
}

.logo-preview-edge {
  padding: 0;
  height: auto;
}

.logo-preview-edge img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}

.logo-preview img {
  display: block;
  max-width: 100%;
  height: auto;
}

.logo-meta {
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.logo-meta h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.logo-meta > p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

.logo-files {
  margin-top: 0.5rem !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.logo-files a,
.type-files a {
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.logo-files a:hover,
.type-files a:hover {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.palette-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.palette-theme {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.1rem 1.1rem 1.25rem;
}

.palette-theme-dark {
  background: #14110d;
  border-color: #3d3528;
  color: #f0ead8;
}

.palette-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.palette-theme-dark .palette-label {
  color: #948c7e;
}

.swatches {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.swatch {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.7rem;
  align-items: center;
}

.swatch-chip {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}

.swatch-meta {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 0.6rem 1rem;
  align-items: baseline;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.swatch-hex {
  letter-spacing: 0.06em;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.swatch-role {
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: right;
}

.palette-theme-dark .swatch-role {
  color: #a39c8e;
}

.swatch-accent .swatch-hex {
  color: var(--accent);
}

.palette-theme-dark .swatch-accent .swatch-hex {
  color: #e26a3f;
}

.type-specimens {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.type-specimen {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.type-specimen:last-child {
  border-bottom: 0;
}

.type-line {
  color: var(--fg);
  line-height: 1.15;
}

.type-display {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.03em; /* matches .hero-title: a specimen must be truthful */
  line-height: 1.05;
}

.type-h2 {
  font-size: var(--fs-heading);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.type-tagline {
  font-size: var(--fs-lede);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.type-body {
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 60ch;
}

.type-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.type-meta span:first-child {
  color: var(--muted);
  font-weight: 600;
}

.type-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.brand-rules {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64ch;
}

.brand-rules li {
  position: relative;
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
  padding-left: 1.1rem;
}

.brand-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-soft);
}

.brand-rules strong {
  color: var(--fg);
  font-weight: 600;
}

.press-quote {
  margin: 0;
  padding: 1.25rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  max-width: 72ch;
}

.press-quote p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--fg-soft);
}

@media (max-width: 720px) {
  .brand-grid,
  .palette-themes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  /* align cards with the hero's left edge */
  .blog-card {
    padding: 1.3rem 0;
  }
  .blog-card-head {
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
  }

  /* An atomic inline can start a line, so on a narrow column the arrow drops
     alone under a wrapped headline. Hidden here, as the research rows already
     do at this width. */
  .hero-proof-arrow {
    display: none;
  }
}

@media (hover: none) {
  .nav-links a,
  .nav-contact {
    padding-block: 0.7rem; /* 44px tall touch target */
  }
}

@media (max-width: 480px) {
  .brand-name {
    display: none;
  }

  .nav {
    gap: 0.7rem;
  }

  .nav-links {
    gap: 0.9rem;
  }
}

/* Measured: at 500px the bar needs 465px of content for 460px of room, so it
   saturates just under ~540px. Below 560px the links move behind a hamburger
   into a panel that drops from the header. Contact stays in the bar: it is the
   site's one action and should never be a tap away. */
@media (max-width: 560px) {
  html.js-nav .nav-toggle {
    display: inline-flex;
  }

  html.js-nav .nav-contact {
    margin-left: auto; /* group CTA, hamburger and theme toggle on the right */
  }

  html.js-nav .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 120; /* above content and .reading-progress, below the skip link */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0 var(--pad-x);
    font-size: var(--fs-lg);
    background: var(--bg-card);
    /* --bg-card sits only a shade off the page, so the sheet is delimited by
       rules rather than by its fill: a hairline splitting it from the bar, and
       the strong rule closing it against the content it covers. */
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule-strong);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 200ms ease, visibility 0s linear 200ms;
  }

  html.js-nav .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 200ms ease, visibility 0s;
  }

  /* Ruled rows, like the research list: the hairline is the row, and hover or
     the current page sharpens it to ink through the base .nav-links a rule. */
  html.js-nav .nav-links a {
    padding: 0.95rem 0;
    color: var(--fg);
    border-bottom: 1px solid var(--rule);
  }

  html.js-nav .nav-links a:last-child {
    border-bottom: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* the blanket rule zeroes durations but not delays */
  html.js-nav .nav-links,
  html.js-nav .nav.is-open .nav-links {
    transition-delay: 0s;
  }
}

/* No JS means the panel can never open, so the links stay in the bar and drop
   to a second tier instead. */
@media (max-width: 400px) {
  html:not(.js-nav) .nav {
    flex-wrap: wrap;
    row-gap: 0;
  }

  html:not(.js-nav) .nav-links {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.55rem;
    margin-top: 0.35rem;
    border-top: 1px solid var(--rule);
  }

  html:not(.js-nav) .nav-contact {
    margin-left: auto;
  }

  /* the CTA plus the 44px copy target does not fit a 320px column at full size */
  .contact-cta {
    padding: 0.95rem 1rem;
    font-size: var(--fs-md);
    gap: 0.6rem;
  }
}

/* ---------- Dark mode ---------- */
html.dark {
  --bg: #14110d;
  --bg-soft: #1c1813;
  --bg-card: #221d17;
  --fg: #f0ead8;
  --fg-soft: #d8d2c0;
  --muted: #a39c8e;
  --muted-soft: #948c7e;
  --muted-inv: #67604f;
  --rule: #2f2a22;
  --rule-strong: #3d3528;
  --accent: #e26a3f;
  --chip-fg: #999284;

  --status-slate: #929ca8;
  --status-moss: #7fb088;
  --status-amber: #d6a44a;
  --status-brick: #dc6a52;

  color-scheme: dark;
}

html.dark .panel {
  background: var(--fg);
  color: var(--bg);
  border: none;
}

html.dark .panel .kicker-light {
  color: var(--muted-inv);
}

html.dark .footer {
  background: var(--bg-soft);
  color: var(--fg);
  border-top: 1px solid var(--rule);
}

html.dark .footer-name {
  color: var(--fg);
}

html.dark .footer-meta,
html.dark .footer-nav {
  color: var(--muted);
}

html.dark .footer-nav a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

html.dark .footer-bottom {
  color: var(--muted-soft);
  border-top: 1px solid var(--rule);
}

html.dark .post-body pre {
  background: #0a0907;
  color: #ece6d4;
  border: 1px solid var(--rule);
}

html.dark .tile:hover,
html.dark .blog-card:hover {
  box-shadow: 0 12px 28px -22px rgba(14, 13, 10, 0.65);
}

html.dark .team-photo img {
  filter: grayscale(0.28) saturate(0.88) brightness(0.95);
}

html.dark .team-member:hover .team-photo img {
  filter: brightness(0.98);
}

html.dark .team-member:hover .team-photo {
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule-strong);
}

html.dark .team-link {
  background: var(--bg-soft);
}

html.dark .team-link:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

html:not(.dark) .brand-logo-dark {
  display: none;
}

html.dark .brand-logo-light {
  display: none;
}

html.dark .prev-logos img {
  filter: invert(1);
  opacity: 0.68;
}

html.dark .prev-logos li:hover img {
  opacity: 0.92;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--fg);
  background: var(--bg-card);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

.theme-toggle .theme-icon {
  display: none;
}

.theme-toggle[data-theme="auto"] .theme-icon-auto,
.theme-toggle[data-theme="light"] .theme-icon-light,
.theme-toggle[data-theme="dark"] .theme-icon-dark {
  display: block;
}

/* Touch sizing must come after the base rules above — same specificity, so
   source order decides. Keeping it earlier silently discarded it. */
@media (hover: none) {
  .theme-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .contact-copy {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-schema {
    order: 2;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (max-width: 540px) {
  .talk-row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .talk-date {
    order: -1;
  }
  .talk-role {
    font-size: var(--fs-3xs);
  }
}

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

  .nav {
    gap: 0.85rem;
  }

  .research-list a {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }

  .research-date {
    flex-basis: 100%;
  }

  .research-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .footer-brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}

@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;
  }
}

/* ---------- Service pages ---------- */
.service-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.service-hero {
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.service-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.service-back:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.service-back-arrow {
  transition: transform 200ms ease;
}

.service-back:hover .service-back-arrow {
  transform: translateX(-3px);
}

.service-hero .kicker {
  color: var(--muted-soft);
}

.service-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.service-lede {
  font-size: var(--fs-lede);
  color: var(--fg-soft);
  max-width: 62ch;
  line-height: 1.6;
}

/* Operational reassurance: the crisis reader's first questions (availability,
   admissibility, confidence), ruled off from the lede like a spec line. */
.service-reassure {
  margin-top: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--muted-soft);
  max-width: 62ch;
  line-height: 1.55;
}

.service-section {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--rule);
}

.service-section-end {
  border-bottom: 0;
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* Capability pillars */
.service-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--fg);
}

.pillar-icon svg {
  width: 21px;
  height: 21px;
}

.pillar h3 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pillar > p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
}

.pillar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.pillar-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-sm);
  color: var(--fg-soft);
  line-height: 1.5;
}

.pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-soft);
}

.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.pillar-tag {
  font-size: var(--fs-2xs);
  letter-spacing: 0.03em;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

/* Process steps — hairline rows, ordered top to bottom */
.method-list {
  border-top: 1px solid var(--rule);
}

.method-list li {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.05rem 0.2rem;
  border-bottom: 1px solid var(--rule);
}

.method-step {
  flex: 0 0 13rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.method-desc {
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .method-list li {
    flex-direction: column;
    gap: 0.25rem;
  }

  .method-step {
    flex-basis: auto;
  }
}

/* Deliverable list inside the dark panel */
.panel-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.6rem;
}

.panel-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-sm);
  color: color-mix(in srgb, currentColor 82%, transparent);
  line-height: 1.5;
}

.panel-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-inv);
}

/* Scope note */
/* The measure cap belongs on the text, not on the frame: capping the box left
   it ~100px short of every other block on the page, which read as a misalign
   rather than as a decision. */
.service-note {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 1.3rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.service-note-title {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.service-note p {
  max-width: 74ch;
  font-size: var(--fs-sm);
  color: var(--fg-soft);
  line-height: 1.6;
}

.service-note a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  transition: border-color 160ms ease;
}

.service-note a:hover {
  border-bottom-color: var(--fg);
}

.service-note strong {
  color: var(--fg);
  font-weight: 600;
}

/* Linkable service tile on the home grid */
a.tile {
  color: inherit;
}

.tile-more {
  margin-top: auto;
  padding-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  transition: color 160ms ease;
}

a.tile:hover .tile-more {
  color: var(--fg);
}

.tile-arrow {
  transition: transform 200ms ease;
}

a.tile:hover .tile-arrow {
  transform: translateX(3px);
}

/* Training course */
.course-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.course-fact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.course-fact-value {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.course-fact-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
}

.syllabus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 0.85rem;
}

/* Agenda grid. Each day spans the same 5 subgrid rows (1 header + 4 time
   slots) so the time rows line up across every column with uniform spacing. */
.agenda {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 0.7rem;
  row-gap: 0;
}

.agenda-day {
  grid-row: 1 / span 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

.agenda-day-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.85rem 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.agenda-day-num {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}

.agenda-day-theme {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.2;
}

.agenda-slot {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
}

.agenda-slot + .agenda-slot {
  border-top: 1px solid var(--rule);
}

.agenda-time {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}

.agenda-title {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--fg-soft);
}

.agenda-badge {
  align-self: flex-start;
  font-size: var(--fs-3xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--chip-fg);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}

.agenda-slot-soft .agenda-title {
  color: var(--muted);
  font-style: italic;
}

/* Lab / VM callout */
.lab-callout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.25rem);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.lab-callout-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lab-callout-body h2 {
  font-size: var(--fs-subhead);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.lab-callout-body p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
  max-width: 52ch;
}

.lab-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lab-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  color: var(--fg-soft);
  line-height: 1.5;
}

.lab-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-soft);
  font-weight: 600;
}

/* Pricing block */
.pricing {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pricing-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pricing-amount {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.pricing-unit {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.4rem;
}

.pricing-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-sm);
  color: var(--fg-soft);
  line-height: 1.5;
}

.pricing-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-soft);
}

@media (max-width: 980px) {
  .agenda {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0.7rem;
  }
  .agenda-day {
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .lab-callout,
  .pricing {
    grid-template-columns: 1fr;
  }
  .pricing-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .service-pillars,
  .panel-list {
    grid-template-columns: 1fr;
  }

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

/* ---------- 404 / fallout shelter ---------- */
.notfound-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.notfound-mark {
  width: clamp(72px, 14vw, 104px);
  height: auto;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.notfound-kicker {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.notfound-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.notfound-lede {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.6;
}

.notfound-main .contact-cta {
  align-self: center;
  margin-top: 0.5rem;
}

/* ---------- Easter egg: irradiation (Konami) ---------- */
.irradiate-glow {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 118%, rgba(226, 106, 63, 0.55), rgba(226, 106, 63, 0) 62%),
    radial-gradient(circle at 50% -18%, rgba(226, 106, 63, 0.35), rgba(226, 106, 63, 0) 55%);
  mix-blend-mode: screen;
  animation: irradiate-pulse 1.6s ease-out forwards;
}

@keyframes irradiate-pulse {
  0% { opacity: 0; }
  10% { opacity: 1; }
  28% { opacity: 0.5; }
  44% { opacity: 0.95; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .irradiate-glow {
    animation: none;
    opacity: 0.4;
  }
}

/* ---------- Radiation emblem (footer mark) ---------- */
.rad-emblem {
  width: 22px;
  height: 22px;
  color: var(--muted-inv);
  flex-shrink: 0;
  transition: color 200ms ease;
}

html.dark .rad-emblem {
  color: var(--muted-soft);
}

.footer-bottom .rad-emblem:hover {
  color: var(--accent);
}

.rad-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: rad-spin 14s linear infinite;
}

@keyframes rad-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rad-spin { animation: none; }
}

/* ---------- Easter egg: capsule pop (Konami reward) ---------- */
.capsule-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  width: clamp(120px, 22vw, 200px);
  z-index: 10000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 34px rgba(226, 106, 63, 0.45));
  animation: capsule-pop 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.capsule-pop svg { display: block; width: 100%; height: auto; }
.capsule-pop .cap-body,
.capsule-pop .cap-nucleus { fill: var(--accent); }
.capsule-pop .cap-label { fill: var(--bg); }
.capsule-pop .cap-orbits { fill: none; stroke: var(--accent); }

@keyframes capsule-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-40deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(6deg); }
  32% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .capsule-pop {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ---------- Dark mode without JavaScript ---------- */
/* The theme is normally carried by the .dark class the pre-paint script sets,
   which means a reader with JS disabled and a dark OS was served the light
   theme. This block is the same dark section keyed off the OS preference
   instead of the class, and it stands down as soon as the reader has picked
   light explicitly (the script stamps html.light for exactly that purpose).
   INVARIANT: every rule above that starts with `html.dark` has a twin here.
   Change one, change the other. */
@media (prefers-color-scheme: dark) {
  html:not(.light) .footer {
    --focus-ring: var(--fg); /* dark footer sits on --bg-soft, not inverted */
  }

  html:not(.light) .post-body pre {
    --focus-ring: var(--fg); /* dark code blocks sit on their own ink, not inverted */
  }

  html:not(.light) {
    --bg: #14110d;
    --bg-soft: #1c1813;
    --bg-card: #221d17;
    --fg: #f0ead8;
    --fg-soft: #d8d2c0;
    --muted: #a39c8e;
    --muted-soft: #948c7e;
    --muted-inv: #67604f;
    --rule: #2f2a22;
    --rule-strong: #3d3528;
    --accent: #e26a3f;
    --chip-fg: #999284;

    --status-slate: #929ca8;
    --status-moss: #7fb088;
    --status-amber: #d6a44a;
    --status-brick: #dc6a52;

    color-scheme: dark;
  }

  html:not(.light) .panel {
    background: var(--fg);
    color: var(--bg);
    border: none;
  }

  html:not(.light) .panel .kicker-light {
    color: var(--muted-inv);
  }

  html:not(.light) .footer {
    background: var(--bg-soft);
    color: var(--fg);
    border-top: 1px solid var(--rule);
  }

  html:not(.light) .footer-name {
    color: var(--fg);
  }

  html:not(.light) .footer-meta,
  html:not(.light) .footer-nav {
    color: var(--muted);
  }

  html:not(.light) .footer-nav a:hover {
    color: var(--fg);
    border-bottom-color: var(--fg);
  }

  html:not(.light) .footer-bottom {
    color: var(--muted-soft);
    border-top: 1px solid var(--rule);
  }

  html:not(.light) .post-body pre {
    background: #0a0907;
    color: #ece6d4;
    border: 1px solid var(--rule);
  }

  html:not(.light) .tile:hover,
  html:not(.light) .blog-card:hover {
    box-shadow: 0 12px 28px -22px rgba(14, 13, 10, 0.65);
  }

  html:not(.light) .team-photo img {
    filter: grayscale(0.28) saturate(0.88) brightness(0.95);
  }

  html:not(.light) .team-member:hover .team-photo img {
    filter: brightness(0.98);
  }

  html:not(.light) .team-member:hover .team-photo {
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule-strong);
  }

  html:not(.light) .team-link {
    background: var(--bg-soft);
  }

  html:not(.light) .team-link:hover {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }

  html:not(.light) .brand-logo-light {
    display: none;
  }

  html:not(.light) .prev-logos img {
    filter: invert(1);
    opacity: 0.68;
  }

  html:not(.light) .prev-logos li:hover img {
    opacity: 0.92;
  }

  html:not(.light) .rad-emblem {
    color: var(--muted-soft);
  }

}