/* =========================================================
   yeahathgodsaid.com  ·  THE SEVENS section
   Loaded only by sevens.html and its five deep-dive pages.
   Extends styles.css (v4). No core token is redefined here.
   Chart hues are the validated set:
     gold-deep #C98500 · lapis #3D74CC · verdigris #3AA37D · ember #C24B41
   ========================================================= */

:root {
  --lapis: #3D74CC;
  --lapis-dim: #2A5296;
  --lapis-lit: #6E9BE0;
  --verdigris: #3AA37D;
  --verdigris-lit: #63C0A0;
}

/* ---------- section gateway cards (the hub) ---------- */
.gate-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  max-width: 940px; margin: 0 auto;
}
.gate-card {
  display: block; text-decoration: none; padding: 30px 30px 26px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--lift-1); position: relative; overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gate-card:hover { transform: translateY(-4px); border-color: rgba(240,193,75,0.42); box-shadow: var(--lift-2); }
.gate-card .gn {
  position: absolute; top: -22px; right: 16px; font-family: var(--serif); font-weight: 700;
  font-size: 116px; line-height: 1; color: rgba(240,193,75,0.055);
  transition: color 0.3s ease; pointer-events: none;
}
.gate-card:hover .gn { color: rgba(240,193,75,0.11); }
.gate-card > * { position: relative; z-index: 1; }
.gate-card h3 {
  font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.12;
  color: var(--bone); margin: 10px 0 10px;
}
.gate-card p { font-size: 13.5px; line-height: 1.62; color: var(--bone-dim); }
.gate-card .go-read {
  display: inline-block; margin-top: 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep);
  transition: color 0.2s ease;
}
.gate-card .go-read::after { content: " \2192"; display: inline-block; transition: transform 0.2s ease; }
.gate-card:hover .go-read { color: var(--gold); }
.gate-card:hover .go-read::after { transform: translateX(5px); }
.gate-card.wide { grid-column: span 2; }
.gate-card.wide .gn { font-size: 150px; top: -30px; right: 26px; }
.gate-card.wide h3 { font-size: 31px; }
.gate-card.wide p { max-width: 62ch; }
@media (max-width: 760px) { .gate-grid { grid-template-columns: 1fr; } .gate-card.wide { grid-column: span 1; } .gate-card.wide h3 { font-size: 27px; } }

/* ---------- in-page section rail ----------
   styles.css sets body { overflow-x: hidden }, which turns the body into a
   scroll container and silently kills position:sticky on its children.
   overflow-x: clip prevents the same horizontal scroll without that side effect. */
body { overflow-x: clip; }
.rail {
  position: sticky; top: 64px; z-index: 30; margin: 0 0 8px;
  background: rgba(11,9,8,0.9); backdrop-filter: blur(9px);
  border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft);
}
.rail .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 9px; padding-bottom: 9px; scrollbar-width: none; }
.rail .wrap::-webkit-scrollbar { display: none; }
.rail a {
  flex: 0 0 auto; text-decoration: none; font-size: 11px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--smoke);
  padding: 6px 12px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rail a:hover, .rail a.on { color: var(--gold); border-color: var(--hairline); background: rgba(240,193,75,0.05); }

/* ---------- the pattern card: the workhorse of this section ---------- */
.pat {
  max-width: 860px; margin: 0 auto clamp(30px, 4vw, 46px);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--lift-1); overflow: hidden;
}
.pat-head { padding: 26px 32px 0; }
.pat-head .label { color: var(--gold-deep); }
.pat-head h3 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3vw, 32px);
  line-height: 1.12; color: var(--bone); margin-top: 10px; text-wrap: balance;
}
.pat-body { padding: 18px 32px 26px; }
.pat-body p { font-size: 15px; line-height: 1.74; color: var(--bone-dim); margin-bottom: 16px; }
.pat-body p:last-child { margin-bottom: 0; }
.pat-body strong { color: var(--bone); font-weight: 600; }
.pat-body em { font-family: var(--fell); color: var(--bone); }
.pat-body a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(240,193,75,0.3); }
.pat-body a:hover { border-bottom-color: var(--gold); }

/* the number itself */
.pat-figure {
  display: flex; align-items: baseline; justify-content: center; gap: 16px;
  flex-wrap: wrap; padding: 8px 32px 4px; text-align: center;
}
.pat-n {
  font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(50px, 9vw, 86px); line-height: 1;
  background: linear-gradient(180deg, #F7DC96, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(240,193,75,0.2));
}
.pat-n.ember-n {
  background: linear-gradient(180deg, #E28A80, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(194,75,65,0.24));
}
/* When the resonant form is the expression rather than the total, the expression
   wears .pat-n.expr and the plain total drops back to .pat-eq. */
.pat-n.expr { font-size: clamp(27px, 5.2vw, 54px); letter-spacing: 0.01em; }
.pat-eq {
  font-family: var(--serif); font-size: clamp(17px, 2.4vw, 26px); color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.pat-eq.total { color: var(--smoke); font-size: clamp(15px, 2vw, 21px); }
.pat-eq b { color: var(--gold); font-weight: 600; }
.pat-cap {
  text-align: center; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--smoke); padding: 4px 32px 16px;
}
/* the closing equation: after the prose has said what the number means, show it written */
.pat-close {
  margin: 26px 32px 22px; padding-top: 22px; text-align: center;
  border-top: 1px solid var(--hairline-soft);
  font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.4vw, 34px); line-height: 1.25; color: var(--gold);
}
.pat-close .to { color: var(--smoke); font-weight: 500; padding: 0 0.28em; }
.pat-close .sum { color: var(--bone-dim); font-weight: 500; }
@media (max-width: 640px) { .pat-close { margin-left: 20px; margin-right: 20px; } }

/* the search rule: how the count was made, always shown */
.srule {
  margin: 20px 32px 0; border: 1px solid var(--hairline-soft); border-radius: 8px;
  background: rgba(11,9,8,0.55); overflow: hidden;
}
.srule summary {
  cursor: pointer; list-style: none; padding: 12px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--smoke); display: flex; align-items: center; gap: 10px;
  transition: color 0.2s ease;
}
.srule summary::-webkit-details-marker { display: none; }
.srule summary:hover { color: var(--gold); }
.srule summary::after { content: "+"; margin-left: auto; font-size: 15px; color: var(--gold-deep); }
.srule[open] summary::after { content: "\2212"; }
.srule .srule-in { padding: 0 18px 16px; }
.srule table { width: 100%; border-collapse: collapse; font-size: 13px; }
.srule th, .srule td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--hairline-soft); }
.srule th { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); font-weight: 700; }
.srule td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--bone); }
.srule tr.tot td { border-bottom: 0; font-weight: 700; color: var(--gold); padding-top: 10px; }
.srule tr.tot td.k { color: var(--bone); }
.srule .q { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; color: var(--bone); }
.srule p { font-size: 13px; line-height: 1.66; color: var(--smoke); margin-top: 12px; }

/* verification marks */
.vmark {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 20px; border: 1px solid;
}
.vmark::before { font-size: 11px; line-height: 1; }
.vmark.ok { color: var(--verdigris-lit); border-color: rgba(58,163,125,0.45); background: rgba(58,163,125,0.07); }
.vmark.ok::before { content: "\2713"; }
.vmark.rule-based { color: var(--lapis-lit); border-color: rgba(61,116,204,0.45); background: rgba(61,116,204,0.07); }
.vmark.rule-based::before { content: "\00A7"; }
.pat-marks { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 32px 24px; }

/* ---------- grouped comparison chart: many words, two halves each ----------
   Everything sits in normal flow so the box height includes the labels. An earlier
   version absolutely positioned the groups, which pushed the labels outside the box
   and made overflow-x:auto produce a VERTICAL scrollbar. */
.gchart { margin: 26px 32px 0; }
.gc-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.gc-inner { display: flex; gap: 10px; min-width: 700px; }
.gc-y {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 264px; padding-top: 24px; font-size: 10px; color: var(--smoke);
  font-variant-numeric: tabular-nums; text-align: right; flex: 0 0 auto;
  line-height: 1; margin-bottom: -5px;
}
.gc-plot { position: relative; flex: 1 1 auto; min-width: 0; }
.gc-grid {
  position: absolute; top: 24px; left: 0; right: 0; height: 240px;
  display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
}
.gc-grid i { display: block; border-top: 1px solid rgba(240,193,75,0.08); }
.gc-grid i:last-child { border-top-color: rgba(240,193,75,0.28); }
.gc-groups { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.gc-g { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.gc-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  height: 264px; padding-top: 24px; width: 100%;
}
.gb { flex: 1 1 0; min-width: 5px; border-radius: 3px 3px 0 0; position: relative; min-height: 2px; transition: filter .15s ease; }
.gb.odd { background: var(--gold-deep); }
.gb.even { background: var(--lapis); }
.gc-g:hover .gb, .gc-g:focus-visible .gb { filter: brightness(1.3); }
.gb i {
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) rotate(-90deg);
  transform-origin: bottom center; font-style: normal; font-size: 9px; color: var(--smoke);
  font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0;
}
.gc-lab {
  margin-top: 8px; font-size: 10px; color: var(--smoke); text-align: center;
  writing-mode: vertical-rl; text-orientation: mixed; height: 62px; overflow: hidden;
  align-self: center; white-space: nowrap;
}
.gc-g.gc-mark { flex: 2.2 1 0; }
.gc-g.gc-mark::before {
  content: ""; position: absolute; inset: 6px -3px 0 -3px; z-index: 0;
  background: rgba(240,193,75,0.07); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(240,193,75,0.45), 0 0 26px rgba(240,193,75,0.18);
  pointer-events: none;
}
.gc-g.gc-mark .gc-bars, .gc-g.gc-mark .gc-lab { position: relative; z-index: 1; }
/* a level line across the tops of the one pair that matches */
.gc-g.gc-mark .gb::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 0;
  border-top: 1px dashed rgba(255,244,200,0.85); pointer-events: none;
}
.gc-g.gc-mark .gc-lab { color: var(--gold); font-weight: 700; letter-spacing: 0.04em; height: auto; max-height: 108px; }
.gc-g.gc-mark .gb i {
  opacity: 1; color: var(--gold); font-size: 10px; font-weight: 700;
  transform: translateX(-50%); bottom: calc(100% + 5px);
}
.gc-foot { font-size: 12.5px; color: var(--smoke); margin-top: 14px; line-height: 1.65; text-align: center; }
.gc-foot b { color: var(--bone-dim); }
@media (max-width: 640px) { .gchart { margin-left: 20px; margin-right: 20px; } }

/* ---------- bar chart (odd / even books) ---------- */
.chart { margin: 26px 32px 8px; }
.chart-title { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); margin-bottom: 4px; }
.chart-sub { font-size: 13px; color: var(--bone-dim); margin-bottom: 18px; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bone-dim); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.swatch-odd { background: var(--gold-deep); }
.swatch-even { background: var(--lapis); }

.bars { display: flex; align-items: flex-end; gap: 2px; height: 190px; padding-top: 22px; }
.bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; min-width: 0; }
.bar .fill {
  width: 100%; border-radius: 4px 4px 0 0; position: relative;
  transition: filter 0.18s ease; min-height: 2px;
}
.bar.odd .fill { background: var(--gold-deep); }
.bar.even .fill { background: var(--lapis); }
.bar.none .fill.void {
  width: 100%; height: 12px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(234,227,210,0.16) 0 3px, transparent 3px 6px);
  border: 1px dashed rgba(234,227,210,0.3);
}
.bar.none .bl { color: var(--bone-dim); }
.bar:hover .fill { filter: brightness(1.28); }
.bar .bv {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--bone); font-variant-numeric: tabular-nums; opacity: 0;
  transition: opacity 0.18s ease; pointer-events: none; white-space: nowrap;
}
.bar:hover .bv, .bar:focus-visible .bv { opacity: 1; }
.bar .bl {
  margin-top: 7px; font-size: 9px; letter-spacing: 0.04em; color: var(--smoke);
  white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed;
  height: 44px; overflow: hidden;
}
.bars-axis { border-top: 1px solid var(--hairline-soft); margin-top: 0; }
.bar-tt {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  background: rgba(11,9,8,0.96); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 8px 12px; font-size: 12px; color: var(--bone); box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  transition: opacity 0.15s ease; white-space: nowrap;
}
.bar-tt.on { opacity: 1; }
.bar-tt b { color: var(--gold); }

/* ---------- vertical paired comparison: each pair scaled to its own taller bar ---------- */
.vcmp {
  margin: 26px 32px 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2.2vw, 30px); align-items: end;
}
.vc-g { display: flex; flex-direction: column; align-items: center; position: relative; }
.vc-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 214px; padding-top: 24px; width: 100%; }
.vc-b {
  flex: 1 1 0; max-width: 46px; border-radius: 4px 4px 0 0; position: relative; min-height: 3px;
  transition: filter .15s ease;
}
.vc-b.odd { background: var(--gold-deep); }
.vc-b.even { background: var(--lapis); }
.vc-g:hover .vc-b { filter: brightness(1.22); }
.vc-b i {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--bone);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vc-lab {
  margin-top: 12px; font-size: 12.5px; color: var(--bone-dim); text-align: center;
  line-height: 1.35; font-weight: 600;
}
.vc-ratio {
  margin-top: 5px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--smoke); text-align: center; white-space: nowrap;
}
.vc-base { grid-column: 1 / -1; border-top: 1px solid var(--hairline-soft); margin-top: -1px; }
.vc-g.vc-level::before {
  content: ""; position: absolute; inset: -10px -8px -8px -8px; z-index: 0;
  background: rgba(240,193,75,0.07); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(240,193,75,0.45), 0 0 26px rgba(240,193,75,0.18);
  pointer-events: none;
}
.vc-g.vc-level > * { position: relative; z-index: 1; }
.vc-g.vc-level .vc-lab { color: var(--gold); }
.vc-g.vc-level .vc-b i { color: var(--gold); }
.vc-g.vc-level .vc-bars::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 24px;
  border-top: 1px dashed rgba(240,193,75,0.7); pointer-events: none;
}
.vc-g.vc-level .vc-bars { position: relative; }
@media (max-width: 640px) {
  .vcmp { margin-left: 20px; margin-right: 20px; gap: 8px; }
  .vc-bars { height: 162px; padding-top: 22px; }
  .vc-b i { font-size: 9.5px; }
  .vc-lab { font-size: 11px; }
  .vc-ratio { font-size: 9px; letter-spacing: 0.08em; }
}

/* ---------- the comparison graph: lopsided measures against one level measure ---------- */
.cmp { margin: 26px 32px 0; }
.cmp-row { margin-bottom: 18px; }
.cmp-row:last-child { margin-bottom: 0; }
.cmp-lab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 12.5px; color: var(--bone-dim); margin-bottom: 7px;
}
.cmp-lab b { color: var(--bone); font-weight: 600; }
.cmp-lab .ratio { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); white-space: nowrap; }
.cmp-track { position: relative; display: flex; height: 30px; border-radius: 5px; overflow: visible; }
.cmp-f {
  height: 100%; position: relative; display: flex; align-items: center;
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink);
  font-weight: 700; white-space: nowrap;
}
.cmp-f.odd  { background: var(--gold-deep); border-radius: 5px 0 0 5px; justify-content: flex-start; padding-left: 10px; }
.cmp-f.even { background: var(--lapis); border-radius: 0 5px 5px 0; justify-content: flex-end; padding-right: 10px; margin-left: 2px; }
.cmp-mid {
  position: absolute; left: 50%; top: -7px; bottom: -7px; width: 0;
  border-left: 1px dashed rgba(234,227,210,0.45); pointer-events: none;
}
.cmp-row.level .cmp-track { box-shadow: 0 0 0 1px rgba(240,193,75,0.5), 0 0 24px rgba(240,193,75,0.22); border-radius: 6px; }
.cmp-row.level .cmp-lab b { color: var(--gold); }
.cmp-foot { font-size: 12.5px; color: var(--smoke); margin-top: 16px; line-height: 1.6; text-align: center; }
.cmp-foot b { color: var(--bone-dim); }

/* the balance beam: two stacked proportion bars */
.beam { margin: 26px 32px 0; }
.beam-row { margin-bottom: 20px; }
.beam-row:last-child { margin-bottom: 0; }
.beam-lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--bone-dim); margin-bottom: 7px; }
.beam-lab b { color: var(--bone); font-weight: 600; }
.beam-lab .v { font-variant-numeric: tabular-nums; color: var(--bone); }
.beam-track { height: 16px; background: rgba(255,255,255,0.045); border-radius: 4px; overflow: hidden; display: flex; }
.beam-fill { height: 100%; border-radius: 4px; }
.beam-fill.odd { background: var(--gold-deep); }
.beam-fill.even { background: var(--lapis); margin-left: 2px; }
.beam-note { font-size: 12.5px; color: var(--smoke); margin-top: 14px; line-height: 1.6; }

/* ---------- verse strip: a numbered position inside a book ---------- */
/* a verse quoted in full, inside a pattern card, so it can be read as its own proof */
.pat-scr { margin: 26px 32px 0; font-size: 17px; }
.pat-scr p { margin: 0; }
.pat-scr p + p { margin-top: 0.85em; }
.pat-scr .ref { display: block; margin-top: 14px; font-family: var(--sans); color: var(--smoke); }
@media (max-width: 640px) { .pat-scr { margin: 22px 20px 0; padding: 20px 20px; font-size: 16px; } }

.strip { margin: 24px 32px 0; border: 1px solid var(--hairline-soft); border-radius: 8px; overflow: hidden; }
.strip-row { display: grid; grid-template-columns: 104px 1fr; gap: 0; border-bottom: 1px solid var(--hairline-soft); }
.strip-row:last-child { border-bottom: 0; }
.strip-row .k {
  padding: 14px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-deep); background: rgba(240,193,75,0.045); border-right: 1px solid var(--hairline-soft);
  display: flex; align-items: center; font-variant-numeric: tabular-nums;
}
.strip-row .v { padding: 13px 16px; font-family: var(--fell); font-size: 14.5px; line-height: 1.6; color: var(--bone-dim); }
.strip-row .v b { color: var(--gold); font-weight: 400; }
.strip-row .v .ref { display: block; margin-top: 8px; font-family: var(--sans); }
.strip-row.sum .k { color: var(--gold); background: rgba(240,193,75,0.09); }
.strip-row.sum .v { font-family: var(--sans); font-size: 14px; color: var(--bone); }
.strip-row.ember-row .k { color: var(--ember); background: rgba(194,75,65,0.06); }

/* ---------- Luke's genealogy, God to Jesus ---------- */
.gnlist {
  list-style: none; margin: 22px 32px 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 12px;
  grid-auto-flow: column; grid-template-rows: repeat(11, auto);
}
.gn-i {
  font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--bone-dim);
  padding: 3px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gn-i .gn-n {
  display: inline-block; min-width: 22px; font-family: var(--sans); font-size: 10px;
  color: var(--smoke); font-variant-numeric: tabular-nums;
}
.gn-i em { font-family: var(--sans); font-size: 9.5px; color: var(--smoke); font-style: normal; }
.gn-i.gn-mark {
  color: var(--gold); font-weight: 700;
  background: rgba(240,193,75,0.09); box-shadow: 0 0 0 1px rgba(240,193,75,0.45);
}
.gn-i.gn-mark .gn-n { color: var(--gold-deep); }
@media (max-width: 900px) { .gnlist { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(20, auto); } }
@media (max-width: 560px) { .gnlist { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(39, auto); margin-left: 20px; margin-right: 20px; } }

/* ---------- the triangle of 153 ---------- */
.tri { display: block; width: 100%; max-width: 470px; margin: 8px auto 0; height: auto; }
.tri .if { fill: rgba(234,227,210,0.18); }
.tri .pf { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(240,193,75,0.55)); }
.tri-key { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.tri-key span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bone-dim); }
.tri-key i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.tri-key i.p { background: var(--gold); }
.tri-key i.n { background: rgba(234,227,210,0.18); }

/* ---------- the objection / answer beat ---------- */
.obj {
  max-width: 860px; margin: 0 auto; padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 44px);
  border: 1px solid var(--hairline); border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,16,13,0.9), rgba(11,9,8,0.7));
  box-shadow: var(--lift-1); margin-bottom: 22px;
}
.obj .oq {
  font-family: var(--fell); font-style: italic; font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.5; color: var(--bone);
}
.obj .oq::before { content: "\201C"; color: var(--ember); }
.obj .oq::after { content: "\201D"; color: var(--ember); }
.obj .osrc { margin-top: 12px; }
.obj .oa {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hairline-soft);
}
.obj .oa .oa-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.obj .oa p { font-size: 15px; line-height: 1.75; color: var(--bone-dim); margin-bottom: 14px; }
.obj .oa p:last-child { margin-bottom: 0; }
.obj .oa strong { color: var(--bone); font-weight: 600; }
.obj .oa a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(240,193,75,0.3); }

/* ---------- the ledger table ---------- */
.ledger-wrap { max-width: 940px; margin: 0 auto; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; box-shadow: var(--lift-1); }
.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--ink-2); }
.ledger th, .ledger td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline-soft); }
.ledger thead th {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke);
  background: rgba(240,193,75,0.04); font-weight: 700;
}
.ledger td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; white-space: nowrap; }
.ledger td.c { color: var(--bone-dim); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover td { background: rgba(240,193,75,0.03); }
.ledger .ok { color: var(--verdigris-lit); }
.ledger .rb { color: var(--lapis-lit); }
@media (max-width: 760px) {
  .ledger thead { display: none; }
  .ledger tr { display: block; border-bottom: 1px solid var(--hairline-soft); padding: 6px 0; }
  .ledger td { display: flex; justify-content: space-between; gap: 16px; border-bottom: 0; padding: 6px 16px; }
  .ledger td.n { text-align: right; }
}

/* ---------- small shared bits ---------- */
.sect-intro { max-width: 66ch; margin: 0 auto clamp(38px, 5vw, 56px); text-align: center; font-size: 16px; line-height: 1.75; color: var(--bone-dim); }
.sect-intro strong { color: var(--bone); font-weight: 600; }
.tag-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-num {
  font-family: var(--serif); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(76px, 15vw, 168px); line-height: 0.94; margin: 18px 0 4px;
  background: linear-gradient(180deg, #F8E1A4 8%, var(--gold) 42%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(240,193,75,0.22));
}
.hero-num.ember-n {
  background: linear-gradient(180deg, #EBA79E 8%, #D25E53 45%, var(--ember) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(194,75,65,0.24));
}
.hero-word {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.13em;
  font-size: clamp(54px, 11vw, 122px); line-height: 1.02; margin: 20px 0 8px;
  background: linear-gradient(180deg, #F8E1A4 8%, var(--gold) 42%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 44px rgba(240,193,75,0.24));
}
.hero-num.expr { font-size: clamp(38px, 8.4vw, 96px); line-height: 1.06; letter-spacing: 0.005em; }
.hero-num-sub { font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--smoke); }

.callout-verify {
  max-width: 780px; margin: clamp(38px, 5vw, 56px) auto 0; text-align: center;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 28px 30px;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,193,75,0.07), transparent 70%);
}
.callout-verify h3 { font-family: var(--serif); font-weight: 700; font-size: 25px; color: var(--bone); }
.callout-verify p { font-size: 14.5px; line-height: 1.72; color: var(--bone-dim); margin-top: 12px; }
.callout-verify a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(240,193,75,0.3); }
.callout-verify a:hover { border-bottom-color: var(--gold); }

.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 24px 32px 0; }
@media (min-width: 720px) { .mini-grid.four { grid-template-columns: repeat(4, 1fr); } }
.mini {
  border: 1px solid var(--hairline-soft); border-radius: 8px; padding: 16px 18px;
  background: rgba(11,9,8,0.45); text-align: center;
}
.mini .mn { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mini .ml { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); margin-top: 6px; }
.mini .md { font-size: 12.5px; color: var(--bone-dim); margin-top: 8px; line-height: 1.55; }

.attrib {
  max-width: 780px; margin: clamp(44px, 6vw, 66px) auto 0; text-align: center;
  font-size: 13.5px; line-height: 1.72; color: var(--smoke);
  border-top: 1px solid var(--hairline-soft); padding-top: 26px;
}
.attrib a { color: var(--bone-dim); text-decoration: none; border-bottom: 1px solid rgba(240,193,75,0.22); }
.attrib a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .pat-head, .pat-body { padding-left: 20px; padding-right: 20px; }
  .pat-figure, .pat-cap, .pat-marks { padding-left: 20px; padding-right: 20px; }
  .srule, .chart, .beam, .strip, .mini-grid { margin-left: 20px; margin-right: 20px; }
  .strip-row { grid-template-columns: 74px 1fr; }
  .bars { height: 150px; }
  .bar .bl { display: none; }
}