/* Secrets from Primes: the rubricated factor table and the dial.
   Identity: Libre Caslon (Text for reading, Display for the very large titles), the letter of 18th-century English
   mathematical printing; Fira Sans for figures, numerals and controls (tabular figures, a clear 1/7). White paper.
   One accent, rubric vermilion: the red ink early printers used to pick out what matters, here the colour of every prime.
   Data colours, fixed meanings: primary (vermilion) = primes / the encrypted value / the thing taught; ref (ink) =
   known, reference; second (blue) = Alice / public values; third (plum) = Bob; ok (green) = the value recovered,
   agreement; warn (amber) = refusals and limits. */
:root {
  --bg: #fff; --surface: #f6f5f2; --ink: #1b1a19; --ink-soft: #3a3836; --muted: #625f5b; --rule: #e3e0db;
  --accent: #b9361c; --accent-ink: #fff; --link: #a8301a; --focus: #a8301a; --mark: rgba(185, 54, 28, .09);
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-sans: "Fira Sans", -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.13rem; --lh-body: 1.62; --prose: 40rem; --wide: 66rem; --radius: 2px;
  --fig-bg: #fff; --fig-surface: #f6f5f2; --fig-ink: #1b1a19; --fig-muted: #5f5c58; --fig-grid: rgba(0,0,0,.08);
  --fig-grid-strong: rgba(0,0,0,.38); --fig-border: transparent;
  --c-primary: #c23b1e;  /* primes, encryption */
  --c-ref: #1f1e1d;      /* ink, reference */
  --c-second: #1667a8;   /* Alice, public values */
  --c-third: #8a3f8f;    /* Bob */
  --c-ok: #0d7a55;       /* recovered value, agreement */
  --c-warn: #9a6100;
  --ctl-accent: #b9361c;
  --band-bg: #b9361c; --band-ink: #fff; --band-muted: rgba(255,255,255,.88);
  --t-primary: #a8301a; --t-second: #135d97; --t-third: #7b3680; --t-ok: #0b6b4a;
}
:root[data-theme="dark"] {
  --bg: #141312; --surface: #1d1c1a; --ink: #eceae5; --ink-soft: #cdcac3; --muted: #a39f97; --rule: #33312e;
  --accent: #f0805f; --link: #f39a7e; --focus: #f39a7e; --mark: rgba(240, 128, 95, .15);
  --fig-bg: #141312; --fig-surface: #1d1c1a; --fig-ink: #eceae5; --fig-muted: #aaa69e; --fig-grid: rgba(255,255,255,.09);
  --fig-grid-strong: rgba(255,255,255,.45);
  --c-primary: #f3815f; --c-ref: #efede8; --c-second: #6cb1ea; --c-third: #d18bd5; --c-ok: #4ccf9d; --c-warn: #e2ad4c;
  --ctl-accent: #e2694a; --band-bg: #8f2814;
  --t-primary: #f3815f; --t-second: #6cb1ea; --t-third: #d18bd5; --t-ok: #4ccf9d;
}

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.wordmark { font: 400 1.25rem/1 var(--font-display); letter-spacing: 0; }
.wordmark .wm-p { color: var(--accent); font-style: italic; font-family: var(--font-serif); }
.site-nav a { font-size: .92rem; }

/* Headings: Caslon Display very large against calm Caslon Text */
h1 { font-family: var(--font-h1); font-weight: 400; letter-spacing: -.01em; line-height: 1.0; }
h2 { font: 700 clamp(1.45rem, 3.2vw, 1.85rem)/1.18 var(--font-serif); letter-spacing: -.005em; margin-top: 2.6rem; }
h3 { font: 700 1.15rem/1.3 var(--font-serif); }
.prose .lede { font-size: 1.2em; line-height: 1.5; }
sub, sup { line-height: 0; }
var { font-style: italic; font-family: var(--font-serif); }
.num, .prose td.num { font-variant-numeric: tabular-nums lining-nums; }
.big-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.prime-word { color: var(--t-primary); }

/* Chapter title field: solid rubric vermilion */
.essay-head-wrap.band { padding: 0; margin-bottom: 0; }
.essay-head-wrap.band .essay-head { padding: 2rem var(--gutter) 1.5rem; }
.essay-head h1 { font-size: clamp(2.5rem, 7.4vw, 4.8rem); margin: .1em 0 .18em; }
.band .kicker { font: 400 .98rem/1.3 var(--font-ui); }
.band .kicker span { color: var(--band-muted); }
.band .dek { font-size: clamp(1.1rem, 2.3vw, 1.36rem); max-width: 40rem; }
.essay-plate { max-width: var(--wide); margin: 0 auto 2rem; padding: .3rem 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: 1rem var(--gutter) .8rem; }
  .band .dek { margin-bottom: .1rem; font-size: 1.02rem; line-height: 1.4; }
  .essay-head h1 { font-size: 2.45rem; }
  .band .meta-line { display: none; }
  .band .kicker { font-size: .88rem; }
}

/* Home */
.pn-home-head { max-width: var(--wide); margin: 0 auto; padding: 1.5rem var(--gutter) 0; }
.pn-home-head h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); margin: 0 0 .1em; }
.pn-home-head h1 em { font-style: italic; font-family: var(--font-serif); color: var(--accent); font-size: .92em; }
.pn-home-head .dek { margin: 0; max-width: 42rem; font-size: clamp(1.05rem, 2.2vw, 1.34rem); }
.pn-plate { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.pn-plate .figure { margin: .3rem 0 0; }
.pn-plate figcaption { max-width: 46rem; }
.pn-plate .start { margin: .8rem 0 0; }
.btn-start { font: 600 1.02rem var(--font-ui); }
@media (max-width: 559px) { .pn-home-head { padding-top: .8rem; } .pn-home-head h1 { font-size: 2.7rem; } .pn-home-head .dek { font-size: 1rem; line-height: 1.38; } }
.home-cards li::marker { font: 400 1.4rem var(--font-display); color: var(--accent); }
.home-cards .card-t { font-weight: 700; }
.home-tools { max-width: var(--prose); margin: 0 auto 3rem; padding: 0 var(--gutter); }
.home-tools ul { list-style: none; padding: 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 { color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
.home-tools .card-d { color: var(--ink-soft); font-size: .98rem; }

/* Figures */
.fig-n { font: 600 .84rem var(--font-ui); font-variant: all-small-caps; letter-spacing: .04em; color: var(--accent); }
.figure figcaption { font-size: .95rem; line-height: 1.5; }
.w-note { font-size: .98rem; 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 { outline: 2px solid var(--focus); outline-offset: -2px; }
.pn-say { margin: .55rem 0 0; font: 400 1.02rem/1.45 var(--font-ui); color: var(--fig-ink); font-variant-numeric: tabular-nums; }
.pn-say b { font-weight: 600; }
.pn-say .t-p, .t-p { color: var(--t-primary); font-weight: 600; }
.pn-say .t-ok, .t-ok { color: var(--t-ok); font-weight: 600; }
.pn-say .t-s, .t-s { color: var(--t-second); font-weight: 600; }
.pn-say .t-b, .t-b { color: var(--t-third); font-weight: 600; }
.pn-say .t-w, .t-w { color: var(--c-warn); font-weight: 600; }
.pn-deck { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: flex-end; margin-top: .55rem; }
.pn-deck .w-ctl { flex: 0 1 auto; }
.pn-deck .w-ctl.grow { flex: 1 1 14rem; }
.w input.pn-text, .pn-text { width: 100%; min-width: 0; background: var(--ctl-bg); color: var(--ctl-ink); border: 1px solid var(--fig-grid-strong); border-radius: 2px; font: 400 1.05rem var(--font-ui); font-variant-numeric: tabular-nums; padding: .45rem .55rem; min-height: 44px; }
.pn-text[aria-invalid="true"] { border-color: var(--c-warn); box-shadow: inset 0 0 0 1px var(--c-warn); }
.w input[type=number].pn-num { width: 6.2rem; min-height: 40px; font-size: 1rem; }
.pn-msg { font: 400 .92rem/1.4 var(--font-ui); color: var(--c-warn); min-height: 1.3em; margin: .3rem 0 0; }
@media (min-width: 900px) {
  .pn-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 2.2rem; align-items: start; }
  .pn-split > .w-stage { grid-row: 1 / span 4; }
}

/* Verdict blocks (checker, calculators) */
.pn-verdict { font: 400 clamp(1.35rem, 3.6vw, 1.9rem)/1.25 var(--font-serif); margin: .3rem 0 .4rem; color: var(--fig-ink); overflow-wrap: anywhere; }
.pn-verdict .big-num { font-size: .85em; }
.pn-verdict .t-p { font-weight: 700; }
.pn-factors { font: 400 1.15rem/1.6 var(--font-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin: 0 0 .5rem; }
.pn-factors sup { font-size: .72em; }
.pn-work { font: 400 .92rem/1.5 var(--font-ui); color: var(--ink-soft); }
.pn-work table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: .4rem 0; }
.pn-work th, .pn-work td { padding: .2rem .55rem; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.pn-work th { font-weight: 600; color: var(--fig-ink); }
.pn-work .scroll { overflow-x: auto; max-width: 100%; }
.pn-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.pn-chips button { font: 400 .9rem var(--font-ui); background: var(--fig-bg); color: var(--link); border: 1px solid var(--rule); border-radius: 2px; padding: .3rem .6rem; min-height: 36px; cursor: pointer; }
.pn-chips button:hover { border-color: var(--link); }
@media (pointer: coarse) { .pn-chips button { min-height: 44px; } }
.pn-bases { display: flex; flex-wrap: wrap; gap: .25rem .35rem; margin: .35rem 0; font: 400 .88rem var(--font-ui); }
.pn-bases span { padding: .05rem .4rem; border: 1px solid var(--rule); }
.pn-bases .pass { color: var(--t-ok); }
.pn-bases .fail { color: var(--t-primary); border-color: var(--c-primary); font-weight: 600; }

/* Prime list table */
.pn-list { overflow-x: auto; max-height: 30rem; overflow-y: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pn-list table { border-collapse: collapse; width: 100%; font: 400 .98rem var(--font-ui); font-variant-numeric: tabular-nums; }
.pn-list td { padding: .22rem .45rem; text-align: right; color: var(--t-primary); border-bottom: 1px solid var(--rule); }
.pn-list th { padding: .22rem .45rem; text-align: right; color: var(--fig-muted); font-weight: 400; font-size: .85rem; border-bottom: 1px solid var(--rule); }

/* Tables in prose */
.prose table { font-family: var(--font-ui); font-size: .95rem; border-collapse: collapse; width: 100%; }
.prose th, .prose td { padding: .35rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prime-table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--t-primary); padding: .25rem .4rem; }
.eq { font-size: 1.18rem; }
.callout-history { border-left-color: var(--accent); }
.simplification { border-left-color: var(--c-primary); }
.theme-toggle { white-space: nowrap; }
@media (max-width: 559px) { .wordmark { font-size: 1.08rem; } }

/* Superscript and subscript digits (⁰–⁹, ₀–₉), derived from each face's own figures (factory/tools/mksups.py). */
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-sups-400-italic.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-sups-700-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-display-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-sans-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fira-sans-sups-600-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }

/* Figure legends in HTML (swatches) */
.pn-legend { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: .4rem 0 0; font: 400 .88rem var(--font-ui); color: var(--fig-ink); }
.pn-legend .sw { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -.08rem; }
.pn-legend .sw.p { background: var(--c-primary); } .pn-legend .sw.ok { background: var(--c-ok); }
.pn-legend .sw.ink { background: var(--fig-ink); } .pn-legend .sw.d { background: var(--fig-grid-strong); opacity: .35; }
.w input[type=number].wide-num { width: 10rem; }
.pn-panel { padding-top: .2rem; }
.dh-cols { display: grid; gap: .8rem 1.4rem; margin: .6rem 0; }
@media (min-width: 760px) { .dh-cols { grid-template-columns: 1fr 1fr 1fr; } }
.dh-col h4 { font: 600 1rem var(--font-ui); margin: 0 0 .3rem; }
.dh-alice h4 { color: var(--t-second); } .dh-bob h4 { color: var(--t-third); } .dh-wire h4 { color: var(--fig-muted); }
.dh-wire { border-left: 1px dashed var(--fig-grid-strong); border-right: 1px dashed var(--fig-grid-strong); padding: 0 .9rem; }
@media (max-width: 759px) { .dh-wire { border: 0; border-top: 1px dashed var(--fig-grid-strong); border-bottom: 1px dashed var(--fig-grid-strong); padding: .4rem 0; } }
.dh-eve { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .4rem; }
.pn-key table, .pn-work > table { border-collapse: collapse; width: 100%; }
.pn-key th, .pn-work > table th { text-align: left; white-space: normal; font-weight: 600; width: 38%; }
.pn-key td, .pn-work > table td { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.w-ctl[hidden] { display: none; }
.pn-deck .w-ctl:has(> .pn-text) { flex: 1 1 7rem; }
.pn-deck .w-ctl.grow:has(> .pn-text) { flex: 3 1 14rem; }
.pn-digits { font-size: .92rem; line-height: 1.45; color: var(--ink-soft); margin: .4rem 0 0; }
.home-cards .card-t { font-size: 1.22rem; }