/* =========================================================================
   ANLP Study Guide — "Attention Lab Notebook"
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Paper */
  --paper: #faf6ec;
  --paper-2: #f4ecd8;
  --paper-3: #e9ddc0;
  --ink: #1a1621;
  --ink-2: #423a52;
  --ink-3: #6b6180;
  --rule: #d9c9a2;
  --rule-2: #c9b58a;

  /* Attention heatmap gradient */
  --heat-1: #7c3aed;
  /* violet */
  --heat-2: #ec4899;
  /* pink   */
  --heat-3: #f59e0b;
  /* amber  */
  --heat-4: #14b8a6;
  /* teal   */
  --heat-gradient: linear-gradient(135deg, var(--heat-1) 0%, var(--heat-2) 45%, var(--heat-3) 100%);
  --heat-gradient-4: linear-gradient(135deg, var(--heat-1) 0%, var(--heat-2) 35%, var(--heat-3) 70%, var(--heat-4) 100%);

  /* Callout tones */
  --aha-bg: #fef4c7;
  --aha-border: #eab308;
  --gotcha-bg: #fee2e2;
  --gotcha-border: #ef4444;
  --mechanism-bg: #f0f9ff;
  --mechanism-border: #0284c7;
  --link-bg: #ede9fe;
  --link-border: #7c3aed;

  /* Geometry */
  --radius: 6px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgb(20 15 30 / .06), 0 2px 6px rgb(20 15 30 / .04);
  --shadow-2: 0 6px 20px -8px rgb(20 15 30 / .18), 0 2px 6px rgb(20 15 30 / .08);
  --shadow-polaroid: 0 12px 24px -14px rgb(30 20 40 / .35), 0 2px 4px rgb(30 20 40 / .08);

  /* Type */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino", ui-serif, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper: #0e0a1a;
    --paper-2: #171129;
    --paper-3: #201738;
    --ink: #eee5ff;
    --ink-2: #c8b8e0;
    --ink-3: #877ba5;
    --rule: #2b1f4a;
    --rule-2: #3a2b63;

    --aha-bg: #3a2f0a;
    --aha-border: #eab308;
    --gotcha-bg: #3d1414;
    --gotcha-border: #f87171;
    --mechanism-bg: #0c2233;
    --mechanism-border: #38bdf8;
    --link-bg: #201540;
    --link-border: #a78bfa;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3);
    --shadow-2: 0 6px 20px -8px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .3);
    --shadow-polaroid: 0 12px 24px -14px rgb(0 0 0 / .55), 0 2px 4px rgb(0 0 0 / .35);
  }
}

:root[data-theme="dark"] {
  --paper: #0e0a1a;
  --paper-2: #171129;
  --paper-3: #201738;
  --ink: #eee5ff;
  --ink-2: #c8b8e0;
  --ink-3: #877ba5;
  --rule: #2b1f4a;
  --rule-2: #3a2b63;

  --aha-bg: #3a2f0a;
  --aha-border: #eab308;
  --gotcha-bg: #3d1414;
  --gotcha-border: #f87171;
  --mechanism-bg: #0c2233;
  --mechanism-border: #38bdf8;
  --link-bg: #201540;
  --link-border: #a78bfa;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3);
  --shadow-2: 0 6px 20px -8px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .3);
  --shadow-polaroid: 0 12px 24px -14px rgb(0 0 0 / .55), 0 2px 4px rgb(0 0 0 / .35);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

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

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

  * {
    animation: none !important;
    transition: none !important
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Subtle graph-paper — sits behind everything so it never competes with content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(color-mix(in oklab, var(--rule) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--rule) 45%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: 0 0;
  opacity: .35;
}

:root[data-theme="dark"] body::before,
:root:not([data-theme="light"]) body::before {
  opacity: .28;
}

img {
  max-width: 100%;
  height: auto
}

a {
  color: inherit
}

section,
.slide,
.explain,
.callout {
  min-width: 0
}

/* ---------- Layout ---------- */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 1120px) {
  .shell {
    grid-template-columns: 250px minmax(0, 1fr) 220px;
    align-items: start;
  }
}

/* Left rail — TOC */
.rail-left {
  display: none;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 32px 20px 60px;
  border-right: 1px dashed var(--rule-2);
  background: var(--paper);
  background-image: none;
}

@media (min-width: 1120px) {
  .rail-left {
    display: block
  }
}

.rail-left .brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.rail-left .brand em {
  font-style: italic;
  color: var(--heat-1);
  font-weight: 500;
}

.rail-left .brand small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}

.rail-left nav {
  margin-top: 26px;
  font-size: .83rem;
}

.rail-left .grp {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--ink-3);
  font-weight: 600;
  margin: 22px 0 6px;
  padding-left: 10px;
}

.rail-left a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  line-height: 1.35;
  margin: 1px 0;
  transition: background .12s, color .12s, transform .12s;
  border-left: 2px solid transparent;
}

.rail-left a:hover {
  color: var(--ink);
  background: var(--paper-2);
  transform: translateX(2px);
}

.rail-left a.active {
  color: var(--ink);
  background: var(--paper-2);
  border-left-color: var(--heat-1);
  font-weight: 600;
}

/* Right rail — attention progress */
.rail-right {
  display: none;
  position: sticky;
  top: 0;
  max-height: 100vh;
  padding: 32px 18px 60px;
  align-self: start;
}

@media (min-width: 1120px) {
  .rail-right {
    display: block
  }
}

.rail-right .kicker {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.heatmap-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 22px;
}

.heatmap-rail .cell {
  aspect-ratio: 1/1;
  border-radius: 2px;
  background: var(--paper-3);
  opacity: .5;
  transition: opacity .3s, background .3s, transform .3s;
}

.heatmap-rail .cell.lit {
  opacity: 1;
  background: var(--heat-gradient);
}

.rail-right .rail-toc {
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.7;
  color: var(--ink-3);
}

.rail-right .rail-toc a {
  display: block;
  color: var(--ink-3);
  text-decoration: none;
  padding: 2px 0 2px 10px;
  border-left: 2px solid transparent;
  transition: color .12s, border-color .12s;
}

.rail-right .rail-toc a:hover,
.rail-right .rail-toc a.active {
  color: var(--ink);
  border-left-color: var(--heat-2);
}

.rail-right .rail-toc a.active {
  font-weight: 700;
}

/* When the top .lecture-nav is injected (subpages), the rails must sit
   below it — both are position:sticky top:0 and the nav has z-index:50,
   so without this offset the rail brand slides behind the nav on scroll. */
body.has-topnav .rail-left,
body.has-topnav .rail-right {
  top: 56px;
  max-height: calc(100vh - 56px);
  padding-top: 24px;
}

/* Q&A list — collapsible viva questions. The reader sees the question
   and clicks to reveal the answer, so the page keeps its self-test shape. */
ol.qa {
  padding-left: 1.6em;
  max-width: 72ch;
}

ol.qa>li {
  margin: .55em 0;
}

ol.qa details {
  border-left: 2px solid var(--rule-2);
  padding: 2px 0 2px 12px;
  transition: border-color .12s;
}

ol.qa details[open] {
  border-left-color: var(--heat-1);
}

ol.qa summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 500;
  outline: none;
  padding: 2px 0;
}

ol.qa summary::-webkit-details-marker {
  display: none;
}

ol.qa summary::before {
  content: "▸";
  color: var(--ink-3);
  font-size: .85em;
  margin-right: 8px;
  display: inline-block;
  transition: transform .15s, color .15s;
  transform: translateY(-1px);
}

ol.qa details[open]>summary::before {
  transform: rotate(90deg) translateX(-1px);
  color: var(--heat-1);
}

ol.qa summary:hover {
  color: var(--heat-1);
}

ol.qa .a {
  margin: .5em 0 .8em;
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.62;
}

ol.qa .a p {
  margin: .4em 0;
  max-width: 68ch;
}

ol.qa .a code {
  font-size: .86em;
}

/* Main column */
main {
  width: 100%;
  padding: 0 clamp(18px, 5vw, 64px) 140px;
  max-width: 880px;
  margin: 0 auto;
  min-width: 0;
}

@media (min-width:1120px) {
  main {
    margin: 0;
    max-width: 780px;
    padding: 0 40px 140px
  }
}

/* Legacy topbar — kept for pages that still reference it, but hidden when the
   new .lecture-nav is present (JS adds .has-topnav to body on subpages). */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px dashed var(--rule-2);
}

.topbar .brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem
}

.topbar .brand em {
  font-style: italic;
  color: var(--heat-1);
  font-weight: 500
}

body.has-topnav .topbar {
  display: none !important;
}

@media (min-width:1120px) {
  .topbar {
    display: none
  }
}

.theme-toggle {
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--paper-3);
  transform: translateY(-1px)
}

/* ---------- Lecture nav (top chip strip, self-injected) ---------- */
.lecture-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px dashed var(--rule-2);
  padding: 10px clamp(12px, 3vw, 20px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.lecture-nav .ln-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 4px;
  flex-shrink: 0;
  display: none;
}

.lecture-nav .ln-brand em {
  font-style: italic;
  color: var(--heat-1);
  font-weight: 500;
}

@media (min-width: 900px) {
  .lecture-nav .ln-brand {
    display: inline;
  }
}

.lecture-nav .ln-brand::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--rule-2);
  margin: 0 4px 0 12px;
  vertical-align: -3px;
}

.lecture-nav .ln-scroll {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 3px 2px;
  flex: 1;
  min-width: 0;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}

.lecture-nav .ln-scroll.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.lecture-nav .ln-scroll.dragging .ln-chip {
  pointer-events: none;
}

.lecture-nav .ln-scroll::-webkit-scrollbar {
  display: none;
}

.ln-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.ln-group:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--rule-2);
  margin: 0 6px;
  opacity: .7;
}

.ln-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s, border-color .12s, background .12s, color .12s;
  flex-shrink: 0;
  line-height: 1;
}

.ln-chip .ln-num {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-3);
  padding: 3px 7px;
  background: var(--paper);
  border-radius: 100px;
  border: 1px solid var(--rule-2);
  letter-spacing: .04em;
  min-width: 24px;
  text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}

.ln-chip:hover {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--heat-1) 60%, var(--rule-2));
  transform: translateY(-1px);
  background: var(--paper);
}

.ln-chip:hover .ln-num {
  background: var(--heat-gradient);
  color: #fff;
  border-color: transparent;
}

.ln-chip.current {
  background: var(--heat-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--heat-2) 60%, transparent);
}

.ln-chip.current .ln-num {
  background: rgba(255, 255, 255, .92);
  color: var(--heat-1);
  border-color: transparent;
  font-weight: 700;
}

/* Home glyph chip is a bit tighter */
.ln-chip.home {
  padding: 5px 10px;
  gap: 0;
}

.ln-chip.home .ln-num {
  min-width: 0;
  padding: 3px 5px;
  font-size: .78rem;
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}

.ln-chip.home:hover .ln-num {
  background: transparent;
  color: var(--ink);
}

.ln-chip.home.current .ln-num {
  background: transparent;
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(48px, 9vw, 100px) 0 40px;
  border-bottom: 1px dashed var(--rule-2);
  position: relative;
}

.hero .kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--heat-1);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero .kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--heat-gradient);
  border-radius: 1px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: .35em 0 .3em;
  text-wrap: balance;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  background: var(--heat-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero .lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.62;
}

.hero .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
}

.pill.heat {
  background: var(--heat-gradient);
  color: #fff;
  border-color: transparent;
}

/* Attention arc — decorative hero motif */
.attention-arc {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: .85;
}

@media (max-width: 720px) {
  .attention-arc {
    width: 130px;
    height: 130px;
    top: 10px;
    right: -30px
  }
}

/* ---------- Typography ---------- */
h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  letter-spacing: -.025em;
  margin: 2.6em 0 .2em;
  padding-top: .3em;
  scroll-margin-top: 20px;
  text-wrap: balance;
  line-height: 1.1;
}

h2 .num {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: .48em;
  font-weight: 500;
  margin-right: .7em;
  letter-spacing: .04em;
  vertical-align: .15em;
}

h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -.015em;
  margin: 2em 0 .35em;
  scroll-margin-top: 20px;
}

h3 em {
  font-style: italic;
  color: var(--heat-1);
  font-weight: 500
}

h4 {
  font-weight: 600;
  font-size: 1rem;
  margin: 1.6em 0 .3em;
  letter-spacing: -.005em;
}

p {
  max-width: 70ch;
}

ul,
ol {
  max-width: 68ch;
  padding-left: 1.3em
}

li {
  margin: .34em 0
}

li::marker {
  color: var(--ink-3)
}

strong {
  font-weight: 600
}

em.term {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 62%, color-mix(in oklab, var(--heat-2) 40%, transparent) 62%);
  padding: 0 2px;
}

a.xref {
  color: var(--heat-1);
  text-decoration: none;
  border-bottom: 1px dashed var(--heat-1);
  transition: background .12s, color .12s;
}

a.xref:hover {
  background: var(--link-bg);
}

hr.soft {
  border: none;
  border-top: 1px dashed var(--rule-2);
  margin: 2.6em 0
}

/* Section arc divider */
.arc-divider {
  display: block;
  margin: 3em auto;
  width: 220px;
  height: 40px;
  opacity: .55;
}

/* Section intro */
.section-intro {
  color: var(--ink-2);
  font-size: 1.05rem;
  max-width: 66ch;
  line-height: 1.6;
}

/* ---------- Slide "Polaroid" card ---------- */
.slide {
  margin: 2em 0 2.2em;
  scroll-margin-top: 24px;
}

.slide-frame {
  position: relative;
  background: #ffffff;
  padding: 16px 16px 18px;
  border-radius: 4px;
  box-shadow: var(--shadow-polaroid);
  border: 1px solid rgba(0, 0, 0, .05);
  max-width: 100%;
}

:root[data-theme="dark"] .slide-frame,
:root:not([data-theme="light"]) .slide-frame {
  background: #171029;
  border-color: rgba(255, 255, 255, .06);
}

.slide-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  cursor: zoom-in;
  background: #fff;
}

.slide-frame .tag {
  position: absolute;
  top: -10px;
  left: 24px;
  transform: rotate(-1.5deg);
  padding: 3px 12px 4px;
  background: var(--heat-gradient);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 4px 10px -4px rgb(120 30 180 / .5);
}

.slide-caption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-3);
  letter-spacing: .04em;
  text-align: right;
}

/* Slide-strip: multiple slides grouped.
   Grid columns only apply to the image frames; any other child
   (explanations, callouts) spans the full row so it doesn't get
   trapped in a single column. */
.slide-strip {
  display: grid;
  gap: 14px 18px;
  margin: 2em 0;
}

@media (min-width:640px) {
  .slide-strip.cols-2 {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:640px) {
  .slide-strip.cols-3 {
    grid-template-columns: 1fr 1fr 1fr
  }
}

.slide-strip>*:not(.slide-frame):not(.slide):not(img) {
  grid-column: 1 / -1;
}

.slide-strip>.slide {
  display: contents;
}

/* Let the inner .slide-frame be a real grid item, but keep it hugging the
   image: without this the frame stretches to the height of the taller
   explanation column in the same row, leaving a big empty dark area below
   the slide. */
.slide-strip>.slide-frame,
.slide-strip>.slide>.slide-frame {
  align-self: start;
}

/* Explanation block */
.explain {
  margin: 1em 0 0;
}

.explain>h4:first-child {
  margin-top: .2em
}

/* ---------- Callouts (subtle — no thick left strip) ---------- */
.callout {
  margin: 1.4em 0;
  padding: 16px 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  position: relative;
}

.callout .callout-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 8px;
  display: block;
  /* Hide any leading text glyph the author wrote so the CSS-provided icon
     is the single unique icon per callout type. */
}

/* Prepend a single unique icon per callout type as a real character.
   Author-included inline glyphs are hidden below via .callout-label span rules. */
.callout .callout-label::before {
  font-family: "Fraunces", var(--font-mono);
  font-weight: 600;
  font-size: 1.15em;
  margin-right: 8px;
  vertical-align: -.05em;
  letter-spacing: 0;
}

.callout p:last-child,
.callout ul:last-child,
.callout ol:last-child {
  margin-bottom: 0
}

.callout p:first-child,
.callout ul:first-child,
.callout ol:first-child {
  margin-top: 0
}

.callout.aha {
  background: color-mix(in oklab, var(--aha-bg) 55%, var(--paper-2));
  border-color: color-mix(in oklab, var(--aha-border) 30%, var(--rule-2));
}

.callout.aha .callout-label {
  color: #a16207
}

.callout.aha .callout-label::before {
  content: "✦";
  color: var(--aha-border);
}

:root[data-theme="dark"] .callout.aha .callout-label,
:root:not([data-theme="light"]) .callout.aha .callout-label {
  color: #fbbf24
}

.callout.gotcha {
  background: color-mix(in oklab, var(--gotcha-bg) 40%, var(--paper-2));
  border-color: color-mix(in oklab, var(--gotcha-border) 25%, var(--rule-2));
}

.callout.gotcha .callout-label {
  color: #b91c1c
}

.callout.gotcha .callout-label::before {
  content: "⚠";
  color: var(--gotcha-border);
}

:root[data-theme="dark"] .callout.gotcha .callout-label,
:root:not([data-theme="light"]) .callout.gotcha .callout-label {
  color: #fca5a5
}

.callout.mechanism {
  background: color-mix(in oklab, var(--mechanism-bg) 40%, var(--paper-2));
  border-color: color-mix(in oklab, var(--mechanism-border) 25%, var(--rule-2));
  font-family: var(--font-serif);
  font-size: 1rem;
}

.callout.mechanism .callout-label {
  color: #0369a1;
  font-family: var(--font-mono)
}

.callout.mechanism .callout-label::before {
  content: "⚙";
  color: var(--mechanism-border);
}

:root[data-theme="dark"] .callout.mechanism .callout-label,
:root:not([data-theme="light"]) .callout.mechanism .callout-label {
  color: #7dd3fc
}

.callout.link {
  background: color-mix(in oklab, var(--link-bg) 45%, var(--paper-2));
  border-color: color-mix(in oklab, var(--link-border) 25%, var(--rule-2));
}

.callout.link .callout-label {
  color: #6d28d9
}

.callout.link .callout-label::before {
  content: "→";
  color: var(--link-border);
}

:root[data-theme="dark"] .callout.link .callout-label,
:root:not([data-theme="light"]) .callout.link .callout-label {
  color: #c4b5fd
}

/* Math via MathML */
math {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "STIX Two Text", math, serif;
  font-style: normal;
  line-height: 1;
}

math[display="block"] {
  /* Keep native MathML layout (block math). Overriding display to plain
     `block` or adding overflow here blockifies the token children and stacks
     them vertically. Horizontal scroll for wide equations is handled by the
     .eq wrapper below, which every block equation lives in. */
  padding: 6px 2px;
}

p math,
li math,
td math,
summary math,
.callout math {
  font-size: 1.05em;
  vertical-align: -.06em;
}

.eq {
  display: block;
  margin: 20px 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px;
}

.eq math {
  font-size: 1.4em
}

.eq.boxed {
  background: var(--paper-2);
  border: 1px dashed var(--rule-2);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--rule-2);
  overflow-wrap: anywhere;
}

pre.code {
  font-family: var(--font-mono);
  background: var(--paper-2);
  border: 1px dashed var(--rule-2);
  border-radius: var(--radius);
  padding: 14px 18px;
  overflow-x: auto;
  font-size: .84rem;
  line-height: 1.55;
  margin: 16px 0;
  color: var(--ink);
}

pre.code code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Tables */
table.tbl {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: .95rem;
}

table.tbl th,
table.tbl td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px dashed var(--rule-2);
}

table.tbl th {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  background: var(--paper-2);
}

table.tbl tr:hover td {
  background: color-mix(in oklab, var(--paper-2) 60%, transparent)
}

/* ---------- Landing (index) ---------- */
.chapter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 2em 0 3em;
}

@media (min-width: 560px) {
  .chapter-grid {
    grid-template-columns: 1fr 1fr
  }
}

.chapter-card {
  display: block;
  padding: 22px 22px 24px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative;
}

.chapter-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--heat-1) 45%, var(--rule-2));
}

.chapter-card .kicker {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.chapter-card h3 {
  font-family: var(--font-serif);
  margin: 4px 0 6px;
  font-size: 1.35rem;
  line-height: 1.1;
}

.chapter-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.5;
}

.chapter-card .foot {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  display: flex;
  gap: 12px;
}

/* PYQ question block */
.pyq-q {
  margin: 2.4em 0;
  padding: 0;
  scroll-margin-top: 24px;
}

.pyq-q .qhead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pyq-q .qhead .qnum {
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--heat-gradient);
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
}

.pyq-q .qhead .qmarks {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pyq-q .qhead .qtag {
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  letter-spacing: .06em;
  text-decoration: none;
}

.pyq-q .qhead .qtag:hover {
  color: var(--ink);
  border-color: var(--heat-1)
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 20, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 4vh 4vw;
  cursor: zoom-out;
  visibility: hidden;
  pointer-events: none;
  transition: background-color .14s ease-in, visibility 0s linear .14s;
}

.lightbox.open {
  background: rgba(10, 6, 20, .85);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  transition-duration: .18s, 0s;
  transition-timing-function: ease-out, linear;
}

.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / .5);
  background: #fff;
  transform: scale(.9);
  transform-origin: center;
  transition: transform .14s cubic-bezier(.4, 0, 1, 1);
  will-change: transform;
}

.lightbox.open img {
  transform: scale(1);
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.lightbox .lb-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .12em;
  opacity: .8;
}

/* ---------- Footer ---------- */
footer.foot {
  margin-top: 6em;
  padding-top: 2em;
  border-top: 1px dashed var(--rule-2);
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-3);
  letter-spacing: .04em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

footer.foot a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--rule-2)
}

footer.foot a:hover {
  color: var(--ink)
}

/* Prev/Next nav */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 3em 0 1em;
}

.pager a {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  transition: transform .15s, border-color .15s;
  display: block;
}

.pager a:hover {
  transform: translateY(-2px);
  border-color: var(--heat-1)
}

.pager a.disabled {
  opacity: .35;
  pointer-events: none
}

.pager a .dir {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 4px;
}

.pager a .lbl {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem
}

.pager a.next {
  text-align: right
}

@media (max-width: 639px) {
  main {
    padding-inline: 16px;
    padding-bottom: 96px;
  }

  .hero {
    padding-top: 42px;
    padding-bottom: 30px;
  }

  .hero h1 {
    font-size: 2.35rem;
  }

  .hero .lead {
    font-size: 1.05rem;
  }

  .hero .kicker {
    letter-spacing: .14em;
  }

  .attention-arc {
    right: 0;
  }

  .slide-frame {
    padding: 10px 10px 12px;
  }

  .callout {
    padding: 14px 15px 16px;
  }

  .chapter-card {
    padding: 18px;
  }

  .pager {
    flex-direction: column;
  }

  .pager a.next {
    text-align: left;
  }

  table.tbl th,
  table.tbl td {
    padding: 7px 10px;
  }

  math:not([display="block"]) {
    /* Do not set display/overflow here: it breaks native inline MathML
       layout and stacks the tokens. Inline expressions are short and wrap
       with the surrounding text. */
    max-width: 100%;
  }
}

/* Utility */
.mono {
  font-family: var(--font-mono);
  font-size: .95em
}

.small {
  font-size: .88rem;
  color: var(--ink-2)
}

.center {
  text-align: center
}