/* Notes: the index and the articles. Builds on the tokens and components in styles.css.
   Thumbnails are inline <svg><use href="/assets/notes/….svg#layer"></svg> so they inherit
   the --art-* colours below and follow the light/dark theme. */

@property --measure {
  syntax: "<length>";
  inherits: true;
  initial-value: 640px;
}

/* ---------- Thumbnails (index rows, article headers, "read next") ---------- */
.note-thumb {
  --art-on: var(--accent);
  --art-ink: var(--ink);
  --art-line: var(--line-strong);
  --art-faint: var(--faint);
  --art-paper: var(--white);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px) 0 0 / 12px 12px,
    var(--white);
  transition: border-color 0.25s var(--ease);
}
.note-thumb use {
  transform-box: fill-box;
}
/* Hover or keyboard focus replays the computation in discrete steps:
   a forward pass, automaton rows, crowns by row. */
.note-thumb[data-note="105"] {
  --replay: thumb-cols 0.48s steps(3, end) both;
}
.note-thumb[data-note="rules"] {
  --replay: thumb-rows 0.95s steps(22, end) both;
}
/* The Crowns board uses the six region tones from crowns.css; tests keep the copies identical. */
.note-thumb[data-note="crowns"] {
  --replay: thumb-rows 0.6s steps(6, end) both;
  --cr-t0: color-mix(in oklab, var(--accent) 20%, var(--white));
  --cr-t1: color-mix(in oklab, var(--rust) 34%, var(--white));
  --cr-t2: color-mix(in oklab, var(--ink) 36%, var(--white));
  --cr-t3: color-mix(in oklab, var(--accent) 42%, var(--white));
  --cr-t4: color-mix(in oklab, var(--rust) 66%, var(--white));
  --cr-t5: color-mix(in oklab, var(--accent) 64%, var(--white));
}
@media (prefers-reduced-motion: no-preference) {
  .note-entry:has(a:focus-visible) .thumb-step {
    animation: var(--replay, none);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .note-entry:hover .thumb-step {
    animation: var(--replay, none);
  }
}
@keyframes thumb-rows {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes thumb-cols {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* A thumbnail morphs between a list and its article header on navigation. Only lists and
   headers take part, and only where the header thumbnail is shown. "Read next" never does. */
@media (min-width: 56.25em) {
  :is(.note-index, .note-list, .article-heading) .note-thumb {
    view-transition-class: note-thumb;
  }
  :is(.note-index, .note-list, .article-heading) .note-thumb[data-note="105"] {
    view-transition-name: note-thumb-105;
  }
  :is(.note-index, .note-list, .article-heading) .note-thumb[data-note="rules"] {
    view-transition-name: note-thumb-rules;
  }
  :is(.note-index, .note-list, .article-heading) .note-thumb[data-note="crowns"] {
    view-transition-name: note-thumb-crowns;
  }
  ::view-transition-group(*.note-thumb) {
    animation-duration: 0.42s;
    animation-timing-function: var(--ease);
  }
  /* A thumbnail without a partner leaves and arrives with the page instead of lingering. */
  ::view-transition-old(*.note-thumb):only-child {
    animation: 0.16s var(--ease) both thumb-leave;
  }
  ::view-transition-new(*.note-thumb):only-child {
    animation: 0.32s var(--ease) both thumb-arrive;
  }
}
@keyframes thumb-leave {
  to {
    opacity: 0;
  }
}
@keyframes thumb-arrive {
  from {
    opacity: 0;
  }
}

/* ---------- Readouts that wrap cleanly ----------
   Every item carries its "/" and the readout is pulled left by one separator and clipped,
   so a wrapped line never starts with a stray slash. */
:where(.note-entry-meta, .article-heading > .readout, .prose figcaption.readout).readout {
  --sep: calc(1ch + 0.9rem);
  display: flex;
  max-width: none;
  margin-left: calc(-1 * var(--sep));
  clip-path: inset(-0.6em -0.6em -0.6em var(--sep));
}
:where(.note-entry-meta, .article-heading > .readout, .prose figcaption.readout).readout
  > :first-child::before {
  content: "/";
  content: "/" / "";
  margin-right: 0.9rem;
  color: var(--line-strong);
}
:where(.note-entry-meta, .article-heading > .readout, .prose figcaption.readout).readout > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Phones drop readout separators (styles.css), so nothing needs pulling left or clipping. */
@media (max-width: 40rem) {
  :where(.note-entry-meta, .article-heading > .readout, .prose figcaption.readout).readout {
    margin-left: 0;
    clip-path: none;
  }
  :where(.note-entry-meta, .article-heading > .readout, .prose figcaption.readout).readout
    > :first-child::before {
    content: none;
  }
}

/* ---------- Notes index ---------- */
.note-index {
  --thumb: clamp(13rem, 24vw, 21rem);
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.note-index,
.article-next {
  container-type: inline-size;
}
/* Default: thumbnail, then the text with its readout underneath. */
.note-entry {
  position: relative;
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    "thumb ."
    "thumb body"
    "thumb meta"
    "thumb .";
  column-gap: clamp(1.25rem, 3.5vw, 3rem);
  padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.note-entry > .note-thumb {
  grid-area: thumb;
  align-self: center;
}
.note-entry-body {
  grid-area: body;
  min-width: 0;
}
.note-entry :is(h2, .note-entry-title) {
  overflow-wrap: break-word;
  max-width: 22ch;
  font-size: var(--step-3);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.note-entry :is(h2, .note-entry-title) a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.note-entry a:focus-visible {
  outline: none;
}
.note-entry:has(a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.note-entry-body > p:not(.note-entry-title) {
  margin-top: 0.75rem;
  max-width: 50ch;
  color: var(--muted);
}
.note-entry-meta {
  grid-area: meta;
  margin-top: 0.9rem;
}
.note-entry:is(:hover, :has(a:focus-visible)) :is(h2, .note-entry-title) {
  color: var(--accent-ink);
}
.note-entry:is(:hover, :has(a:focus-visible)) .note-thumb {
  border-color: var(--accent);
}
.note-entry:is(:hover, :has(a:focus-visible)) .note-entry-meta > :first-child {
  color: var(--accent-ink);
}

/* Wide lists: the readout becomes a right-hand ledger column. */
@container (min-width: 56rem) {
  .note-entry {
    grid-template-columns: var(--thumb) minmax(0, 1fr) minmax(8.5rem, auto);
    grid-template-rows: auto;
    grid-template-areas: "thumb body meta";
    align-items: center;
  }
  .note-entry-body > p:not(.note-entry-title) {
    font-size: var(--step-1);
    line-height: 1.5;
  }
  .note-entry-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    margin: 0;
    text-align: right;
    clip-path: none;
  }
  .note-entry-meta.readout > *::before {
    content: none;
  }
  .note-entry-meta > :first-child {
    color: var(--ink);
    transition: color 0.2s var(--ease);
  }
}

/* Narrow lists (phones, and wide text zoom): a small thumbnail beside the text. */
@container (max-width: 34rem) {
  .note-entry {
    grid-template-columns: 6.75rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "thumb body"
      "thumb meta";
    column-gap: 1rem;
  }
  .note-entry > .note-thumb {
    align-self: start;
    border-radius: var(--radius-sm);
  }
  .note-entry :is(h2, .note-entry-title) {
    font-size: var(--step-2);
    letter-spacing: -0.03em;
  }
  .note-entry-body > p:not(.note-entry-title) {
    margin-top: 0.5rem;
    font-size: var(--step--1);
  }
  .note-entry-meta {
    margin-top: 0.6rem;
  }
}

/* Very narrow (large text on a phone): the thumbnail sits above the text. */
@container (max-width: 18rem) {
  .note-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "thumb"
      "body"
      "meta";
  }
  .note-entry > .note-thumb {
    width: min(100%, 9rem);
    margin-bottom: 0.9rem;
  }
}

/* ---------- Article heading ---------- */
.article-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(2.5rem, 5vw, 4.5rem);
}
.back-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}
.back-link span[aria-hidden] {
  display: inline-block;
  transition: transform 0.3s var(--spring);
}
.back-link:hover {
  color: var(--ink);
}
.back-link:hover span[aria-hidden] {
  transform: translateX(-3px);
}
.article-heading > :is(.eyebrow, .readout) {
  margin-top: clamp(1.75rem, 4.5vw, 3.75rem);
}
.article-heading h1 {
  overflow-wrap: break-word;
  margin-top: 1.1rem;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  font-weight: 680;
  line-height: 0.98;
  letter-spacing: -0.058em;
  max-width: 16ch;
}
.article-heading > p:not(.eyebrow, .readout) {
  margin-top: 1.5rem;
  max-width: 38ch;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.015em;
  color: var(--muted);
}
.article-heading > .note-thumb {
  display: none;
}
@media (min-width: 56.25em) {
  .article-heading:has(> .note-thumb) {
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 24vw, 21rem);
  }
  .article-heading > :not(.note-thumb, .back-link) {
    grid-column: 1;
  }
  .article-heading > .back-link {
    grid-column: 1 / -1;
  }
  .article-heading > .note-thumb {
    display: block;
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: end;
  }
}

/* Reading progress: a hairline on the header's bottom edge, driven by scrolling through the article. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .article-layout {
      view-timeline: --article block;
    }
    .article-layout::before {
      content: "";
      position: fixed;
      top: calc(var(--header-h) - 2px);
      left: 0;
      right: 0;
      z-index: 41;
      height: 2px;
      background: var(--accent);
      transform-origin: 0 50%;
      transform: scaleX(0);
      pointer-events: none;
      animation: read-progress linear both;
      animation-timeline: --article;
      animation-range: contain 0% contain 100%;
    }
  }
}
@keyframes read-progress {
  to {
    transform: scaleX(1);
  }
}

/* ---------- Article layout: contents in the left margin, notes in the right ---------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-top: clamp(2rem, 4.5vw, 4rem);
  border-top: 1px solid var(--line);
}
.article-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  font-size: var(--step--1);
}
.article-aside nav,
.article-aside .eyebrow,
.article-aside a:not(.article-lab-link) {
  display: none;
}
.article-aside a:not(.article-lab-link) {
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.2s;
}
.article-aside a:not(.article-lab-link):hover {
  color: var(--ink);
}
.article-lab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  font-weight: 650;
  color: var(--ink);
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.35s var(--spring);
}
.article-lab-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.article-lab-link:hover .live-dot {
  background: var(--on-accent);
}
.article-lab-link:active {
  transform: scale(0.97);
}
@media (min-width: 62.5em) {
  .article-layout {
    grid-template-columns: minmax(9rem, 12.5rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
  }
  .article-aside {
    position: sticky;
    top: calc(var(--header-h) + 2.25rem);
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .article-aside nav {
    display: flex;
    flex-direction: column;
  }
  .article-aside,
  .article-aside nav {
    scroll-target-group: auto;
  }
  .article-aside .eyebrow {
    display: block;
    padding-bottom: 0.6rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--line);
  }
  .article-aside a:not(.article-lab-link) {
    display: flex;
  }
  .article-lab-link {
    align-self: start;
    margin-top: 1.25rem;
  }
}
/* Progressive: browsers with scroll-target-group mark the section being read. */
.article-aside a:target-current {
  color: var(--ink);
}

/* ---------- Prose ---------- */
.prose {
  --measure: 34em;
  container: prose / inline-size;
  min-width: 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-2);
}
.prose > * {
  max-width: min(100%, var(--measure));
}
.prose > * + * {
  margin-top: 1.25rem;
}
.prose > p:first-child {
  font-size: 1.2em;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.prose h2 {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.prose h2::before {
  content: "";
  display: block;
  margin-bottom: 1.6rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.3s;
}
.prose h2:target::before {
  border-top-color: var(--accent);
}
.prose h2 + * {
  margin-top: 1rem;
}
.prose h3 {
  margin-top: 2.25rem;
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.prose strong {
  font-weight: 700;
  color: var(--ink);
}
.prose :is(ul, ol) {
  padding-left: 1.25em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose li::marker {
  color: var(--muted);
}
.prose a:not([class]) {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transition:
    color 0.2s,
    text-decoration-color 0.2s,
    text-underline-offset 0.25s var(--ease);
}
.prose a:not([class]):hover {
  color: var(--accent-ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.32em;
}
.prose :not(pre) > code {
  padding: 0.1em 0.38em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
  font-size: 0.86em;
  color: var(--ink);
  white-space: nowrap;
}
.prose pre {
  width: fit-content;
  min-width: min(100%, 24rem);
  max-width: min(100%, var(--measure));
  margin-block: 1.75rem;
  padding: 1.15rem 1.35rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: 500 0.875rem / 1.75 var(--mono);
  font-variant-numeric: tabular-nums;
  tab-size: 2;
}
.prose pre code {
  font: inherit;
}
.prose pre[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 0.7rem;
  font: 500 var(--step--2) / 1.4 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose pre b {
  font-weight: 700;
  color: var(--accent-ink);
}
.prose pre .dim {
  color: var(--faint);
}

/* Figures may break out of the text column into the right margin. */
.prose > :is(figure, .architecture-strip, .rule-table, .article-pattern, .wide) {
  max-width: none;
  margin-block: 2.25rem;
  clear: right;
}
.prose figure {
  margin-inline: 0;
}
.prose figcaption {
  margin-top: 0.9rem;
  max-width: none;
  padding-right: max(0px, calc(100% - 62ch));
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}
.prose figcaption.readout {
  font-size: var(--step--2);
}

/* Sidenotes: inline below their paragraph on small screens, in the right margin on wide ones. */
.sidenote {
  display: block;
  margin-top: 0.85rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line-strong);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}
.sidenote b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95em;
  color: var(--ink);
}
@container prose (min-width: 54rem) {
  .sidenote {
    float: right;
    clear: right;
    width: calc(100cqi - var(--measure) - 2.75rem);
    max-width: 18rem;
    margin: 0.3rem calc(var(--measure) - 100cqi) 1rem 0;
  }
}

/* Try-this callout: an invitation to the live experiment. */
.article-callout {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  margin-block: 2.5rem;
  padding: 1.35rem 1.5rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--ink);
}
.article-callout > .eyebrow {
  color: var(--accent-ink);
}
.article-callout > .eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.article-callout > p {
  margin: 0;
  max-width: 60ch;
}
.article-callout .inline-link {
  min-height: 44px;
  align-items: center;
  color: var(--accent-ink);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.article-source {
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}
.article-source a:not([class]) {
  font-weight: 600;
}

/* ---------- Figures: architecture strip ----------
   Layers sit on a shared centre line, so the links read as connections between them.
   Each link shows its arithmetic (weights + biases); the total closes the strip. */
.architecture-strip {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2.25rem) clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--white);
}
.arch {
  --dot-size: clamp(7px, 1.1vw, 10px);
  --dot-gap: clamp(5px, 0.7vw, 7px);
  --slot: calc(var(--dot-size) + var(--dot-gap));
  --stack: calc(8 * var(--slot));
  display: grid;
  grid-template-columns:
    auto minmax(4rem, 1fr) auto minmax(4rem, 1fr) auto minmax(4rem, 1fr)
    auto auto;
  align-items: start;
  column-gap: clamp(0.4rem, 1.4vw, 1rem);
}
.arch-layer,
.arch-total {
  display: grid;
  grid-template-rows: var(--stack) auto auto;
  justify-items: center;
  min-width: 3rem;
}
.arch-layer::before {
  content: "";
  align-self: center;
  width: var(--dot-size);
  height: calc(var(--n, 1) * var(--slot));
  background: radial-gradient(circle closest-side, var(--accent) 92%, transparent) 0 0 /
    var(--dot-size) var(--slot) repeat-y;
}
.arch-total::before {
  content: "=";
  align-self: center;
  font: 500 var(--step-1) / 1 var(--mono);
  color: var(--muted);
}
.arch-total {
  margin-left: clamp(0.25rem, 1.5vw, 1.25rem);
  padding-left: clamp(0.75rem, 2.5vw, 2rem);
  border-left: 1px solid var(--line);
}
:is(.arch-layer, .arch-total) b {
  margin-top: 0.7rem;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.arch-total b {
  color: var(--accent-ink);
}
:is(.arch-layer, .arch-total) small {
  margin-top: 0.2rem;
  font: 500 var(--step--2) / 1.3 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.arch-link {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  row-gap: 0.4rem;
  height: var(--stack);
  font: 500 var(--step--2) / 1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.arch-link > span {
  align-self: end;
  color: var(--muted);
}
.arch-link::after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--accent));
}
.arch-link b {
  order: 1;
  align-self: start;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent-ink);
}
.architecture-strip figcaption {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
/* Narrow columns (phones, large text): the strip runs top to bottom. */
@container prose (max-width: 36rem) {
  .arch {
    --dot-size: 7px;
    --dot-gap: 5px;
    grid-template-columns: minmax(0, 1fr);
  }
  .arch-layer,
  .arch-total {
    grid-template-columns: var(--stack) auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: baseline;
    justify-items: start;
    column-gap: 0.75rem;
    min-width: 0;
  }
  .arch-layer::before {
    align-self: center;
    justify-self: center;
    width: calc(var(--n, 1) * var(--slot));
    height: var(--dot-size);
    background-size: var(--slot) var(--dot-size);
    background-repeat: repeat-x;
  }
  .arch-total::before {
    justify-self: center;
  }
  .arch-total {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  :is(.arch-layer, .arch-total) b {
    margin: 0;
    font-size: var(--step-3);
  }
  :is(.arch-layer, .arch-total) small {
    margin: 0;
  }
  .arch-link {
    grid-template-columns: var(--stack) max-content minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: start;
    column-gap: 0.75rem;
    row-gap: 0;
    height: auto;
    min-height: 2.75rem;
  }
  .arch-link::after {
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    justify-self: center;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--line-strong), var(--accent));
  }
  .arch-link > span {
    grid-column: 2;
    align-self: center;
  }
  .arch-link b {
    grid-column: 3;
    align-self: center;
  }
  .arch-link b::before {
    content: "= ";
    color: var(--muted);
    font-weight: 500;
  }
}

/* Very narrow (large text on a phone): labels drop under their numbers. */
@container prose (max-width: 16rem) {
  .arch-layer,
  .arch-total,
  .arch-link {
    grid-template-columns: var(--stack) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 0.1rem;
  }
  .arch-link {
    padding-block: 0.5rem;
  }
  :is(.arch-layer, .arch-total)::before,
  .arch-link::after {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  :is(.arch-layer, .arch-total, .arch-link) > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .arch-link > span,
  :is(.arch-layer, .arch-total) b {
    grid-area: 1 / 2;
  }
  .arch-link b,
  :is(.arch-layer, .arch-total) small {
    grid-area: 2 / 2;
  }
}

/* ---------- Figures: rule table ---------- */
.rule-table {
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(0.75rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.rule-cases {
  --c: clamp(9px, 1.9vw, 22px);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(2px, 0.8vw, 10px);
}
.rule-case {
  display: grid;
  grid-template-columns: repeat(3, var(--c));
  grid-template-rows: var(--c) var(--c) auto auto;
  justify-content: center;
  gap: 2px;
}
.rule-case i,
.rule-case b {
  border: 1px solid var(--faint);
  border-radius: 2px;
}
.rule-case b {
  grid-column: 2;
}
.rule-case .on {
  background: var(--ink);
  border-color: var(--ink);
}
.rule-case b.on {
  background: var(--accent);
  border-color: var(--accent);
}
.prose .rule-case code {
  grid-column: 1 / -1;
  margin-top: 0.55rem;
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--step--2) / 1 var(--mono);
  text-align: center;
  color: var(--muted);
}
.rule-case span {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
  font: 600 var(--step-1) / 1 var(--mono);
  text-align: center;
  color: var(--ink);
}
.rule-case b.on ~ span {
  color: var(--accent-ink);
}
.rule-table figcaption {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
@container prose (max-width: 36rem) {
  .prose .rule-case code {
    font-size: 0.625rem;
    letter-spacing: -0.02em;
  }
  .rule-case span {
    font-size: var(--step-0);
  }
}

/* ---------- Figures: automaton pattern ---------- */
.article-pattern {
  --art-on: var(--accent);
  padding: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 3vw, 2rem) clamp(0.9rem, 2.5vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px) 0 0 / 10px 10px,
    var(--white);
}
.article-pattern :is(svg, img) {
  display: block;
  width: 100%;
  height: auto;
}
.article-pattern figcaption {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ---------- Glossary popovers (native popover; plain text without support) ---------- */
.term {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: text;
}
@supports selector(:popover-open) {
  .term {
    cursor: help;
    color: var(--ink);
    text-decoration: underline dotted;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.24em;
    border-radius: 3px;
    transition: color 0.2s;
  }
  .term:hover,
  .term:focus-visible,
  .prose:has(#term-tanh:popover-open) [popovertarget="term-tanh"],
  .prose:has(#term-sigmoid:popover-open) [popovertarget="term-sigmoid"],
  .prose:has(#term-bce:popover-open) [popovertarget="term-bce"],
  .prose:has(#term-adam:popover-open) [popovertarget="term-adam"] {
    color: var(--accent-ink);
    text-decoration-style: solid;
  }
}
@supports not selector(:popover-open) {
  .term-card {
    display: none;
  }
}
.prose > .term-card,
.term-card {
  width: min(22rem, calc(100vw - 2rem));
  max-width: none;
  margin: auto;
  padding: 0.95rem 1.1rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  font-size: var(--step--1);
  line-height: 1.55;
}
.term-card p {
  max-width: none;
}
.term-card .eyebrow {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--accent-ink);
}
@supports (position-area: block-end) {
  .prose > .term-card,
  .term-card {
    inset: auto;
    margin: 0.45rem 0;
    position-area: block-end span-inline-end;
    position-try-fallbacks:
      flip-block,
      flip-inline,
      flip-block flip-inline;
  }
  [popovertarget="term-tanh"] {
    anchor-name: --term-tanh;
  }
  #term-tanh {
    position-anchor: --term-tanh;
  }
  [popovertarget="term-sigmoid"] {
    anchor-name: --term-sigmoid;
  }
  #term-sigmoid {
    position-anchor: --term-sigmoid;
  }
  [popovertarget="term-bce"] {
    anchor-name: --term-bce;
  }
  #term-bce {
    position-anchor: --term-bce;
  }
  [popovertarget="term-adam"] {
    anchor-name: --term-adam;
  }
  #term-adam {
    position-anchor: --term-adam;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .term-card {
    transition:
      opacity 0.18s var(--ease),
      translate 0.3s var(--spring),
      display 0.3s allow-discrete,
      overlay 0.3s allow-discrete;
    opacity: 0;
    translate: 0 4px;
  }
  .term-card:popover-open {
    opacity: 1;
    translate: 0 0;
  }
  @starting-style {
    .term-card:popover-open {
      opacity: 0;
      translate: 0 4px;
    }
  }
}

/* ---------- Read next ---------- */
.article-next {
  --thumb: clamp(10rem, 16vw, 13rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.article-next > .eyebrow {
  margin-bottom: 0.9rem;
}
.article-next .note-entry {
  border-top: 1px solid var(--ink);
}
@media (min-width: 62.5em) {
  .article-layout > .article-next {
    grid-column: 2;
  }
}

@media print {
  .article-aside,
  .article-layout::before,
  .article-next,
  .term-card {
    display: none !important;
  }
  .article-layout {
    display: block;
  }
}