/* ==========================================================================
   KASTRA RESEARCH - INSTITUTIONAL RESEARCH NOTE DESIGN SYSTEM
   v2.0  |  September 2026
   Serif body + sans furniture. Modelled on the typographic conventions of
   published sell-side and multilateral commodity research.
   Do not edit per-edition. Edit here, rebuild all editions.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  --band:#002949;          /* brand navy, masthead band */
  --band-2:#01315a;        /* band gradient stop */
  --band-ink:#ffffff;
  --accent:#1b5fa8;        /* steel blue: section numbers, links, rules */
  --accent-ink:#14456f;
  --accent-tint:#eaf0f7;
  --bg:#f2f2ef;            /* page surround */
  --surface:#ffffff;       /* paper */
  --ink:#16181c;
  --ink-soft:#41454b;
  --ink-faint:#767b83;
  --ink-ghost:#9aa1aa;
  --rule:#d8dade;          /* hairline */
  --rule-strong:#a9aeb5;
  --strip-bg:#eef1f5;
  --good:#2f6b47;
  --bad:#9c3a2e;
  /* data-visualisation ramp: max four marks, muted, ordered by emphasis */
  --dv-1:#002949;
  --dv-2:#1b5fa8;
  --dv-3:#7d94a8;
  --dv-4:#b9863a;
  --dv-flat:#c9cfd6;
  --dv-neg:#9c3a2e;
  --dv-grid:rgba(22,24,28,0.10);
  --dv-zero:rgba(22,24,28,0.38);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --band:#00223d; --band-2:#012b4e; --band-ink:#ffffff;
    --accent:#7fb2e0; --accent-ink:#9cc6ec; --accent-tint:#152534;
    --bg:#0f1319; --surface:#161b22; --ink:#e8edf3; --ink-soft:#b6bfca;
    --ink-faint:#8b939e; --ink-ghost:#727a85;
    --rule:#2a313b; --rule-strong:#414a56; --strip-bg:#1a212a;
    --good:#68b880; --bad:#d4796a;
    --dv-1:#9cc6ec; --dv-2:#4d8fce; --dv-3:#7d94a8; --dv-4:#c99a52;
    --dv-flat:#39424e; --dv-neg:#d4796a;
    --dv-grid:rgba(232,237,243,0.12); --dv-zero:rgba(232,237,243,0.42);
  }
}
:root[data-theme="dark"]{
  --band:#00223d; --band-2:#012b4e; --band-ink:#ffffff;
  --accent:#7fb2e0; --accent-ink:#9cc6ec; --accent-tint:#152534;
  --bg:#0f1319; --surface:#161b22; --ink:#e8edf3; --ink-soft:#b6bfca;
  --ink-faint:#8b939e; --ink-ghost:#727a85;
  --rule:#2a313b; --rule-strong:#414a56; --strip-bg:#1a212a;
  --good:#68b880; --bad:#d4796a;
  --dv-1:#9cc6ec; --dv-2:#4d8fce; --dv-3:#7d94a8; --dv-4:#c99a52;
  --dv-flat:#39424e; --dv-neg:#d4796a;
  --dv-grid:rgba(232,237,243,0.12); --dv-zero:rgba(232,237,243,0.42);
}

/* --- 2. BASE ------------------------------------------------------------- */
*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Times New Roman", Times, Georgia, serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; margin:0;
}
.sans{font-family:Arial, Helvetica, "Helvetica Neue", sans-serif;}
.tab{font-variant-numeric:tabular-nums lining-nums;}
h1,h2,h3,h4{margin:0; color:var(--ink); text-wrap:balance;}
a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--rule);}
sup{font-size:0.62em; line-height:0; vertical-align:super;}

.page{
  max-width:1060px; margin:34px auto 64px; background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,0.07), 0 12px 34px rgba(0,0,0,0.06);
}

/* --- 3. MASTHEAD --------------------------------------------------------- */
.banner{
  background:linear-gradient(100deg, var(--band) 0%, var(--band-2) 100%);
  color:var(--band-ink); padding:22px 52px 24px;
}
.banner-rail{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap;
  padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,0.28);
}
/* The wordmark is now artwork rather than set type: white ink on transparency,
   embedded as a data URI by shell.masthead() so an edition remains one
   self-contained file. Height is fixed here and the width follows from the
   artwork, matching the width/height attributes the template writes onto the
   <img> so the banner reserves the box before the image decodes. The old
   .wm-main / .wm-sub lockup is gone -- its second line still read "Research
   Group", left over from the Blue Kastra name. */
.wordmark{display:block; height:46px; width:auto; margin-bottom:3px;}
.stamp{
  font-family:Arial, Helvetica, sans-serif; font-size:0.63rem;
  letter-spacing:0.09em; text-transform:uppercase; text-align:right;
  line-height:1.85; opacity:0.9;
}
.stamp b{font-weight:700; letter-spacing:0.09em;}
.series{
  margin-top:17px; font-family:Arial, Helvetica, sans-serif; font-size:0.63rem;
  letter-spacing:0.16em; text-transform:uppercase; opacity:0.72;
}
.headline{
  color:var(--band-ink); margin-top:7px; font-size:2.02rem; font-weight:600; line-height:1.09;
  letter-spacing:-0.005em; max-width:23ch;
}
.deck{
  margin-top:9px; font-size:1.02rem; line-height:1.42; opacity:0.9;
  max-width:62ch; font-style:italic;
}

/* --- 4. METRICS STRIP ---------------------------------------------------- */
.strip{
  background:var(--strip-bg); border-bottom:1px solid var(--rule);
  display:grid;
  /* 132px keeps all five metrics on one row down to tablet portrait; at 148px
     an iPad wrapped the fifth onto a row of its own. */
  grid-template-columns:repeat(auto-fit, minmax(132px,1fr));
  padding:0 52px;
}
.metric{
  /* Centred, with symmetric padding: the old 20px-right / 0-left padding
     pushed every cell hard up against the divider on its left. */
  padding:16px 24px 17px; text-align:center;
  border-right:1px solid var(--rule);
  /* Column layout with a flexing label keeps every value on the same baseline
     however many lines its label runs to. */
  display:flex; flex-direction:column;
}
.metric:last-child{border-right:none;}
.m-label{
  font-family:Arial, Helvetica, sans-serif; font-size:0.585rem;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-faint);
  line-height:1.35; min-height:2.1em;
}
/* Below full width the cells narrow and labels run to three lines. Reserving the
   space keeps every value on one line across the strip instead of stepping. */
@media (max-width:1100px){ .m-label{min-height:4.05em;} }
.m-value{
  font-size:1.42rem; font-weight:600; margin-top:3px; line-height:1.1;
  font-variant-numeric:tabular-nums lining-nums;
}
.m-value .u{
  font-family:Arial, Helvetica, sans-serif; font-size:0.52rem;
  color:var(--ink-faint); font-weight:400; letter-spacing:0.04em;
  margin-left:3px;
}
.m-note{
  font-family:Arial, Helvetica, sans-serif; font-size:0.63rem; margin-top:2px;
  color:var(--ink-faint);
}
.up{color:var(--good);} .down{color:var(--bad);}

/* --- 5. GRID ------------------------------------------------------------- */
.grid{display:grid; grid-template-columns:1fr 288px;}
.col-main{padding:30px 34px 10px 52px; min-width:0;}
/* The divider belongs to the rail and stops with it. As a full-height border on
   the main column it ran on for thousands of pixels past the last rail item,
   fencing off a tall empty box instead of reading as a margin. */
.col-rail{
  padding:30px 52px 10px 26px; min-width:0;
  border-left:1px solid var(--rule); align-self:start;
}
@media (max-width:860px){
  .grid{grid-template-columns:1fr;}
  .col-main{padding-right:52px;}
  .col-rail{
    padding:6px 52px 10px; align-self:stretch;
    border-left:none; border-top:1px solid var(--rule);
  }
}

/* --- 6. BODY TYPE -------------------------------------------------------- */
.col-main p{margin:0 0 11px; max-width:74ch;}
.lead{font-size:1.06rem; line-height:1.47;}
.lead b, .col-main b{font-weight:700;}

.rule-head{
  display:flex; align-items:baseline; gap:10px;
  margin:26px 0 11px; padding-top:9px; border-top:1px solid var(--rule-strong);
}
.rule-head .n{
  font-family:Arial, Helvetica, sans-serif; font-size:0.66rem; font-weight:700;
  color:var(--accent); letter-spacing:0.06em; flex:0 0 auto;
}
.rule-head h2{
  font-size:1.14rem; font-weight:600; line-height:1.22; letter-spacing:-0.003em;
}
.sub-head{
  font-family:Arial, Helvetica, sans-serif; font-size:0.655rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);
  margin:19px 0 7px;
}
.runin{font-weight:700;}

/* --- 7. SUMMARY BULLETS -------------------------------------------------- */
/* The opening block and the lead paragraph are the same register and should be the
   same size; body copy sits below them. Previously the bullets were 1.0rem and the
   lead 1.06rem against a 15px body, which put three sizes on the first screen. */
.summary-h{
  font-family:Arial, Helvetica, sans-serif; font-size:0.655rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);
  margin:0 0 9px; padding-bottom:6px; border-bottom:1px solid var(--rule-strong);
}
.summary{margin:0 0 4px; padding:0; list-style:none;}
.summary li{
  position:relative; padding-left:19px; margin-bottom:11px;
  font-size:1.06rem; line-height:1.47; max-width:74ch;
}
.summary li::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:7px; height:7px; background:var(--accent);
}

/* --- 8. PANELS ----------------------------------------------------------- */
.panel{
  background:var(--accent-tint); border-left:3px solid var(--accent);
  padding:12px 15px; margin:15px 0; font-size:0.93rem;
}
.panel.warn{border-left-color:var(--bad);}
.panel.warn .p-label{color:var(--bad);}
.p-label{
  display:block; font-family:Arial, Helvetica, sans-serif; font-size:0.6rem;
  font-weight:700; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--accent); margin-bottom:5px;
}
.panel p{margin:0 0 8px !important;}
.panel p:last-child{margin-bottom:0 !important;}
.panel ul{margin:6px 0 0; padding-left:17px;}
.panel li{margin-bottom:5px;}

/* --- 9. EXHIBITS --------------------------------------------------------- */
.exhibit{margin:26px 0 28px;}
/* A chart exhibit is held to the width the SVG was drawn at, caption, rules and
   footnote together, so the whole block stays a single aligned object instead of
   a small chart under a full-column rule. */
.exhibit:has(> .ex-body > svg.chart),
.exhibit:has(> .ex-body > .hbars){max-width:566px;}
.col-rail .exhibit{margin:0 0 26px;}
.ex-cap{
  font-family:Arial, Helvetica, sans-serif; font-size:0.755rem; font-weight:700;
  line-height:1.35; color:var(--ink);
}
.ex-cap .lbl{color:var(--accent);}
.ex-sub{
  font-size:0.795rem; color:var(--ink-faint); font-style:italic;
  margin-top:2px; line-height:1.35;
}
.ex-body{margin-top:9px; padding-top:9px; border-top:1px solid var(--rule-strong);}
.ex-foot{
  font-family:Arial, Helvetica, sans-serif; font-size:0.635rem; line-height:1.5;
  color:var(--ink-faint); margin-top:7px; padding-top:5px;
  border-top:1px solid var(--rule);
}
.ex-foot b{color:var(--ink-soft); font-weight:700;}

/* --- 10. TABLES ---------------------------------------------------------- */
.t{
  width:100%; border-collapse:collapse; font-size:0.82rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.t th{
  font-family:Arial, Helvetica, sans-serif; font-size:0.635rem; font-weight:700;
  letter-spacing:0.045em; text-transform:uppercase; color:var(--ink-faint);
  text-align:right; padding:0 0 5px 9px; border-bottom:1px solid var(--rule-strong);
  vertical-align:bottom; line-height:1.3;
}
.t th:first-child{text-align:left; padding-left:0;}
.t td{
  padding:5px 0 5px 9px; text-align:right; border-bottom:1px solid var(--rule);
  line-height:1.35;
}
.t td:first-child{
  text-align:left; padding-left:0; font-family:"Times New Roman",Times,serif;
}
.t tr:last-child td{border-bottom:none;}
.t .ind td:first-child{padding-left:13px; color:var(--ink-faint); font-size:0.94em;}
.t .tot td{border-top:1px solid var(--rule-strong); font-weight:700;}
.t .hl td{background:var(--accent-tint);}
.t .neg{color:var(--bad);}
.t caption{caption-side:top; text-align:left;}
.t-wrap{overflow-x:auto;}

/* --- 11. CHARTS ---------------------------------------------------------- */
.chart{
  /* Every SVG carries an inline max-width equal to the width it was drawn at.
     Stretching one past that magnifies every stroke and label with it, which is
     how a rail-sized chart dropped into the main column came out at twice size. */
  width:100%; height:auto; display:block; overflow:visible; margin:0 auto;
}
.c-grid{stroke:var(--dv-grid); stroke-width:1;}
.c-zero{stroke:var(--dv-zero); stroke-width:1;}
.c-axis{
  font-family:Arial, Helvetica, sans-serif; font-size:9px; fill:var(--ink-faint);
}
.c-lab{
  font-family:Arial, Helvetica, sans-serif; font-size:9.5px; font-weight:700;
}
.c-val{
  font-family:Arial, Helvetica, sans-serif; font-size:9px; fill:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.c-unit{
  font-family:Arial, Helvetica, sans-serif; font-size:8.5px; fill:var(--ink-faint);
  letter-spacing:0.03em;
}
.f1{fill:var(--dv-1);} .f2{fill:var(--dv-2);} .f3{fill:var(--dv-3);}
.f4{fill:var(--dv-4);} .ff{fill:var(--dv-flat);} .fn{fill:var(--dv-neg);}
.s1{stroke:var(--dv-1);} .s2{stroke:var(--dv-2);} .s3{stroke:var(--dv-3);}
.s4{stroke:var(--dv-4);}
.line{fill:none; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round;}
.fcast{stroke-dasharray:3.5 2.6;}
.band-fcast{fill:var(--dv-grid);}

/* horizontal bar primitive */
.hbars{display:flex; flex-direction:column; gap:7px;}
.hb{display:grid; grid-template-columns:96px 1fr 58px; align-items:center; gap:8px;}
/* In the 210px rail those fixed columns left roughly 40px of track — not a bar
   chart, a smear. Trim the label and value columns so the bar carries the read. */
.col-rail .hb{grid-template-columns:66px 1fr 38px; gap:6px;}
.col-rail .hb-l{font-size:0.71rem;}
.col-rail .hb-v{font-size:0.67rem;}
.col-rail .hb-t{height:11px;}
.hb-l{font-size:0.775rem; color:var(--ink-soft); line-height:1.2;}
.hb-t{background:var(--strip-bg); height:13px; position:relative;}
.hb-f{height:100%; background:var(--dv-1);}
.hb-f.alt{background:var(--dv-2);}
.hb-f.mut{background:var(--dv-3);}
.hb-f.warn{background:var(--dv-neg);}
.hb-v{
  font-family:Arial, Helvetica, sans-serif; font-size:0.715rem; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
}

/* --- 12. RAIL FURNITURE -------------------------------------------------- */
.byline{border-top:2px solid var(--band); padding-top:10px; margin-bottom:20px;}
.by-h{
  font-family:Arial, Helvetica, sans-serif; font-size:0.585rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:7px;
}
.by-n{
  font-family:Arial, Helvetica, sans-serif; font-size:0.82rem; font-weight:700;
  line-height:1.3;
}
.by-d{
  font-family:Arial, Helvetica, sans-serif; font-size:0.665rem; color:var(--ink-faint);
  line-height:1.62; margin-top:2px;
}
.rail-box{border:1px solid var(--rule-strong); margin-bottom:20px;}
.rail-box h4{
  font-family:Arial, Helvetica, sans-serif; font-size:0.635rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--band-ink);
  background:var(--band); padding:6px 11px;
}
.rail-box .rb-body{padding:11px; font-size:0.83rem;}
.rail-box .rb-body p{margin:0 0 8px;}
.rail-box .rb-body p:last-child{margin-bottom:0;}
.kv{width:100%; border-collapse:collapse; font-size:0.8rem;}
.kv td{padding:5px 0; border-bottom:1px solid var(--rule); vertical-align:top;}
.kv tr:last-child td{border-bottom:none;}
.kv td:first-child{color:var(--ink-faint); padding-right:9px;}
.kv td:last-child{
  text-align:right; font-family:Arial, Helvetica, sans-serif;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kv td.wrap{
  white-space:normal; text-align:left;
  font-family:"Times New Roman", Times, Georgia, serif;
}
.kv td.tagcell{width:1%; text-align:left; padding-right:6px;}

/* --- 13. CONFIDENCE TAGGING --------------------------------------------- */
.tag{
  font-family:Arial, Helvetica, sans-serif; font-size:0.545rem; font-weight:700;
  letter-spacing:0.05em; padding:1px 4px; border-radius:2px; vertical-align:2px;
  margin-left:3px; white-space:nowrap;
}
.tag-p{background:var(--accent-tint); color:var(--accent-ink);
       border:1px solid rgba(27,95,168,0.28);}
.tag-s{background:transparent; color:var(--ink-faint); border:1px solid var(--rule-strong);}
.tag-e{background:rgba(185,134,58,0.14); color:#7d5a20; border:1px solid rgba(185,134,58,0.4);}
.tag-u{background:rgba(156,58,46,0.10); color:var(--bad); border:1px solid rgba(156,58,46,0.35);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tag-e{color:#d8ab63;}
}
:root[data-theme="dark"] .tag-e{color:#d8ab63;}

/* --- 14. FULL-WIDTH SECTIONS -------------------------------------------- */
.wide{padding:26px 52px 6px; border-top:1px solid var(--rule-strong);}
.wide-h{
  display:flex; align-items:baseline; gap:10px; margin-bottom:12px;
}
.wide-h .n{
  font-family:Arial, Helvetica, sans-serif; font-size:0.66rem; font-weight:700;
  color:var(--accent); letter-spacing:0.06em;
}
.wide-h h2{font-size:1.14rem; font-weight:600;}
.two-col{columns:2; column-gap:34px; column-rule:1px solid var(--rule);}
@media (max-width:860px){.two-col{columns:1;}}
.two-col > *{break-inside:avoid;}

.cal{width:100%; border-collapse:collapse; font-size:0.82rem;}
.cal th{
  font-family:Arial, Helvetica, sans-serif; font-size:0.625rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint);
  text-align:left; padding:0 12px 5px 0; border-bottom:1px solid var(--rule-strong);
}
.cal td{padding:7px 12px 7px 0; border-bottom:1px solid var(--rule); vertical-align:top;}
.cal td:first-child{
  font-family:Arial, Helvetica, sans-serif; font-size:0.735rem; font-weight:700;
  white-space:nowrap; color:var(--accent-ink); width:1%;
}
.cal tr:last-child td{border-bottom:none;}

.debates{counter-reset:d; margin:0; padding:0; list-style:none;}
.debates > li{
  counter-increment:d; position:relative; padding-left:29px; margin-bottom:15px;
  break-inside:avoid;
}
.debates > li::before{
  content:counter(d); position:absolute; left:0; top:1px;
  font-family:Arial, Helvetica, sans-serif; font-size:0.7rem; font-weight:700;
  color:var(--band-ink); background:var(--accent);
  width:19px; height:19px; display:flex; align-items:center; justify-content:center;
}
.debates h3{font-size:0.97rem; font-weight:700; margin-bottom:4px;}
.debates p{margin:0 0 6px; font-size:0.9rem; max-width:70ch;}
.debates .verdict{
  border-left:2px solid var(--accent); padding-left:9px; font-size:0.9rem;
}
.debates .verdict b{color:var(--accent-ink);}

/* The politics block runs on the debates measure and rhythm, but its marker is
   the actor rather than a counter: the reader's first question in that section
   is who is acting, not which item it is. */
.politics{margin:0; padding:0; list-style:none;}
.politics > li{margin-bottom:15px; break-inside:avoid;}
.politics .actor{
  font-family:Arial, Helvetica, sans-serif; font-size:0.575rem; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--band-ink);
  background:var(--accent); padding:2px 6px; display:inline-block; margin-bottom:5px;
}
.politics h3{font-size:0.97rem; font-weight:700; margin-bottom:4px;}
.politics p{margin:0 0 6px; font-size:0.9rem; max-width:70ch;}
.politics .read{
  border-left:2px solid var(--accent); padding-left:9px; font-size:0.9rem;
}
.politics .read b{color:var(--accent-ink);}
.pol-intro{
  font-size:0.9rem; color:var(--ink-soft); max-width:74ch; margin:0 0 14px;
}

.falsify{margin:0; padding:0; list-style:none;}
.falsify li{
  padding:8px 0 8px 25px; border-bottom:1px solid var(--rule); position:relative;
  font-size:0.875rem; break-inside:avoid;
}
.falsify li:last-child{border-bottom:none;}
.falsify li::before{
  content:"\2192"; position:absolute; left:0; top:8px; color:var(--accent);
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
}

/* --- 15. BACK MATTER ----------------------------------------------------- */
.backmatter{
  padding:24px 52px 26px; border-top:2px solid var(--band);
  font-size:0.775rem; color:var(--ink-soft); line-height:1.55;
}
.backmatter h4{
  font-family:Arial, Helvetica, sans-serif; font-size:0.6rem; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-faint);
  margin:15px 0 6px;
}
.backmatter h4:first-child{margin-top:0;}
.backmatter p{margin:0 0 8px;}
/* Back matter used to run as a single 595px column inside a 1060px block, so
   the right 45% of the page sat empty. Two columns fill the measure and match
   how disclosures are set in published research. */
.bm-2{columns:2; column-gap:46px;}
.bm-2 > *{break-inside:avoid;}
/* The sources block is one long paragraph; it has to be allowed to flow
   across the column break or it leaves the second column empty. */
.bm-2.bm-flow > *{break-inside:auto;}
@media (max-width:700px){.bm-2{columns:1;}}
.notes{margin:0; padding:0; list-style:none; font-size:0.745rem; color:var(--ink-faint);}
.notes li{padding:3px 0 3px 20px; position:relative; line-height:1.5;}
.notes li .fn{
  position:absolute; left:0; color:var(--accent);
  font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:0.68rem;
}
.gloss{
  columns:3; column-gap:26px; font-size:0.745rem; color:var(--ink-faint);
  margin:0; padding:0; list-style:none;
}
@media (max-width:860px){.gloss{columns:2;}}
@media (max-width:560px){.gloss{columns:1;}}
.gloss li{padding:2px 0; break-inside:avoid;}
.gloss b{color:var(--ink-soft); font-family:Arial, Helvetica, sans-serif; font-size:0.93em;}

.colophon{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 52px; background:var(--band); color:var(--band-ink);
  font-family:Arial, Helvetica, sans-serif; font-size:0.615rem;
  letter-spacing:0.05em;
}
.colophon .r{text-align:right; opacity:0.8;}
.standing{
  padding:8px 52px; background:var(--strip-bg);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:Arial, Helvetica, sans-serif; font-size:0.6rem; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* --- 16. PRINT ----------------------------------------------------------- */
@media print{
  body{background:#fff; font-size:9.6pt;}
  .page{max-width:none; box-shadow:none; margin:0;}
  .banner{background:#002949 !important; -webkit-print-color-adjust:exact;
          print-color-adjust:exact;}
  .wordmark{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .colophon{background:#002949 !important; -webkit-print-color-adjust:exact;
            print-color-adjust:exact;}
  .exhibit, .debates > li, .politics > li, .falsify li,
  .cal tr{break-inside:avoid;}
  /* On a printed page the auto-fit strip wrapped to a ragged second row with a
     dangling divider. Keep the metrics on one line and tighten their padding. */
  p, li{orphans:2; widows:2;}
  .rule-head, .wide-h, .sub-head, .backmatter h4, h2, h3{break-after:avoid;}
  .strip{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr;}
  .metric{padding:11px 10px 12px;}
  /* Narrower print cells wrap the labels further, so reserve three lines for
     every label and the values stay on one line across the strip. */
  .m-label{min-height:4.05em;}
  .m-value{font-size:1.2rem;}
  .wide{break-before:auto;}
  @page{margin:20mm 18mm;}
}

/* --- 17. NARROW SCREENS: pull the wide gutters back in ------------------- */
@media (max-width:700px){
  .page{margin:0 auto 32px;}
  .banner{padding:18px 22px 20px;}
  .wordmark{height:36px;}
  .strip{padding:0 22px;}
  .col-main{padding:22px 22px 8px;}
  .col-rail{padding:6px 22px 8px;}
  .wide{padding:20px 22px 4px;}
  .backmatter{padding:20px 22px 22px;}
  .colophon{padding:10px 22px;}
  .standing{padding:8px 22px;}
}

/* ---- web variant only: article chrome the standalone file does not need ---- */
.kr-independence{
  font-family:Arial, Helvetica, sans-serif; font-size:0.7rem; letter-spacing:0.04em;
  color:var(--ink-faint); padding:10px 52px; border-bottom:1px solid var(--rule);
}
.kr-gate{padding:34px 52px 40px; border-top:2px solid var(--band);
  background:var(--strip-bg);}
.kr-gate-inner{max-width:52ch;}
.kr-gate-label{
  font-family:Arial, Helvetica, sans-serif; font-size:0.6rem; font-weight:700;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;
}
.kr-gate h2{font-size:1.18rem; font-weight:600; margin-bottom:8px;}
.kr-gate p{font-size:0.9rem; margin:0 0 14px;}
.kr-form label{
  display:block; font-family:Arial, Helvetica, sans-serif; font-size:0.66rem;
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint); margin:12px 0 4px;
}
.kr-form input, .kr-form textarea{
  width:100%; box-sizing:border-box; padding:9px 10px; font-size:0.9rem;
  font-family:inherit; border:1px solid var(--rule-strong); background:var(--paper);
  color:var(--ink);
}
.kr-form button{
  margin-top:14px; padding:10px 22px; font-family:Arial, Helvetica, sans-serif;
  font-size:0.78rem; font-weight:700; letter-spacing:0.06em; border:none;
  background:var(--accent); color:#fff; cursor:pointer;
}
.kr-price{font-size:0.82rem; color:var(--ink-soft);}
.kr-note{font-size:0.78rem; color:var(--ink-faint); margin-top:14px;}
.kr-log{padding:26px 52px 40px;}
.kr-log h2{font-size:1.14rem; font-weight:600; margin-bottom:14px;}
.kr-log ol{list-style:none; margin:0; padding:0;}
.kr-log li{padding:14px 0; border-bottom:1px solid var(--rule);}
.kr-log li:last-child{border-bottom:none;}
.kr-log .d{
  font-family:Arial, Helvetica, sans-serif; font-size:0.66rem; font-weight:700;
  letter-spacing:0.06em; color:var(--accent); text-transform:uppercase;
}
.kr-log h3{font-size:1.0rem; font-weight:700; margin:3px 0 4px;}
.kr-log h3 a{color:inherit; text-decoration:none;}
.kr-log h3 a:hover{text-decoration:underline;}
.kr-log p{font-size:0.88rem; color:var(--ink-soft); margin:0; max-width:74ch;}
.kr-log .free{
  font-family:Arial, Helvetica, sans-serif; font-size:0.6rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:#fff;
  background:var(--accent); padding:2px 6px; margin-left:8px;
}
/* ---- legal pages and footer (7 Oct 2026) */
.kr-legal{padding:34px 52px 56px; max-width:74ch;}
.kr-legal h1{font-size:1.5rem; font-weight:600; margin:4px 0 4px;}
.kr-legal h2{font-size:1.02rem; font-weight:700; margin:22px 0 6px;}
.kr-legal p{font-size:0.95rem; margin:0 0 10px;}
.kr-eff{font-family:Arial, Helvetica, sans-serif; font-size:0.72rem; color:var(--ink-faint);}
.kr-footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px;
  padding:16px 52px 22px; border-top:1px solid var(--rule); font-family:Arial, Helvetica,
  sans-serif; font-size:0.7rem; color:var(--ink-faint);}
.kr-footer a{color:var(--ink-soft);}
@media (max-width:700px){ .kr-legal, .kr-footer{padding-left:22px; padding-right:22px;} }
/* ---- paywall teaser (7 Oct 2026): the locked text is scrambled server-side */
.kr-locked{filter:blur(5px); -webkit-filter:blur(5px); user-select:none;
  -webkit-user-select:none; pointer-events:none;}
.col-main .kr-gate{padding:24px 26px 26px; margin:18px 0 30px;
  border:1px solid var(--rule-strong); border-top:3px solid var(--band);}
.kr-gate .kr-buy{margin-top:4px;}
.kr-soon{font-size:0.86rem;}
.kr-sticky{position:sticky; bottom:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:12px 52px; background:var(--band);
  color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:0.8rem;}
.kr-sticky b{font-weight:700;}
.kr-sticky-btn{background:var(--accent); color:#fff; padding:9px 16px; font-weight:700;
  text-decoration:none; white-space:nowrap; letter-spacing:0.03em;}
.kr-subbar{display:flex; justify-content:space-between; gap:12px; padding:9px 52px;
  font-family:Arial, Helvetica, sans-serif; font-size:0.72rem; color:var(--ink-soft);
  background:var(--strip-bg); border-bottom:1px solid var(--rule);}
.kr-subbar a{color:var(--accent);}
.kr-account{padding:34px 52px 64px; max-width:62ch;}
.kr-account h2{font-size:1.3rem; font-weight:600; margin-bottom:10px;}
.kr-acct-list{margin:6px 0 18px; padding-left:18px;}
.kr-acct-list li{margin:4px 0;}
.kr-btn{display:inline-block; padding:9px 18px; background:var(--accent); color:#fff;
  font-family:Arial, Helvetica, sans-serif; font-size:0.78rem; font-weight:700;
  text-decoration:none;}
@media (max-width:700px){
  .kr-independence, .kr-gate, .kr-log, .kr-account{padding-left:22px; padding-right:22px;}
  .kr-sticky, .kr-subbar{padding-left:16px; padding-right:16px;}
  .kr-sticky span{display:none;}
}