/* How You See: the eye chart and the anatomical plate.
   Identity: Archivo (a sturdy grotesque in the family of the sans letters on optometrists' charts) set heavy and
   huge for titles, the home contents set as a literal eye chart (each line smaller, with its Snellen fraction);
   Spectral for reading. White page. One accent, a deep chart red (the duochrome red and the red line on a
   Snellen chart), used for links, light rays and the chapter title fields. Data colours have fixed meanings on
   every figure: S cones blue, M cones green, L cones vermilion (Okabe–Ito), rods "visual purple". */
:root {
  --bg: #fff; --surface: #f6f5f3; --ink: #151515; --ink-soft: #343434; --muted: #5c5c5c; --rule: #e0dedb;
  --accent: #b3211c; --accent-ink: #fff; --link: #a51d18; --focus: #a51d18; --mark: rgba(179, 33, 28, .09);
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Spectral", Charter, Georgia, serif;
  --font-sans: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: var(--font-serif); --font-ui: var(--font-sans); --font-h1: var(--font-display);
  --fs-body: 1.17rem; --lh-body: 1.6; --prose: 40rem; --wide: 70rem; --radius: 2px;
  --fig-bg: #fff; --fig-surface: #f6f5f3; --fig-ink: #151515; --fig-muted: #595959; --fig-grid: rgba(0,0,0,.08);
  --fig-grid-strong: rgba(0,0,0,.42); --fig-border: transparent;
  --c-primary: #b3211c;  /* light, rays, the thing being taught */
  --c-ref: #222;         /* the model eye, reference lines */
  --c-second: #0072b2;   /* comparison series */
  --c-third: #7b3f99;    /* rods */
  --c-ok: #00805f; --c-warn: #9a5b00;
  --c-s: #0072b2; --c-m: #009e73; --c-l: #d55e00; --c-rod: #7b3f99;   /* receptor classes: fixed site-wide */
  --t-s: #0067a1; --t-m: #00714f; --t-l: #a84300; --t-rod: #7b3f99;   /* the same, dark enough for text (≥ 4.5:1) */
  --tissue: #f3e3dc; --tissue-ink: #8a4b3c; --humor: #eef4f7; --lens: #e9eef6; --nerve: #f1e7c4;
  --ctl-accent: #b3211c;
  --band-bg: #9f1d18; --band-ink: #fff; --band-muted: rgba(255,255,255,.86);
}
:root[data-theme="dark"] {
  --bg: #121212; --surface: #1c1c1c; --ink: #ecebe8; --ink-soft: #d0cec9; --muted: #a8a59f; --rule: #333;
  --accent: #ff7a6b; --link: #ff8e80; --focus: #ff8e80; --mark: rgba(255, 122, 107, .14);
  --fig-bg: #121212; --fig-surface: #1c1c1c; --fig-ink: #ecebe8; --fig-muted: #aaa69f; --fig-grid: rgba(255,255,255,.09);
  --fig-grid-strong: rgba(255,255,255,.5);
  --c-primary: #ff7a6b; --c-ref: #e8e8e8; --c-second: #56b4e9; --c-third: #c79be0; --c-ok: #3cc39a; --c-warn: #e0a640;
  --c-s: #56b4e9; --c-m: #34c99a; --c-l: #f0883e; --c-rod: #c79be0;
  --t-s: #56b4e9; --t-m: #34c99a; --t-l: #f0883e; --t-rod: #c79be0;
  --tissue: #3a2622; --tissue-ink: #e2b2a4; --humor: #17202a; --lens: #1e2633; --nerve: #3a3420;
  --ctl-accent: #ff7a6b; --band-bg: #6e1411;
}

/* Header */
.site-header { border-bottom: 2px solid var(--ink); }
.wordmark { font: 800 1.2rem/1 var(--font-display); letter-spacing: -.01em; }
.wordmark .wm-v { color: var(--accent); }
.site-nav a { font-size: .9rem; }

/* Headings: heavy Archivo against calm Spectral text */
h1 { font-family: var(--font-h1); font-weight: 800; letter-spacing: -.025em; line-height: .96; }
h2 { font: 800 clamp(1.5rem, 3.4vw, 2rem)/1.12 var(--font-display); letter-spacing: -.015em; margin-top: 2.6rem; }
h3 { font: 800 1.18rem/1.25 var(--font-display); }
.prose .lede { font-size: 1.22em; line-height: 1.5; }
var { font-style: italic; }
sub, sup { line-height: 0; }

/* Chapter title field: the chart red, solid */
.essay-head-wrap.band { padding: 0; margin-bottom: 0; }
.essay-head-wrap.band .essay-head { padding: 1.8rem var(--gutter) 1.5rem; }
.essay-head h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: .1em 0 .18em; }
.band .kicker { font: 500 .98rem/1.3 var(--font-ui); }
.band .kicker span { color: var(--band-muted); }
.band .dek { font-size: clamp(1.1rem, 2.4vw, 1.38rem); max-width: 40rem; }
.essay-plate { max-width: var(--wide); margin: 0 auto 2rem; padding: .2rem var(--gutter) 0; }
.essay-plate .figure { margin: 0; }
.essay-plate figcaption { max-width: 46rem; }
@media (max-width: 559px) {
  .essay-head-wrap.band .essay-head { padding: .9rem var(--gutter) .7rem; }
  .band .dek { margin-bottom: .1rem; font-size: 1rem; line-height: 1.36; }
  .essay-head h1 { font-size: 2.2rem; }
  .band .meta-line { display: none; }
}

/* Home: a chart-sized title, the plate under it */
.hy-home-head { max-width: var(--wide); margin: 0 auto; padding: 1.4rem var(--gutter) 0; }
.hy-home-head h1 { font-size: clamp(3rem, 9vw, 6.4rem); margin: 0 0 .1em; }
.hy-home-head h1 em { font-style: normal; color: var(--accent); }
.hy-home-head .dek { margin: 0; max-width: 42rem; font-size: clamp(1.06rem, 2.3vw, 1.38rem); }
.hy-plate { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.hy-plate .figure { margin: .2rem 0 0; }
.hy-plate figcaption { max-width: 46rem; }
.hy-plate .start { margin: .8rem 0 0; }
.btn-start { font: 700 1.05rem var(--font-ui); }
@media (max-width: 559px) { .hy-home-head { padding-top: .7rem; } .hy-home-head h1 { font-size: 2.9rem; } .hy-home-head .dek { font-size: 1rem; line-height: 1.36; } }

/* Contents as an eye chart: each line smaller than the last, its Snellen fraction at the right */
.hy-chart { max-width: var(--prose); margin: 2.5rem auto 3rem; padding: 0 var(--gutter); }
.hy-chart h2 { margin: 0 0 1rem; }
.hy-chart ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hy-chart li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; padding: .8rem 0 .9rem; border-bottom: 1px solid var(--rule); }
.hy-chart a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.hy-chart a:hover .ch-t { color: var(--link); }
.ch-t { font: 800 1.4rem/1.02 var(--font-display); letter-spacing: -.02em; }
.ch-d { font: 400 1rem/1.45 var(--font-body); color: var(--ink-soft); margin-top: .3rem; }
.ch-acuity { font: 500 .85rem var(--font-ui); color: var(--accent); font-variant-numeric: tabular-nums; }
.hy-chart .row-1 .ch-t { font-size: clamp(2.6rem, 11vw, 4.4rem); letter-spacing: -.03em; }
.hy-chart .row-2 .ch-t { font-size: clamp(2rem, 8.4vw, 3.2rem); }
.hy-chart .row-3 .ch-t { font-size: clamp(1.55rem, 6.4vw, 2.3rem); }
.hy-chart .row-4 .ch-t { font-size: clamp(1.25rem, 5vw, 1.7rem); }
.hy-chart .row-4 { border-bottom: 2px solid var(--accent); }
.home-tools { max-width: var(--prose); margin: 0 auto 3rem; padding: 0 var(--gutter); }
.home-tools ul { list-style: none; padding: 0; margin: 0; }
.home-tools li { margin: 0 0 1rem; }
.home-tools a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.home-tools .card-t { font: 800 1.15rem var(--font-display); color: var(--link); }

/* Figures */
.fig-n { font: 800 .9rem var(--font-ui); color: var(--accent); }
.fig-n::after { content: ""; }
.figure figcaption { font-size: .95rem; }
.w-note { font-size: 1rem; color: var(--ink-soft); max-width: 46rem; }
.w-note b { color: var(--fig-ink); font-weight: 600; }
.w-stage canvas { border-radius: 0; }
.w-stage canvas:focus-visible, .w-stage svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.w-say { margin: .2rem 0 0; font: 400 1.02rem/1.45 var(--font-ui); color: var(--fig-ink); }
.w-say b { font-weight: 700; }
.w-say .warnword { color: var(--c-warn); font-weight: 700; }
.w-say .okword { color: var(--c-ok); font-weight: 700; }
.w-disclaim { font: 400 .92rem/1.45 var(--font-ui); color: var(--fig-ink); border-left: 3px solid var(--accent); padding: .2rem 0 .2rem .8rem; margin: .2rem 0; }
.w-row-btns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.s-word { color: var(--t-s); font-weight: 600; } .m-word { color: var(--t-m); font-weight: 600; }
.l-word { color: var(--t-l); font-weight: 600; } .rod-word { color: var(--t-rod); font-weight: 600; }
.ray-word { color: var(--accent); font-weight: 600; }

/* Eye diagram (SVG plate) */
.ed-wrap { display: grid; gap: .8rem; }
@media (min-width: 900px) { .ed-wrap { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; } }
.ed-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.ed-svg .hit { cursor: pointer; }
.ed-svg .lbl { font: 500 15px var(--font-ui); fill: var(--fig-ink); }
.ed-svg .lbl.on { font-weight: 800; fill: var(--accent); }
.ed-svg .leader { stroke: var(--fig-muted); stroke-width: 1; }
.ed-svg .leader.on { stroke: var(--accent); stroke-width: 1.6; }
.ed-svg .part.on { stroke: var(--accent); stroke-width: 2.5; }
.ed-side h3 { margin: 0 0 .2rem; font-size: 1.25rem; }
.ed-side .ed-layer { font: 500 .88rem var(--font-ui); color: var(--fig-muted); margin: 0 0 .4rem; }
.ed-side p { font: 400 1rem/1.5 var(--font-ui); margin: 0; }
.ed-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.ed-list button { font: 500 .85rem var(--font-ui); background: var(--fig-bg); color: var(--fig-ink); border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); padding: .25rem .5rem; min-height: 32px; cursor: pointer; }
.ed-list[hidden] { display: none; }
.ed-qlist button { min-width: 44px; min-height: 40px; font-weight: 700; }
.ed-list button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ed-quiz-q { font: 800 1.15rem/1.3 var(--font-display); margin: 0 0 .3rem; }
.ed-score { font: 500 .95rem var(--font-ui); color: var(--fig-muted); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .ed-list button { min-height: 44px; } }

/* Perception tests: plain white field, black marks */
.bs-field canvas { background: #fff; }
.tst-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.tst-choices .w-btn { min-width: 5.5rem; }

/* Tables in prose */
.prose table { font-family: var(--font-ui); font-size: .95rem; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq { font-size: 1.22rem; }
.callout-history { border-left-color: var(--accent); }
.simplification { border-left-color: var(--c-ref); }
.not-medical { border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1rem; margin: 1.4rem 0; font-size: .98em; }

.theme-toggle { white-space: nowrap; }
@media (max-width: 559px) { .wordmark { font-size: 1.05rem; } }