/* Palette and type pulled from cfhome.org — Typekit kit etk6oip
   (proxima-nova family), brand orange #f15d22, body ink #333. */
:root {
  --ink: #333333;
  --ink-soft: #666666;
  --paper: #FFFFFF;
  --paper-warm: #F7F6F4;
  --grey: #8A8A8A;
  --rule: #E2E2E2;
  --tally: #F15D22;
  --tally-dark: #D24A15;
  --focus: #2EA3F2;
  --warm: #E8A33D;
  /* The simulator panels stay dark in both themes on purpose: a viewfinder is
     a dark instrument, and the stage photograph is of a dark room. */
  --panel: #232323;
  --panel-line: #3A3A3A;
  --panel-fg: #E4E6EA;
  --panel-dim: #8A9099;
  --panel-track: #3A414D;

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --line: var(--rule);
  --surface: #FFFFFF;

  --display: "proxima-nova-condensed", "proxima-nova", "Open Sans", -apple-system, system-ui, sans-serif;
  --body: "proxima-nova", "Open Sans", -apple-system, system-ui, sans-serif;
  --mono: "SF Mono", "Menlo", "Consolas", monospace;

  --measure: 68ch;
}

/* Dark palette. Guarded so an explicit light choice still wins on a machine
   whose OS is set to dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1A1A;
    --fg: #E8E8E8;
    --fg-soft: #A8A8A8;
    --line: #363636;
    --surface: #232323;
    --tally: #FF7A44;
    --focus: #5BB8F5;
    --warm: #F0B454;
    /* Simulator chrome, so the panels sit in the page rather than on it. */
    --panel: #232323;
    --panel-line: #3A3A3A;
    --panel-fg: #E4E6EA;
    --panel-dim: #8A9099;
    --panel-track: #3A414D;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1A1A; --fg: #E8E8E8; --fg-soft: #A8A8A8;
  --line: #363636; --surface: #232323;
  --tally: #FF7A44; --focus: #5BB8F5; --warm: #F0B454;
  --panel: #232323; --panel-line: #3A3A3A; --panel-fg: #E4E6EA;
  --panel-dim: #8A9099; --panel-track: #3A414D;
}
:root[data-theme="light"] {
  --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft);
  --line: var(--rule); --surface: #FFFFFF;
  --tally: #F15D22; --focus: #2EA3F2; --warm: #B8862B;
  --panel: #232323; --panel-line: #3A3A3A; --panel-fg: #E4E6EA;
  --panel-dim: #8A9099; --panel-track: #3A414D;
}

* { box-sizing: border-box; }

/* Visited links never change colour anywhere in this document. */
a:visited { color: inherit; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.72;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 64px);
}

/* Running text keeps a readable line length inside the full-width page;
   rig panels and figures break out to use the whole window. */
section > p,
section > ul:not(.shot-list),
section > ol,
section > h3,
.rule-box {
  max-width: var(--measure);
}

/* ---------- Masthead ---------- */

.masthead {
  border-bottom: 3px solid var(--fg);
  padding: 64px 0 20px;
  margin-bottom: 8px;
}

/* On a wide screen, instruction text and its simulator sit side by side
   rather than leaving the panel stranded next to empty column. */
@media (min-width: 1100px) {
  section.split .sec-head { grid-column: 1 / -1; }
  section.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  section.split > .rig {
    position: sticky;
    top: 24px;
    margin-top: 0;
    grid-row: span 30;
  }
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tally);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tally) 22%, transparent);
}
h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(42px, 8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  text-wrap: balance;
}
.standfirst {
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-soft);
  margin: 0;
  max-width: 54ch;
}
.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Theme toggle. Shows the theme it will switch TO, so the label is an action
   rather than a status. */
.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 11px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--tally); border-color: var(--tally); }
.theme-toggle:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; }
.theme-toggle svg { width: 13px; height: 13px; flex: none; }
.theme-toggle .icon-sun {
  fill: none; stroke: currentColor; stroke-width: 1.4;
}
.theme-toggle .icon-moon { fill: currentColor; }
/* Show the icon for the theme the button switches to. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- Sections ---------- */

section { padding: 52px 0 8px; }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 28px;
}
.sec-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tally);
  letter-spacing: 0.08em;
  flex: none;
  padding-top: 4px;
}
h2 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h3 {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
  margin: 34px 0 10px;
}
p { margin: 0 0 17px; }
strong { font-weight: 600; }

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-soft);
}

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

/* Call-out for hard rules */
.rule-box {
  border-left: 3px solid var(--tally);
  background: color-mix(in srgb, var(--tally) 5%, transparent);
  padding: 14px 18px;
  margin: 22px 0;
}
.rule-box p:last-child { margin-bottom: 0; }
.rule-box .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tally);
  display: block;
  margin-bottom: 6px;
}

/* Definition rows for shot sizes */
.shot-list {
  border-top: 1px solid var(--line);
  margin: 24px 0;
  padding: 0;
  list-style: none;
}
.shot-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin: 0;
}
.shot-list dt, .shot-list .abbr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tally);
  padding-top: 3px;
}
.shot-list .desc { font-size: 16px; }

/* ---------- Simulator panels ---------- */

.rig {
  background: var(--panel);
  color: #E4E6EA;
  border-radius: 3px;
  margin: 30px 0 34px;
  overflow: hidden;
  border: 1px solid var(--panel-line);
}
.rig-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--panel-line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8A9099;
  flex-wrap: wrap;
}
.rig-title { color: #C8CCD4; }
.rig-body { padding: 16px; }

canvas {
  display: block;
  width: 100%;
  border-radius: 2px;
  background: #0B0D11;
  touch-action: none;
}

/* An exercise panel should be usable without scrolling: the viewfinder and
   the controls that drive it need to be on screen at the same time. The
   canvas gives up height first, down to a floor that keeps it legible. */
.rig.fits {
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.rig.fits .rig-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The script sets an exact pixel height that matches the backing store, so
   flex must not stretch these — a stretched canvas is a distorted drawing. */
.rig.fits canvas {
  flex: 0 0 auto;
  object-fit: contain;
}
.rig.fits .controls { margin-top: 0; }
.rig.fits .readout { margin-top: 0; padding-top: 10px; }
.rig.fits .hint { margin-top: 0; }

.controls {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
@media (min-width: 620px) {
  .controls.two { grid-template-columns: 1fr 1fr; }
  .controls.three { grid-template-columns: repeat(3, 1fr); }
}

.ctrl label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A9099;
  margin-bottom: 7px;
}
.ctrl .val { text-align: right; white-space: nowrap; }

/* Focus knob: sits on the LEFT, where the focus handle is on the camera.
   Rotating it away from your body (clockwise from the operator's side)
   pushes the focal plane farther away, exactly as on the real barrel. */
.focus-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 4px;
}
.focus-knob-wrap { flex: none; width: 132px; }
.focus-knob {
  width: 112px;
  height: 112px;
  margin: 0 auto;
  cursor: grab;
  touch-action: none;
  border-radius: 50%;
}
.focus-knob:active { cursor: grabbing; }
.focus-knob:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.focus-knob svg { width: 100%; height: 100%; display: block; }
.knob-body { fill: #1F242C; stroke: #39414D; stroke-width: 2; }
.knob-grip line { stroke: #5A6472; stroke-width: 3; stroke-linecap: round; }
.knob-dot { fill: var(--tally); }
.knob-hub { fill: #171B21; stroke: #39414D; stroke-width: 2; }
.knob-marks {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6C737E;
  text-align: center;
}
.knob-marks em { font-style: normal; color: #4E555F; }
.focus-side { flex: 1; min-width: 0; }

/* Legacy near/far slider marks (unused once the knob is in). */
.wt-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C737E;
  margin-top: 2px;
}
.ctrl .val {
  color: #E4E6EA;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ctrl .val.hot { color: var(--warm); }

input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: #3A414D;
}
input[type=range]::-moz-range-track {
  height: 2px;
  background: #3A414D;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #E4E6EA;
  margin-top: -6px;
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border: none;
  border-radius: 50%;
  background: #E4E6EA;
}
input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: #C8CCD4;
  border: 1px solid #3A414D;
  border-radius: 2px;
  padding: 7px 13px;
  cursor: pointer;
}
button:hover { border-color: #5A626F; color: #fff; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.armed { border-color: var(--tally); color: var(--tally); }

/* Shot-size presets — the sizes a director actually calls on headset. */
.shot-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.sb-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A9099;
  margin-right: 6px;
}
.shot-btn { flex: 1 1 auto; min-width: 68px; }

/* Gallery of the five named shots, each rendered from the same source frame. */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.shot-cell figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A9099;
  margin: 7px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.shot-cell figcaption b { color: #E4E6EA; font-weight: 400; }
.shot-cell { margin: 0; }
.shot-cell canvas { border: 1px solid var(--panel-line); }
.shot-btn.active {
  border-color: var(--tally);
  background: color-mix(in srgb, var(--tally) 16%, transparent);
  color: #fff;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--panel-line);
  font-family: var(--mono);
  font-size: 11px;
  color: #8A9099;
}
.readout b {
  color: #E4E6EA;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.readout .warn { color: var(--tally); }
.readout .ok { color: #5FBF6A; }

.hint {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: #7A818C;
  margin: 12px 0 0;
}

.caption {
  font-size: 14px;
  color: var(--fg-soft);
  font-style: italic;
  margin: -18px 0 26px;
}

/* Legend swatches */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A9099;
  margin-top: 12px;
}
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i {
  width: 14px; height: 3px; border-radius: 2px; display: block;
}

footer {
  border-top: 3px solid var(--fg);
  margin-top: 64px;
  padding: 22px 0 72px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.print-only { display: none; }
/* Snapshots of the live canvases, shown only on paper. */
img.print-shot { display: none; }

/* ---------- Glossary ---------- */

.glossary {
  margin: 24px 0 0;
  max-width: var(--measure);
}
.glossary dt {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.glossary dd {
  margin: 5px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-soft);
}
.house-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tally);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px 5px;
  font-weight: 400;
}

/* Inline links to glossary entries: present but not distracting in running
   text, and clearly interactive on hover or keyboard focus. */
/* Links keep one colour regardless of visited state — these are internal
   cross-references, not destinations to track, and the browser's purple
   default fights the brand palette. */
a.term,
a.term:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--tally) 60%, transparent);
  padding-bottom: 1px;
}
a.term:hover,
a.term:visited:hover { color: var(--tally); border-bottom-style: solid; }
a.term:focus-visible {
  outline: 2px solid var(--tally);
  outline-offset: 2px;
  border-radius: 2px;
}
.glossary a,
.glossary a:visited {
  color: var(--tally);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.glossary a:hover,
.glossary a:visited:hover { border-bottom-style: solid; }
/* A glossary entry jumped to from a link briefly announces itself. */
.glossary dt:target { color: var(--tally); }
.glossary dt:target + dd { border-left: 3px solid var(--tally); padding-left: 12px; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reference tables. Shown on screen when not marked .print-only, and
   restyled for paper in the print block below. */
.print-fig {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px 18px;
  margin: 24px 0;
  overflow-x: auto;
}
.print-fig .cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tally);
  margin-bottom: 12px;
}
.print-fig table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.print-fig th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
  padding: 0 14px 8px 0;
  white-space: nowrap;
}
.print-fig td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.print-fig tr:last-child td { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Print ---------- */

@media print {
  @page { margin: 18mm 16mm; }

  :root {
    --bg: #fff; --fg: #000; --fg-soft: #333;
    --line: #bbb; --tally: #000;
  }
  body { font-size: 10.5pt; line-height: 1.5; background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }

  .masthead { padding-top: 0; border-bottom-width: 2pt; }
  h1 { font-size: 34pt; }
  .standfirst { font-size: 12pt; }
  .eyebrow::before { box-shadow: none; }

  section { padding: 18pt 0 0; break-inside: auto; }
  .sec-head { break-after: avoid; }
  h2 { font-size: 16pt; break-after: avoid; }
  h3 { font-size: 11pt; break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Simulators become still images on paper: the controls go, the picture
     stays, so the printed manual shows the same stage the web version does. */
  .rig { border: 1pt solid #999; break-inside: avoid; }
  .rig-head { border-bottom: 0.5pt solid #999; padding: 4pt 6pt; color: #000; }
  .rig-body { padding: 6pt; }
  .rig canvas,
  .controls, .shot-buttons, .readout, .legend, .hint,
  .rig button { display: none !important; }
  .rig .print-shot { display: block; width: 100%; }
  /* The five-shot gallery keeps its grid on paper, at print-friendly size. */
  .shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .shot-cell figcaption {
    display: flex; justify-content: space-between; gap: 4pt;
    font-family: var(--mono); font-size: 6.5pt; letter-spacing: 0.06em;
    text-transform: uppercase; color: #000; margin-top: 2pt;
  }
  .shot-cell figcaption b { color: #000; font-weight: 600; }
  .print-only { display: block; }

  .print-fig {
    border: 1pt solid #999;
    padding: 9pt 11pt;
    margin: 10pt 0 14pt;
    break-inside: avoid;
  }
  .print-fig .cap {
    font-family: var(--mono);
    font-size: 8pt;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6pt;
    color: #000;
  }
  .print-fig table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 8.5pt;
    font-variant-numeric: tabular-nums;
  }
  .print-fig th {
    text-align: left;
    border-bottom: 0.5pt solid #999;
    padding: 3pt 8pt 3pt 0;
    font-weight: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .print-fig td { padding: 3pt 8pt 3pt 0; border-bottom: 0.25pt solid #ddd; }

  .rule-box { border-left: 2pt solid #000; background: none; break-inside: avoid; }
  .shot-list li { break-inside: avoid; }
  .caption { margin-top: 0; }
  footer { break-before: avoid; padding-bottom: 0; }
  a { text-decoration: none; color: #000; }
  .no-print { display: none; }
}

/* ============================================================
   Left navigation. Fixed alongside the content on wide screens,
   collapsible behind a button on narrow ones.
   ============================================================ */

:root { --nav-w: 244px; }

.sidenav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nav-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 26px 0 32px;
  z-index: 40;
}

.nav-toggle { display: none; }

.nav-group { margin-bottom: 26px; }
.nav-page {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 0 20px 8px;
}
.nav-group.current .nav-page { color: var(--tally); }
.nav-page:hover { color: var(--tally); }

.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li { margin: 0; }
.sidenav li a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 20px 6px 20px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fg-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.sidenav li a:hover { color: var(--fg); background: color-mix(in srgb, var(--tally) 7%, transparent); }
.sidenav li a.here {
  color: var(--fg);
  border-left-color: var(--tally);
  background: color-mix(in srgb, var(--tally) 10%, transparent);
}
.nav-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tally);
  flex: none;
  min-width: 16px;
  font-variant-numeric: tabular-nums;
}

/* Content sits to the right of the fixed nav. */
.page { margin-left: var(--nav-w); }

/* Anchored sections must clear the top of the viewport when jumped to. */
section[id] { scroll-margin-top: 18px; }

@media (max-width: 1000px) {
  :root { --nav-w: 0px; }
  .page { margin-left: 0; }

  .sidenav {
    position: sticky;
    top: 0;
    inset: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0;
    background: var(--bg);
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 13px clamp(20px, 4vw, 64px);
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-soft);
    cursor: pointer;
  }
  .nav-burger {
    width: 14px; height: 9px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    position: relative;
  }
  .nav-burger::after {
    content: ""; position: absolute; left: 0; top: 3px;
    width: 14px; border-top: 2px solid currentColor;
  }
  .nav-inner {
    display: none;
    padding: 4px 0 18px;
    max-height: 70vh;
    overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .nav-inner.open { display: block; }
  .nav-group { margin-bottom: 16px; }
  .nav-page, .sidenav li a { padding-left: clamp(20px, 4vw, 64px); }
  section[id] { scroll-margin-top: 56px; }
}

@media print {
  .sidenav { display: none; }
  .page { margin-left: 0; }
}

/* Links in running prose — including cross-page ones — read like the glossary
   term links rather than default browser blue. Nav and masthead are excluded,
   since they carry their own styling. */
section p a:not(.term),
section li a:not(.term),
section dd a:not(.term) {
  color: var(--tally);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
section p a:not(.term):hover,
section li a:not(.term):hover,
section dd a:not(.term):hover { border-bottom-style: solid; }
section p a:not(.term):visited,
section li a:not(.term):visited,
section dd a:not(.term):visited { color: var(--tally); }