/* ============================================================
   R4R — control-room instrument panel for a theory of love.

   One typeface. Courier New, monospace. Nothing loaded from
   anywhere. Three Google Fonts were an editorial *impression*
   of an instrument panel; a single fixed-pitch face with no
   network dependency IS one. Hierarchy is built from size,
   weight, case, colour and rule-work instead of from typeface
   contrast — that constraint is the brief, not a compromise.

   Case is load-bearing and consistent:
     UPPERCASE = chrome, nameplate, label, annunciator
     sentence  = content you are meant to read

   Palette: alpha Leonis blue-white + ISA-18.2 alarm semantics
   + phi gold. Single committed dark theme; every colour is
   painted explicitly.
   ============================================================ */

/* ------------------------------------------------------------
   NO EXTERNAL FONTS — an invariant, not an aspiration.

   This stylesheet references no remote host: no @import, no
   url(), no webfont. Every face it names is one already on the
   machine. The three webfont <link> tags that used to sit in
   each page head are gone from every page and from build.py.

   Verify — from the repository root, this must print nothing:

     rg -n 'fonts\.(googleapis|gstatic)' docs/

   Should a page ever reintroduce a webfont link, that command
   is what finds it. The host name is deliberately not spelled
   out anywhere in this file, so this file can never be the
   thing the search turns up.
   ------------------------------------------------------------ */

:root {
  /* ground */
  --ground:   #0B0E14;   /* instrument-panel black, blue bias */
  --panel:    #131822;   /* raised panel */
  --panel-2:  #1A2130;   /* inset well */
  --rule:     #263043;   /* hairline — carries hierarchy now, so lifted */
  --rule-hot: #3E4C66;   /* hairline, emphasised */

  /* ink */
  --ink:      #DEE5EF;   /* primary text */
  --ink-2:    #A9B4C4;   /* secondary */
  --dim:      #8A96AC;   /* labels, captions — lifted: Courier's strokes
                            are thin, and these run small and uppercase */
  --faint:    #4C566A;   /* disabled, grid */

  /* meaning — not decoration.
     These four are also hardcoded in geometries.html's local
     styles. Do not change the hex values without changing them
     there too. */
  --phi:      #E8B84B;   /* the golden ratio. THE accent. */
  --phi-soft: rgba(232,184,75,0.13);
  --phi-glow: rgba(232,184,75,0.55);
  --regulus:  #A8C7FF;   /* alpha Leonis blue-white — S-hat, authentic binding */
  --reg-soft: rgba(168,199,255,0.12);
  --alarm:    #FF6B5A;   /* ISA-18.2 — M-hat, coercion, vasoconstriction */
  --alarm-soft: rgba(255,107,90,0.12);
  --ok:       #6FD3A3;   /* measured / confirmed */

  /* type — one family, three names.
     --display and --body are kept as aliases because other
     pages' local styles reference them; they must not vanish. */
  /* Courier New carries no Greek, no maths operators and no superscripts.
     Left alone the browser fills those from a PROPORTIONAL face and the
     grid breaks mid-equation. Menlo and DejaVu Sans Mono are local, share
     Courier New's 0.60em advance, and are only ever reached per-glyph —
     so kappa and phi stay on the same grid as the prose around them. */
  --mono: "Courier New", Courier, Menlo, "DejaVu Sans Mono", monospace;
  --display: var(--mono);
  --body: var(--mono);

  /* measure. In a fixed-pitch face 1ch is exactly one character,
     so 65ch is 65 characters — inside the readable band, and
     roughly the same pixel width the proportional face gave. */
  --measure: 65ch;
  --gold: 0.618;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  /* 18px, not 17. Courier New's x-height is about 0.42em against
     0.52em for the sans it replaces, so the same nominal size
     reads noticeably smaller. */
  font-size: 18px;
  /* fixed pitch gives every line an identical rhythm, which makes
     lines harder to track — pay it back in leading. */
  line-height: 1.75;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--phi); color: var(--ground); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- shell ---------- */

.wrap {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.col {
  max-width: var(--measure);
}

/* golden-section split: 0.618 / 0.382 */
.split {
  display: grid;
  grid-template-columns: 0.618fr 0.382fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- masthead ---------- */

.mast {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #0E121A 0%, var(--ground) 100%);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
}

.mast-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 0;
}

.sigil {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  /* NOT uppercased: the content is "alpha Leonis", a Bayer designation.
     text-transform would fold the lowercase alpha to a capital Alpha,
     which is a different character and reads as a Latin A. */
  color: var(--phi);
  white-space: nowrap;
}

.sigil b { color: var(--ink); font-weight: 700; }

/* THE flourish, and the only one.
   A block cursor, lit gold, blinking at the end of the nameplate.
   It is an empty box rather than a block character, so assistive
   technology has nothing to announce. */
.sigil::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  margin-left: 0.5em;
  vertical-align: -0.12em;
  background: var(--phi);
  box-shadow: 0 0 7px var(--phi-glow);
  animation: r4r-cursor 1.15s steps(1, end) infinite;
}

@keyframes r4r-cursor {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* The global rule above only shortens animations, which for an
   infinite one-step blink means an unpredictable flicker — worse
   than the blink. Stop it outright: the cursor stays lit. */
@media (prefers-reduced-motion: reduce) {
  .sigil::after { animation: none !important; opacity: 1; }
}

/* The nav carries a second .sigil — the R4R nameplate. It must NOT
   carry a second cursor: "the only one" above is a real invariant,
   and two gold blocks blinking out of step in one bar is noise.
   The nameplate keeps the cursor; the nav badge is just the name. */
.sigil.r4r::after { content: none; }

.sigil.r4r {
  /* it sits among uppercase nav links, so it needs its own breathing
     room rather than inheriting the 1.4rem flex gap alone */
  padding-right: 0.3rem;
  margin-right: 0.2rem;
  border-right: 1px solid var(--rule-hot);
}

nav.mast-nav {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

nav.mast-nav a {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

nav.mast-nav a:hover,
nav.mast-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--phi); }
nav.mast-nav a[aria-current="page"] { color: var(--phi); border-bottom-color: var(--phi); }

/* ---------- hero ---------- */

.hero { padding: 4.5rem 0 3rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 1.1rem;
}

/* The nameplate. Uppercase earns its place here and nowhere else
   in the body copy: these strings are short, and capitals in a
   fixed-pitch face are wide, so the ceiling is lower than a
   proportional display face would allow. */
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.85rem, 5.2vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 1.3rem;
  color: var(--ink);
}

h1 .lede-phi { color: var(--phi); font-style: normal; }

.standfirst {
  font-size: 1.28rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 2rem;
  text-wrap: pretty;
}

/* ---------- sections ---------- */

section { padding: 3.5rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: none; }

/* Sentence case, deliberately. These run to seventy characters,
   and capitals at that length stop being readable. The step in
   size and weight is doing the work, with the section rule above
   already marking the break. */
h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.28rem, 2.9vw, 1.72rem);
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0 0 1.1rem;
  color: var(--ink);
}

/* One family means a subheading cannot announce itself by shape,
   so it gets a tick of rule instead — the same language the
   caveat and the pull quote speak. */
h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  letter-spacing: 0;
  margin: 2.1rem 0 0.6rem;
  padding-left: 1.5ch;
  border-left: 2px solid var(--rule-hot);
  color: var(--ink);
}

/* section number carries the SOURCE document's own section, not decoration */
.sec-ref {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phi);
  display: inline-block;
  margin: 0 0 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--rule-hot);
  border-radius: 2px;
  background: var(--phi-soft);
}

p { margin: 0 0 1.15rem; text-wrap: pretty; }
p.col, ul.col, ol.col { max-width: var(--measure); }

a { color: var(--regulus); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--phi); }

:focus-visible {
  outline: 2px solid var(--phi);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { color: var(--ink); font-weight: 700; }
em { font-style: italic; }

/* Inline maths and code no longer need to change family — the
   page is already fixed pitch. Held at exactly 1em so symbols sit
   on the same grid as the prose around them; colour and a hairline
   do the distinguishing. */
code, .m {
  font-family: var(--mono);
  font-size: 1em;
  color: var(--phi);
  background: var(--phi-soft);
  border: 1px solid rgba(232,184,75,0.22);
  padding: 0.02em 0.3em;
  border-radius: 2px;
  overflow-wrap: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem 1.6rem;
}

.panel-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.85rem;
  display: block;
}

/* ---------- the kappa instrument ---------- */

.instrument {
  background: var(--panel);
  border: 1px solid var(--rule-hot);
  border-radius: 3px;
  overflow: hidden;
}

.inst-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel-2);
  flex-wrap: wrap;
}

.inst-title {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  /* NOT uppercased: this carries the governing equation. Folding case
     rewrote every symbol in it — kappa, alpha, phi, gamma, xi all became
     capital Greek, so the panel header stated a different equation. */
  color: var(--dim);
}

.readout {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--phi);
  margin-left: auto;
}

.readout .lbl { color: var(--dim); }

canvas { display: block; width: 100%; height: auto; }

.inst-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--panel-2);
  flex-wrap: wrap;
}

label.ctl {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  /* NOT uppercased: the label names the variable (kappa), and case-folding
     turned it into a capital Kappa, indistinguishable from a Latin K. */
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 260px;
}

input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--phi);
  height: 2px;
  cursor: pointer;
}

button {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule-hot);
  border-radius: 2px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

button:hover { border-color: var(--phi); color: var(--phi); background: var(--phi-soft); }

/* ---------- equation cards ---------- */

.eqs { display: grid; gap: 0.6rem; margin-top: 1.6rem; }

.eq {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.eq summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}

.eq summary::-webkit-details-marker { display: none; }
.eq summary:hover { background: var(--panel-2); }
.eq[open] summary { border-bottom: 1px solid var(--rule); background: var(--panel-2); }

.eq-n {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--phi);
  letter-spacing: 0.1em;
  flex: 0 0 3.2rem;
}

.eq-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}

.eq-form {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.94rem;
  color: var(--regulus);
  white-space: nowrap;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.eq-body { padding: 1.2rem 1.2rem 1.4rem; }
.eq-body p:last-child { margin-bottom: 0; }
.eq-body .gloss { color: var(--ink-2); }

/* ---------- S-hat / M-hat diagnostic ---------- */

.diag { margin-top: 1.6rem; display: grid; gap: 0.55rem; }

.drow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--faint);
  border-radius: 3px;
  padding: 1rem 1.1rem;
  transition: border-color 0.2s, background 0.2s;
}

.drow.is-s { border-left-color: var(--regulus); background: var(--reg-soft); }
.drow.is-m { border-left-color: var(--alarm); background: var(--alarm-soft); }

.dq { font-size: 0.98rem; line-height: 1.55; }
.dq .how {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim);
  margin-top: 0.35rem;
  letter-spacing: 0;
}

.dbtns { display: flex; gap: 0.4rem; }

.dbtns button { padding: 0.42rem 0.75rem; font-size: 0.7rem; letter-spacing: 0.1em; }
.dbtns button[aria-pressed="true"].s { border-color: var(--regulus); color: var(--regulus); background: var(--reg-soft); }
.dbtns button[aria-pressed="true"].m { border-color: var(--alarm); color: var(--alarm); background: var(--alarm-soft); }

@media (max-width: 560px) {
  .drow { grid-template-columns: 1fr; }
}

.verdict {
  margin-top: 1.2rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--rule-hot);
  border-radius: 3px;
  background: var(--panel-2);
}

/* An annunciator, so it takes the uppercase treatment. */
.verdict .v-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 0.7rem;
  color: var(--ink);
}

.verdict .v-sub { color: var(--ink-2); margin: 0; font-size: 0.95rem; }

.caveat {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--dim);
  border-left: 2px solid var(--rule-hot);
  padding-left: 2ch;
}

/* ---------- tables ---------- */

.tw {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hot) transparent;
}

/* Fixed pitch means every column already lines up by construction;
   the job here is only to keep the cells from crowding. */
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; line-height: 1.6; }

th, td {
  text-align: left;
  padding: 0.72rem 1ch;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--panel-2);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel); }

td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--phi); white-space: nowrap; }
td.sym { font-family: var(--mono); color: var(--regulus); white-space: nowrap; }

/* status chips — state in form, not only word */
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.chip.measured { color: var(--ok); border-color: rgba(111,211,163,0.4); background: rgba(111,211,163,0.1); }
.chip.defined  { color: var(--phi); border-color: rgba(232,184,75,0.4); background: var(--phi-soft); }
.chip.untested { color: var(--alarm); border-color: rgba(255,107,90,0.4); background: var(--alarm-soft); }

/* A table the author did not wrap in .tw has no scroller, and its nowrap
   symbol cells give it a min-content width that pushes the page sideways —
   measured on primer.html at a 500px viewport: scrollWidth 887 against 500.
   The child combinator means a .tw-wrapped table is never touched, because
   its parent is the .tw, and column alignment survives because the rows
   still form a table box inside the scrolling block. */
@media (max-width: 700px) {
  .doc > table,
  .col > table,
  section > table {
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-hot) transparent;
  }
}

/* ---------- figures ---------- */

figure { margin: 2.1rem 0; }
figure svg { max-width: 100%; height: auto; display: block; }
figcaption {
  font-size: 0.88rem;
  color: var(--dim);
  margin-top: 0.8rem;
  max-width: 58ch;
  line-height: 1.65;
}

/* ---------- pull quote ---------- */

/* Sentence case and regular weight: bold capitals at this size in
   a fixed-pitch face read as shouting. It is set on the character
   grid instead — the gutter and the measure are both counted in
   characters, which is a thing only a monospaced page can do. */
.pull {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
  border-left: 2px solid var(--phi);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.2rem 0 1.2rem 2ch;
  margin: 2.4rem 0;
  max-width: 42ch;
  text-wrap: balance;
}

.pull cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.9rem;
}

/* ---------- source / proof pages ---------- */

.doc {
  font-size: 1rem;
  line-height: 1.8;
}

/* Every code block, whether or not the author remembered the class.
   An unstyled <pre> keeps white-space: pre from the UA sheet and has no
   scroller, so one long formula pushes the whole page sideways — measured
   on proof.html at a 500px viewport: scrollWidth 660 against a 500 viewport. */
pre {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
  margin: 1.5rem 0;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hot) transparent;
}

/* inside a block, code is the whole block — it must not also wear the
   inline chip's tint and border */
pre code, pre .m {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* the long source dumps additionally wrap, and cap their own height */
pre.src {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 62vh;
  overflow-y: auto;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.7rem 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s;
}

.card:hover { border-color: var(--rule-hot); }

/* the card border and the meta label already label it, so the
   subheading tick would only make the block look misaligned */
.card h3 { margin: 0; padding-left: 0; border-left: none; }
.card p { margin: 0; font-size: 0.94rem; line-height: 1.7; color: var(--ink-2); }
.card .meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0 3.5rem;
  color: var(--dim);
  font-size: 0.9rem;
}

footer .cred { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; line-height: 1.95; }
footer a { color: var(--dim); }
footer a:hover { color: var(--phi); }

/* ---------- utility ---------- */

/* referenced by the table captions; without it they render as
   visible headings above the tables */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  position: fixed;
  z-index: 100;
  background: var(--panel);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 1px solid var(--phi);
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   OPERATOR GLYPHS — the one deliberate exception to Courier New.

   M̂ is M + U+0302 (combining circumflex). Courier New CONTAINS that
   codepoint but draws it as a SPACING glyph with a real advance, so the
   browser never falls through to a font that would compose it and M̂
   renders as "M^" — measured at 29px against Menlo's composed 15px.
   Ŝ escapes only because U+015C is precomposed, which leaves the two
   central operators visually inconsistent with each other.

   Menlo is local, monospace, and shares the 0.60em advance, so this
   costs no external request and no grid alignment. Scoped to the
   operator symbols alone; the page face is unchanged.
   --------------------------------------------------------------- */
.op, .verdict .v-line, .verdict .v-sub {
  font-family: Menlo, "DejaVu Sans Mono", monospace;
}

/* ---------------------------------------------------------------
   NARROW SCREENS. Most readers arrive from a chat app on a phone.
   Inline code in the pre-registrations sets white-space: pre and one
   run measured 537px against a 390px viewport, taking the document
   sideways with it. Below 620px let those break rather than scroll
   the whole page; wide block content keeps its own scroller.
   --------------------------------------------------------------- */
@media (max-width: 620px) {
  code, .m {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .eq-form { white-space: normal; }
}