/* ================================================================
   Ariel Koren — Design System (refined)
   Source of truth: ../design.md
   Strict type scale, 8px spacing, restrained editorial.
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. Tokens
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Color (locked from design.md §4) */
  --bg:            #F9FAF6;
  --bg-alt:        #F3F4F0;
  --surface:       #FFFFFF;
  --surface-muted: #EDEEEA;
  --text:          #191C1A;
  --text-muted:    #414943;
  --text-soft:     #717972;
  --border:        #C0C9C1;
  --border-soft:   #D6DCD4;
  --accent:        #38684D;
  --accent-soft:   #4F7F63;
  --accent-pale:   #DCE8DF;
  --error:         #BA1A1A;
  --error-soft:    #F7E7E5;
  --code-bg:       #F3F4F0;
  --code-line-alert: #F7E7E5;

  /* Typography — strict roles */
  /* Serif: ONLY for major display + page titles + work-row titles. */
  /* Sans:  body, nav, buttons, labels, captions, tables, everything UI. */
  /* Mono:  technical/metadata cues only — never for body. */
  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale — small set, applied consistently */
  --fs-display: 56px;     /* hero h1 (mobile clamps down) */
  --fs-h1:      40px;     /* page hero h1 */
  --fs-h2:      28px;     /* section headline */
  --fs-h3:      20px;     /* sub-heads, work-row titles */
  --fs-lead:    18px;     /* lead paragraph */
  --fs-body:    16px;     /* default body */
  --fs-sm:      14px;     /* secondary body / captions */
  --fs-xs:      13px;     /* small ui */
  --fs-label:   11px;     /* uppercase labels */

  --lh-display: 1.08;
  --lh-h1:      1.12;
  --lh-h2:      1.22;
  --lh-h3:      1.3;
  --lh-body:    1.6;
  --lh-lead:    1.55;

  --ls-display: -0.02em;
  --ls-h1:      -0.018em;
  --ls-h2:      -0.012em;
  --ls-label:   0.14em;

  /* Spacing — 8px grid */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Layout */
  --container-max:    1200px;
  --container-narrow: 760px;
  --container-read:   680px;
  --margin-mobile:    24px;
  --margin-tablet:    40px;
  --margin-desktop:   56px;
  --gutter:           32px;

  /* Radius */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Hairline */
  --hr: 1px;
}

/* ────────────────────────────────────────────────────────────────
   2. Reset
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 118px; }
@media (min-width: 880px) { html { scroll-padding-top: 126px; } }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
::selection { background: var(--accent-pale); color: var(--text); }

p { line-height: var(--lh-body); }

/* ────────────────────────────────────────────────────────────────
   3. Containers
   ─────────────────────────────────────────────────────────────── */
.container,
.container-narrow,
.container-read {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}
.container        { max-width: var(--container-max); }
.container-narrow { max-width: var(--container-narrow); }
.container-read   { max-width: var(--container-read); }

@media (min-width: 768px) {
  .container, .container-narrow, .container-read { padding-inline: var(--margin-tablet); }
}
@media (min-width: 1024px) {
  .container, .container-narrow, .container-read { padding-inline: var(--margin-desktop); }
}

/* Sections — uniform vertical rhythm */
.section       { padding-block: var(--s-9); }
.section-sm    { padding-block: var(--s-8); }
.section-tight { padding-block: var(--s-7); }

.divider {
  border: 0;
  border-top: var(--hr) solid var(--border-soft);
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   4. Typography (strict roles)
   ─────────────────────────────────────────────────────────────── */

/* Serif — display only. Reserved for:
   - hero h1
   - page h1
   - section h2 (headline-lg)
   - work-row titles
   - module titles
   Nowhere else. */
.h-display, h1.h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 6vw, var(--fs-display));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text);
}
.h1, h1.h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--text);
}
.h2, h2.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, var(--fs-h2));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--text);
}
.h3, h3.h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--text);
}

/* Sans — body, ui, lead, captions, labels */
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  max-width: 56ch;
}
.body, p.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); max-width: 64ch; }
.body-sm     { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); }
.caption     { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); }

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text-soft);
  display: inline-block;
}
.label--accent { color: var(--accent); }

.mono       { font-family: var(--font-mono); }
.mono-meta  {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-soft);
  letter-spacing: 0;
}

.text-muted  { color: var(--text-muted); }
.text-soft   { color: var(--text-soft); }
.text-accent { color: var(--accent); }
.italic-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ────────────────────────────────────────────────────────────────
   5. Header
   ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--hr) solid var(--border-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--s-6);
}
.wordmark {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.wordmark .dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}
.nav-primary {
  display: none;
  gap: var(--s-6);
  align-items: center;
}
.nav-primary a, .nav-primary button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .15s ease;
  position: relative;
}
.nav-primary a:hover, .nav-primary button:hover { color: var(--text); }
.nav-primary a.is-active { color: var(--text); }
.nav-primary a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 1.5px;
  background: var(--accent);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--accent);
  color: var(--surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: background .15s ease;
  border: 0;
  cursor: pointer;
}
.nav-cta:hover { background: var(--accent-soft); }

.menu-toggle {
  display: inline-flex;
  background: none; border: 0; padding: 6px;
  cursor: pointer; color: var(--text);
}
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 64px; left: 0; right: 0;
  background: var(--bg);
  border-bottom: var(--hr) solid var(--border-soft);
  padding: var(--s-3) 0 var(--s-5);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav li + li { border-top: var(--hr) solid var(--border-soft); }
.mobile-nav a, .mobile-nav .submenu-toggle {
  display: block; width: 100%; text-align: left;
  padding: 14px var(--margin-mobile);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: none; border: 0; cursor: pointer;
}
.mobile-nav .submenu { padding: 0 var(--margin-mobile) var(--s-3); display: none; }
.mobile-nav .submenu.is-open { display: block; }
.mobile-nav .submenu a {
  padding: 10px 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: none;
  border-top: var(--hr) solid var(--border-soft);
}

/* Work dropdown */
.work-trigger { display: inline-flex; align-items: center; gap: 6px; }
.work-trigger svg { width: 11px; height: 11px; opacity: .6; transition: transform .15s ease; }
.work-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.work-trigger-wrap { position: relative; display: inline-flex; }
.work-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--bg);
  border: var(--hr) solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-2) 0;
  display: none;
}
.work-dropdown.is-open { display: block; }
.work-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  text-transform: none;
  transition: background .12s ease, color .12s ease;
}
.work-dropdown a:hover { background: var(--surface-muted); color: var(--accent); }
.work-dropdown hr { border: 0; border-top: var(--hr) solid var(--border-soft); margin: 6px 0; }

@media (max-width: 879px) {
  .nav-cta { display: none; }
}

@media (min-width: 880px) {
  .nav-primary { display: flex; }
  .menu-toggle { display: none; }
  .site-header__inner { height: 72px; }
  .mobile-nav { top: 72px; }
}

/* ────────────────────────────────────────────────────────────────
   6. Buttons / Links
   ─────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--surface);
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-muted); border-color: var(--text-soft); }

.btn-primary svg, .btn-secondary svg, .text-link svg { width: 13px; height: 13px; transition: transform .15s ease; }
.btn-primary:hover svg, .btn-secondary:hover svg, .text-link:hover svg { transform: translateX(2px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.text-link:hover { border-bottom-color: var(--accent); }

/* ────────────────────────────────────────────────────────────────
   7. Hero
   ─────────────────────────────────────────────────────────────── */
.hero {
  padding-top: var(--s-8);
  padding-bottom: var(--s-9);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
.hero__eyebrow { color: var(--accent); margin-bottom: var(--s-5); }
.hero h1.h-display {
  /* Constrain so the natural wrap produces a stable 3-line shape:
     "Quiet work on" / "secure systems, where AI," / "research, and
     product reality meet." No forced <br /> tags in the markup. */
  max-width: 16ch;
}
.hero__lead {
  margin-top: var(--s-5);
  margin-bottom: var(--s-6);
  max-width: 52ch;
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
}
.hero__photo {
  position: relative;
  border: var(--hr) solid var(--border);
  background: var(--surface);
  padding: 12px;
}
.hero__photo img {
  width: 100%; height: auto;
  filter: grayscale(0.85) contrast(1.02) brightness(0.98);
}
.hero__photo-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
  margin-top: 12px;
  padding: 0 2px;
  color: var(--text-soft);
}
.hero__photo-meta > :last-child {
  /* Byline stays on one line; never let it wrap into the topic strip. */
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .hero { padding-top: var(--s-10); padding-bottom: var(--s-10); }
  /* More text-column weight so the headline breathes and the CTA row stays
     on a single line at common viewport widths. */
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--s-9); }
}

/* ────────────────────────────────────────────────────────────────
   8. Page hero (work / about / contact / detail)
   ─────────────────────────────────────────────────────────────── */
.page-hero {
  padding-top: var(--s-9);
  padding-bottom: var(--s-7);
  border-bottom: var(--hr) solid var(--border-soft);
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: var(--s-3); }
.page-hero h1 { max-width: 22ch; margin-bottom: var(--s-4); }
.page-hero .lead { color: var(--text-muted); }

/* ────────────────────────────────────────────────────────────────
   9. Category blocks (used on homepage + work index)
   ─────────────────────────────────────────────────────────────── */
.cat-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hr) solid var(--border-soft);
}
.cat-block {
  padding-block: var(--s-7);
  border-bottom: var(--hr) solid var(--border-soft);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.cat-block__head { display: flex; flex-direction: column; gap: var(--s-3); }
.cat-block__head .label { color: var(--accent); }
.cat-block__head h2 { font-family: var(--font-serif); font-size: 26px; line-height: 1.22; letter-spacing: -0.012em; color: var(--text); margin: 0; }
.cat-block__head p { font-size: var(--fs-sm); color: var(--text-soft); max-width: 50ch; }
.cat-block__body { display: flex; flex-direction: column; }

@media (min-width: 900px) {
  .cat-block {
    grid-template-columns: 240px 1fr;
    gap: var(--s-7);
    padding-block: var(--s-8);
  }
}

/* Compact entry row used inside category blocks */
.entry-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: var(--hr) solid var(--border-soft);
  align-items: baseline;
}
.entry-row:first-child { border-top: 0; padding-top: 0; }
.entry-row__year { color: var(--text-soft); }
.entry-row__title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
}
.entry-row__title a { transition: color .15s ease; }
.entry-row__title a:hover { color: var(--accent); }
.entry-row__sub { color: var(--text-soft); font-size: var(--fs-xs); margin-top: 2px; display: block; }
.entry-row__summary { font-size: var(--fs-sm); color: var(--text-muted); max-width: 60ch; margin-top: 4px; }
.entry-row__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.entry-row__action:hover { color: var(--accent); }
.entry-row__action svg { width: 13px; height: 13px; }

@media (min-width: 800px) {
  .entry-row {
    grid-template-columns: 90px 1fr 110px;
    gap: var(--s-6);
    padding-block: var(--s-4);
  }
  .entry-row__action { justify-self: end; }
}

/* ────────────────────────────────────────────────────────────────
   10. Detail pages — meta strip, modules
   ─────────────────────────────────────────────────────────────── */
.detail-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-6);
  border-top: var(--hr) solid var(--border-soft);
  border-bottom: var(--hr) solid var(--border-soft);
  padding-block: var(--s-4);
  margin-bottom: var(--s-8);
}
@media (min-width: 800px) {
  .detail-meta { grid-template-columns: repeat(4, 1fr); }
}
.detail-meta__cell .k { display: block; color: var(--text-soft); margin-bottom: 4px; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.detail-meta__cell .v { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }

.module { padding-block: var(--s-7); }
.module:first-child { padding-top: 0; }
.module + .module { border-top: var(--hr) solid var(--border-soft); }
.module__label { color: var(--accent); margin-bottom: var(--s-3); }
.module__title { margin-bottom: var(--s-4); }
.module__prose p { margin-bottom: var(--s-4); max-width: 64ch; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.module__prose p strong { color: var(--text); font-weight: 600; }
.module__prose ul { padding-left: 1.2em; margin-bottom: var(--s-4); max-width: 64ch; color: var(--text-muted); }
.module__prose li { margin-bottom: 6px; }
.module__prose h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--text);
}

/* Code block */
.code-block {
  background: var(--code-bg);
  border: var(--hr) solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  margin: var(--s-5) 0 var(--s-6);
  /* Force left-alignment regardless of any artifact wrapper around us.
     The unified .artifact frame uses text-align: center for figure
     captions and image positioning; that centering must NOT cascade
     into code text. */
  text-align: left;
}
.code-block pre,
.code-block code,
.code-block .ln {
  text-align: left;
}
.code-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--hr) solid var(--border-soft);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}
.code-block pre { margin: 0; white-space: pre; }
.code-block .ln {
  display: block;
  padding-left: 12px;
  border-left: 2px solid transparent;
  margin-left: -12px;
}
.code-block .ln-alert {
  background: var(--code-line-alert);
  border-left-color: var(--error);
}

/* Impact cards */
.impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 700px) { .impact-grid { grid-template-columns: repeat(3, 1fr); } }
.impact-card {
  background: var(--surface);
  border: var(--hr) solid var(--border-soft);
  padding: var(--s-5);
  border-radius: var(--r-sm);
}
.impact-card__label { color: var(--text-soft); margin-bottom: var(--s-2); }
.impact-card__value {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.22;
  color: var(--text);
  margin-bottom: 4px;
}
.impact-card__hint { font-size: var(--fs-xs); color: var(--text-soft); }
.impact-card.is-critical .impact-card__value { color: var(--error); }
.impact-card.is-resolved .impact-card__value { color: var(--accent); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute;
  top: 6px; bottom: 6px; left: 6px;
  width: 1px; background: var(--border-soft);
}
.timeline li {
  position: relative;
  padding: 4px 0 var(--s-5) var(--s-5);
}
.timeline li::before {
  content: "";
  position: absolute; left: 1px; top: 9px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.timeline li.is-current::before { background: var(--accent); border-color: var(--accent); }
.timeline li.is-severity::before { background: var(--error); border-color: var(--error); }
.timeline li .t-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  display: block;
  margin-bottom: 2px;
}
.timeline li .t-event {
  font-size: var(--fs-sm);
  color: var(--text);
}

/* Video / exploit-demo artifact - INNER content only.
   The outer frame and the caption come from the unified .artifact rules. */
.exploit-demo__frame {
  background: #0d0f0e;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.exploit-demo__frame iframe,
.exploit-demo__frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.exploit-demo__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 18px),
    #1c2120;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Schematic figure */
.schematic {
  border: var(--hr) solid var(--border-soft);
  background: var(--bg-alt);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  margin: var(--s-5) 0 var(--s-6);
}
.schematic__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.4;
  pointer-events: none;
}
.schematic svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.schematic__caption {
  margin-top: var(--s-4);
  display: flex; justify-content: space-between; gap: var(--s-3);
  color: var(--text-soft);
}

/* ────────────────────────────────────────────────────────────────
   11. About page
   ─────────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.4fr 1fr; gap: var(--s-9); }
}
.about-prose .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text); margin-bottom: var(--s-5); }
.about-prose p { margin-bottom: var(--s-4); max-width: 60ch; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.about-prose h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  color: var(--text);
}

.about-portrait {
  border: var(--hr) solid var(--border);
  background: var(--surface);
  padding: 10px;
  max-width: 320px;
}
.about-portrait img { width: 100%; height: auto; }
.about-portrait__caption {
  color: var(--text-soft);
  padding: var(--s-3) 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-modules { display: flex; flex-direction: column; gap: var(--s-6); }
.about-module {
  border-top: var(--hr) solid var(--border-soft);
  padding-top: var(--s-4);
}
.about-module__label { color: var(--text-soft); margin-bottom: var(--s-3); }
.about-module ul { list-style: none; padding: 0; margin: 0; }
.about-module li { padding: 6px 0; color: var(--text-muted); font-size: var(--fs-sm); }
.about-module li + li { border-top: 1px dashed var(--border-soft); }

/* ────────────────────────────────────────────────────────────────
   12. Contact
   ─────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); }
}
.contact-list { list-style: none; padding: 0; margin: 0; border-top: var(--hr) solid var(--border-soft); }
.contact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: var(--hr) solid var(--border-soft);
  gap: var(--s-5);
}
.contact-list .ck { color: var(--text-soft); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.contact-list .cv { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; color: var(--text); }
.contact-list .cv a { border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: border-color .15s ease, color .15s ease; }
.contact-list .cv a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.collab-list {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--surface);
  border: var(--hr) solid var(--border-soft);
}
.collab-list h3 { font-family: var(--font-serif); font-size: 18px; margin-bottom: var(--s-3); color: var(--text); }
.collab-list ul { list-style: none; padding: 0; margin: 0; }
.collab-list li {
  padding-block: var(--s-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border-top: 1px dashed var(--border-soft);
}
.collab-list li:first-child { border-top: 0; }

/* ────────────────────────────────────────────────────────────────
   13. Tags
   ─────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px solid transparent;
  padding: 3px 9px;
  border-radius: 999px;
}
.tag--outline { background: transparent; border-color: var(--border-soft); }
.tag--severity-critical { color: var(--error); border-color: var(--error-soft); background: var(--error-soft); }
.tag--severity-high { color: var(--error); border-color: var(--error-soft); background: transparent; }
.tag--status-public { color: var(--accent); border-color: var(--accent-pale); background: var(--accent-pale); }
.tag--status-private { color: var(--text-soft); border-color: var(--border-soft); background: transparent; }

/* ────────────────────────────────────────────────────────────────
   14. Footer
   ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: var(--hr) solid var(--border-soft);
  padding-block: var(--s-7);
  margin-top: var(--s-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 800px) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-7); }
}
.site-footer__col h4 { font-family: var(--font-serif); font-size: 17px; margin-bottom: var(--s-3); color: var(--text); }
.site-footer__col .h4-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--s-3);
  display: block;
}
.site-footer__col p { color: var(--text-muted); max-width: 38ch; font-size: var(--fs-sm); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { padding: 4px 0; }
.site-footer__col a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: color .15s ease;
}
.site-footer__col a:hover { color: var(--accent); }
.site-footer__bottom {
  border-top: var(--hr) solid var(--border-soft);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  color: var(--text-soft);
  font-size: var(--fs-xs);
}
.site-footer__bottom .mark { font-family: var(--font-mono); }

/* ────────────────────────────────────────────────────────────────
   15. Misc
   ─────────────────────────────────────────────────────────────── */
.eyebrow {
  color: var(--accent);
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  display: inline-block;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.section-head h2 { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .site-header, .site-footer, .nav-cta, .menu-toggle, .mobile-nav { display: none; }
  body { background: #fff; color: #000; }
}

/* ────────────────────────────────────────────────────────────────
   16. Category grid (homepage overview)
   ─────────────────────────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hr) solid var(--border-soft);
}
.cat-card {
  display: block;
  padding: var(--s-5) 0;
  border-bottom: var(--hr) solid var(--border-soft);
  transition: background .15s ease;
  position: relative;
}
.cat-card:hover { background: rgba(220, 232, 223, 0.18); }
.cat-card__num {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--accent);
}
.cat-card__title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--s-2);
  transition: color .15s ease;
}
.cat-card:hover .cat-card__title { color: var(--accent); }
.cat-card__blurb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 50ch;
  margin-bottom: var(--s-3);
  line-height: 1.55;
}
.cat-card__count {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

@media (min-width: 760px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .cat-card {
    padding: var(--s-6) var(--s-6) var(--s-6) 0;
    border-right: var(--hr) solid var(--border-soft);
  }
  .cat-card:nth-child(2n) {
    padding-left: var(--s-6);
    padding-right: 0;
    border-right: 0;
  }
}

/* ────────────────────────────────────────────────────────────────
   17. Archive notice (top of /archive/<slug>/ pages)
   ─────────────────────────────────────────────────────────────── */
.archive-notice {
  border: var(--hr) solid var(--border-soft);
  background: var(--bg-alt);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-7);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.archive-notice .label { color: var(--accent); }
.archive-notice p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 64ch;
  margin: 0;
}
.archive-notice a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-pale);
  transition: border-color .15s ease;
}
.archive-notice a:hover { border-bottom-color: var(--accent); }

/* Archive prose inherits .module__prose; add a few archive-specific tweaks */
.archive-prose img {
  border: var(--hr) solid var(--border-soft);
  background: var(--bg-alt);
  padding: 6px;
  margin: var(--s-5) auto;
}
.archive-prose pre {
  background: var(--code-bg);
  border: var(--hr) solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  margin: var(--s-5) 0;
}
.archive-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--code-bg);
  padding: 2px 5px;
  border-radius: var(--r-sm);
}
.archive-prose pre code { background: transparent; padding: 0; }
.archive-prose blockquote {
  border-left: 2px solid var(--border);
  padding: 4px 0 4px var(--s-5);
  margin: var(--s-5) 0;
  color: var(--text-soft);
  font-style: italic;
  max-width: 64ch;
}

/* Overflow fix: long unbreakable strings (base64, hex, obfuscated URLs) must
   not bust out of the container. Applied here and inherited by all new posts. */
.archive-prose p,
.module__prose p {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Headings inside archive prose — match design.md typographic scale */
.archive-prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: var(--s-7) 0 var(--s-4);
}
.archive-prose h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: var(--s-6) 0 var(--s-3);
}
.archive-prose h4 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin: var(--s-6) 0 var(--s-3);
}

/* Colored annotation spans (converted from WordPress has-inline-color).
   These mark meaningful hex-dump regions (red = malicious bytes, etc.).
   Keep inline color but ensure legibility on the light background. */
.anno-color {
  font-weight: 600;
}

/* Overflow fix: long unbreakable strings (base64, hex, obfuscated URLs) must
   not bust out of the container. Applied to all prose paragraphs. */
.archive-prose p,
.module__prose p {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Headings inside archive prose — match design.md typographic scale */
.archive-prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: var(--s-7) 0 var(--s-4);
}
.archive-prose h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: var(--s-6) 0 var(--s-3);
}
.archive-prose h4 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin: var(--s-6) 0 var(--s-3);
}

/* Colored annotation spans (converted from WordPress has-inline-color).
   These mark meaningful hex-dump regions (red = malicious bytes, etc.).
   Keep inline color but ensure legibility on the light background. */
.anno-color {
  font-weight: 600;
}

/* Archive page figures use the canonical .figure pattern below.
   Inline centered image wrappers (converted from WP has-text-align-center
   paragraphs) keep their own helper class. */
.archive-figure-wrap {
  text-align: center;
  margin: var(--s-5) 0;
}
.archive-figure-wrap img {
  margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────────
   Vulnerability detail page — hero + layout
   ─────────────────────────────────────────────────────────────── */
.vuln-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px) {
  .vuln-hero__grid { grid-template-columns: 1.55fr 1fr; gap: var(--s-8); align-items: start; }
}

.vuln-hero__main h1 { max-width: 26ch; }
.vuln-hero__main .lead { max-width: 52ch; margin-top: var(--s-4); }

.vuln-hero__meta {
  border: var(--hr) solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vuln-meta-cell {
  padding: var(--s-3) 0;
  border-bottom: var(--hr) solid var(--border-soft);
}
.vuln-meta-cell:last-child { border-bottom: none; }
.vuln-meta-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.vuln-meta-value {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.vuln-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────────────────────
   Content centering — all prose pages use container-read (680px)
   centered with margin-inline: auto
   ─────────────────────────────────────────────────────────────── */
/* Archive pages */
.archive-prose {
  margin-inline: auto;
}
/* Writing / prose articles */
.module__prose {
  margin-inline: auto;
}
/* Vulnerability module prose */
.vuln-section-grid .module__prose,
.impact-module .module__prose {
  margin-inline: 0; /* inside grid cells — let the grid handle width */
}

/* ── Content centering ─────────────────────────────────────────
   Archive posts and module prose blocks should be centred in
   their container rather than left-hugging.                    */
.archive-prose {
  margin-inline: auto;
  max-width: var(--container-read, 68ch);
}
.module__prose {
  margin-inline: auto;
}

/* ── Vulnerability page: two-column layout ─────────────────── */
.vuln-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 900px) {
  .vuln-section-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.vuln-section-grid .module__prose {
  margin-inline: 0;
  max-width: none;
}
@media (min-width: 480px) {
  .vuln-section-grid .impact-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.vuln-discovery-prose { margin-inline: 0 !important; max-width: none !important; }
.vuln-discovery-prose p { max-width: 52ch; }

.vuln-breakdown-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.vuln-breakdown-header .h2 { margin-bottom: 0; }

/* .vuln-schematic-img and .figure-screenshot use the canonical .figure pattern below. */
.impact-module { padding-top: 0; }

/* ── Artifact system (canonical) ─────────────────────────── */
/* Unified .artifact frame - single source of truth for every media block on
   the site (images, diagrams, screenshots, video embeds, code/sanitiser
   artifacts). Variations are interior-only via modifier classes. The legacy
   class names are preserved as aliases for backward compat with existing
   data files and renderers. Do not author new wrapper classes. */
.artifact,
.archive-figure,
.archive-prose figure.aligncenter,
.vuln-schematic-img,
.figure-screenshot,
.exploit-demo,
.vuln-code-artifact {
  display: block;
  margin: var(--s-7) auto;
  padding: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.artifact > a,
.archive-figure > a,
.archive-prose figure.aligncenter > a,
.vuln-schematic-img > a,
.figure-screenshot > a,
.exploit-demo > a,
.vuln-code-artifact > a {
  display: inline-block;
  text-decoration: none;
  border: 0;
}
.artifact img,
.archive-figure img,
.archive-prose figure.aligncenter img,
.vuln-schematic-img img,
.figure-screenshot img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  /* No max-height: images fill the card's content width naturally. Tall
     infographics like the libpng three-band diagram render at column
     width with their natural proportional height, which is what we want. */
}

/* Inside any artifact wrapper, the inner <img> loses any legacy frame styling
   (the .archive-prose img rule below adds a gray-box for raw imgs in archive
   paragraphs, but when the img is inside an artifact figure, the wrapper
   already provides the frame, so the img must be plain). */
.artifact img,
.archive-figure img,
.archive-prose figure.aligncenter img,
.vuln-schematic-img img,
.figure-screenshot img,
.exploit-demo img,
.vuln-code-artifact img {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Unified caption rule - one style for every artifact caption on the site. */
.artifact__caption,
.archive-figure figcaption,
.archive-figure .archive-caption,
.archive-prose figure.aligncenter figcaption,
.vuln-schematic-img figcaption,
.figure-screenshot figcaption,
.exploit-demo__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
  max-width: 60ch;
  margin: var(--s-3) auto 0;
  padding: 0 var(--s-2);
  text-align: center;
}

/* ── Inline code — universal style ─────────────────────────────
   Accent-pale chip + accent green text. Matches the reference
   design (SessionTokenValidator style). Applied to all inline
   <code> in prose; pre code blocks are unaffected.             */
:is(.module__prose, .archive-prose, .vuln-discovery-prose, .about-prose, article)
  code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  background: var(--accent-pale);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Vuln technical breakdown — code artifact ──────────────────
   A visually separated patch/code block with a caption bar that
   makes it read as an intentional artifact, not inline text.   */
/* Code-artifact INNER content (sanitiser logs, patch diffs, gdb captures).
   Outer frame comes from the unified .artifact rule. The head strip below
   sits inside the frame as a small caption bar above the code listing. */
.artifact__head,
.vuln-code-caption,
.exploit-demo__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  /* Pull edge-to-edge of the artifact wrapper. The wrapper has 6px padding;
     these negative margins overcome it so the head strip sits flush with the
     border on three sides. The bottom margin gives breathing room before
     the body content. */
  margin: -6px -6px var(--s-2);
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.vuln-code-caption .label { flex-shrink: 0; }
.vuln-code-caption__file {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inside any artifact frame, nested code/exploit blocks lose their own
   chrome so the unified frame carries them. */
.artifact .code-block,
.vuln-code-artifact .code-block,
.exploit-demo .code-block {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* ── Vuln prose — inline pre (short code expression in context) */
.module__prose .vuln-inline-pre {
  margin: var(--s-3) 0;
  padding: 10px 14px;
  background: var(--code-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  white-space: pre;
}
.module__prose .vuln-inline-pre code {
  background: none !important;
  color: var(--text) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: inherit !important;
}

/* ── Data tables — reachability, verification, scaling, patch ──*/
.vuln-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--s-5) 0;
  border: var(--hr) solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.vuln-data-table th {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-bottom: var(--hr) solid var(--border);
  text-align: left;
}
.vuln-data-table td {
  padding: 9px 14px;
  color: var(--text-muted);
  border-bottom: var(--hr) solid var(--border-soft);
  vertical-align: top;
  line-height: 1.5;
}
.vuln-data-table tbody tr:last-child td { border-bottom: none; }
.vuln-data-table td code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--accent-pale);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
}
.vuln-data-table td strong { color: var(--text); }

/* ── Reproducer-sizes pull quote ───────────────────────────────*/
.vuln-pullquote {
  margin: var(--s-6) 0 0;
  padding: var(--s-5) var(--s-6);
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.vuln-pullquote p {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-body);
  color: var(--text);
}
.vuln-pullquote ul {
  margin: 0 0 var(--s-3);
  padding-left: 1.2em;
}
.vuln-pullquote li {
  color: var(--text-muted);
  font-size: var(--fs-body);
  margin-bottom: 6px;
}
.vuln-pullquote li strong { color: var(--text); }

/* ── vuln-toc-strip ────────────────────────────────────────────*/
.vuln-toc-strip {
  position: sticky;
  top: 64px; /* mobile nav height */
  z-index: 30; /* below site-header (50) but above content */
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 0;
  transform: translateZ(0); /* force GPU layer — prevents 1px subpixel shift on hover */
  will-change: transform;
}
@media (min-width: 768px) {
  .vuln-toc-strip {
    top: 72px; /* desktop nav height */
  }
}
.vuln-toc {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Toggle button — visible only on mobile */
.vuln-toc__toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.vuln-toc__toggle svg {
  transition: transform 0.2s;
  color: var(--text-muted);
}
.vuln-toc__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* List — horizontal on desktop */
.vuln-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s-2);
  counter-reset: toc;
}
.vuln-toc__list li {
  counter-increment: toc;
  display: flex;
  align-items: center;
  gap: 4px;
}
.vuln-toc__list li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--border-soft);
  flex-shrink: 0;
  transition: color 0.15s;
}
.vuln-toc__list li:has(a.is-active)::before {
  color: var(--accent-soft);
}
.vuln-toc__list a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.vuln-toc__list a:hover {
  color: var(--accent);
  background: var(--accent-pale);
}
.vuln-toc__list a.is-active {
  color: var(--accent);
}

/* Separator dots between items */
.vuln-toc__list li + li::after {
  display: none;
}

/* Mobile */
@media (max-width: 767px) {
  .vuln-toc-strip {
    padding: 0;
  }
  .vuln-toc {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .vuln-toc__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
  }
  .vuln-toc__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--border-soft);
    padding: var(--s-2) 0 var(--s-3);
  }
  .vuln-toc__list.is-open {
    display: flex;
  }
  .vuln-toc__list li {
    width: 100%;
  }
  .vuln-toc__list li::before {
    width: 22px;
  }
  .vuln-toc__list a {
    padding: 6px 4px;
    font-size: var(--fs-sm);
    width: 100%;
  }
}


/* ── module__prose — additional element styles ─────────────────*/
.module__prose h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}
.module__prose ol {
  padding-left: 1.4em;
  margin-bottom: var(--s-4);
  max-width: 64ch;
  color: var(--text-muted);
}
.module__prose ol li {
  margin-bottom: var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.module__prose ol li strong { color: var(--text); }

/* ────────────────────────────────────────────────────────────────
   Contact form (canonical) - editorial, restrained
   ─────────────────────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 540px;
}
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.contact-form__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.1;
}
.contact-form__input {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form__input::placeholder { color: var(--text-soft); }
.contact-form__input:hover {
  border-color: var(--border);
}
.contact-form__input:focus,
.contact-form__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-pale);
}
.contact-form__input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--border);
}
.contact-form__textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-sans);
}
select.contact-form__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 4 L6 8 L10 4' stroke='%23717972' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.contact-form__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.contact-form__note {
  color: var(--text-soft);
  max-width: 60ch;
  margin-top: var(--s-3);
}
/* Inline success/error state: only the helper note text changes. The form
   itself stays exactly where it was - no layout jump, no big heading, no
   alert box. Sage on success, restrained error tone on failure. */
.contact-form[data-state="success"] .contact-form__note {
  color: var(--accent);
}
.contact-form[data-state="error"] .contact-form__note {
  color: var(--error);
}

/* ────────────────────────────────────────────────────────────────
   Footer - social icons (LinkedIn / GitHub / X)
   Small monochrome marks, charcoal-soft, sage on hover.
   ─────────────────────────────────────────────────────────────── */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-3);
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-soft);
  transition: color .15s ease, transform .15s ease;
}
.site-footer__social a:hover {
  color: var(--accent);
}
.site-footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ────────────────────────────────────────────────────────────────
   Contact page - editorial structure
   The form column and the right "Open to collaborate on" column
   each open with a hairline divider + small label. Both columns
   are flat: no card background, no shadow, no rounded panel.
   ─────────────────────────────────────────────────────────────── */
.section--contact { padding-block: var(--s-7); }

.contact-col__head {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s-4);
  margin-bottom: var(--s-5);
}

/* Override the older `.collab-list` card treatment when used as a
   companion column. The structural rule lives on .contact-col__head. */
.contact-col.collab-list {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* Slightly tighter textarea so the form doesn't feel textarea-heavy. */
.contact-form__textarea { min-height: 120px; }

/* Footer social icons - slightly larger and better-spaced so they
   feel intentional, not incidental. Still small and monochrome. */
.site-footer__social { gap: 16px; margin-top: var(--s-4); }
.site-footer__social a { width: 24px; height: 24px; }
.site-footer__social svg { width: 18px; height: 18px; }