/* The manuscript look, layered over styles.css.
   The page is set like an early printed study Bible (the Geneva Bible's margin notes, the
   Glossa Ordinaria): a title page between thick-and-thin rules, the tabs as a table of
   contents, and each moment's evidence printed in the margin beside it. By day it is
   black-and-red letterpress on laid paper; by night, gold and silver ink on purple vellum.
   The comparison card steps between curtains with the roundels of a genealogy roll —
   the medieval rolls that traced the generations from Adam as circles strung on a red line.
   Colors and type come from the tokens at the top of styles.css. */

/* ---- square, flat chrome: no pills, rounded panels, or drop shadows ---- */
header, .tb-card, .tab, details.tb-drop, details.deeper, .link-btn, .seg, .seg button,
.theme-toggle, .tb-cover, .tb-lesson, .verdict, .pill, .schip, .kicker, .fm-cell, .fm-k, .lg-cell,
.lg-empty, .lg-row-btn, .tb-tip, .modal, .close, .table-wrap, .legend span, .cell-btn,
.alpha-omega, .ao-cap, .ao-middle, .caution, .sw {
  border-radius: 0 !important;
}
header, .tb-card, .tab, .link-btn, .seg button, .theme-toggle, .table-wrap, .alpha-omega,
.cell-btn, button.fm-cell:hover, .tb-tip, .modal {
  box-shadow: none !important;
}
.sw.dot { border-radius: 999px !important; }

body {
  font-size: 18.5px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  background-color: var(--bg);
  /* vellum by night: a faint grain, with lamplight at the head of the page */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 110% 1100px at 50% 0, var(--bg-top) 0, var(--bg) 70%);
  background-repeat: repeat, no-repeat;
}
:root[data-theme="light"] body {
  /* laid paper by day: chain lines and a faint tooth */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(120, 100, 70, 0.025) 3px 4px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat, repeat;
}
.page { width: min(1140px, calc(100% - 40px)); margin: 26px auto 70px; }
::selection { background: color-mix(in srgb, var(--rubric) 30%, transparent); }

/* ---- the title page, ruled thick-and-thin ---- */
header {
  position: static;
  max-width: 860px;
  margin: 18px auto 0;
  padding: 38px 40px 30px;
  text-align: center;
  border: 0;
  background:
    linear-gradient(var(--press), var(--press)) top / 100% 3px no-repeat,
    linear-gradient(var(--press), var(--press)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--press), var(--press)) bottom / 100% 3px no-repeat,
    linear-gradient(var(--press), var(--press)) 0 calc(100% - 6px) / 100% 1px no-repeat;
}
.eyebrow { margin: 0 0 12px; font-family: var(--caps); font-size: 1.02rem; letter-spacing: 0.24em; color: var(--rubric); }
.head-row { display: block; }
h1 { margin: 0 0 18px; font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
h1 > span { display: block; }
h1 .t1 { font-size: clamp(1.25rem, 2.3vw, 1.75rem); color: var(--rubric); letter-spacing: 0.1em; }
h1 .t2 { font-size: clamp(2rem, 4.8vw, 3.55rem); margin: 6px 0; }
h1 .t3 { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--rubric); letter-spacing: 0.12em; }
h1 .t3::before { content: ""; display: block; width: 90px; height: 1px; margin: 12px auto; background: var(--press); }
.theme-toggle {
  position: absolute;
  top: 18px;
  right: max(20px, calc((100% - 1140px) / 2));
  margin: 0;
  border: 0;
  background: none;
  padding: 4px 0;
  font-family: var(--caps);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.theme-toggle .ti { font-family: var(--sym); font-size: 0.95rem; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: none; color: var(--rubric); }
.subtitle { max-width: 620px; margin: 0 auto; font-size: 1.02rem; line-height: 1.55; color: var(--muted); }
.head-rule { margin: 16px 0 0; color: var(--rubric); font-size: 1.3rem; line-height: 1; }
.head-rule::before { content: "❦"; }

/* ---- the tabs, set as a table of contents with dot leaders ---- */
.tabs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; max-width: 520px; margin: 30px auto 0; }
.tabs::before { content: "The Contents"; margin-bottom: 8px; text-align: center; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.22em; color: var(--rubric); }
.tab {
  flex: none;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}
.tab[hidden] { display: none; }
.tab .tn { min-width: 2.2em; font-family: var(--caps); color: var(--muted); }
.tab .tp { order: 3; font-family: var(--caps); color: var(--muted); }
.tab::after { content: ""; flex: 1; order: 2; border-bottom: 2px dotted var(--rule); transform: translateY(-5px); }
.tab:hover, .tab:focus-visible { background: none; color: var(--rubric); }
.tab.active { background: none; color: var(--rubric); }
.tab.active::before { content: "☞"; position: absolute; left: -2em; top: 1px; font-family: var(--sym); font-size: 1.15rem; color: var(--rubric); }

/* ---- sections open with a printer's rule and a centered head ---- */
.tb-card { margin-top: 54px; padding: 0; border: 0; background: none; }
.tb-card > h2, .tb-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: 0.01em; }
.tb-card > h2 { text-align: center; }
.tb-card > h2::before, .tb-toolbar::before, .tb-detail::before {
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  margin-bottom: 26px;
  background:
    linear-gradient(var(--press), var(--press)) top / 100% 2px no-repeat,
    linear-gradient(var(--press), var(--press)) bottom / 100% 1px no-repeat;
}
.tb-toolbar { flex-wrap: wrap; }
.tb-toolbar::before { flex: 1 1 100%; margin-bottom: 14px; }
.tb-intro .tb-lede, .tb-card > .tb-lede { max-width: 760px; margin: 0 auto 20px; text-align: center; }
.tb-lede { color: var(--muted); }
.tb-lede b { color: var(--ink); }
.tb-kicker-line { font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; text-transform: none; color: var(--rubric); }

/* the intro, as pointing-hand entries that open */
.tb-acc { gap: 0; max-width: 820px; margin: 0 auto; }
details.tb-drop { border: 0; background: none; overflow: visible; }
details.tb-drop.bridge { border-left: 0; }
details.tb-drop > summary { padding: 8px 8px 8px 34px; }
details.tb-drop > summary::before { content: "☞"; font-family: var(--sym); left: 4px; top: 9px; color: var(--rubric); }
details.tb-drop[open] > summary::before { transform: none; }
details.tb-drop > summary:hover, details.tb-drop > summary:focus-visible { background: none; box-shadow: none; }
details.tb-drop > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
details.tb-drop > summary:hover .tb-drop-t { color: var(--rubric); }
.tb-drop-t { font-family: var(--display); font-weight: 400; font-size: 1.14rem; }
details.tb-drop.bridge .tb-drop-t { color: var(--rubric); }
.tb-drop-s { color: var(--muted); font-size: 0.95rem; }
.tb-drop-s::before { content: "— "; }
.tb-drop-b { border-top: 0; padding: 0 12px 14px 34px; }
.tb-drop-b ul { gap: 7px; }

/* buttons that were pills become plain text links */
.link-btn {
  width: auto;
  border: 0;
  background: none;
  padding: 4px 0;
  justify-content: flex-start;
  font-family: var(--caps);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--rubric);
}
.link-btn .arrow { color: inherit; }
.link-btn:hover, .link-btn:focus-visible { transform: none; background: none; text-decoration: underline; text-underline-offset: 4px; }
.link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tb-actions { gap: 4px 24px; }

/* ---- the diagram ---- */
.seg { border: 0; background: none; padding: 0; gap: 16px; }
.seg button { padding: 2px 0; font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }
.seg button[aria-pressed="true"] { background: none; color: var(--rubric); text-decoration: underline; text-underline-offset: 5px; }
.tb-key { font-size: 0.9rem; }
.tb-svg .t-room { font-family: var(--caps); letter-spacing: 0.1em; font-weight: 400; }
.tb-svg .t-cap { font-family: var(--caps); text-transform: none; letter-spacing: 0.04em; }
.fm-k { background: none !important; color: inherit; padding: 0; min-width: 0; font-family: var(--caps); font-size: 0.86rem; }
.fm-cell { background: var(--surface); }
.tb-tip { background: var(--modal); border-color: var(--rule); font-size: 0.9rem; }
.tb-hint { font-size: 0.9rem; }

/* ---- verdict marks: an ink mark and a word, never color alone ---- */
.verdict { background: none !important; border: 0; padding: 0; gap: 7px; }
.verdict.v-kept { color: var(--ok); }
.verdict.v-broken { color: var(--bad); }
.verdict.v-both { color: var(--warn); }
.verdict.v-over { color: var(--muted); }
.vi {
  width: auto;
  height: auto;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--sym);
  font-style: normal;
  font-weight: 400;
}
.vi.k-kept, .v-kept .vi { color: var(--ok); }
.vi.k-broken, .v-broken .vi { color: var(--bad); }
.vi.k-both, .v-both .vi { color: var(--warn); }
.vi.k-both::after, .v-both .vi::after { display: none; }
.vi.k-over, .v-over .vi { color: var(--muted); }
.vi.k-note { color: var(--rubric); font-family: var(--text); font-weight: 600; font-size: 1.1rem; }
.tb-vlegend { gap: 6px 18px; font-size: 0.92rem; }
.tb-vlegend .verdict { font-family: var(--caps); font-size: 1rem; letter-spacing: 0.04em; }

/* kicker chips become lettered labels */
.kicker { background: none !important; border: 0 !important; padding: 0 !important; }
.kicker.heaven, .heaven > .kicker { color: var(--heaven-ink); }
.kicker.earth, .earth > .kicker { color: var(--earth-ink); }
.kicker.genA, .genA > .kicker { color: var(--genA-ink); }
.kicker.genB, .genB > .kicker { color: var(--genB-ink); }
.kicker.over { color: var(--muted); }
.pill { background: none !important; border: 0 !important; padding: 0 !important; }

/* =====================================================================
   The comparison card: a glossed page
   ===================================================================== */
.tb-card.tb-detail { padding: 0; }
.tb-detail::before { margin-bottom: 30px; }
.tb-refnote { font-size: 0.86rem; color: var(--muted); text-align: center; margin: 0 0 18px; }

/* the genealogy roll: the curtain before, this one, and the one after, on a red line */
.tb-roll {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 0 44px;
}
.tb-roll::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; background: var(--rubric); opacity: 0.85; }
.rl-node {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  width: 96px;
  height: 96px;
  padding: 6px;
  border-radius: 50%;
  border: 3px double var(--genB-edge);
  background: var(--genB-soft);
  color: var(--ink);
  font-family: var(--text);
  text-align: center;
  line-height: 1.1;
}
button.rl-node { cursor: pointer; transition: transform 120ms ease; }
button.rl-node:hover { transform: scale(1.05); }
button.rl-node:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.rl-node.genA { border-color: var(--genA-edge); background: var(--genA-soft); }
.rl-node.heaven { border-color: var(--heaven-edge); background: var(--heaven-soft); }
.rl-node.earth { border-color: var(--earth-edge); background: var(--earth-soft); }
.rl-n { font-family: var(--display); font-size: 1.35rem; line-height: 1.05; color: var(--rubric); }
.rl-name { font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.02em; }
.rl-k { font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted); }
.rl-node.cur { width: 142px; height: 142px; border-width: 5px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--genB-edge); }
.rl-node.cur.genA { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--genA-edge); }
.rl-node.cur.heaven { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--heaven-edge); }
.rl-node.cur.earth { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--earth-edge); }
.rl-node.cur .rl-n { font-size: 2.4rem; line-height: 1; margin: 2px 0; }
.rl-node.cur .rl-name { font-family: var(--display); font-size: 1.14rem; letter-spacing: 0; }
.rl-end { position: relative; flex: none; width: 96px; padding: 4px 0; background: var(--bg); font-family: var(--caps); font-size: 0.86rem; text-align: center; color: var(--muted); }

.tb-d-head { text-align: center; margin-bottom: 26px; }
.tb-d-top { justify-content: center; gap: 2px 14px; margin-bottom: 10px; }
.tb-d-top .kicker { font-family: var(--caps); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.14em; color: var(--rubric) !important; }
.tb-d-pos { font-size: 0.95rem; }
.tb-d-top .pill { font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; color: var(--muted) !important; }
.tb-d-top .pill::before { content: "·"; margin-right: 0.7em; }
.tb-d-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.tb-d-title.long { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.tb-d-title:focus { outline: none; }
.tb-d-title .tb-d-sub { display: block; margin-top: 8px; font-family: var(--caps); font-size: 0.36em; letter-spacing: 0.14em; text-transform: none; color: var(--rubric); }
.tb-d-ref { margin: 12px 0 0; color: var(--muted); }
.tb-d-ref b { color: var(--ink); font-weight: 600; }

/* run-in heads, as the old study Bibles set "The Argument" */
.run-in { margin-right: 0.45em; font-family: var(--caps); font-size: 1.02em; letter-spacing: 0.06em; color: var(--rubric); }

/* "The Argument": the chapter summary */
.tb-d-summary, .tb-d-place { max-width: 820px; margin-left: auto; margin-right: auto; text-align: justify; hyphens: auto; }
.tb-d-summary { display: flow-root; margin-bottom: 12px; font-size: 1.12rem; }
.tb-d-place { font-size: 0.98rem; color: var(--muted); margin-bottom: 0; }

/* the lesson that spans both commandments, centered like a verse picked out */
.tb-lesson { max-width: 820px; margin: 34px auto 48px; padding: 0; border: 0; background: none; text-align: center; }
.tb-lesson .tb-kicker-line { margin-bottom: 10px; }
.tb-lesson p { margin: 0; font-size: 1.14rem; line-height: 1.62; text-align: justify; text-align-last: center; hyphens: auto; }
.tb-lesson .tb-kicker-line + p + .tb-kicker-line { margin-top: 26px; }
.tb-lesson p.tb-overview { font-size: 1.04rem; }
.tb-lesson::after { content: "❦"; display: block; margin-top: 16px; color: var(--rubric); font-size: 1.2rem; }

/* each covered commandment: the text on the left, its margin notes on the right */
.tb-pair { grid-template-columns: 1fr; gap: 60px; }
.tb-cover { border: 0; padding: 0; background: none; }
.tb-cover.flash { animation: tbflash-ink 1.2s ease-out; }
@keyframes tbflash-ink {
  0% { background: color-mix(in srgb, var(--rubric) 16%, transparent); }
  100% { background: transparent; }
}
.tb-cover-main {
  display: flow-root;
  padding-right: calc(var(--gloss-w) + 2.4rem);
  background: linear-gradient(var(--rule), var(--rule)) no-repeat right calc(var(--gloss-w) + 1.2rem) top 0 / 1px 100%;
}
.tb-cover-head { display: block; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--press); }
.tb-cover-head .tb-chipbtn { margin-right: 14px; }
.tb-cover .kicker { font-family: var(--caps); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.14em; }
.tb-cover .verdict { font-family: var(--caps); font-size: 1.02rem; font-weight: 400; letter-spacing: 0.06em; }
.arc { margin-left: 8px; font-style: normal; color: var(--muted); }
.arc::before { content: "— "; }
.tb-cover-head h3 { margin: 6px 0 2px; font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1.15; }
.tb-cover-where { font-size: 0.92rem; }
.tb-cover-sum { font-weight: 600; font-size: 1.05rem; margin: 0 0 14px; }
.tb-why { margin: 0 0 18px; text-align: justify; hyphens: auto; }

.moments { display: block; margin: 0 0 18px; }
.moments > li { display: block; position: relative; padding-left: 28px; margin-bottom: 14px; font-size: 1rem; }
.moments > li > .vi { position: absolute; left: 0; top: 4px; font-size: 0.92rem; }
.moments > li > .vi.k-note { top: 0; font-size: 1.1rem; }
.moments .m-text { margin: 0; text-align: justify; hyphens: auto; }

/* the margin notes: floated beside the line that carries their letter */
.gm { margin-left: 2px; font-size: 0.68em; font-weight: 600; font-style: normal; color: var(--rubric); }
.gmk { margin-right: 6px; font-weight: 600; font-style: normal; color: var(--rubric); }
.gloss {
  float: right;
  clear: right;
  display: grid;
  gap: 9px;
  width: var(--gloss-w);
  margin: 0 calc(-1 * (var(--gloss-w) + 2.4rem)) 14px 0;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
  hyphens: auto;
}
.gloss-i { display: block; }
.gloss-k { font-family: var(--caps); font-size: 1.1em; letter-spacing: 0.04em; color: var(--rubric); }
.gloss .n-trad .gloss-k::before { content: "☞ "; font-family: var(--sym); font-size: 0.85em; }

.conseq { border-top: 0; padding-top: 4px; gap: 10px; }
.conseq-k { font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.16em; text-transform: none; color: var(--rubric); }
.conseq p { border-left: 0; padding-left: 0; font-size: 1rem; text-align: justify; hyphens: auto; }
.conseq p b { font-family: var(--caps); font-weight: 400; font-size: 1.04rem; letter-spacing: 0.04em; }
.conseq p.c-kept b { color: var(--ok); }
.conseq p.c-broken b { color: var(--bad); }
.tb-over-meaning { border-top: 0; padding-top: 0; font-size: 1rem; text-align: justify; hyphens: auto; }
.tb-more { margin-top: 14px; }

/* the tabernacle note and the other commandments that surface, centered at the foot */
.tb-echoes { max-width: 820px; margin: 56px auto 0; text-align: center; }
.tb-echoes-h { margin: 0 0 12px; font-family: var(--caps); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.16em; color: var(--rubric); }
.tb-echoes > p { margin: 0 0 30px; text-align: justify; text-align-last: center; hyphens: auto; }
.tb-echoes .echo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 1rem; }
.tb-echoes .echo-num { font-family: var(--caps); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); margin-right: 6px; }

/* catchwords: the next page's first words at the foot, as printers set them */
.tb-d-nav { align-items: baseline; margin-top: 42px; padding-top: 12px; border-top: 1px solid var(--press); }
.tb-d-nav .link-btn { font-size: 1.05rem; color: var(--ink); }
.tb-d-nav .link-btn:last-child { color: var(--rubric); }

/* ---- the ledger ---- */
table.lg thead th { font-family: var(--caps); font-weight: 400; font-size: 0.9rem; }
table.lg .lg-group th { font-family: var(--caps); text-transform: none; letter-spacing: 0.06em; font-size: 0.86rem; }
.lg-row-btn { font-size: 0.98rem; }
.lg-row-btn .n { font-family: var(--caps); font-weight: 400; }
.lg-cell .vi { font-size: 1rem; }
.lg-edge { font-family: var(--text); }

/* =====================================================================
   Beatitudes & Covenants
   ===================================================================== */
.legend span { background: none; border-color: var(--rule); font-size: 0.95rem; }
.table-wrap { border: 0; background: none; }
table { border-color: var(--rule); }
thead th { font-family: var(--caps); font-weight: 400; letter-spacing: 0.06em; text-transform: none; font-size: 1rem; }
caption { font-style: italic; }
.cell-btn { background: var(--surface); border-color: var(--line); }
.cell-btn:hover, .cell-btn:focus-visible { transform: none; border-color: var(--focus); }
.cell-btn .kicker { font-family: var(--caps); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; }
.beat .kicker { color: var(--beat-ink); }
.cov .kicker { color: var(--cov-ink); }
.cell-btn strong { font-family: var(--display); font-weight: 400; font-size: 1.12rem; }
.cell-btn small { font-size: 0.9rem; }
.schip { font-family: var(--caps); font-weight: 400; font-size: 0.86rem; letter-spacing: 0.04em; }
.alpha-omega { background: none; border: 0; border-top: 1px solid var(--press); border-bottom: 1px solid var(--press); padding: 26px 0; }
.ao-head h2 { font-family: var(--display); font-weight: 400; }
.ao-symbol { font-family: var(--display); font-weight: 400; color: var(--rubric); }
.ao-cap { background: none; border-color: var(--rule); }
.ao-cap .ao-tag { font-family: var(--caps); text-transform: none; letter-spacing: 0.08em; font-size: 0.95rem; font-weight: 400; }
.ao-cap .ao-promise { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.ao-middle { background: none; border-color: var(--rule); }
.ao-middle-label { font-family: var(--caps); text-transform: none; letter-spacing: 0.08em; font-size: 0.95rem; }

/* the popup notes */
.modal { border-color: var(--rule); }
.modal h2 { font-family: var(--display); font-weight: 400; }
.close { background: none; border-color: var(--rule); font-family: var(--sym); }
.pill { font-family: var(--caps); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--muted); }
.pill + .pill::before { content: "·"; margin-right: 0.45em; }
.caution { border-left-width: 3px; }
details.deeper { border-color: var(--rule); background: none; }
details.deeper > summary { font-family: var(--caps); font-weight: 400; letter-spacing: 0.04em; color: var(--rubric); }
details.deeper > summary::before { color: var(--rubric); }

/* =====================================================================
   Narrower screens
   ===================================================================== */
@media (max-width: 1000px) {
  :root { --gloss-w: 15rem; }
}

@media (max-width: 780px) {
  body { font-size: 17.5px; }
  .page { width: calc(100% - 32px); }
  header { padding: 34px 6px 26px; margin-top: 34px; }
  h1 .t2 { font-size: clamp(1.55rem, 8.2vw, 2.2rem); }
  .theme-toggle { right: 16px; top: 12px; }
  .tabs { max-width: none; }
  .tab.active::before { display: none; }
  .tb-card { margin-top: 44px; padding: 0; }
  .tb-drop-b { padding: 0 6px 12px 34px; }

  .tb-roll { gap: 14px; padding: 0 10px; margin-bottom: 22px; }
  .rl-node { width: 76px; height: 76px; padding: 4px; }
  .rl-node .rl-name { font-size: 0.68rem; }
  .rl-node .rl-n { font-size: 1.15rem; }
  .rl-node.cur { width: 116px; height: 116px; }
  .rl-node.cur .rl-n { font-size: 1.8rem; }
  .rl-node.cur .rl-name { font-size: 0.98rem; }
  .rl-end { width: 76px; font-size: 0.78rem; }

  .tb-d-title { font-size: 2.7rem; }
  .tb-pair { gap: 48px; }
  .tb-cover-main { padding-right: 0; background: none; }
  /* margin notes drop in under the passage they belong to */
  .gloss { float: none; width: auto; margin: 10px 0 4px; padding: 2px 0 2px 14px; border-left: 2px solid var(--rubric); font-size: 0.9rem; }
  .gm, .gmk { display: none; }
  .tb-why-wrap { display: flex; flex-direction: column; }
  .tb-why-wrap > .gloss { order: 2; margin: -8px 0 18px; }
  /* narrow columns read better ragged-right than justified */
  .tb-detail .m-text, .tb-detail .tb-why, .tb-detail .conseq p, .tb-detail .tb-over-meaning, .tb-detail .tb-d-summary,
  .tb-detail .tb-d-place, .tb-detail .tb-lesson p, .tb-detail .tb-echoes > p { text-align: left; text-align-last: auto; }
  .tb-d-nav .link-btn { font-size: 0.92rem; }
}

@media (max-width: 370px) {
  .tb-roll { gap: 8px; padding: 0 4px; }
  .rl-node { width: 66px; height: 66px; padding: 3px; }
  .rl-node .rl-name { font-size: 0.6rem; }
  .rl-node.cur { width: 102px; height: 102px; }
  .rl-node.cur .rl-n { font-size: 1.55rem; }
  .rl-node.cur .rl-name { font-size: 0.86rem; }
  .rl-end { width: 66px; font-size: 0.7rem; }
}