/* ==========================================================================
   acronos.com site stylesheet
   Hand-authored design system. No dependencies, no build step, no web fonts.
   Everything is driven by the custom properties in :root. Change a token
   there and it propagates across every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces, dark to light */
  --bg:            #0d1014;
  --bg-band:       #11151b;
  --surface:       #161b22;
  --surface-2:     #1c222b;
  --surface-3:     #232a35;

  /* Lines */
  --border:        #242b36;
  --border-strong: #333c4a;

  /* Ink */
  --text:          #e6e9ee;
  --text-2:        #a8b1bf;
  --text-3:        #7d8794;

  /* Accent */
  --accent:        #6ea8fe;
  --accent-bright: #8fbcff;
  --accent-ink:    #0b0e12;

  /* Category hues, as RGB triplets so we can vary alpha */
  --cat-creational: 94 211 168;
  --cat-structural: 110 168 254;
  --cat-behavioral: 180 148 255;
  --cat-foundation: 232 176 83;
  --cat-modern:     255 143 122;
  --cat-ownership:  224 122 184;

  /* Default category (overridden per-page / per-card) */
  --cat: var(--cat-structural);

  /* Type stacks. System fonts only, so nothing to download and nothing to rot */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Fluid type scale */
  --step--1: clamp(0.8rem,  0.775rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1rem,    0.97rem  + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.10rem  + 0.25vw, 1.3rem);
  --step-2:  clamp(1.4rem,  1.30rem  + 0.5vw,  1.7rem);
  --step-3:  clamp(1.7rem,  1.50rem  + 1vw,    2.25rem);
  --step-4:  clamp(2.1rem,  1.75rem  + 1.7vw,  3rem);
  --step-5:  clamp(2.4rem,  1.85rem  + 2.8vw,  3.85rem);

  /* Spacing scale */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-s:   0.75rem;
  --sp-m:   1.25rem;
  --sp-l:   2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4.5rem;
  --sp-3xl: 7rem;

  /* Layout */
  --wrap:        1180px;
  --wrap-narrow: 820px;
  --measure:     68ch;
  --radius-s:    6px;
  --radius:      10px;
  --radius-l:    16px;

  --ring: 0 0 0 3px rgb(110 168 254 / 0.45);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  font-weight: 620;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }

img, svg { max-width: 100%; height: auto; display: block; }

code, kbd, pre, samp { font-family: var(--mono); font-size: 0.92em; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-s);
}

::selection { background: rgb(110 168 254 / 0.3); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-m);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-2xl); }
.section--tight { padding-block: var(--sp-xl); }
.section--band {
  background: var(--bg-band);
  border-block: 1px solid var(--border);
}

.stack > * + * { margin-top: var(--sp-m); }

.skip-link {
  position: absolute;
  left: var(--sp-m);
  top: -3rem;
  z-index: 100;
  padding: var(--sp-xs) var(--sp-m);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-s);
  font-weight: 600;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--sp-xs); color: var(--accent-ink); }

/* Small monospace eyebrow label used above section headings */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-s);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-2);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   4. SITE HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(13 16 20 / 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  min-height: 3.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wordmark:hover { color: var(--text); }
.wordmark__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(110 168 254 / 0.18);
  flex: none;
}
.wordmark__sub { color: var(--text-3); font-weight: 400; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 520;
  transition: color 0.15s, background-color 0.15s;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.wordmark, .site-nav a { white-space: nowrap; }

/* The wordmark plus four nav items need about 805px on one line. Below that
   the header becomes two rows: wordmark above, nav spread across below. */
@media (max-width: 51rem) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0.15rem;
    min-height: 0;
    padding-block: 0.5rem;
  }
  .site-nav { width: 100%; }
  .site-nav ul { gap: 0; justify-content: space-between; }
  .site-nav a { padding-inline: 0.45rem; }
}

@media (max-width: 33rem) {
  .site-nav a { padding: 0.35rem 0.3rem; font-size: 0.76rem; }
  .wordmark { font-size: 0.86rem; }
  .wordmark__sub { display: none; }
}

@media (max-width: 23rem) {
  .wrap { padding-inline: var(--sp-s); }
  .site-nav a { padding-inline: 0.2rem; font-size: 0.72rem; }
}
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) var(--sp-2xl);
  border-bottom: 1px solid var(--border);
}

/* Depth without imagery: a faint dot grid plus two soft color washes. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::before {
  background-image: radial-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(120% 85% at 15% 0%, #000 20%, transparent 72%);
}
.hero::after {
  background:
    radial-gradient(46rem 26rem at 12% -12%, rgb(110 168 254 / 0.13), transparent 62%),
    radial-gradient(38rem 22rem at 92% 8%,  rgb(94 211 168 / 0.09), transparent 60%);
}
.hero > * { position: relative; z-index: 1; }

.hero__name {
  font-size: var(--step-5);
  letter-spacing: -0.035em;
  font-weight: 680;
}

.hero__role {
  display: block;
  margin-top: var(--sp-xs);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.hero__pitch {
  margin-top: var(--sp-m);
  max-width: 58ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-top: var(--sp-l);
}

/* Two-column hero so the right side carries substance instead of dead space */
.hero__grid { display: grid; gap: var(--sp-xl); align-items: center; }

@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero__aside {
  background: rgb(22 27 34 / 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--sp-m) var(--sp-m) 1.1rem;
  backdrop-filter: blur(4px);
}

.hero__aside dl { margin: 0; }
.hero__aside dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__aside dd {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: var(--step--1);
  line-height: 1.5;
}
.hero__aside dd span { color: var(--text-3); }
.hero__aside div + div {
  margin-top: var(--sp-s);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s,
              transform 0.16s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-bright); color: var(--accent-ink); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
  color: var(--text);
}

.btn__arrow { transition: transform 0.16s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   7. STAT STRIP
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat { background: var(--bg-band); padding: var(--sp-m) var(--sp-m) 1.1rem; }

.stat__num {
  font-size: var(--step-3);
  font-weight: 660;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.stat__num em {
  font-style: normal;
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 0.1em;
}
.stat__label {
  margin-top: var(--sp-2xs);
  font-size: var(--step--1);
  color: var(--text-3);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s var(--ease),
              box-shadow 0.18s;
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.55);
}

.card__media {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0.82;
  transition: opacity 0.18s, transform 0.4s var(--ease);
}
.card:hover .card__media img { opacity: 1; transform: scale(1.02); }

.card__body {
  padding: var(--sp-m);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  flex: 1;
}

.card__title { font-size: var(--step-1); }
.card__title a { color: var(--text); }
.card__title a:hover { color: var(--accent); }

/* Make the whole card clickable while keeping one real anchor for a11y */
.card__title a::after { content: ""; position: absolute; inset: 0; }

.card__text { color: var(--text-2); font-size: var(--step--1); line-height: 1.6; }

.card--feature { grid-column: 1 / -1; }

/* Wider minimum, so a four-card row lands as two-by-two instead of
   three-plus-an-orphan. */
.card-grid--two {
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
}

/* Diagram art gets breathing room rather than an edge-to-edge crop */
.card__media--diagram {
  display: grid;
  place-items: center;
  padding: var(--sp-m);
  background: var(--bg-band);
}
.card__media--diagram img {
  object-fit: contain;
  opacity: 1;
  max-height: 15rem;
  width: auto;
}
.card:hover .card__media--diagram img { transform: none; }

@media (min-width: 56rem) {
  .card--feature { flex-direction: row; }
  .card--feature .card__media {
    flex: 0 0 44%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .card--feature .card__body { padding: var(--sp-l); gap: var(--sp-s); }
  .card--feature .card__title { font-size: var(--step-2); }
}

/* --------------------------------------------------------------------------
   9. TAGS & BADGES
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  list-style: none;
  margin: var(--sp-xs) 0 0;
  padding: 0;
}

.tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-3);
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: rgb(var(--cat));
  background: rgb(var(--cat) / 0.11);
  border: 1px solid rgb(var(--cat) / 0.28);
  white-space: nowrap;
}

.badge--gof::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: currentColor;
}

/* Category scoping */
[data-cat="creational"] { --cat: var(--cat-creational); }
[data-cat="structural"] { --cat: var(--cat-structural); }
[data-cat="behavioral"] { --cat: var(--cat-behavioral); }
[data-cat="foundation"] { --cat: var(--cat-foundation); }
[data-cat="modern"]     { --cat: var(--cat-modern); }
[data-cat="ownership"]  { --cat: var(--cat-ownership); }

/* --------------------------------------------------------------------------
   10. PATTERN INDEX
   -------------------------------------------------------------------------- */

.cat-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
  flex-wrap: wrap;
  padding-bottom: var(--sp-s);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-m);
}
.cat-head h2 { font-size: var(--step-2); }
.cat-head h2::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: rgb(var(--cat));
  margin-right: 0.55rem;
  vertical-align: 0.08em;
}
.cat-head__count {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--text-3);
}
.cat-head__note {
  flex: 1 1 22rem;
  font-size: var(--step--1);
  color: var(--text-3);
  line-height: 1.5;
}

.pattern-grid {
  display: grid;
  gap: var(--sp-s);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  margin-bottom: var(--sp-2xl);
}

.p-card {
  position: relative;
  display: block;
  padding: var(--sp-m) var(--sp-m) 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid rgb(var(--cat) / 0.55);
  border-radius: var(--radius-s) var(--radius) var(--radius) var(--radius-s);
  transition: background-color 0.16s, border-color 0.16s,
              transform 0.16s var(--ease);
}
.p-card:hover {
  background: var(--surface-2);
  border-left-color: rgb(var(--cat));
  transform: translateY(-2px);
}
.p-card__name {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.p-card__intent {
  margin-top: 0.35rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-2);
}
.p-card__meta {
  margin-top: var(--sp-s);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.p-card--todo {
  opacity: 0.5;
  border-left-color: rgb(var(--cat) / 0.22);
  border-style: dashed;
}
.p-card--todo:hover { transform: none; background: var(--surface); }
.p-card--todo .p-card__name { color: var(--text-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   11. DOC LAYOUT (sidebar + article)
   -------------------------------------------------------------------------- */

.doc {
  display: grid;
  gap: var(--sp-xl);
  align-items: start;
  padding-block: var(--sp-l) var(--sp-2xl);
}

/* Mobile: the article comes first and the full index sits after it. Avoids a
   <details> disclosure, which cannot be forced open again by CSS at wider
   widths. Source order stays nav-then-article for assistive tech. */
.doc > .side    { order: 2; }
.doc > article  { order: 1; min-width: 0; }

@media (min-width: 62rem) {
  .doc { grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--sp-2xl); }
  .doc > .side   { order: 0; }
  .doc > article { order: 0; }
}

/* --- sidebar --- */

.side { min-width: 0; }

.side__heading {
  font-size: var(--step-1);
  font-weight: 620;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-s);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--border);
}

@media (min-width: 62rem) {
  .side {
    position: sticky;
    top: 4.75rem;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .side__heading { display: none; }
}

.side__group + .side__group { margin-top: var(--sp-m); }

.side__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-xs);
}
.side__title::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
  background: rgb(var(--cat));
  flex: none;
}

.side ul { list-style: none; margin: 0; padding: 0; }

.side a {
  display: block;
  padding: 0.32rem 0.6rem;
  border-left: 2px solid var(--border);
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: color 0.14s, border-color 0.14s, background-color 0.14s;
}
.side a:hover {
  color: var(--text);
  background: var(--surface);
  border-left-color: var(--border-strong);
}
.side a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  background: rgb(var(--cat) / 0.09);
  border-left-color: rgb(var(--cat));
}
/* Listed but not written yet: visible, dimmed, deliberately not a link. */
.side__pending {
  display: block;
  padding: 0.32rem 0.6rem;
  border-left: 2px solid var(--border);
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.55;
}

/* On narrow screens the index becomes a bounded scroll pane so 38 entries
   don't push the footer off the bottom of the world. */
@media (max-width: 61.99rem) {
  .side__list {
    max-height: 21rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-s);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
}

/* --------------------------------------------------------------------------
   12. PROSE
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-m); }

.prose h2 {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--border);
  font-size: var(--step-2);
}
.prose h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.prose h3 { margin-top: var(--sp-l); font-size: var(--step-1); }

.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: 620; }

.prose ul, .prose ol { margin: 0; padding-left: 1.35rem; }
.prose li + li { margin-top: var(--sp-xs); }
.prose li::marker { color: var(--text-3); }

.prose a { text-decoration: underline; text-decoration-color: rgb(110 168 254 / 0.4); text-underline-offset: 2px; }
.prose a:hover { text-decoration-color: var(--accent-bright); }

/* A cross-reference whose target page is not written yet. Reads as "this will
   be a link" rather than as a dead one. Generated by build.py, not authored. */
.xref-pending {
  color: var(--text-2);
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

.prose code {
  padding: 0.1rem 0.35rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: #cfe3ff;
}

/* Intent quote: the canonical one-line definition at the top of each page */
.intent {
  margin: 0;
  padding: var(--sp-m) var(--sp-m) var(--sp-m) 1.35rem;
  background: linear-gradient(90deg, rgb(var(--cat) / 0.07), transparent 70%);
  border-left: 3px solid rgb(var(--cat));
  border-radius: 0 var(--radius) var(--radius) 0;
}
.intent p {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text);
  font-weight: 480;
}
.intent cite {
  display: block;
  margin-top: var(--sp-xs);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--text-3);
}

/* Commentary callout, flagged so opinion never reads as textbook fact */
.insight {
  padding: var(--sp-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid rgb(var(--cat) / 0.7);
  border-radius: var(--radius-s) var(--radius) var(--radius) var(--radius-s);
}
.insight__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(var(--cat));
  margin-bottom: var(--sp-xs);
}
.insight p + p { margin-top: var(--sp-s); }

/* --------------------------------------------------------------------------
   13. FIGURES
   -------------------------------------------------------------------------- */

.fig { margin: var(--sp-l) 0; }

.fig__frame {
  padding: var(--sp-m);
  background: var(--bg-band);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.fig__frame svg { margin-inline: auto; }

/* --- code blocks ---------------------------------------------------------
   Example code is real text, not a screenshot, so it can be copied, searched,
   zoomed, and read aloud. Token colors are drawn from the category hues so
   code belongs to the same system as everything else. */

pre.code {
  margin: 0;
  padding: var(--sp-m);
  background: var(--bg-band);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-2);
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Beat the inline-code rule from the prose section */
.prose pre.code code {
  font-family: var(--mono);
  font-size: inherit;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
}

pre.code .k { color: #7fb2ff; }                    /* keyword   */
pre.code .t { color: #5ed3a8; }                    /* type name */
pre.code .s { color: #e8b053; }                    /* string    */
pre.code .n { color: #ff8f7a; }                    /* number    */
pre.code .c { color: #6b7683; font-style: italic; } /* comment  */

.fig figcaption {
  margin-top: var(--sp-xs);
  font-size: var(--step--1);
  color: var(--text-3);
  line-height: 1.5;
}
.fig figcaption b { color: var(--text-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. PAGE HEADER (pattern pages)
   -------------------------------------------------------------------------- */

.page-head { margin-bottom: var(--sp-l); }

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--text-3);
  margin-bottom: var(--sp-s);
}
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: 0.5; }

.page-head__row {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  flex-wrap: wrap;
}
.page-head h1 { font-size: var(--step-3); letter-spacing: -0.028em; }

/* --------------------------------------------------------------------------
   15. PREV / NEXT
   -------------------------------------------------------------------------- */

.pager {
  display: grid;
  gap: var(--sp-s);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--border);
}
@media (min-width: 40rem) { .pager { grid-template-columns: 1fr 1fr; } }

.pager a {
  padding: var(--sp-s) var(--sp-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background-color 0.16s, border-color 0.16s;
}
.pager a:hover { background: var(--surface-2); border-color: var(--border-strong); }
.pager__dir {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pager__name { color: var(--text); font-weight: 580; }
.pager a:hover .pager__name { color: var(--accent); }
.pager__next { text-align: right; }

/* --------------------------------------------------------------------------
   16. TABLE
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
table.tbl th, table.tbl td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
table.tbl th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}
table.tbl td { color: var(--text-2); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td b { color: var(--text); }

/* --------------------------------------------------------------------------
   17. ROLES  (experience entries)
   -------------------------------------------------------------------------- */

.role { padding-block: var(--sp-l); border-top: 1px solid var(--border); }
.role:first-of-type { border-top: none; padding-top: var(--sp-s); }

.role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-s);
  margin-bottom: var(--sp-2xs);
}
.role__org { font-size: var(--step-2); letter-spacing: -0.022em; }
.role__when {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--text-3);
  white-space: nowrap;
}
.role__title {
  font-size: var(--step-1);
  font-weight: 560;
  color: var(--accent);
  margin-bottom: var(--sp-s);
}
.role__lede { color: var(--text-2); max-width: var(--measure); }

.role__points {
  margin: var(--sp-m) 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}
.role__points li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--text-2);
  line-height: 1.6;
}
.role__points li + li { margin-top: var(--sp-s); }
.role__points li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 1px;
  background: rgb(var(--cat) / 0.85);
}
.role__points b { color: var(--text); font-weight: 620; }

.note-private {
  margin-top: var(--sp-m);
  padding: var(--sp-s) var(--sp-m);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--text-3);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-band);
  padding-block: var(--sp-l);
  margin-top: auto;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--text-3);
}
.site-footer ul {
  display: flex;
  gap: var(--sp-m);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--accent); }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* --------------------------------------------------------------------------
   19. CV  (the resume page)

   The resume is deliberately short. Every entry carries a "Details" link into
   the matching section of experience.html, so this page stays a summary and
   the depth lives one click away. Section 20 makes those links survive
   printing.
   -------------------------------------------------------------------------- */

.cv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
  padding-bottom: var(--sp-m);
  border-bottom: 1px solid var(--border-strong);
}
.cv__name {
  font-size: var(--step-4);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.cv__role {
  font-family: var(--mono);
  font-size: var(--step-0);
  color: var(--accent);
  letter-spacing: 0.01em;
  margin-top: var(--sp-2xs);
}
.cv__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
  text-align: right;
}
.cv__contact li + li { margin-top: var(--sp-2xs); }
.cv__contact a { color: var(--text-2); }
.cv__contact a:hover { color: var(--accent); }

.cv__summary {
  margin-top: var(--sp-l);
  color: var(--text-2);
  max-width: var(--measure);
  font-size: var(--step-0);
}

.cv__howto {
  margin-top: var(--sp-m);
  padding: var(--sp-s) var(--sp-m);
  border-left: 2px solid rgb(var(--cat) / 0.7);
  background: var(--bg-band);
  font-size: var(--step--1);
  color: var(--text-3);
  max-width: var(--measure);
}

/* Skills: a definition list that reads as a table without being one. */
.cv__facts {
  margin: var(--sp-l) 0 0;
  padding-top: var(--sp-m);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
}
.cv__facts > div {
  display: grid;
  gap: var(--sp-2xs) var(--sp-m);
  padding-block: var(--sp-xs);
}
@media (min-width: 40rem) {
  .cv__facts > div { grid-template-columns: 8.5rem 1fr; }
}
.cv__facts dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.2em;
}
.cv__facts dd { margin: 0; color: var(--text-2); }

.cv__section {
  margin-top: var(--sp-xl);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--border-strong);
}
.cv__section + .role { border-top: none; padding-top: var(--sp-m); }

/* The "Details" link that ends each entry. */
.more {
  display: inline-block;
  margin-top: var(--sp-s);
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgb(110 168 254 / 0.35);
  text-underline-offset: 3px;
}
.more:hover { color: var(--accent-bright); text-decoration-color: currentColor; }
.more::after { content: " \2192"; }

.cv .role__points li { font-size: var(--step--1); }
.role--line { padding-block: var(--sp-m); }
.cv .role__lede { font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   20. PRINT

   A web resume can link; a printed one cannot. Rather than maintain two
   documents, this prints the same page on white, drops the site chrome, and
   writes each link's destination out in full after the text, so a PDF of this
   page is self-contained. Print or "Save as PDF" from the browser.
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --bg: #fff;
    --bg-band: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --surface-3: #fff;
    --border: #c9ced6;
    --border-strong: #8b939f;
    --text: #000;
    --text-2: #16191f;
    --text-3: #414850;
    --accent: #123a7a;
    --accent-bright: #123a7a;
  }

  @page { margin: 12mm 14mm 12mm; }

  html, body { background: #fff !important; color: #000; }

  /* The screen layout makes body a flex column so the footer sticks to the
     bottom. Flex containers fragment badly across printed pages, so undo it. */
  body { display: block !important; }
  main  { flex: none; }

  .site-header,
  .site-footer,
  .skip-link,
  .side,
  .pager,
  .cv > p:last-child { display: none !important; }

  .section { padding-block: 0 !important; }
  .wrap, .wrap--narrow {
    max-width: 100%;
    width: auto;
    padding-inline: 0;
    margin-inline: 0;
  }
  .cv__summary, .cv__howto, .role__lede, .role__points, .prose { max-width: none; }

  body, .role__lede, .role__points li, .cv__facts, .cv__howto {
    font-size: 9pt;
    line-height: 1.38;
  }
  .cv__summary { font-size: 9.5pt; line-height: 1.42; }
  .cv__name  { font-size: 25pt; }
  .cv__role  { font-size: 10.5pt; }
  .cv__contact { font-size: 9pt; }
  .role__org { font-size: 13.5pt; }
  .role__title { font-size: 11pt; margin-bottom: 0.2rem; }
  .role__when { font-size: 9pt; }
  .cv__section { font-size: 8pt; margin-top: 10pt; }
  .more { font-size: 8.5pt; }

  .role { padding-block: 6pt; }
  .role--line { padding-block: 5pt; }
  .role__points { margin-top: 6pt; }
  .role__points li + li { margin-top: 3pt; }
  .cv__summary, .cv__facts { margin-top: 10pt; }
  .cv__howto { margin-top: 7pt; padding: 4pt 8pt; }

  a { color: #123a7a; text-decoration: none; }

  /* A printed link is otherwise a dead end, so write the destination out.
     Internal hrefs are relative in the markup, so name the host explicitly. */
  .cv a[href^="http"]::after { content: " (" attr(href) ")"; }
  .cv a:not([href^="http"]):not([href^="#"])::after {
    content: " (acronos.com/" attr(href) ")";
  }
  .cv a::after {
    font-family: var(--mono);
    font-size: 7.5pt;
    font-weight: 400;
    color: #414850;
  }
  .cv__contact a::after { content: "" !important; }

  /* Keep headings with what they introduce, and never split a bullet, but do
     NOT set break-inside on .role itself: a role taller than the remaining
     space would be pushed whole onto the next page and leave half a page
     blank. */
  .cv__section,
  .role__head,
  .role__title,
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .role__points li,
  .cv__facts > div { break-inside: avoid; page-break-inside: avoid; }
  .cv__head { break-inside: avoid; }

  /* Earlier and Education are short and bulletless, so they print side by side
     rather than each claiming a full-width band. */
  .cv__pair { columns: 2; column-gap: 20pt; }
  .cv__pair > * { break-inside: avoid; }
  .cv__pair .role { padding-block: 0; border-top: none; }
  .cv__pair .cv__section { margin-top: 0; }

  .cv__howto { border-left-color: #8b939f; background: #fff; }
  .role__points li::before { background: #414850; }
}