/* ============================================================
   /seigniorage/ — cross-asset note, August 2026

   Scoped to this section. Inherits the site palette and Newsreader
   from /styles.css and adds one mono voice for data: serif carries
   the argument, mono carries the numbers.

   Layout at >=1300px is three tracks, but the weight sits in the
   middle one. Figures live IN the reading column at full width, so
   the reader meets one roughly every screen and a half. The left
   rail is wayfinding. The right rail is a small persistent
   instrument panel and nothing else: it supports the column rather
   than competing with it for the visual work.

   The cellular field is suppressed here. It is margin-weighted, and
   on this page the margins are working.
   ============================================================ */

.sg-body { --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.sg-body #bg { display: none; }

/* ---------- when the figures cannot be drawn ----------
   Set by the head watchdog or by the script tag's onerror, and by the
   <noscript> twin of this rule. The figures and the panel are drawings of
   numbers that also appear in the sentences around them, so removing them
   costs the reader nothing; leaving them as empty frames costs the page its
   credibility. */
.sg-dead .sg-fig, .sg-dead .sg-rail { display: none; }

.sg-body {
  --panel: #edeae1;
  --panel-line: #dcd7c9;
  --grid: rgba(32, 32, 29, 0.07);
  --dot: rgba(32, 32, 29, 0.30);
  --col: 42rem;
}
[data-theme="dark"] .sg-body { --panel: #201f1c; --panel-line: #35342f; --grid: rgba(233,229,216,0.07); --dot: rgba(233,229,216,0.26); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sg-body {
    --panel: #201f1c; --panel-line: #35342f;
    --grid: rgba(233,229,216,0.07); --dot: rgba(233,229,216,0.26);
  }
}

/* ---------- reading column ---------- */

.sg-page { position: relative; z-index: 1; max-width: var(--col); margin: 0 auto; padding: clamp(3rem,7vh,5.5rem) 1.5rem 4rem; }

.sg-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(3rem,8vh,5rem); }
.sg-back { font-size: 0.95rem; color: var(--soft); text-decoration: none; transition: color 180ms ease; }
.sg-back::before { content: "\2190\00a0"; }
.sg-back:hover { color: var(--accent); }
.sg-controls { display: flex; align-items: center; gap: 0.9rem; }

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

.sg-kicker {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem;
}
.sg-head h1 {
  font-size: clamp(3.2rem, 7.5vw, 5rem); font-weight: 500;
  line-height: 0.98; letter-spacing: -0.024em; margin-bottom: 1.15rem;
}
.sg-standfirst { font-size: 1.25rem; font-style: italic; color: var(--soft); line-height: 1.45; max-width: 32rem; }
.sg-byline { margin-top: 1.6rem; font-size: 1.02rem; }
.sg-utility {
  margin-top: 0.45rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--soft);
}
.sg-utility a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color 180ms ease, border-color 180ms ease; }
.sg-utility a:hover { color: var(--accent); border-color: var(--accent); }

/* on-ramp chips: they answer the credibility questions in the first
   screen instead of leaving them to a disclaimer seventeen screens down */
.sg-chips { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sg-chip { max-width: 100%; }
.sg-chip summary {
  display: inline-block; cursor: pointer; list-style: none;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.42rem 0.85rem; font-size: 0.9rem; color: var(--soft);
  transition: border-color 180ms ease, color 180ms ease;
}
.sg-chip summary::-webkit-details-marker { display: none; }
.sg-chip summary:hover { border-color: var(--accent); color: var(--accent); }
.sg-chip[open] summary { border-color: var(--ink); color: var(--ink); }
.sg-chip[open] { width: 100%; }
.sg-chip p {
  margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.55; color: var(--soft);
  border-left: 1px solid var(--rule); padding-left: 1rem;
}

.sg-lede { margin-top: clamp(2.6rem,6vh,3.8rem); font-size: 1.3rem; line-height: 1.58; }

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

.sg-sec { margin-top: clamp(4.5rem,11vh,7.5rem); scroll-margin-top: 3rem; }

/* the section opener is a title page, not a bold sentence. Large and
   light rather than large and loud. */
.sg-sec-n {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem;
}
.sg-sec h2 {
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 400;
  line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 2rem;
}

.sg-sec p { margin-bottom: 1.35rem; }
.sg-sec p:last-child { margin-bottom: 0; }
.sg-sec strong { font-weight: 600; }

.sg-callout {
  border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1.35rem;
  font-size: 1.24rem; line-height: 1.5;
}

/* the strongest case against the section it sits in */
.sg-steel {
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.1rem 1.25rem; background: var(--panel); margin-bottom: 1.35rem;
}
.sg-steel::before {
  content: "The other side"; display: block; font-family: var(--mono);
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.6rem;
}
.sg-steel p { font-size: 0.99rem; line-height: 1.58; color: var(--soft); margin: 0; }

/* expandable aside: depth without slowing the main line */
.sg-more { margin-bottom: 1.35rem; }
.sg-more summary {
  cursor: pointer; list-style: none; font-style: italic;
  color: var(--soft); font-size: 1.02rem; transition: color 180ms ease;
}
.sg-more summary::-webkit-details-marker { display: none; }
.sg-more summary::before { content: "\25B8\00a0\00a0"; color: var(--accent); font-style: normal; display: inline-block; transition: transform 200ms ease; }
.sg-more[open] summary::before { transform: rotate(90deg); }
.sg-more summary:hover { color: var(--accent); }
.sg-more p {
  margin-top: 0.85rem; font-size: 0.99rem; line-height: 1.58; color: var(--soft);
  border-left: 1px solid var(--rule); padding-left: 1.15rem;
}

/* footnote references */
.fn {
  font-family: var(--mono); font-size: 0.62em; vertical-align: super;
  line-height: 0; color: var(--accent); text-decoration: none; padding-left: 0.15em;
}
.fn::before { content: "["; }
.fn::after { content: "]"; }
.fn:hover { text-decoration: underline; }

.sg-qlist { margin: 0 0 1.35rem 0; padding-left: 1.6rem; }
.sg-qlist li { margin-bottom: 1rem; padding-left: 0.3rem; }
.sg-qlist li::marker { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); }

.sg-kill-list { list-style: none; padding-left: 0; margin: 0 0 1.35rem 0; }
.sg-kill-list li { padding-left: 1.6rem; position: relative; margin-bottom: 1.2rem; line-height: 1.55; }
.sg-kill-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.6rem; height: 1px; background: var(--accent); }

.sg-close {
  margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--rule);
  font-style: italic; color: var(--soft); font-size: 1.14rem;
}

/* ============================================================
   FIGURES — in the column, at full column width
   ============================================================ */

.sg-fig {
  margin: 2.6rem 0;
  border: 1px solid var(--panel-line); border-radius: 2px;
  background: var(--panel); padding: 1.2rem 1.3rem 1.35rem;
}
.sg-fig.is-live { animation: sgFigIn 520ms cubic-bezier(0.22,0.75,0.28,1) both; }
@keyframes sgFigIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the one figure that wants more room than the column gives it */
@media (min-width: 1300px) {
  .sg-fig-wide { width: calc(100% + 6rem); margin-left: -3rem; }
}

.sg-figcap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--rule);
}
.sg-figcap-t { font-style: italic; font-size: 0.97rem; color: var(--ink); }
.sg-figcap-src {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--soft); white-space: nowrap;
}
.sg-note { font-size: 0.92rem; line-height: 1.52; color: var(--soft); margin-top: 0.7rem; }
.sg-note-a { color: var(--ink); }
.sg-note b { color: var(--ink); font-weight: 600; }

.sg-svg { width: 100%; height: auto; display: block; color: var(--ink); overflow: visible; }
.sg-canvas { width: 100%; height: auto; display: block; }

.sg-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; fill: var(--ink); text-transform: uppercase; }
.sg-lbl-soft { fill: var(--soft); }
.sg-lbl-a { fill: var(--accent); }

.sg-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-line-accent { stroke: var(--accent); }
.sg-line-ink { stroke: var(--ink); }
.sg-line-soft { stroke: var(--soft); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.85; }
.sg-axis { stroke: var(--rule); stroke-width: 1; }
.sg-grid line { stroke: var(--grid); stroke-width: 1; }

.sg-fig.is-live .sg-line {
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: sgDraw 1500ms cubic-bezier(0.32,0.72,0.24,1) forwards;
}
.sg-fig.is-live .sg-line-soft { animation-delay: 110ms; }
@keyframes sgDraw { to { stroke-dashoffset: 0; } }

.fig1-gap { fill: var(--accent); opacity: 0; }
.sg-fig.is-live .fig1-gap { animation: sgFade 900ms 850ms ease forwards; }
@keyframes sgFade { to { opacity: 0.12; } }
.fig1-dot { fill: var(--accent); opacity: 0; }
.sg-fig.is-live .fig1-dot { animation: sgPop 460ms 1300ms cubic-bezier(0.2,1.5,0.4,1) forwards; }
@keyframes sgPop { from { opacity: 0; r: 0; } to { opacity: 1; r: 4; } }

.sg-legend {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin-top: 0.8rem;
  font-family: var(--mono); font-size: 0.66rem; color: var(--soft);
}
.sg-legend b { color: var(--ink); font-weight: 600; margin-left: 0.35rem; }
.sg-sw { display: inline-block; width: 7px; height: 7px; margin-right: 0.45rem; vertical-align: 0.02rem; }
.sg-sw-ink { background: var(--dot); }
.sg-sw-acc { background: var(--accent); }

/* ---------- stat cards ---------- */
.sg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 2.4rem 0; }
.sg-card { border: 1px solid var(--panel-line); border-radius: 2px; padding: 0.9rem 0.95rem 1rem; background: var(--paper); }
.sg-card.is-hot { background: var(--accent); border-color: var(--accent); }
.sg-card-k { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.5rem; }
.sg-card-v { font-size: 1.85rem; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.sg-card-s { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); margin-top: 0.5rem; line-height: 1.4; }
.sg-card.is-hot .sg-card-k, .sg-card.is-hot .sg-card-v, .sg-card.is-hot .sg-card-s { color: var(--paper); }

/* ---------- yield split ---------- */
.sg-split { display: flex; flex-direction: column; gap: 0.7rem; }
.sg-split-row { display: grid; grid-template-columns: 9rem 1fr 3.4rem; align-items: center; gap: 0.7rem; }
.sg-split-k { font-family: var(--mono); font-size: 0.68rem; color: var(--soft); letter-spacing: 0.05em; }
.sg-split-track { display: block; position: relative; height: 1.5rem; background: var(--grid); border-radius: 1px; }
.sg-split-fill { display: block; height: 100%; width: 0; border-radius: 1px; transition: width 1000ms cubic-bezier(0.24,0.72,0.22,1); }
.sg-split-fill.is-real { background: var(--accent); }
.sg-split-fill.is-exp { background: var(--dot); }
.sg-split-v { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); text-align: right; }

/* ---------- FOMC votes ---------- */
.sg-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; }
.sg-vote {
  aspect-ratio: 1; border: 1px solid var(--panel-line); border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.8rem; color: var(--soft);
  opacity: 0; transform: scale(0.85);
}
.sg-fig.is-live .sg-vote { animation: sgVoteIn 400ms ease forwards; }
@keyframes sgVoteIn { to { opacity: 1; transform: none; } }
.sg-vote.is-hike { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- financing bars ---------- */
.sg-bars { display: flex; flex-direction: column; gap: 0.72rem; }
.sg-bar-row { display: grid; grid-template-columns: 3rem 1fr 8rem; align-items: center; gap: 0.7rem; }
.sg-bar-y { font-family: var(--mono); font-size: 0.7rem; color: var(--soft); letter-spacing: 0.05em; }
.sg-bar-track { display: block; position: relative; height: 1.6rem; background: var(--grid); border-radius: 1px; overflow: hidden; }
.sg-bar-fill { display: block; height: 100%; width: 0; background: var(--ink); opacity: 0.8; border-radius: 1px; transition: width 1050ms cubic-bezier(0.24,0.72,0.22,1); }
.sg-bar-fill.is-est { background: var(--accent); opacity: 1; }
.sg-bar-v { font-family: var(--mono); font-size: 0.68rem; color: var(--ink); white-space: nowrap; }

/* ---------- the chain ---------- */
.sg-chain { display: flex; flex-direction: column; gap: 0.32rem; }
.sg-link {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem;
  border: 1px solid var(--panel-line); border-radius: 2px;
  padding: 0.7rem 0.9rem; background: var(--paper);
  opacity: 0; transform: translateX(-8px);
}
.sg-fig.is-live .sg-link { animation: sgLinkIn 420ms cubic-bezier(0.24,0.72,0.22,1) forwards; }
@keyframes sgLinkIn { to { opacity: 1; transform: none; } }
.sg-link-k { font-size: 1.02rem; color: var(--ink); }
.sg-link-v { font-family: var(--mono); font-size: 0.66rem; color: var(--accent); letter-spacing: 0.04em; text-align: right; }
.sg-arrow { text-align: center; font-size: 0.75rem; color: var(--soft); line-height: 0.7; opacity: 0.45; }

/* ---------- buffers ---------- */
.sg-meters { display: flex; flex-direction: column; gap: 0.95rem; }
.sg-meter-l { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--soft); margin-bottom: 0.3rem; }
.sg-meter-l b { color: var(--ink); font-weight: 500; }
.sg-meter-track { display: block; height: 5px; background: color-mix(in srgb, var(--soft) 20%, transparent); border-radius: 3px; overflow: hidden; }
.sg-meter-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 950ms cubic-bezier(0.24,0.72,0.22,1); }

/* ---------- world cards ---------- */
.sg-world { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.sg-wc { border: 1px solid var(--panel-line); border-radius: 2px; padding: 0.85rem 0.9rem; background: var(--paper); opacity: 0; transform: translateY(6px); }
.sg-fig.is-live .sg-wc { animation: sgLinkIn 440ms cubic-bezier(0.24,0.72,0.22,1) forwards; }
.sg-wc-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; }
.sg-wc-v { font-family: var(--mono); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.sg-wc-d { font-size: 0.87rem; line-height: 1.42; color: var(--soft); margin-top: 0.4rem; }

/* ---------- kill list ---------- */
.sg-kill { display: flex; flex-direction: column; gap: 0.45rem; }
.sg-kill-row {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline;
  font-size: 0.96rem; line-height: 1.45; color: var(--soft);
  opacity: 0; transform: translateY(5px);
}
.sg-fig.is-live .sg-kill-row { animation: sgLinkIn 420ms ease forwards; }
.sg-kill-row i { font-family: var(--mono); font-style: normal; font-size: 0.66rem; color: var(--accent); }
.sg-kill-row b { color: var(--ink); font-weight: 500; }

/* ---------- questions ---------- */
.sg-qs { display: flex; flex-direction: column; gap: 0.6rem; }
.sg-q { display: flex; gap: 0.75rem; font-size: 0.98rem; line-height: 1.42; color: var(--soft); opacity: 0; transform: translateY(6px); }
.sg-fig.is-live .sg-q { animation: sgLinkIn 500ms ease forwards; }
.sg-q i { font-family: var(--mono); font-style: normal; font-size: 0.68rem; color: var(--accent); padding-top: 0.18rem; }

/* ---------- decision tree ---------- */
.tree-box { fill: var(--paper); stroke: var(--panel-line); stroke-width: 1; }
.tree-box.is-base { stroke: var(--accent); stroke-width: 2; }
.tree-t { font-size: 12px; fill: var(--ink); font-family: var(--serif); }
.tree-t.is-q { font-size: 13px; }
.tree-p { font-family: var(--mono); font-size: 9px; fill: var(--soft); letter-spacing: 0.06em; }
.tree-p.is-base { fill: var(--accent); }
.tree-edge { stroke: var(--rule); stroke-width: 1.2; fill: none; }
.tree-edge.is-base { stroke: var(--accent); stroke-width: 1.8; }
.tree-lbl { font-family: var(--serif); font-style: italic; font-size: 11px; fill: var(--soft); }
.sg-fig.is-live .tree-g { opacity: 0; animation: sgLinkIn 460ms cubic-bezier(0.24,0.72,0.22,1) forwards; }

/* ---------- value map ---------- */
.vm-dot { fill: var(--dot); }
.vm-dot.is-pick { fill: var(--accent); }
.vm-t { font-family: var(--mono); font-size: 10px; fill: var(--soft); letter-spacing: 0.04em; }
.vm-t.is-pick { fill: var(--ink); }
.vm-ax { stroke: var(--rule); stroke-width: 1; }
.vm-axt { font-family: var(--mono); font-size: 9px; fill: var(--soft); letter-spacing: 0.12em; text-transform: uppercase; }
.sg-fig.is-live .vm-g { opacity: 0; animation: sgVoteIn 460ms cubic-bezier(0.2,1.4,0.4,1) forwards; }

/* ============================================================
   NOTES
   ============================================================ */

.sg-notes { margin-top: clamp(4.5rem,11vh,7rem); padding-top: 2.4rem; border-top: 1px solid var(--rule); scroll-margin-top: 3rem; }
.sg-notes h2 { font-size: 2rem; font-weight: 400; letter-spacing: -0.018em; margin-bottom: 1.2rem; }
.sg-notes-intro { font-size: 1rem; color: var(--soft); line-height: 1.55; margin-bottom: 1.8rem; }
.sg-notelist { padding-left: 1.6rem; }
.sg-notelist li { font-size: 0.9rem; line-height: 1.5; color: var(--soft); margin-bottom: 0.85rem; }
.sg-notelist li::marker { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); }
.sg-notelist a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sg-notelist a:hover { color: var(--accent); border-color: var(--accent); }
.fnb { border: none !important; color: var(--accent) !important; margin-left: 0.3rem; }
.sg-disc { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); font-size: 0.86rem; line-height: 1.55; color: var(--soft); }

/* ---------- the long version ---------- */

.sg-record { margin-top: clamp(4rem,10vh,6rem); padding-top: 2.2rem; border-top: 2px solid var(--ink); }
.sg-record-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.sg-record-d { font-size: 1.04rem; color: var(--soft); line-height: 1.6; margin-bottom: 1.7rem; }
.sg-record-btn {
  display: inline-block; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 0.78rem 1.35rem;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sg-record-btn span { display: inline-block; transition: transform 220ms ease; margin-left: 0.35rem; }
.sg-record-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.sg-record-btn:hover span { transform: translateX(3px); }

/* ============================================================
   CONTENTS RAIL
   ============================================================ */

.sg-toc {
  display: none; position: fixed; top: 50%; transform: translateY(-50%);
  left: clamp(1.5rem, calc(50vw - 40rem), 5rem); width: 13rem; z-index: 2;
}
.sg-toc-h { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }
.sg-toc ul { list-style: none; }
.sg-toc li { margin-bottom: 0.48rem; }
.sg-toc a {
  display: flex; gap: 0.6rem; font-size: 0.82rem; line-height: 1.28;
  text-decoration: none; color: var(--soft); opacity: 0.45;
  transition: opacity 220ms ease, color 220ms ease;
}
.sg-toc a:hover { opacity: 1; color: var(--accent); }
.sg-toc li.is-active a { opacity: 1; color: var(--ink); }
.sg-toc-n { font-family: var(--mono); font-size: 0.62rem; color: var(--accent); min-width: 0.95rem; padding-top: 0.15rem; }
.sg-progress { margin-top: 1.4rem; width: 100%; height: 1px; background: var(--rule); }
.sg-progress-fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 120ms linear; }

/* ============================================================
   INSTRUMENT PANEL — small, persistent, supporting
   ============================================================ */

.sg-rail {
  display: none; position: fixed; top: 50%; transform: translateY(-50%);
  left: calc(50vw + 22.5rem); width: 15.5rem; z-index: 2; pointer-events: none;
}
.sg-rail-inner { width: 100%; }

.sg-badge {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.34rem 0.62rem; background: var(--panel); margin-bottom: 1rem;
}
.sg-badge-n { color: var(--accent); font-weight: 600; }
.sg-badge-t { color: var(--soft); }

.sg-panel-h { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); opacity: 0.8; margin-bottom: 0.6rem; }
.sg-states { display: flex; flex-direction: column; gap: 0.42rem; margin-bottom: 1.1rem; }
.sg-state { display: flex; flex-direction: column; gap: 0.24rem; }
.sg-state-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.sg-state-k { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--soft); }
.sg-state-v { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.sg-state-pips { display: flex; gap: 2px; }
.sg-state-pip { flex: 1; height: 4px; border: 1px solid var(--panel-line); border-radius: 1px; background: transparent; transition: background 400ms ease, border-color 400ms ease; }
.sg-state-pip.on { background: var(--accent); border-color: var(--accent); }
.sg-state.is-hot .sg-state-k, .sg-state.is-hot .sg-state-v { color: var(--ink); }

.sg-tape { display: flex; flex-direction: column; gap: 0.26rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.63rem; }
.sg-tape span { display: flex; justify-content: space-between; transition: color 300ms ease, opacity 300ms ease; opacity: 0.5; color: var(--ink); }
.sg-tape span.is-hot { opacity: 1; }
.sg-tape span.is-hot b { color: var(--accent); }
.sg-tape i { font-style: normal; color: var(--soft); letter-spacing: 0.1em; }
.sg-tape b { font-weight: 500; }

.sg-spectrum { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.sg-spec-dots { display: flex; gap: 3px; margin-bottom: 0.35rem; }
.sg-spec-dot { flex: 1; height: 4px; background: var(--grid); border-radius: 2px; transition: background 400ms ease; }
.sg-spec-dot.on { background: var(--accent); }
.sg-spec-l { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); opacity: 0.8; }

.sg-asof { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); opacity: 0.7; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 1300px) {
  .sg-toc { display: block; }
  .sg-rail { display: block; }
}

@media (max-width: 1299px) {
  .sg-rail {
    position: static; transform: none; display: block; width: auto; left: auto;
    max-width: var(--col); margin: 3rem auto 0; padding: 0 1.5rem;
  }
  .sg-badge { display: none; }
  .sg-fig-wide { width: auto; margin-left: 0; }
  .sg-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .sg-cards { grid-template-columns: 1fr; }
  .sg-world { grid-template-columns: 1fr; }
  .sg-dots { grid-template-columns: repeat(6, 1fr); }
  .sg-split-row { grid-template-columns: 7rem 1fr 3rem; }
  .sg-bar-row { grid-template-columns: 2.4rem 1fr 5.4rem; }
  .sg-figcap { flex-direction: column; gap: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-fig, .sg-fig.is-live, .sg-fig.is-live * { animation: none !important; }
  .sg-fig.is-live .sg-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .sg-fig.is-live .sg-vote, .sg-fig.is-live .sg-link, .sg-fig.is-live .sg-wc,
  .sg-fig.is-live .sg-kill-row, .sg-fig.is-live .sg-q,
  .sg-fig.is-live .tree-g, .sg-fig.is-live .vm-g { opacity: 1; transform: none; }
  .sg-fig.is-live .fig1-gap { opacity: 0.12; }
  .sg-fig.is-live .fig1-dot { opacity: 1; }
  .sg-bar-fill, .sg-meter-fill, .sg-split-fill { transition: none; }
}

/* ---------- what this means ----------
   Each section ends with the reason a reader should care, in plain
   words. Without it the piece is a description of the bond market
   rather than something anyone can act on. */
.sg-means {
  margin: 2rem 0 0; padding: 1.15rem 1.3rem;
  border: 1px solid var(--accent); border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.sg-means::before {
  content: "What this means"; display: block; font-family: var(--mono);
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.6rem;
}
.sg-means p { font-size: 1.04rem; line-height: 1.55; margin: 0; }
.sg-means p + p { margin-top: 0.8rem; }

/* a plain-language gloss the first time a term of art appears */
.sg-gloss {
  font-style: italic; color: var(--soft);
  border-left: 2px solid var(--rule); padding-left: 1rem;
  margin: 1.5rem 0; font-size: 1rem; line-height: 1.55;
}
.sg-gloss b { font-style: normal; font-weight: 600; color: var(--ink); }

/* ---------- abstract ----------
   What the piece argues, stated before the argument starts. It was
   previously hidden inside a collapsed chip, which meant a reader
   arriving cold saw an unfamiliar word and no claim. */
.sg-abstract {
  margin-top: clamp(2.4rem,5.5vh,3.4rem);
  padding-top: 1.9rem; border-top: 1px solid var(--rule);
}
.sg-abstract p { font-size: 1.14rem; line-height: 1.56; margin-bottom: 1.25rem; }
.sg-abstract p:last-child { margin-bottom: 0; }
.sg-abstract strong {
  font-weight: 600; color: var(--accent);
}

/* ---------- conclusions ----------
   The findings, ranked by confidence rather than by how interesting
   they are, so a reader who skimmed can still leave with the argument
   and with an honest sense of which parts are load-bearing. */
.sg-concl { list-style: none; counter-reset: concl; padding-left: 0; margin: 2.2rem 0; }
.sg-concl li {
  counter-increment: concl; position: relative;
  padding: 1.2rem 0 1.4rem 3.2rem;
  border-top: 1px solid var(--rule);
}
.sg-concl li:last-child { border-bottom: 1px solid var(--rule); }
.sg-concl li::before {
  content: counter(concl, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35rem;
  font-family: var(--mono); font-size: 0.82rem; color: var(--accent);
}
.sg-concl-c {
  display: inline-block; font-family: var(--mono);
  font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.2rem 0.5rem; margin-bottom: 0.6rem; color: var(--soft);
}
.sg-concl-c.is-high { border-color: var(--accent); color: var(--accent); }
.sg-concl li strong { display: block; font-size: 1.13rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.55rem; }
.sg-concl li p { font-size: 0.99rem; line-height: 1.56; color: var(--soft); margin: 0; }