/* =========================================
   Layout, components, prose
   ========================================= */

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.site-header[data-scrolled='true'] {
  border-bottom-color: var(--color-divider);
}
.site-header__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brand svg { color: var(--color-primary); }
.brand__sub { color: var(--color-text-muted); font-style: italic; }
.nav-spacer { flex: 1; }
.nav-link {
  color: var(--color-text-muted); text-decoration: none;
  font-size: var(--text-sm); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.nav-link:hover { color: var(--color-text); background: var(--color-surface-offset); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.icon-btn:hover { color: var(--color-text); background: var(--color-surface-offset); }

/* ---------- Progress bar ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; z-index: 60;
  pointer-events: none;
}
.progress-bar__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent-euv));
  transition: width 60ms linear;
}

/* ---------- Containers ---------- */
.container { max-width: var(--content-wide); margin: 0 auto; padding-inline: var(--space-6); }
.container--default { max-width: var(--content-default); }
.container--narrow { max-width: var(--content-narrow); }

/* Main page wrapper — wraps every page's body */
.page {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
  position: relative;
}
@media (min-width: 1100px) {
  .page { padding-inline: var(--space-10); }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(var(--space-16), 12vw, var(--space-32)) clamp(var(--space-12), 8vw, var(--space-24));
  position: relative;
  overflow: hidden;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  display: flex; align-items: center; gap: var(--space-3);
}
.hero__eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--color-text-muted);
}
.hero__title {
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-8);
  max-width: 18ch;
}
.hero__title em {
  font-style: italic;
  color: var(--color-primary);
}
.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.55;
  margin-bottom: var(--space-12);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero__meta span strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--space-1);
}

.hero__visual {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  pointer-events: none;
  opacity: 0.85;
}
@media (max-width: 960px) {
  .hero__visual { display: none; }
}

/* ---------- Lens-card grid (chapter index, callouts) ---------- */
.lens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-12);
}
.lens-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  transition: transform var(--transition-interactive), border-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 200px;
}
a.lens-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.lens-card__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  display: flex; align-items: center; justify-content: space-between;
}
.lens-card__index .ch-num {
  color: var(--color-primary);
  font-weight: 500;
}
.lens-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  margin-top: var(--space-2);
}
.lens-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}
.lens-card__icon {
  width: 56px; height: 56px;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}
.lens-card[data-tone='copper'] .lens-card__icon { color: var(--color-accent-copper); }
.lens-card[data-tone='euv']    .lens-card__icon { color: var(--color-accent-euv); }
.lens-card[data-tone='quartz'] .lens-card__icon { color: var(--color-accent-copper); }
.lens-card[data-tone='plasma'] .lens-card__icon { color: var(--color-accent-plasma); }

/* ---------- Chapter pages ---------- */
.ch-header {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24)) var(--space-12);
  border-bottom: 1px solid var(--color-divider);
}
.ch-header__crumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.ch-header__crumb a { color: var(--color-text-muted); text-decoration: none; }
.ch-header__crumb a:hover { color: var(--color-text); }
.ch-header__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--color-accent-copper);
  margin-bottom: var(--space-4);
  display: block;
}
.ch-header__title {
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 22ch;
}
.ch-header__title em { font-style: italic; color: var(--color-primary); }
.ch-header__dek {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.55;
}
.ch-header__meta {
  margin-top: var(--space-8);
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ch-header__meta b { color: var(--color-text); font-weight: 500; }

/* ---------- Prose ---------- */
.prose {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding-block: var(--space-12);
  font-size: var(--text-base);
  line-height: 1.7;
}
.prose > * + * { margin-top: var(--space-6); }
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  letter-spacing: -0.015em;
  position: relative;
  padding-top: var(--space-4);
}
.prose h2::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 32px; height: 2px; background: var(--color-primary);
}
.prose h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.prose p { color: var(--color-text); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose em { font-style: italic; }
.prose blockquote {
  border-left: 3px solid var(--color-accent-copper);
  padding-left: var(--space-5);
  margin-left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.45;
}
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-block: var(--space-2); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-offset);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent-copper);
}

/* drop cap on first paragraph of a chapter */
.prose > p.lede:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 4.5em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.1em -0.1em 0;
  color: var(--color-primary);
}
.prose .lede {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.55;
}

/* ---------- Figures (full-bleed friendly) ---------- */
.figure {
  margin-block: var(--space-12);
  max-width: none;
}
.figure--wide {
  margin-inline: calc(-1 * var(--space-16));
}
@media (max-width: 900px) {
  .figure--wide { margin-inline: 0; }
}
.figure__frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  position: relative;
  overflow: hidden;
}
.figure__frame::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}
.figure__frame > * { position: relative; z-index: 1; }
.figure__caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: flex; gap: var(--space-3); align-items: baseline;
}
.figure__caption .label {
  color: var(--color-accent-copper);
  font-weight: 500;
  white-space: nowrap;
}
.figure__caption .text { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Stat / data callouts ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  margin-block: var(--space-12);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: none;
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  display: block;
}
.stat__num em { font-style: italic; color: var(--color-accent-copper); }
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  display: block;
}

/* ---------- Pull quote ---------- */
.pull-quote {
  margin-block: var(--space-16);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-text);
  text-align: center;
  max-width: none;
  letter-spacing: -0.01em;
}
.pull-quote::before, .pull-quote::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--color-accent-copper);
  margin: var(--space-3) auto;
}

/* ---------- Aside / sidebar callout ---------- */
.aside {
  margin-block: var(--space-10);
  padding: var(--space-6);
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.aside[data-tone='copper'] { border-left-color: var(--color-accent-copper); }
.aside[data-tone='euv']    { border-left-color: var(--color-accent-euv); }
.aside[data-tone='plasma'] { border-left-color: var(--color-accent-plasma); }
.aside__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: block;
  font-weight: 500;
}
.aside[data-tone='copper'] .aside__label { color: var(--color-accent-copper); }
.aside[data-tone='euv']    .aside__label { color: var(--color-accent-euv); }
.aside[data-tone='plasma'] .aside__label { color: var(--color-accent-plasma); }
.aside p { font-size: var(--text-sm); color: var(--color-text-muted); }
.aside p strong { color: var(--color-text); }

/* ---------- Tables ---------- */
.table-wrap {
  margin-block: var(--space-12);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: none;
}
.data-table { width: 100%; font-size: var(--text-sm); }
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.data-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  background: var(--color-surface);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { color: var(--color-text); font-weight: 500; }

/* ---------- Chapter footer / nav ---------- */
.ch-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12);
  margin-top: var(--space-16);
}
.ch-nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: var(--content-default);
  margin: 0 auto;
}
.ch-nav-link {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--color-surface);
  transition: transform var(--transition-interactive), border-color var(--transition-interactive);
}
.ch-nav-link:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.ch-nav-link[data-dir='next'] { text-align: right; align-items: flex-end; }
.ch-nav-link__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ch-nav-link__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  font-style: italic;
}

/* ---------- TOC sidebar (chapter pages, optional) ---------- */
.ch-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, var(--content-narrow)) 1fr;
  gap: var(--space-12);
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
}
.ch-toc {
  position: sticky;
  top: 88px;
  align-self: start;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-12);
}
.ch-toc__title {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}
.ch-toc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); border-left: 1px solid var(--color-divider); }
.ch-toc li { padding-left: var(--space-4); position: relative; }
.ch-toc a { color: var(--color-text-muted); text-decoration: none; line-height: 1.4; }
.ch-toc a:hover { color: var(--color-text); }
.ch-toc li[data-active='true']::before {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--color-primary);
}
.ch-toc li[data-active='true'] a { color: var(--color-primary); }
@media (max-width: 1100px) {
  .ch-layout { grid-template-columns: 1fr; }
  .ch-toc { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12);
  margin-top: var(--space-16);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.site-footer__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
  display: flex; gap: var(--space-8); flex-wrap: wrap; justify-content: space-between;
}

/* ---------- Journey arc (visual chapter map) ---------- */
.arc {
  margin-block: var(--space-16);
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}
.arc__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.arc__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.arc__hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.arc__track + .arc__track { margin-top: var(--space-7); }
.arc__track-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.arc__track-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-copper);
  font-weight: 600;
}
.arc__track-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.arc__track-line {
  position: relative;
  padding-block: 14px;
}
.arc__track-rail {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    var(--color-accent-copper) 0%,
    var(--color-accent-copper-soft) 100%);
  opacity: 0.55;
}
.arc__track-rail[data-track="part-ii"] {
  background: linear-gradient(90deg,
    var(--color-accent-euv) 0%,
    var(--color-accent-plasma) 100%);
  opacity: 0.45;
}
.arc__track-rail[data-track="part-iii"] {
  background: linear-gradient(90deg,
    var(--color-accent-plasma) 0%,
    var(--color-accent-copper) 100%);
  opacity: 0.5;
}
.arc__track-nodes {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 0;
}
.arc__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 28px;
  text-decoration: none;
  outline: none;
}
.arc__node-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent-copper);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  z-index: 2;
}
/* Part II dots get the indigo accent (only the 2nd track, not the 3rd) */
.arc__track:nth-of-type(2) .arc__node-dot {
  border-color: var(--color-accent-euv);
}
/* Part III dots get the plasma accent */
.arc__track:nth-of-type(3) .arc__node-dot {
  border-color: var(--color-accent-plasma);
}
.arc__node-num {
  position: absolute;
  bottom: calc(100% + 4px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  pointer-events: none;
  transition: color 180ms ease, transform 180ms ease;
}
.arc__node:hover .arc__node-dot,
.arc__node:focus-visible .arc__node-dot {
  transform: scale(1.5);
  background: var(--color-accent-copper);
  box-shadow: 0 0 0 6px rgba(184, 90, 46, 0.12);
}
.arc__track:nth-of-type(2) .arc__node:hover .arc__node-dot,
.arc__track:nth-of-type(2) .arc__node:focus-visible .arc__node-dot {
  background: var(--color-accent-euv);
  box-shadow: 0 0 0 6px rgba(76, 90, 168, 0.14);
}
.arc__track:nth-of-type(3) .arc__node:hover .arc__node-dot,
.arc__track:nth-of-type(3) .arc__node:focus-visible .arc__node-dot {
  background: var(--color-accent-plasma);
  box-shadow: 0 0 0 6px rgba(214, 96, 102, 0.16);
}
.arc__node:hover .arc__node-num,
.arc__node:focus-visible .arc__node-num {
  color: var(--color-text);
}
.arc__node-tip {
  position: absolute;
  bottom: calc(100% + 22px);
  left: 50%;
  transform: translate(-50%, 4px);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.55em 0.85em;
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 5;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.25);
}
.arc__node-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text);
}
.arc__node-tip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 1px;
}
.arc__node-tip-title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.84rem;
}
.arc__node:hover .arc__node-tip,
.arc__node:focus-visible .arc__node-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Edge nodes — nudge tooltip so it stays in-frame */
.arc__node:first-child .arc__node-tip { left: 0; transform: translate(0, 4px); }
.arc__node:first-child .arc__node-tip::after { left: 14px; transform: none; }
.arc__node:first-child:hover .arc__node-tip,
.arc__node:first-child:focus-visible .arc__node-tip { transform: translate(0, 0); }
.arc__node:last-child .arc__node-tip { left: auto; right: 0; transform: translate(0, 4px); }
.arc__node:last-child .arc__node-tip::after { left: auto; right: 14px; transform: none; }
.arc__node:last-child:hover .arc__node-tip,
.arc__node:last-child:focus-visible .arc__node-tip { transform: translate(0, 0); }

@media (max-width: 720px) {
  .arc { padding: var(--space-6) var(--space-5); }
  .arc__header { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .arc__hint { display: none; }
  .arc__track-meta { flex-direction: column; gap: 2px; align-items: flex-start; }
  .arc__node-num { font-size: 0.55rem; }
  .arc__node-dot { width: 9px; height: 9px; border-width: 1.5px; }
  /* Tooltips on tap (mobile) */
  .arc__node-tip { font-size: 0.68rem; }
  .arc__node-tip-title { font-size: 0.78rem; }
}

/* ---------- Section heading w/ rule ---------- */
.section-head {
  margin-block: var(--space-16) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 100px) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: baseline;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-5);
}
.section-head > p { margin: 0; }
.section-head__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-copper);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.section-head__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
@media (max-width: 880px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---------- Diagram styles (shared) ---------- */
.diagram { width: 100%; height: auto; }
.diagram text { font-family: var(--font-mono); font-size: 11px; fill: var(--color-text-muted); }
.diagram .label-display { font-family: var(--font-display); font-style: italic; font-size: 14px; fill: var(--color-text); }
.diagram .label-strong { fill: var(--color-text); font-weight: 500; }
.diagram .stroke-line { stroke: var(--color-text-muted); fill: none; stroke-width: 1; }
.diagram .stroke-line--dim { stroke: var(--color-divider); }
.diagram .stroke-arrow { stroke: var(--color-primary); fill: none; stroke-width: 1.5; }
.diagram .fill-bg { fill: var(--color-bg); }
.diagram .fill-surface { fill: var(--color-surface); }
.diagram .fill-surface-2 { fill: var(--color-surface-offset); }
.diagram .fill-primary { fill: var(--color-primary); }
.diagram .fill-copper { fill: var(--color-accent-copper); }
.diagram .fill-euv { fill: var(--color-accent-euv); }
.diagram .fill-quartz { fill: var(--color-accent-quartz); }
.diagram .fill-plasma { fill: var(--color-accent-plasma); }
.diagram .stroke-primary { stroke: var(--color-primary); fill: none; }
.diagram .stroke-copper { stroke: var(--color-accent-copper); fill: none; }
.diagram .stroke-euv { stroke: var(--color-accent-euv); fill: none; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 720px) {
  .hero { padding-block: var(--space-16) var(--space-12); }
  .hero__title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .ch-header { padding-block: var(--space-12) var(--space-8); }
  .ch-nav-links { grid-template-columns: 1fr; }
  .figure--wide { margin-inline: 0; }
  .pull-quote { font-size: var(--text-lg); }
  .stat-row { padding: var(--space-5); gap: var(--space-4); }
}

/* ---------- Reveal on scroll ----------
   Content is always visible. JS may add .is-visible to enable a subtle
   transform-only entrance for elements scrolled into view, but content is
   never hidden — no FOUC, no “vanish for a second.” */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js-on .reveal:not(.is-visible) {
    transform: translateY(8px);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js-on .reveal.is-visible { transform: none; }
}

/* =========================================================================
   v3 ENHANCEMENTS
   ========================================================================= */

/* ---- Toolbar (search / audio / bookmark / tutor / pdf) ---- */
.toolbar {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  align-items: center;
  margin: var(--space-4) 0 var(--space-2);
}
.toolbar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text); cursor: pointer;
  text-decoration: none;
  transition: background 160ms, border-color 160ms;
}
.toolbar__btn:hover { background: var(--color-surface-offset); border-color: var(--color-text-muted); }
.toolbar__btn[aria-pressed="true"] { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.toolbar__btn svg { flex-shrink: 0; }

/* ---- Audio voice popover ---- */
.toolbar__audio { position: relative; }
.audio-popover {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 16px;
  z-index: 30;
  font-family: var(--font-body);
}
.audio-popover[hidden] { display: none; }
.audio-popover__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.audio-popover__title {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.audio-popover__close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: var(--color-text-muted);
  padding: 0 4px;
}
.audio-popover__close:hover { color: var(--color-text); }
.audio-popover__group {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
.audio-voice {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left; width: 100%;
  color: var(--color-text);
  transition: background 140ms, border-color 140ms;
}
.audio-voice:hover { background: var(--color-surface-offset); }
.audio-voice[aria-checked="true"] {
  background: var(--color-surface-offset);
  border-color: var(--color-accent-copper);
}
.audio-voice__dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--color-text-muted);
  flex: none;
}
.audio-voice[aria-checked="true"] .audio-voice__dot {
  border-color: var(--color-accent-copper);
  background: var(--color-accent-copper);
  box-shadow: inset 0 0 0 2px var(--color-surface);
}
.audio-voice__label { flex: 1; }
.audio-voice__name { display: block; font-weight: 500; }
.audio-voice__detail {
  display: block; font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.audio-popover__row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.audio-popover__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
  min-width: 48px;
}
.audio-popover__rate { flex: 1; accent-color: var(--color-accent-copper); }
.audio-popover__rate-val {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-soft);
  min-width: 50px; text-align: right;
}
.audio-popover__actions {
  display: flex; gap: 8px;
}
.audio-popover__sample,
.audio-popover__start {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background 140ms, border-color 140ms;
}
.audio-popover__sample:hover {
  background: var(--color-surface-offset);
}
.audio-popover__start {
  background: var(--color-accent-copper);
  color: #fff;
  border-color: var(--color-accent-copper);
}
.audio-popover__start:hover { filter: brightness(0.93); }
.audio-popover__hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  min-height: 14px;
}
.audio-popover__empty {
  padding: 16px 4px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 480px) {
  .audio-popover {
    position: fixed;
    top: auto; bottom: 16px; left: 16px; right: 16px;
    width: auto; max-width: none;
  }
}

/* ---- Sidenotes (inline tooltip) ---- */
.sidenote {
  border-bottom: 1px dotted var(--color-text-muted);
  cursor: help;
  position: relative;
}
.sidenote__bubble {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 320px;
  padding: 10px 14px;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.sidenote__bubble::after {
  content: ''; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text);
}
.sidenote__title {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-copper);
  margin-bottom: 4px;
}
.sidenote__body { display: block; }
.sidenote:hover .sidenote__bubble,
.sidenote:focus-within .sidenote__bubble {
  opacity: 1; pointer-events: auto;
}

/* ---- Search modal ---- */
[data-search] {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: start center;
  padding: 8vh 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms;
}
[data-search][aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.search__panel {
  background: var(--color-bg);
  width: min(720px, 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  max-height: 80vh; overflow: hidden;
}
.search__head { padding: var(--space-4); border-bottom: 1px solid var(--color-border); display: flex; gap: var(--space-2); align-items: center; }
.search__input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--color-text);
}
.search__close {
  background: none; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 4px 10px;
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
  color: var(--color-text-muted);
}
.search__results { overflow-y: auto; padding: var(--space-2); }
.search__hint { padding: var(--space-6) var(--space-4); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.search__result {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text);
  transition: background 120ms;
}
.search__result:hover { background: var(--color-surface); }
.search__num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted); padding-top: 3px;
}
.search__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; margin-bottom: 4px; }
.search__excerpt {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55;
  color: var(--color-text-muted);
}
.search__excerpt mark { background: var(--color-accent-copper-soft); color: var(--color-text); padding: 0 2px; border-radius: 2px; }

body[data-modal-open="true"] { overflow: hidden; }

/* ---- Glossary page ---- */
.glossary__index {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: var(--space-3) 0; margin-bottom: var(--space-6);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.glossary__jump {
  display: inline-block; min-width: 28px;
  padding: 4px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-decoration: none; color: var(--color-text-muted);
  text-align: center;
}
.glossary__jump:hover { background: var(--color-surface); color: var(--color-text); }
.glossary__section { margin-bottom: var(--space-10); }
.glossary__letter {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 64px; color: var(--color-accent-copper);
  line-height: 1; margin-bottom: var(--space-4);
}
.glossary__list { display: grid; gap: var(--space-3); }
.glossary__term {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 4px;
}
.glossary__chref { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; }
.glossary__chref:hover { color: var(--color-primary); }
.glossary__defn {
  font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.65;
  color: var(--color-text); margin-bottom: var(--space-4);
  max-width: 70ch;
}

/* ---- Bibliography page ---- */
.bib { margin-top: var(--space-4); }
.bib__section { margin-bottom: var(--space-8); }
.bib__chapter {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 500; margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
}
.bib__chapter a { text-decoration: none; color: var(--color-primary); }
.bib__chapter span { color: var(--color-text-muted); font-style: italic; font-weight: 400; }
.bib__list {
  list-style: decimal; padding-left: var(--space-5);
  display: grid; gap: var(--space-2);
}
.bib__list li { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; }
.bib__list a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; }
.bib__list a:hover { text-decoration-color: var(--color-primary); }
.bib__url {
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-text-muted); margin-top: 2px;
  word-break: break-all;
}

/* ---- Lens card reading status ---- */
.lens-card { position: relative; }
.lens-card__progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--color-divider);
  overflow: hidden; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
}
.lens-card__progress-fill {
  height: 100%; background: var(--color-primary);
  transition: width 220ms;
}
.lens-card[data-read-status="done"] .lens-card__progress-fill { background: var(--color-accent-copper); }
.lens-card[data-read-status="done"]::after {
  content: '✓'; position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 10px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--color-accent-copper); color: white;
  display: grid; place-items: center;
}

/* ---- Continue-reading card on cover ---- */
.continue-card {
  display: block; padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--color-text);
  margin-bottom: var(--space-8);
  transition: border-left-color 160ms, background 160ms;
}
.continue-card:hover { border-left-color: var(--color-accent-copper); background: var(--color-surface-offset); }
.continue-card__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 4px;
}
.continue-card__title {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--text-2xl); margin-bottom: 4px;
}
.continue-card__sub { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- AI Tutor modal ---- */
[data-tutor] {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: end center;
  padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms;
}
@media (min-width: 720px) {
  [data-tutor] { place-items: center end; padding: 24px; }
}
[data-tutor][aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.tutor__panel {
  background: var(--color-bg);
  width: min(440px, 100%); height: min(640px, 100vh);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.tutor__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tutor__head-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); }
.tutor__head-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 2px; }
.tutor__close { background: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 10px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
.tutor__log { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.tutor__msg { display: flex; flex-direction: column; gap: 4px; }
.tutor__msg-role {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.tutor__msg-body {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  padding: 10px 14px; border-radius: var(--radius-md);
  max-width: 92%;
}
.tutor__msg--user .tutor__msg-body { background: var(--color-primary); color: white; align-self: flex-end; }
.tutor__msg--user { align-items: flex-end; }
.tutor__msg--assistant .tutor__msg-body { background: var(--color-surface); color: var(--color-text); }
.tutor__form { display: flex; gap: 6px; padding: var(--space-3); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.tutor__input { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; background: var(--color-bg); color: var(--color-text); outline: none; }
.tutor__input:focus { border-color: var(--color-primary); }
.tutor__send { padding: 10px 16px; border-radius: var(--radius-md); border: none; background: var(--color-primary); color: white; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.tutor__send:hover { background: var(--color-text); }
.tutor__typing { display: inline-flex; gap: 4px; }
.tutor__typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--color-text-muted); display: inline-block; animation: tutorBounce 1s infinite; }
.tutor__typing span:nth-child(2) { animation-delay: 0.15s; }
.tutor__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tutorBounce { 0%,80%,100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }
.tutor__error { display: flex; flex-direction: column; gap: var(--space-2); }
.tutor__error em { font-style: italic; color: var(--color-text-soft); line-height: 1.5; }
.tutor__error em strong { color: var(--color-text); font-weight: 600; }
.tutor__error em a { color: var(--color-accent-copper); text-decoration: underline; text-underline-offset: 2px; }
.tutor__error-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 4px; }
.tutor__retry { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-accent-copper); background: var(--color-accent-copper); color: var(--color-surface); cursor: pointer; transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease; }
.tutor__retry:hover { filter: brightness(1.08); }
.tutor__retry:focus-visible { outline: 2px solid var(--color-accent-copper); outline-offset: 2px; }
.tutor__retry--ghost { background: transparent; color: var(--color-text-soft); border-color: var(--color-border); }
.tutor__retry--ghost:hover { color: var(--color-text); border-color: var(--color-text-muted); background: var(--color-surface-offset); filter: none; }

/* Floating tutor launcher (cover only) */
.tutor-launcher {
  position: fixed; bottom: 20px; right: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--color-primary); color: white;
  border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 160ms, background 160ms;
}
.tutor-launcher:hover { background: var(--color-text); transform: translateY(-2px); }
.tutor-launcher svg { flex-shrink: 0; }

/* ---- Print / PDF stylesheet ---- */
@media print {
  @page { size: A4; margin: 18mm 16mm; }
  html, body { background: white !important; color: #111 !important; }
  .progress-bar, .site-header, .site-footer, .toolbar, .tutor-launcher, [data-search], [data-tutor], .ch-nav-links, .lens-card__progress { display: none !important; }
  .ch-toc { display: none !important; }
  .ch-layout { display: block !important; }
  .prose { max-width: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .lens-card { break-inside: avoid; }
  .figure { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  blockquote { break-inside: avoid; }
  a { color: #1a3a5a; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #555; word-break: break-all; }
  /* Don't print sidenote bubbles */
  .sidenote__bubble { display: none !important; }
  .sidenote { border: none !important; }
  /* Page breaks between major sections in printed book mode */
  .print-break { break-before: page; }
}

/* When printing the full book, paginate per chapter */
body[data-print-mode="book"] .print-chapter { break-before: page; }

/* Hero CTA — primary read + PDF download */
.hero__cta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}
.hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.hero__cta-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.3);
}
.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.7em 1em;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.hero__cta-secondary:hover {
  color: var(--color-text);
  border-color: var(--color-text);
  background: var(--color-surface);
}
.hero__cta-secondary svg { color: var(--color-accent-copper); }
.hero__cta-meta {
  margin-left: 0.4em;
  padding-left: 0.7em;
  border-left: 1px solid var(--color-divider);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
}
@media (max-width: 640px) {
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero__cta-secondary { font-size: 0.72rem; }
  .hero__cta-meta { display: none; }
}

/* ===================================================================
   LEARN MODE  —  Phase 0 (predict, retrieval, ladder, drills, quiz)
   Uses only existing design tokens. Additive.
   =================================================================== */

/* Quiz button — use copper accent to mark the new affordance */
.toolbar__btn--accent {
  border-color: var(--color-accent-copper);
  color: var(--color-accent-copper);
}
.toolbar__btn--accent:hover {
  background: var(--color-accent-copper);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-copper);
}

/* Shared learn-section chrome */
.learn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  padding: var(--space-6) var(--space-6);
  margin-block: var(--space-8);
}
.learn__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.learn__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.learn__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
  font-style: italic;
}
.learn__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms, opacity 160ms;
}
.learn__btn:hover { background: var(--color-surface-offset); border-color: var(--color-text-muted); }
.learn__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.learn__btn--primary {
  background: var(--color-accent-copper);
  border-color: var(--color-accent-copper);
  color: var(--color-text-inverse);
}
.learn__btn--primary:hover { filter: brightness(1.05); background: var(--color-accent-copper); }
.learn__btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.learn__actions {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-4);
}
.learn__status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.learn__answer {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent-copper);
  border-radius: 4px;
}
.learn__answer-body {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.learn__answer-body strong { color: var(--color-text); }

.learn__rate {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-divider);
}
.learn__rate-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}
.learn__rate-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 140ms;
}
.learn__rate-btn:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}
.learn__rate-btn[aria-pressed="true"] {
  background: var(--color-accent-copper);
  border-color: var(--color-accent-copper);
  color: var(--color-text-inverse);
}

.learn__footer-strip {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  text-align: right;
}
.learn__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent-copper);
  text-decoration: none;
}
.learn__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----- Predict-before-reveal ----- */
.predict {
  border-color: var(--color-accent-copper-soft);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
}
.predict__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .predict__choices { grid-template-columns: 1fr; }
}
.predict__choice {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color 140ms, background 140ms;
}
.predict__choice:hover { border-color: var(--color-text-muted); }
.predict__choice input { accent-color: var(--color-accent-copper); }
.predict__choice:has(input:checked) {
  border-color: var(--color-accent-copper);
  background: var(--color-accent-copper-soft);
}

/* ----- Retrieval ----- */
.retrieval__list {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.retrieval__item {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  overflow: hidden;
}
.retrieval__item[open] {
  border-color: var(--color-accent-copper);
}
.retrieval__summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
}
.retrieval__summary::-webkit-details-marker { display: none; }
.retrieval__summary::marker { content: ''; }
.retrieval__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-copper);
}
.retrieval__kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.retrieval__q {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
}
.retrieval__body {
  padding: 0 var(--space-5) var(--space-5);
}

/* ----- Maturity ladder (slim status bar) ----- */
.ladder {
  padding: 0;
  background: transparent;
  border: none;
  margin-block: var(--space-5);
}
.ladder__bar {
  width: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  transition: border-color 140ms, background 140ms;
}
.ladder__bar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.ladder__bar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.ladder__bar-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
.ladder__bar-toggle:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.ladder__bar-caret {
  display: inline-block;
  font-size: var(--text-xs);
  transition: transform 160ms;
}
.ladder__bar-toggle[aria-expanded="true"] .ladder__bar-caret { transform: rotate(180deg); }
.ladder__dots {
  display: flex; align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ladder__dot {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: all 140ms;
}
.ladder__dot:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
  background: var(--color-surface);
}
.ladder__dot[aria-current="true"] {
  background: var(--color-accent-copper);
  border-color: var(--color-accent-copper);
  color: var(--color-text-inverse);
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.04);
}
.ladder__dot-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.ladder__dot[aria-current="true"] .ladder__dot-num { opacity: 1; }
.ladder__dot-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
@media (max-width: 720px) {
  .ladder__dot { flex: 1 1 calc(50% - var(--space-2)); }
  .ladder__dot-name { font-size: var(--text-sm); }
}
.ladder__panel {
  margin-top: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}
.ladder__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ladder__row { padding-bottom: var(--space-4); border-bottom: 1px dashed var(--color-divider); }
.ladder__row:last-child { border-bottom: none; padding-bottom: 0; }
.ladder__row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.ladder__row-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-copper);
  font-weight: 600;
}
.ladder__check {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}
.ladder__check input { accent-color: var(--color-accent-copper); cursor: pointer; }
.ladder__row-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}
.ladder__row[data-passed="true"] .ladder__row-text { color: var(--color-text-muted); }
.ladder__note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ----- Drills page ----- */
.drills__wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-block: var(--space-8);
}
.drills__actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.drills__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-accent-copper);
  border-radius: 4px;
}
.drills__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.drills__table th, .drills__table td {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
.drills__table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.drill__front { font-weight: 500; color: var(--color-text); width: 45%; }
.drill__back { color: var(--color-text-muted); line-height: 1.6; }

/* ----- Quiz mode banner inside the existing tutor modal ----- */
.tutor__quiz-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-copper-soft);
  border: 1px solid var(--color-accent-copper);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.tutor__quiz-banner-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tutor__quiz-banner-exit {
  background: transparent;
  border: 1px solid var(--color-text-muted);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.tutor__quiz-banner-exit:hover { background: var(--color-surface); }

/* ----- Quiz banner: top row + verdict slot ----- */
.tutor__quiz-banner {
  flex-direction: column;
  align-items: stretch;
}
.tutor__quiz-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tutor__quiz-banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tutor__quiz-banner-rate {
  background: var(--color-accent-copper);
  border: 1px solid var(--color-accent-copper);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.tutor__quiz-banner-rate:hover { filter: brightness(1.08); }
.tutor__quiz-banner-rate:focus-visible {
  outline: 2px solid var(--color-accent-copper);
  outline-offset: 2px;
}
.tutor__quiz-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-divider);
  flex-wrap: wrap;
}
.tutor__quiz-verdict[hidden] { display: none; }
.tutor__quiz-verdict-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--color-accent-copper);
  border-radius: 999px;
  background: var(--color-surface);
}
.tutor__quiz-verdict-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-accent-copper);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tutor__quiz-verdict-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}
.tutor__quiz-verdict-save {
  background: var(--color-accent-copper);
  border: 1px solid var(--color-accent-copper);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.tutor__quiz-verdict-save:hover { filter: brightness(1.08); }
.tutor__quiz-verdict-save:focus-visible {
  outline: 2px solid var(--color-accent-copper);
  outline-offset: 2px;
}
.tutor__quiz-verdict-save[data-saved="true"] {
  background: transparent;
  color: var(--color-accent-copper);
  cursor: default;
}
@media (max-width: 560px) {
  .tutor__quiz-banner-top { flex-direction: column; align-items: flex-start; }
  .tutor__quiz-banner-actions { width: 100%; }
}