:root {
  --reading-paper: #f4f1e8;
  --reading-paper-deep: #e5e0d3;
  --reading-ink: #171b1b;
  --reading-muted: #5e6662;
  --article-measure: 50rem;
}

.explainer-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 8%, rgba(99, 215, 227, .09), transparent 26rem),
    radial-gradient(circle at 10% 22%, rgba(243, 75, 157, .07), transparent 24rem),
    var(--ink);
}

.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::after { right: 0; }

.explainer-index {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(4.75rem, 9vw, 9rem) var(--gutter) clamp(5rem, 9vw, 9rem);
}

.explainer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .62fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--line-strong);
}

.explainer-hero h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 9vw, 9.2rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .84;
}

.explainer-hero h1 em { color: var(--signal); font-weight: 400; }

.explainer-hero__lede {
  max-width: 39rem;
  margin: 2.4rem 0 0;
  color: #d9ddd9;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.28;
}

.reading-path {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: path;
}

.reading-path li {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
  counter-increment: path;
}

.reading-path li:last-child { border-bottom: 1px solid var(--line); }
.reading-path li::before {
  content: "0" counter(path);
  color: var(--signal);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .08em;
}

.reading-path strong { display: block; margin-bottom: .3rem; font-size: .86rem; }
.reading-path span { color: var(--muted); font-size: .8rem; line-height: 1.55; }

.explainer-collection { padding-top: clamp(4rem, 8vw, 7rem); }

.explainer-collection__head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 36rem);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.explainer-collection__head h2 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .92;
}

.explainer-collection__head > p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.72;
}

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.explainer-card {
  position: relative;
  min-height: 39rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3.5vw, 3.4rem);
  overflow: hidden;
  background: var(--ink-soft);
}

.explainer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background: linear-gradient(135deg, transparent 58%, rgba(255,255,255,.025));
}

.explainer-card--terminal { --accent: var(--terminal); }
.explainer-card--cyber { --accent: var(--cyber); }

.explainer-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(5rem, 10vw, 9rem);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.explainer-card__meta span:first-child { color: var(--accent); }

.explainer-card h3 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 5.1rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .9;
}

.explainer-card__deck {
  max-width: 37rem;
  margin: 1.65rem 0 0;
  color: #c8ceca;
  font-size: .91rem;
  line-height: 1.72;
}

.explainer-card__credit {
  display: grid;
  gap: .28rem;
  margin: 1.5rem 0 0;
  color: #dfe3df;
  font-size: .75rem;
  font-weight: 600;
}

.explainer-card__credit small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .02em;
}

.explainer-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
  margin-top: auto;
  padding-top: 3rem;
}

.explainer-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.explainer-card__topics li {
  padding: .42rem .62rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .59rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.explainer-card__read {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  color: var(--white);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .065em;
  text-decoration: none;
  text-transform: uppercase;
}

.explainer-card__read::after { content: "→"; color: var(--accent); font-size: 1rem; }
.explainer-card__read::before {
  content: "";
  position: absolute;
  inset: 0;
}

.explainer-card:has(.explainer-card__read:hover),
.explainer-card:has(.explainer-card__read:focus-visible) { background: var(--ink-raised); }

/* Article shell */
.article-page { background: var(--ink); }

.article-masthead {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 9rem) var(--gutter) clamp(3.5rem, 7vw, 6.5rem);
}

.article-masthead__back {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.article-masthead__back span { color: var(--signal); }
.article-masthead__category {
  margin: 0 0 1.4rem;
  color: var(--article-accent, var(--signal));
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.article-masthead h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.1rem, 9vw, 9rem);
  font-weight: 400;
  letter-spacing: -.062em;
  line-height: .84;
}

.article-masthead__deck {
  max-width: 49rem;
  margin: 2.35rem 0 0;
  color: #d5dad6;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.3;
}

.article-byline {
  margin: 2.5rem 0 0;
  color: var(--white);
  font-size: .86rem;
  font-weight: 600;
}

.article-llm-credit {
  margin: .35rem 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .025em;
  line-height: 1.5;
}

.article-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin: 3rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.article-masthead__meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 2rem .12rem 0;
  border-radius: 50%;
  background: var(--article-accent, var(--signal));
}

.article-paper {
  background: var(--reading-paper);
  color: var(--reading-ink);
  color-scheme: light;
}

.article-layout {
  max-width: var(--content);
  display: grid;
  grid-template-columns: 15rem minmax(0, var(--article-measure));
  justify-content: center;
  gap: clamp(3rem, 5vw, 6rem);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}

.article-toc { align-self: start; position: sticky; top: 7rem; }
.article-toc--desktop {
  max-height: calc(100vh - 8.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.article-toc p {
  margin: 0 0 1.35rem;
  color: #5f6762;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; border-top: 1px solid rgba(23,27,27,.14); }
.article-toc li:last-child { border-bottom: 1px solid rgba(23,27,27,.14); }
.article-toc a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .6rem;
  padding: .9rem 0;
  color: #454d49;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}
.article-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--article-accent, #277f8e); font-family: var(--mono); font-size: .64rem; }
.article-toc a:hover, .article-toc a:focus-visible { color: var(--reading-ink); }
.article-toc--mobile { display: none; }

.article-copy { width: 100%; font-family: var(--display); font-size: clamp(1.22rem, 1.4vw, 1.34rem); line-height: 1.68; }
.article-copy > p { margin: 0 0 1.45em; }
.article-copy > p:first-child { font-size: 1.2em; line-height: 1.55; }
.article-copy > p:first-child::first-letter {
  float: left;
  margin: .08em .12em -.05em 0;
  color: var(--article-accent, #277f8e);
  font-size: 4.4em;
  line-height: .72;
}

.article-copy h2 {
  margin: 3.4em 0 .8em;
  padding-top: .35em;
  border-top: 1px solid rgba(23,27,27,.17);
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1;
  scroll-margin-top: 7rem;
}

.article-copy strong { font-weight: 600; }
.article-copy em { text-decoration-thickness: .06em; }
.article-copy code {
  overflow-wrap: anywhere;
  color: #404945;
  font-family: var(--mono);
  font-size: .68em;
}
.article-copy hr { width: 4rem; height: 1px; margin: 4rem 0; border: 0; background: rgba(23,27,27,.3); }
.article-copy blockquote { margin: 2.2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--article-accent, #277f8e); }

.ai-contribution {
  margin-top: 5rem;
  padding: 2rem;
  border: 1px solid rgba(23,27,27,.2);
  background: var(--reading-paper-deep);
}

.ai-contribution h2 {
  margin: 0 0 1rem;
  color: var(--reading-ink);
  font-family: var(--sans);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-contribution p {
  margin: 0;
  color: #4c5450;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.7;
}

.ai-contribution p + p { margin-top: .85rem; }
.ai-contribution strong { color: var(--reading-ink); }

.research-bridge {
  color: var(--white);
  background:
    radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--article-accent, var(--signal)) 15%, transparent), transparent 30rem),
    var(--ink-soft);
}

.research-bridge__inner {
  max-width: var(--content);
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 9vw, 9rem);
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 8rem) var(--gutter);
}

.research-bridge__label { margin: 0 0 1.25rem; color: var(--article-accent, var(--signal)); font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.research-bridge h2 { max-width: 10ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 5vw, 5.3rem); font-weight: 400; letter-spacing: -.05em; line-height: .9; }
.research-bridge__content > p { max-width: 41rem; margin: 0; color: #c8cfca; font-size: .94rem; line-height: 1.78; }

.research-bridge__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin: 2rem 0 0; padding: 1px; background: var(--line); }
.research-bridge__facts > div { min-height: 7.5rem; padding: 1.15rem; background: var(--ink); }
.research-bridge__facts dt { margin: 0 0 .7rem; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.research-bridge__facts dd { margin: 0; color: #e4e7e3; font-size: .77rem; line-height: 1.58; }

.research-bridge__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.article-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 49px;
  padding: .75rem 1rem;
  border: 1px solid var(--line-strong);
  color: var(--white);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .065em;
  text-decoration: none;
  text-transform: uppercase;
}
.article-action--primary { border-color: var(--article-accent, var(--signal)); background: var(--article-accent, var(--signal)); color: var(--ink); }
.article-action:hover { border-color: var(--white); }
.access-note { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; }
.access-note svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.article-next {
  max-width: var(--content);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 auto;
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .72rem;
}
.article-next a { color: var(--white); text-decoration: none; }
.article-next a span { color: var(--signal); }

@media (min-width: 1800px) {
  :root { --article-measure: 54rem; }
  .article-copy { font-size: 1.42rem; }
}

@media (max-width: 1100px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-copy { max-width: var(--article-measure); margin-inline: auto; }
  .article-toc--desktop { display: none; }
  .article-toc--mobile {
    display: block;
    position: static;
    width: 100%;
    max-width: var(--article-measure);
    margin: 0 auto 3rem;
    border: 1px solid rgba(23,27,27,.2);
  }
  .article-toc--mobile summary { padding: 1rem; color: var(--reading-ink); cursor: pointer; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .article-toc--mobile ol { padding: 0 1rem 1rem; }
}

@media (max-width: 900px) {
  .explainer-hero,
  .explainer-collection__head,
  .research-bridge__inner { grid-template-columns: 1fr; }
  .explainer-hero { align-items: start; }
  .reading-path { max-width: 38rem; }
  .explainer-grid { grid-template-columns: 1fr; }
  .explainer-card { min-height: 35rem; }
  .research-bridge__inner { gap: 2.5rem; }
}

@media (max-width: 620px) {
  .explainer-index { padding-top: 4rem; }
  .explainer-hero h1, .article-masthead h1 { font-size: clamp(3.5rem, 17vw, 5.3rem); }
  .explainer-card { min-height: 37rem; padding: 1.5rem var(--gutter); }
  .explainer-card__meta { margin-bottom: 5rem; }
  .explainer-card__footer { align-items: start; flex-direction: column; }
  .article-masthead { padding-top: 3rem; }
  .article-masthead__back { margin-bottom: 3.2rem; }
  .article-masthead__meta { display: grid; gap: .55rem; }
  .article-masthead__meta span + span::before { display: none; }
  .article-layout { padding-top: 2.5rem; }
  .article-copy { font-size: 1.08rem; line-height: 1.7; }
  .article-copy h2 { margin-top: 2.8em; }
  .research-bridge__facts { grid-template-columns: 1fr; }
  .article-action { width: 100%; }
  .article-next { align-items: flex-start; flex-direction: column; }
}

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

@media print {
  @page { margin: 1.8cm; }
  html { background: #fff; color-scheme: light; }
  body.article-page { background: #fff; }
  body.article-page::before { display: none; }
  .article-page .site-header,
  .article-page .skip-link,
  .article-masthead__back,
  .article-toc,
  .article-next,
  .article-page .site-footer { display: none; }
  .article-masthead { max-width: none; padding: 0 0 1.2cm; color: #111; }
  .article-masthead h1 { max-width: 13cm; font-size: 42pt; }
  .article-masthead__deck { color: #333; font-size: 16pt; }
  .article-masthead__meta { color: #555; }
  .article-byline { color: #111; }
  .article-llm-credit { color: #555; }
  .article-paper { background: #fff; }
  .article-layout { max-width: none; display: block; padding: 0; }
  .article-copy { max-width: none; font-size: 11pt; line-height: 1.55; }
  .article-copy h2 { break-after: avoid; }
  .article-copy p { orphans: 3; widows: 3; }
  .research-bridge { margin-top: 1cm; border: 1px solid #777; background: #fff; color: #111; }
  .research-bridge__inner { max-width: none; display: block; padding: .6cm; }
  .research-bridge h2 { font-size: 24pt; }
  .research-bridge__content > p,
  .research-bridge__facts dd { color: #222; }
  .research-bridge__facts { background: #bbb; }
  .research-bridge__facts > div { background: #fff; }
  .article-action { border: 1px solid #444; color: #111; }
  .article-action[href^="http"]::after { content: " (" attr(href) ")"; font-family: serif; font-size: 8pt; font-weight: 400; letter-spacing: 0; text-transform: none; }
}