.handbook-page { background: var(--bg); }
.handbook-page nav .current { color: var(--green); }
.book-hero { padding: 95px 0 75px; display: grid; grid-template-columns: 1fr .9fr; gap: 75px; align-items: center; }
.book-hero h1 { margin: 15px 0 23px; font-size: clamp(48px, 7vw, 82px); line-height: 1.02; letter-spacing: -.065em; }
.book-hero > div:first-child > p:not(.eyebrow) { max-width: 650px; color: var(--muted); }
.book-map { display: flex; align-items: flex-end; min-height: 410px; padding: 25px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.book-spine { flex: 1; min-width: 0; height: 70%; padding: 15px 10px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-right: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.book-spine:nth-child(2) { height: 85%; }
.book-spine:nth-child(3) { height: 100%; border-color: var(--green); }
.book-spine:nth-child(4) { height: 78%; }
.book-spine:last-child { border-right: 1px solid var(--line); height: 91%; }
.book-spine span, .book-spine small { color: var(--muted); font: 500 9px var(--mono); }
.book-spine strong { font-size: 14px; }
.book-spine.accent { color: var(--green); }
.book-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.book-stats div { padding: 30px; border-right: 1px solid var(--line); }
.book-stats div:last-child { border-right: 0; }
.book-stats strong, .book-stats span { display: block; }
.book-stats strong { color: var(--green); font: 500 32px var(--mono); }
.book-stats span { color: var(--muted); font-size: 12px; }
.curriculum, .artifact-section { padding-block: 110px; }
.volume-list { border-top: 1px solid var(--line); }
.volume-card { display: grid; grid-template-columns: 70px 1fr 230px 110px; gap: 25px; align-items: center; padding: 26px 15px; border-bottom: 1px solid var(--line); }
.volume-card.is-complete { opacity: .58; }
.volume-number { color: var(--green); font: 500 12px var(--mono); }
.volume-copy h3 { margin: 0 0 5px; font-size: 21px; }
.volume-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.volume-output { color: var(--muted); font-size: 11px; }
.volume-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.volume-actions a { color: var(--green); font: 500 11px var(--mono); }
.volume-actions label { display: flex; gap: 7px; color: var(--muted); font-size: 11px; }
.volume-actions input { accent-color: var(--green); }
.lab-section { padding-block: 110px; border-block: 1px solid var(--line); background: var(--surface); }
.lab-tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lab-card { min-height: 180px; padding: 22px; border: 1px solid var(--line); background: var(--bg); }
.lab-card-top { display: flex; align-items: center; justify-content: space-between; }
.lab-card span { color: var(--green); font: 500 10px var(--mono); }
.lab-card label { display: flex; gap: 6px; color: var(--muted); font-size: 10px; }
.lab-card input { accent-color: var(--green); }
.lab-card h3 { margin: 20px 0 6px; }
.lab-card p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.lab-card a { color: var(--green); font: 500 10px var(--mono); }
.lab-card.is-complete { opacity: .58; }
.artifact-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.artifact-grid a { min-height: 145px; padding: 22px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.artifact-grid a:hover { background: var(--surface); }
.artifact-grid span { color: var(--green); font: 500 9px var(--mono); }
.artifact-grid strong { margin: 22px 0 4px; }
.artifact-grid small { color: var(--muted); }
.graduation { margin-bottom: 120px; padding: 40px; display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; border: 1px solid var(--green); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.graduation h2 { margin: 10px 0 5px; font-size: 34px; letter-spacing: -.04em; }
.graduation p:not(.eyebrow) { margin: 0; color: var(--muted); }
.score-ring { display: flex; flex-direction: column; align-items: center; }
.score-ring strong { color: var(--green); font: 500 42px var(--mono); }
.score-ring span { color: var(--muted); font-size: 10px; }
@media (max-width: 900px) {
  .book-hero { grid-template-columns: 1fr; }
  .book-map { min-height: 330px; }
  .volume-card { grid-template-columns: 55px 1fr; }
  .volume-output { grid-column: 2; }
  .volume-actions { grid-column: 2; align-items: flex-start; }
  .graduation { grid-template-columns: 1fr; }
  .score-ring { align-items: flex-start; }
}
@media (max-width: 600px) {
  .book-hero { padding-top: 60px; }
  .book-map { min-height: 280px; padding: 12px; }
  .book-spine { padding: 10px 6px; }
  .book-stats, .lab-tracks, .artifact-grid { grid-template-columns: 1fr 1fr; }
  .book-stats div:nth-child(2) { border-right: 0; }
  .book-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .volume-card { grid-template-columns: 1fr; gap: 10px; }
  .volume-output, .volume-actions { grid-column: auto; }
  .artifact-grid { border-left: 0; }
  .artifact-grid a { border-left: 1px solid var(--line); }
  .graduation { padding: 25px; }
}