/* Shared stylesheet for SatSites and its four sites: Fast Facts, Fast Stats, Fast Acts, and Fast News for Sats.
   Colors are tokens; the dark set follows the OS setting. Charts use the same tokens (lib/chartstyle.py).
   The five sites share the type, the buttons, and the spacing; each has an accent color of its own (below). */

:root {
  color-scheme: light dark;
  /* Brand: the coin renders are copper-orange on deep navy with a cyan rim. Navy carries the header
     and footer on every page; orange is the accent; blue is for links and the second chart series. */
  --navy: #071829;             /* header and footer band, the logo background */
  --navy-ink: #ffffff;
  --navy-muted: #a9b6c8;
  --brand: #f97e1b;            /* the wordmark orange, for marks on navy and large figures */
  --brand-ink: #b85300;        /* orange dark enough to read as small text on white */
  --page: #f6f7f9;
  --surface: #ffffff;
  --ink: #0b1220;
  --ink-2: #4a5565;
  --muted: #67727f;
  --hairline: #e3e6eb;
  --rule: #c6ccd6;
  --accent: #0b63b5;           /* links, categorical slot 2 */
  --accent-2: #dd6a08;         /* categorical slot 1 (the brand orange, deepened for white backgrounds) */
  --good: #1d7a1d;
  --wash: #eaf2fb;
  --placement: #fff4ea;
  --now: #dd6a08;              /* a comparison's latest period: chart color 1 */
  --then: #a7b6c6;             /* its earlier period, kept quiet so the latest one stands out */
  --shadow: 0 1px 2px rgba(11, 18, 32, 0.05), 0 10px 28px rgba(11, 18, 32, 0.06);
  --edge: rgba(11, 18, 32, 0.2);  /* the soft shadow at the edge of a table that scrolls sideways */
  /* the charts' series colors, in their fixed order (lib/chartstyle.py draws the pictures with the same eight) */
  --series-0: #dd6a08; --series-1: #1a6fb5; --series-2: #0f8f7a; --series-3: #b08400;
  --series-4: #d5588f; --series-5: #2e8b2e; --series-6: #6b5bd2; --series-7: #d9453d;
  --series-ink: #4a5565;       /* a reference line that is not a series of its own (dollars paid in) */
  --frame: 1080px;             /* the header, the footer, home pages, and charts */
  --measure: 720px;            /* a column of text */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Each site's accent: Facts blue, Stats orange, Acts green, News plum. The first of each pair is dark enough for
     small text and for a button with white words on it; the second is bright enough for a mark on the navy band. A
     page takes its own site's pair as --brand-ink and --brand (the rules under the dark set), and the front door
     shows all four. */
  --c-facts: #0b63b5; --c-facts-navy: #5cc3ff;
  --c-stats: #b85300; --c-stats-navy: #f97e1b;
  --c-acts: #067f5c;  --c-acts-navy: #2cce99;
  --c-news: #a12d8f;  --c-news-navy: #dd6fc6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #050f1c;
    --navy-ink: #ffffff;
    --navy-muted: #a9b6c8;
    --brand: #ffa14a;
    --brand-ink: #ffa14a;
    --page: #0b1a2b;
    --surface: #122238;
    --ink: #f2f5f9;
    --ink-2: #c0c9d6;
    --muted: #8794a6;
    --hairline: #22344d;
    --rule: #2f4563;
    --accent: #5cc3ff;
    --accent-2: #ffa14a;
    --good: #5fd35f;
    --wash: #16293f;
    --placement: #2a2117;
    --series-0: #f08020; --series-1: #2f9ae8; --series-2: #1aa88f; --series-3: #d1a414;
    --series-4: #dc669e; --series-5: #3ab543; --series-6: #9386ee; --series-7: #ed5b53;
    --series-ink: #c0c9d6;
    --now: #f08020;
    --then: #4f6788;
    --shadow: none;
    --edge: rgba(0, 0, 0, 0.55);
    --c-facts: #5cc3ff; --c-facts-navy: #5cc3ff;
    --c-stats: #ffa14a; --c-stats-navy: #ffa14a;
    --c-acts: #2cce99;  --c-acts-navy: #2cce99;
    --c-news: #dd6fc6;  --c-news-navy: #dd6fc6;
  }
}
/* The accent a site wears: the rule under its header, its menu's underline, its buttons, its small labels.
   Stats keeps the wordmark orange (the tokens above). The front door is neutral, and its header rule is the four
   sites' colors side by side. Links stay the same blue on every site. */
body[data-site="facts"] { --brand: var(--c-facts-navy); --brand-ink: var(--c-facts); }
body[data-site="acts"] { --brand: var(--c-acts-navy); --brand-ink: var(--c-acts); }
body[data-site="news"] { --brand: var(--c-news-navy); --brand-ink: var(--c-news); }
body[data-site="satsites"] { --brand: #ffffff; --brand-ink: #071829; }
@media (prefers-color-scheme: dark) { body[data-site="satsites"] { --brand: #e9eef5; --brand-ink: #e9eef5; } }
body[data-site="satsites"] .site-header { border-image: linear-gradient(to right, var(--c-facts-navy) 0 25%, var(--c-stats-navy) 25% 50%, var(--c-acts-navy) 50% 75%, var(--c-news-navy) 75% 100%) 1; }
/* Anything that belongs to one of the four sites, wherever it is shown, carries that site's color with it */
.of-facts { --site: var(--c-facts); --site-navy: var(--c-facts-navy); }
.of-stats { --site: var(--c-stats); --site-navy: var(--c-stats-navy); }
.of-acts { --site: var(--c-acts); --site-navy: var(--c-acts-navy); }
.of-news { --site: var(--c-news); --site-navy: var(--c-news-navy); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }      /* a class that sets display must not bring back something the page hides */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img, svg, video { max-width: 100%; height: auto; }
.wrap { max-width: var(--frame); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: #ffffff; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

/* Header: the navy band the logos were drawn on. Two rows on a screen wider than 1010 px (the strip of the five
   sites and the line that says what this one is for; then the logo and the menu), so the first screen is left for
   the page itself. Three rows below that (the media rule further down). The strip is the same on every page of all
   five sites: SatSites Home, Facts, Stats, Acts, News, with the site the reader is on in white, underlined in its
   color. */
.site-header { background: var(--navy); color: var(--navy-ink); border-bottom: 3px solid var(--brand); }
.site-header .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "brand nav"; align-items: center; column-gap: 28px; row-gap: 8px; padding-top: 9px; padding-bottom: 11px; }
/* the strip and the promise line share the top row from edge to edge (one at each end), so the strip's width never
   takes room from the menu in the row under it */
.family { grid-area: top; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; color: var(--navy-muted); }
.family a { color: var(--navy-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.family a:hover { color: var(--navy-ink); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.35); }
.family a.family-current { color: var(--navy-ink); font-weight: 600; box-shadow: 0 2px 0 var(--brand); }      /* a line under the name that takes no room, so the header is no taller than it was */
.family-coin { width: 18px; height: 18px; border-radius: 50%; }
.site-header picture, .site-footer picture { display: contents; }   /* the WebP-or-PNG wrapper takes no part in the layout, */
picture > source { display: none; }                                  /* and neither does the line inside it that names the WebP copy */
.family-sep { color: var(--navy-muted); opacity: 0.6; }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 12px; color: var(--navy-ink); text-decoration: none; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-coin { width: 46px; height: 46px; flex: none; }
.brand-word { height: 28px; width: auto; display: block; }
.tagline { grid-area: top; justify-self: end; margin: 0; color: var(--navy-muted); font-size: 14px; text-align: right; }
.site-nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 18px; font-size: 15px; }
.site-nav a { color: var(--navy-ink); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="true"] { border-bottom-color: var(--brand); }
.nav-more { display: none; }                 /* the narrow menu's "more this way" arrow (below) */
.nav-more::before { content: "\203A"; }      /* drawn here, so the menu's own text is only its links */
/* Narrower than about 1000 px (a tablet, a phone, or a desktop zoomed in) the menu no longer fits beside the logo, so
   the header stacks into three short rows and the promise line gives way; a home page's headline makes the promise. */
@media (max-width: 1010px) {
  .site-header .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "brand" "nav"; row-gap: 6px; }
  .tagline { display: none; }
  .site-nav { justify-content: flex-start; }
}
/* Narrower than 700 px the menu is one row that scrolls sideways. Without scripts it fades out at the right edge.
   With scripts (base.html) a small arrow sits over that edge while there is more that way; the arrow shares the
   menu's place in the header and is not part of the row, so nothing moves when it comes or goes. */
@media (max-width: 700px) {
  .site-nav { flex-wrap: nowrap; gap: 0 18px; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 34px;
              -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; flex: none; }
  .site-nav.has-hint { -webkit-mask-image: none; mask-image: none; }
  .nav-more:not([hidden]) { display: block; grid-area: nav; justify-self: end; align-self: center; z-index: 1; margin-right: -20px; padding: 2px 16px 4px 30px;
                            font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--brand); pointer-events: none;
                            background: linear-gradient(to right, rgba(7, 24, 41, 0), var(--navy) 50%); }
}
@media (max-width: 600px) { .site-nav { margin-right: -16px; } .nav-more:not([hidden]) { margin-right: -16px; padding-right: 12px; } }
@media (max-width: 540px) { .family { gap: 2px 7px; } .family .family-coin { display: none; } }      /* on a phone the strip is its five names, in one row */
@media (max-width: 384px) { .family { font-size: 13px; gap: 2px 5px; } }      /* the five names stay one row as the phone narrows, */
@media (max-width: 350px) { .family { font-size: 12px; gap: 2px 4px; } }      /* down to the narrowest */

/* Content */
main.wrap { padding-top: 28px; padding-bottom: 56px; }
.prose { max-width: var(--measure); margin-inline: auto; }
.prose h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 8px; }
.prose h2 { font-size: 24px; line-height: 1.25; margin: 36px 0 10px; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose h2 .step { display: block; margin-bottom: 2px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink); font-weight: 600; }   /* "Step 1" above a step heading */
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.prose th { color: var(--ink-2); font-weight: 600; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose blockquote { margin: 0 0 16px; padding: 0 0 0 14px; border-left: 3px solid var(--rule); color: var(--ink-2); }
.prose code { font-family: var(--mono); font-size: 0.92em; background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px; }
.prose pre { background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; padding: 12px 14px; overflow: auto; font-size: 14px; }
.prose pre code { border: 0; padding: 0; background: none; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }
.page-head { margin-bottom: 20px; }
.eyebrow { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink); font-weight: 600; }
.eyebrow a { color: inherit; text-decoration: none; }
.updated { margin: 0; color: var(--muted); font-size: 14px; }
.lead { font-size: 20px; color: var(--ink-2); }
.understand-first { background: var(--wash); border-radius: 6px; padding: 10px 14px; }
.disclosure { color: var(--ink-2); font-size: 14px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 8px 0; }
.page-list { list-style: none; padding: 0; }
.page-list li { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.page-list a { font-weight: 600; }
.page-list-desc { display: block; color: var(--ink-2); font-size: 15px; }

/* Live figures (shared/static/live.js replaces the text when the API answers) */
.live { font-variant-numeric: tabular-nums; }
.live-when { color: var(--muted); font-size: 14px; }

/* Three-site cards on home pages */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 24px 0; padding: 0; list-style: none; }
.cards li { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 16px; margin: 0; }
.cards strong { display: block; margin-bottom: 4px; }
.cards a { text-decoration: none; }
.cards a:hover { text-decoration: underline; }

/* Charts */
figure.chart { margin: 0 0 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px; }
figure.chart img { display: block; width: 100%; height: auto; border-radius: 4px; }
figure.chart figcaption { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
details.embed { margin: 0 0 24px; font-size: 15px; }
details.embed summary { cursor: pointer; color: var(--accent); }
details.embed pre { font-size: 13px; }

/* Embeds: what another site would show, the code for it, and the copy button */
.embed-preview { margin: 0 0 12px; padding: 14px; background: var(--surface); border: 1px dashed var(--rule); border-radius: 8px; overflow-wrap: anywhere; }
.embed-preview p { margin: 8px 0 0; }
.embed-form { margin-bottom: 12px; }
.embed-form .converter-row:last-child { margin-bottom: 0; }
.embed-form input[type="text"] { width: 280px; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.copy { font: inherit; font-size: 15px; font-weight: 600; padding: 7px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.copy:hover { border-color: var(--accent); }
.copy-done { color: var(--good); font-size: 14px; }

/* Affiliate placement boxes */
.placements { margin: 28px 0; display: grid; gap: 12px; }
.placement { background: var(--placement); border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 16px; }
.placement p { margin: 0 0 6px; }
.placement-head { font-size: 18px; font-weight: 600; }
.placement-cta a { font-weight: 600; }
.placement-tag { font-size: 13px; color: var(--muted); margin-left: 6px; }

/* Sources */
.sources { max-width: var(--measure); margin: 36px auto 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--ink-2); }
.band .sources { max-width: none; margin-inline: 0; }
.sources h2 { font-size: 16px; margin: 0 0 8px; }
.sources ul { margin: 0; padding-left: 20px; }
.sources li + li { margin-top: 5px; }   /* two short links, one under the other, are easier to tap apart on a phone */

/* Footer: the same navy band */
.site-footer { background: var(--navy); color: var(--navy-muted); font-size: 14px; }
.site-footer .wrap { padding-top: 22px; padding-bottom: 30px; }
.site-footer p { margin: 0 0 8px; }
.site-footer a { color: #d6deea; }
.site-footer a:hover { color: var(--navy-ink); }
.attribution { margin: 0 0 8px; padding: 0; list-style: none; }
.attribution li { margin-bottom: 4px; }
.sats-line { color: var(--navy-ink); }
.family-part, .site-footer .family-part { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--navy-ink); font-weight: 600; }
.family-part a { color: var(--navy-ink); }
.family-part + .family-footer { margin-top: 0; padding-top: 0; border-top: 0; }
.family-footer { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 14px 0 12px; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.family-footer li { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.family-footer a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--navy-ink); font-weight: 600; }
.family-footer a:hover { text-decoration: underline; }
.family-footer span { color: var(--navy-muted); font-weight: 400; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; padding: 0; }   /* privacy, affiliate disclosure, terms, contact */
.footer-links li { margin: 0; }
.colophon { color: var(--navy-muted); opacity: 0.85; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* wide comparison tables scroll sideways instead of widening the page */
  .prose h1 { font-size: 28px; }
  .wrap { padding: 0 16px; }
  .brand { font-size: 22px; gap: 10px; }
  .brand-coin { width: 38px; height: 38px; }
  .brand-word { height: 23px; }
}
@media print {
  .site-nav, .skip, details.embed { display: none; }
  body { background: #fff; color: #000; }
}

/* Stats: the labels over the live figures (the figures themselves are in the strip, further down) */
.big-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.big-credit { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }   /* a source's credit right under its figure */
.big-credit a { text-decoration: underline; }

/* Stats: tables of numbers, galleries, grids */
.more { font-size: 15px; }
table.numbers { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 15px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
table.numbers th, table.numbers td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.numbers th { color: var(--ink-2); font-weight: 600; }
table.numbers tbody tr:last-child td, table.numbers tbody tr:last-child th { border-bottom: 0; }
table.numbers .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.numbers tr.now td { font-weight: 600; }
@media (min-width: 700px) { table.numbers td.price { white-space: nowrap; } }   /* narrower than this the month wraps under the price, so the table never outgrows the page */
table.numbers tr.group th { background: var(--page); color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 12px; }
table.numbers tbody + tbody tr.group th { border-top: 1px solid var(--hairline); }
/* On a phone a table of numbers must show its figures: tighter cells, headings that wrap so a column is only as wide
   as its figures, and, if it is still too wide, sideways scrolling. It is never cut off at the edge. */
@media (max-width: 600px) {
  table.numbers { font-size: 14px; }
  table.numbers th, table.numbers td { padding: 8px 7px; }
  table.numbers th.num { white-space: normal; }
  .prose table.numbers { overflow-x: auto; overflow-y: hidden; }
  /* a soft shadow at the edge a table can still be scrolled toward, so a reader knows there is more that way;
     the first two layers travel with the table's contents and cover the shadow when that end is reached */
  .prose table, .prose table.numbers {
    background-image: linear-gradient(to right, var(--cover) 30%, transparent), linear-gradient(to left, var(--cover) 30%, transparent),
                      linear-gradient(to right, var(--edge), transparent), linear-gradient(to left, var(--edge), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .prose table { --cover: var(--page); }
  .prose table.numbers { --cover: var(--surface); }
}
@media (max-width: 340px) {
  table.numbers { font-size: 13px; }
  table.numbers th, table.numbers td { padding: 7px 5px; }
}
.small { font-size: 14px; color: var(--ink-2); }
.gallery { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gallery li { margin: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 4px; }
.gallery strong { display: block; margin: 8px 0 2px; }
.gallery a { text-decoration: none; color: var(--ink); }
.gallery a:hover strong { color: var(--accent); }
.gallery p { margin: 0; font-size: 14px; color: var(--ink-2); }
.link-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rate { margin: -6px 0 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* the sats-per-unit line under a currency heading */
.amount-grid { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; font-size: 15px; }
.amount-grid li { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; min-width: 0; }
.amount-grid span { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Stats: converter */
.converter { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 16px 18px; margin: 0 0 24px; }
.converter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.converter label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); min-width: 64px; }
.converter input, .converter select { font: inherit; font-size: 20px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--page); color: var(--ink); min-width: 0; }
.converter input { width: 200px; max-width: 100%; }
.converter-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; margin: 4px 0 14px; }
.converter output { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
#conv-money { font-size: 20px; font-weight: 600; }

/* Columns that can go on a phone */
@media (max-width: 480px) {
  .hide-sm { display: none; }
}

/* Acts: the campaign checklist, the newsletter block, buttons */
.acts { list-style: none; counter-reset: act; padding: 0; margin: 20px 0 28px; }
.acts li { counter-increment: act; position: relative; padding: 14px 16px 14px 62px; margin: 0 0 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
.acts li::before { content: counter(act); position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: var(--brand); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.acts strong { display: inline; }
.acts strong a { color: inherit; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.acts strong a:hover { color: var(--accent); }
.newsletter { margin: 36px 0 0; padding: 18px 20px; background: var(--wash); border-radius: 10px; }
.newsletter h2 { margin: 0 0 8px; font-size: 22px; }
.newsletter p { margin: 0 0 10px; }
.newsletter-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.button { display: inline-block; background: var(--brand-ink); color: #fff; font: inherit; font-weight: 600; line-height: 1.25; text-decoration: none; padding: 11px 18px; border: 0; border-radius: 8px; cursor: pointer; }
.button:hover { text-decoration: none; filter: brightness(1.08); }
.button.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.button.quiet:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: none; }
@media (prefers-color-scheme: dark) { .button { background: var(--brand); color: var(--navy); } .button.quiet { background: transparent; color: var(--ink); } }
@media (max-width: 480px) {
  .acts li { padding-left: 54px; }
  .acts li::before { left: 10px; width: 30px; height: 30px; font-size: 15px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Home pages (the improvement plan, October 2026): one headline, one main visual, one main action on the first
   screen; then bands of cards. Everything stacks on a phone.
   --------------------------------------------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 44px; align-items: center; margin: 2px 0 26px; }
.hero h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; }
.hero .lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0 0 20px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.hero-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); max-width: 38em; }
.hero-note .live { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }   /* the live figure reads at a glance */
.hero-solo { grid-template-columns: minmax(0, 1fr); }        /* a hero with no picture beside it */
.hero-solo .hero-text { max-width: 760px; }
.hero-visual figure.art { margin: 0; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* A hero whose cards belong to the first screen (Facts): the cards run under the text and the picture; on a phone
   they come before the picture, which then leads into the rest of the page. */
.hero-cards { grid-template-areas: "text visual" "below below"; margin-bottom: 0; }
.hero-cards .hero-text { grid-area: text; }
.hero-cards .hero-visual { grid-area: visual; }
.hero-cards .hero-below { grid-area: below; margin-top: 6px; }
@media (max-width: 900px) { .hero-cards { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 28px; } }
@media (max-width: 720px) { .hero-cards { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "below" "visual"; gap: 22px; } .hero-cards .hero-below { margin-top: 0; } }

.band { margin: 44px 0 0; }
.band > h2, .band-split h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; }
.band .prose { margin-inline: 0; }                            /* a band's text starts at the frame's left edge */
.band-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; }
@media (max-width: 900px) { .band-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .band { margin-top: 34px; } .band > h2, .band-split h2 { font-size: 23px; } .hero .lead { font-size: 18px; } }

/* The quoted line: the short comment that goes with a picture or a chart, in quotation marks, with no name on it */
.quoted-line { margin: 0; color: var(--ink-2); }
.bridge, .prose .bridge { font-size: 19px; font-weight: 600; line-height: 1.35; margin: 0 0 14px; }

/* Illustrations (shared/art.yml): the whole picture at its 3:2 shape, with the caption as real text */
figure.art { margin: 24px 0; }
figure.art img { display: block; width: 100%; height: auto; border-radius: 12px; background: #0e2137; }
figure.art figcaption { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
figure.art.art-inset { max-width: 520px; }                     /* a smaller picture, lined up with the text */
/* A chart page's opener: the question and the bridge beside the picture, so the chart is still on the first screen.
   On a phone the picture is small, with its quoted line beside it, between the question and the bridge, so the chart
   starts on the first screen there too. The picture is the whole picture, only smaller: nothing is cropped. */
.opener { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-rows: auto 1fr; grid-template-areas: "question art" "bridge art"; gap: 12px 28px; align-items: start; margin: 0 0 18px; }
.opener .lead { grid-area: question; margin: 6px 0 0; }
.opener .bridge { grid-area: bridge; margin: 0; }
.opener figure.art { grid-area: art; margin: 0; }
@media (max-width: 640px) {
  .opener { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "question" "art" "bridge"; gap: 12px; margin-bottom: 14px; }
  .opener .lead { margin-top: 0; }
  .opener figure.art { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; align-items: center; }
  .opener figure.art img { border-radius: 9px; }
  .opener figure.art figcaption { margin-top: 0; font-size: 14.5px; line-height: 1.4; }
  .opener .bridge { font-size: 17px; }
}

/* Stats: the first-screen comparison. A group of radio buttons picks the view; the three views are all in the page,
   so it works with scripts off, and a browser without :has() shows them one after another. */
.compare { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px 14px; box-shadow: var(--shadow); }
.seg { display: none; }                      /* shown only where the browser can act on it (below) */
.seg label { position: relative; padding: 7px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cmp-view > h3 { margin: 14px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
@supports selector(:has(*)) {
  .seg { display: inline-flex; gap: 2px; margin: 0 0 6px; padding: 3px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--page); min-width: 0; }
  .seg label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 18, 32, 0.14); }
  .seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
  .compare:has(input[value="today"]:checked) .cmp-view:not([data-view="today"]),
  .compare:has(input[value="y1"]:checked) .cmp-view:not([data-view="y1"]),
  .compare:has(input[value="y5"]:checked) .cmp-view:not([data-view="y5"]) { display: none; }
  /* Beside the headline (a wide screen) the three views share one cell, so the panel is as tall as the tallest and
     the headline does not move when the view changes. Stacked under the headline, the panel is as tall as its view. */
  @media (min-width: 901px) {
    .cmp-views { display: grid; }
    .cmp-view { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
    .cmp-view .cmp-takeaway { margin-top: auto; }
    .compare:has(input[value="today"]:checked) .cmp-view:not([data-view="today"]),
    .compare:has(input[value="y1"]:checked) .cmp-view:not([data-view="y1"]),
    .compare:has(input[value="y5"]:checked) .cmp-view:not([data-view="y5"]) { display: flex; visibility: hidden; }
  }
  .cmp-view > h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* A browser without :has() shows the three views one after another under their headings; the headline then lines up
   with the top of the tall panel instead of floating beside its middle. */
@supports not selector(:has(*)) { .hero { align-items: start; } }
.cmp-row { padding: 10px 0 9px; border-top: 1px solid var(--hairline); }
.cmp-view > h3 + .cmp-row { border-top: 0; }
.cmp-what { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 0 0 5px; font-weight: 600; }
.cmp-what a { color: var(--ink); text-decoration-color: var(--rule); }
.cmp-what a:hover { color: var(--accent); }
.cmp-change { font-weight: 400; font-size: 14px; color: var(--ink-2); }
.cmp-bar { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.cmp-when { color: var(--muted); white-space: nowrap; }
.cmp-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* thin bars from one baseline, rounded only at the data end; the room kept free on the right holds the figure */
.bar { display: block; flex: none; height: 14px; min-width: 3px; width: calc((100% - 8.2em) * var(--f)); border-radius: 0 4px 4px 0; background: var(--then); transform-origin: left center; }
.cmp-now .bar { background: var(--now); }
.cmp-val { white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-now .cmp-val { font-weight: 700; }
.cmp-single { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; }
.cmp-figure { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.cmp-note { display: block; font-size: 13px; color: var(--muted); }
.cmp-takeaway { margin: 4px 0 4px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 17px; font-weight: 600; line-height: 1.4; }
.cmp-dates { margin: 0; font-size: 13px; color: var(--muted); }
.cmp-missing { margin: 2px 0 0; font-size: 13px; color: var(--muted); }      /* the source skipped the matching earlier period */
@media (prefers-reduced-motion: no-preference) {
  .cmp-view .bar { animation: bar-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes bar-grow { from { transform: scaleX(0); } }
}
@media (max-width: 420px) {
  .compare { padding: 14px 14px 12px; } .seg label { padding: 7px 11px; } .bar { width: calc((100% - 7.4em) * var(--f)); }
  .cmp-what:not(.cmp-single) { display: block; } .cmp-what:not(.cmp-single) .cmp-change { display: block; }   /* on a phone the change sits under the name on every row */
}
@supports selector(:has(*)) {
  @media (max-width: 350px) { .seg { display: flex; } .seg label { flex: 1 1 auto; padding: 7px 4px; font-size: 14px; text-align: center; } }
}

/* Stats: the live figures as one compact strip */
.strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 13px 18px 12px; margin: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; }
.strip > div { min-width: 0; }
.strip .big-label { font-size: 12px; white-space: nowrap; }
.strip-value { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; }
.strip-value a { text-decoration: none; }
.strip-when { margin: 8px 2px 0; color: var(--muted); font-size: 13px; }
@media (max-width: 600px) { .strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .strip .big-label { white-space: normal; } }

/* Stats: three stories, each opened by the whole card */
.stories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.story { position: relative; display: flex; flex-direction: column; margin: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.story:hover { border-color: var(--rule); box-shadow: var(--shadow); }
.story picture img { display: block; width: 100%; height: auto; }      /* the whole picture, never cropped */
.story-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.story h3 { margin: 0; font-size: 20px; line-height: 1.22; }
.story h3 a { color: var(--ink); text-decoration: none; }
.story h3 a::after { content: ""; position: absolute; inset: 0; }
.story:hover h3 a { color: var(--accent); }
.story .quoted-line { font-size: 15px; }
.story-fact { margin: 0; font-size: 15px; color: var(--ink); }               /* the fact first: the chart's own finding */
.story-cta { margin-top: auto; padding-top: 4px; font-weight: 600; color: var(--accent); }
.story-figure { display: flex; flex-direction: column; justify-content: center; aspect-ratio: 3 / 2; max-height: 250px; padding: 14px 16px; background: var(--wash); }   /* the story told by two bars instead of a picture */
.story-figure .cmp-bar { grid-template-columns: 4.2em minmax(0, 1fr); margin: 5px 0; }
.story-figure .cmp-when { color: var(--ink-2); }              /* the muted gray is too faint on the tinted panel */
.story-figure .bar { width: calc((100% - 7.6em) * var(--f)); height: 20px; }
.story-figure-title { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.story-figure-note { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .stories { grid-template-columns: minmax(0, 1fr); } }
/* On a tablet a card runs sideways: the picture (whole, at its own shape) beside the words. */
@media (min-width: 640px) and (max-width: 900px) {
  .story { flex-direction: row; align-items: center; }
  .story picture, .story-figure { flex: 0 0 44%; min-width: 0; }
  .story-figure { align-self: stretch; aspect-ratio: auto; }
}

/* Facts: question cards that open to a short answer */
.questions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.questions > li { margin: 0; }
.question { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; }
.question[open] { box-shadow: var(--shadow); }
.question summary { position: relative; list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; font-size: 20px; font-weight: 700; line-height: 1.25; border-radius: 14px; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; position: absolute; right: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; background: var(--wash); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; line-height: 1; }
.question[open] summary::after { content: "\2212"; }
.question summary:hover { color: var(--accent); }
.answer { padding: 0 18px 16px; }
.answer dl { margin: 0; }
.answer dt { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink); font-weight: 700; }
.answer dt:first-child { margin-top: 0; }
.answer dd { margin: 0; }
.answer-more { margin: 12px 0 0; font-weight: 600; }
@media (max-width: 900px) { .questions { grid-template-columns: minmax(0, 1fr); gap: 10px; } .question summary { font-size: 19px; } }

/* Facts: the five-minute guide and its knowledge check */
.route, .prose .route { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: stop; }
.stop, .prose .stop { position: relative; margin: 0; padding: 20px 0 18px 58px; border-top: 1px solid var(--hairline); counter-increment: stop; }
.stop::before { content: counter(stop); position: absolute; left: 0; top: 20px; width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stop h2 { margin: 0 0 10px; font-size: 24px; }
.stop-more, .prose .stop-more { margin: 0; font-weight: 600; }
.minute, .prose .minute { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink); font-weight: 700; }
@media (max-width: 480px) { .stop, .prose .stop { padding-left: 46px; } .stop::before { width: 32px; height: 32px; font-size: 16px; } }
.check { margin: 28px 0 0; }
.check fieldset { margin: 0 0 12px; padding: 12px 16px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); min-width: 0; }
.check legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; font-weight: 700; }     /* floated, so a long question wraps inside the card, not across its border */
.check legend + * { clear: both; }
.check label { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; cursor: pointer; }
.check input[type="radio"] { flex: none; margin: 0; accent-color: var(--brand-ink); transform: translateY(1px); }
.check .why { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.check .verdict { font-weight: 700; color: var(--ink); }
.check details { margin: 8px 0 0; font-size: 15px; }
.check details summary { cursor: pointer; color: var(--accent); }
.check fieldset[data-state="right"] { border-left: 5px solid var(--good); }
.check fieldset[data-state="wrong"] { border-left: 5px solid var(--rule); }
.check-result { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.check-row, .prose .check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 0; }

/* A page's own actions: send it to a friend */
.share { margin: 28px 0 0; padding: 14px 16px; background: var(--wash); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.share-done { color: var(--ink-2); font-size: 14px; }

/* Acts: task cards */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.task { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px 14px; background: var(--surface); border: 1px solid var(--hairline); border-top: 4px solid var(--brand); border-radius: 12px; }
.task:hover { border-color: var(--rule); border-top-color: var(--brand); box-shadow: var(--shadow); }
.task h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.task h3 a { color: var(--ink); text-decoration: none; }
.task h3 a::after { content: ""; position: absolute; inset: 0; }
.task:hover h3 a { color: var(--accent); }
.task dl { display: grid; gap: 9px; margin: 0; font-size: 15px; }
.task dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; }
.task dd { margin: 1px 0 0; }
.task-wait { margin: 0; padding-top: 9px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-2); }
.task-cta { margin-top: auto; padding-top: 2px; font-weight: 600; color: var(--accent); }
.task-cta::after, .story-cta::after { content: " \2192"; }     /* an arrow: the card goes somewhere */
@media (max-width: 1000px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tasks { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Acts: the twelve acts, promoted on the home page, with progress kept in the reader's own browser */
.path { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 36px; align-items: center; padding: 20px 22px; background: var(--navy); color: #d6deea; border-radius: 14px; }
.path h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; color: #ffffff; }
.path p { margin: 0 0 10px; }
.path a { color: #ffffff; }
.path .button { background: var(--brand); color: var(--navy); }
.path-side { display: grid; gap: 10px; }
.path-side p { margin: 0; }
.path-side .progress-line { margin-bottom: 6px; }
.progress { margin: 0; }
.progress-line { margin: 0 0 6px; font-weight: 600; color: #ffffff; }
.progress progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.16); accent-color: var(--brand); }
.progress progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.16); }
.progress progress::-webkit-progress-value { background: var(--brand); }
.progress progress::-moz-progress-bar { background: var(--brand); }
@media (max-width: 900px) { .path { grid-template-columns: minmax(0, 1fr); padding: 18px; } }
.acts li.is-done { border-color: var(--rule); }
.acts li.is-done::before { background: var(--good); color: #ffffff; content: "\2713"; }
@media (prefers-color-scheme: dark) { .acts li.is-done::before { color: var(--navy); } }      /* white on the light green of the dark theme is too faint */
.acts-progress:focus { outline: none; }                    /* focus lands here after "Clear my ticks"; nothing to act on */
.act-done { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); cursor: pointer; width: fit-content; }
.act-done input { margin: 0; width: 18px; height: 18px; accent-color: var(--brand-ink); }
.acts-progress { margin: 0 0 16px; padding: 12px 16px; background: var(--wash); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.acts-progress p { margin: 0; }
.acts-progress progress { flex: 1 1 160px; height: 10px; accent-color: var(--brand-ink); }
.linklike { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* A wide chart on a chart page: more room than the text column gets */
.chart-page figure.chart { width: min(1040px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 600px) { .chart-page figure.chart { width: calc(100vw - 32px); } }

/* Home page tables keep to a readable width inside the wide frame */
.band table.numbers { max-width: 760px; }
.band .gallery { margin-top: 0; }
.gallery-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .gallery-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gallery-row { grid-template-columns: minmax(0, 1fr); } }
.band .link-row { margin-bottom: 18px; }

html:not(.js) .needs-js { display: none !important; }     /* controls that only a script can make work (shared/templates/chart.html) */

/* The interactive chart (shared/templates/_chart.html, _explorer.html; shared/static/chart.js draws it).
   The plot's shape is fixed here, so the page does not move when the drawing arrives: wide on a computer, taller on a
   phone, taller again for two panels. Colors are the page's tokens, so the dark theme needs no second drawing.
   Nothing moves by itself. */
.chart-answer { margin: 0 0 16px; font-size: 19px; font-weight: 600; line-height: 1.4; }
/* A page that opens with a picture: on a phone the chart comes before the answer, so it still starts on the first screen */
@media (max-width: 640px) {
  .chart-first-sm { display: flex; flex-direction: column; }
  .chart-first-sm > .answer-block { order: 1; }
  .chart-answer { font-size: 18px; }
}
.reading { margin: 0 0 8px; }
.chart-line { margin: 0 0 18px; font-size: 18px; }
.chart-wrap { margin: 0 0 20px; }
.chart-wrap figure.chart { margin-bottom: 0; }
.chart-page .chart-wrap { width: min(1040px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }
.chart-page .chart-wrap figure.chart, .chart-page .explorer figure.chart { width: auto; margin-left: 0; transform: none; }
.chart-wrap.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .chart-wrap.has-aside { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .chart-page .chart-wrap { width: calc(100vw - 32px); } }
.chart-live { padding: 12px 12px 10px; }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.pick { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--page); min-width: 0; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: block; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pick input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 18, 32, 0.14); }
.pick input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
.chart-check { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.chart-check input { margin: 0; width: 17px; height: 17px; accent-color: var(--brand-ink); }
.chart-plot { position: relative; aspect-ratio: 16 / 9; min-height: 240px; touch-action: pan-y; border-radius: 4px; cursor: crosshair; -webkit-tap-highlight-color: transparent; }   /* the least height is for a browser that does not know aspect-ratio */
.chart-plot.panels-2 { aspect-ratio: 16 / 12; }
.chart-plot.is-picture { aspect-ratio: auto; min-height: 0; cursor: auto; }
.has-aside .chart-plot { aspect-ratio: 16 / 10; }
@media (max-width: 600px) {
  .chart-plot, .has-aside .chart-plot { aspect-ratio: 10 / 9; }
  .chart-plot.panels-2 { aspect-ratio: 10 / 13; }
  .chart-live { padding: 10px 8px 8px; }
  .pick span { padding: 6px 9px; }
}
.chart-plot svg { display: block; overflow: visible; }
.chart-plot text { font: 12px var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-plot .grid { stroke: var(--hairline); }
.chart-plot .zero, .chart-plot .baseline, .chart-plot .tick { stroke: var(--rule); }
.chart-plot .axis-name { fill: var(--muted); }
.chart-plot .line { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .dash .line { stroke-dasharray: 6 4; stroke-width: 2; }
.chart-plot .wash { fill: var(--c); opacity: 0.1; }
.chart-plot .dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.chart-plot .ring { fill: var(--surface); stroke: var(--c); stroke-width: 2; }
.chart-plot .end, .chart-plot .mark, .chart-plot .mark-name, .chart-plot .event-name { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart-plot .end { font-size: 13px; font-weight: 700; fill: var(--ink); }
.chart-plot .mark { fill: var(--ink); }
.chart-plot .mark-name, .chart-plot .event-name { fill: var(--muted); font-size: 11.5px; }
.chart-plot .event { stroke: var(--muted); stroke-dasharray: 3 4; }
.chart-plot .shade { fill: var(--ink); opacity: 0.08; }
.chart-plot .hair { stroke: var(--ink-2); }
.chart-plot .lead { stroke: var(--muted); }
.chart-tip { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: min(330px, 88%); padding: 8px 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.35; color: var(--ink); }
.tip-row { display: flex; align-items: baseline; gap: 6px; }
.tip-row b { margin-left: auto; padding-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tip-name { color: var(--ink-2); }
.tip-note { color: var(--muted); font-size: 12px; }
.key { display: inline-block; flex: none; width: 14px; height: 0; margin-right: 6px; border-top: 3px solid var(--c); border-radius: 2px; vertical-align: middle; transform: translateY(-1px); }
.key.dash { border-top-style: dashed; border-top-width: 2px; border-radius: 0; }
.key.shade { height: 12px; border: 0; background: var(--ink); opacity: 0.16; border-radius: 2px; transform: none; }
.chart-tip .key { margin-right: 0; align-self: center; transform: none; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.chart-legend li { display: inline-flex; align-items: center; margin: 0; }
.chart-legend .key { transform: none; }
.chart-summary { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.chart-live figcaption { margin-top: 6px; }
.chart-actions { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 10px; padding: 0; font-size: 15px; }
.chart-actions li { margin: 0; }
.chart-actions .linklike { font-size: 15px; font-weight: 600; min-height: 28px; }
.explorer-form .linklike { min-height: 28px; }
.share-link { font: inherit; font-size: 14px; width: min(100%, 420px); padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.chart-credit { margin-top: -8px; }
details.chart-table { margin: 0 0 14px; font-size: 15px; }
details.chart-table summary { cursor: pointer; color: var(--accent); margin-bottom: 8px; }
details.chart-table .table-scroll { max-width: var(--measure); overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; border-radius: 8px; }
details.chart-table table.numbers { display: table; margin: 0; overflow: visible; background-image: none; }   /* the box around it scrolls, not the table */
details.chart-table td, details.chart-table th { white-space: nowrap; }
/* On a wide screen the home-price table's four columns were 11 px wider than the text column, so its box slid sideways
   a little. Slightly tighter cells let it fit; narrower than this it scrolls inside its box, as before. */
@media (min-width: 601px) { details.chart-table td, details.chart-table th { padding-left: 9px; padding-right: 9px; } }
details.chart-table caption { caption-side: top; text-align: left; padding: 0 0 6px; color: var(--ink-2); font-size: 14px; }
/* the short comparison beside the long chart: the reporting period first, then two bars from zero for each pair */
.chart-aside { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 16px 12px; }
.chart-aside h2 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.aside-eyebrow { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.aside-figure { margin: 2px 0 8px; font-size: 19px; font-weight: 600; }
.aside-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.chart-aside .cmp-what { display: block; margin-bottom: 4px; font-size: 14px; }
.chart-aside .cmp-change { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.chart-aside .cmp-bar { grid-template-columns: 4.5em minmax(0, 1fr); gap: 6px; }
.chart-aside .bar { width: calc((100% - 7.6em) * var(--f)); }      /* the room kept free holds the figure, in bold on the latest bar */
@media (min-width: 601px) and (max-width: 900px) { .chart-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; } .chart-aside h2, .chart-aside .aside-figure, .chart-aside .aside-note { grid-column: 1 / -1; } }
/* the two tools: "Your target home price" and the weekly-buying explorer */
.tool { margin: 26px 0 8px; }
.tool .converter label { min-width: 0; flex: 1 1 230px; }
.tool .converter-row { margin-bottom: 10px; }
.tool .converter output { font-size: 26px; }
.explorer { margin: 0 0 20px; }
.chart-page .explorer { width: min(1040px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 600px) { .chart-page .explorer { width: calc(100vw - 32px); } }
.explorer-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 12px; padding: 14px 16px 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; }
.explorer-form .field { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.explorer-form .linklike { text-align: left; }
.explorer-form label { display: block; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.explorer-form input { width: 100%; font: inherit; font-size: 19px; padding: 7px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--page); color: var(--ink); min-width: 0; }
.explorer-form .field-note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-2); }
#ex-problem { margin-left: 10px; color: var(--ink); font-weight: 600; }
.explorer-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 14px; padding: 0; }
.explorer-out > div { min-width: 0; }
.explorer-out dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.explorer-out dd { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.explorer-out dd.sub { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) { .explorer-out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  /* on a phone: the amount and the fee side by side, the date under them, so the figures and the chart start sooner */
  .explorer-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 12px 8px; }
  .explorer-form .field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .explorer-form label { font-size: 12px; letter-spacing: 0.03em; }
  .explorer-form input { font-size: 17px; padding: 6px 8px; }
  .explorer-out { gap: 10px 14px; margin-bottom: 12px; }
  .explorer-out dd { font-size: 18px; }
  .explorer-out dd.sub { font-size: 12.5px; }
  .chart-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px 12px; font-size: 13px; }
  .chart-legend li { align-items: flex-start; }
  .chart-legend .key { margin-top: 8px; }
  .chart-legend .key.shade { margin-top: 3px; }
}
.tool-rules { margin: 22px 0 8px; }
.tool-rules ol { padding-left: 22px; }
@media print { .chart-controls, .chart-actions button, .explorer-form { display: none; } }

/* ---------------------------------------------------------------------------------------------------------------
   The front door (SatSites): the home page's diagram, the four cards, the questions, the featured topic, the
   week's picks, the directory by topic, and the Start Here route. Whatever belongs to one of the four sites wears
   that site's color (.of-facts, .of-stats, .of-acts, .of-news, near the top of this file) and always names the site
   in words.
   --------------------------------------------------------------------------------------------------------------- */
.site-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.site-tag::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--site, var(--rule)); }
.tree picture, .door-logo picture { display: contents; }

/* The diagram beside the headline: SatSites above, the four sites under it, each with what it does */
.tree { margin: 0; padding: 22px 18px 20px; background: var(--navy); border-radius: 16px; color: var(--navy-muted); }
.tree-top { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding-bottom: 20px; position: relative; color: var(--navy-ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tree-top::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 14px; border-left: 2px solid rgba(255, 255, 255, 0.3); }
.tree-coin { display: block; }
.tree-branches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; position: relative; }
.tree-branches::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; border-top: 2px solid rgba(255, 255, 255, 0.3); }
.tree-branches li { margin: 0; padding-top: 18px; position: relative; }
.tree-branches li::before { content: ""; position: absolute; top: 0; left: 50%; height: 14px; border-left: 2px solid var(--site-navy); }
.tree-branches a { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; padding: 10px 6px 10px; border-radius: 12px; text-align: center; text-decoration: none; color: var(--navy-muted); font-size: 13.5px; line-height: 1.3; }
.tree-branches a:hover { background: rgba(255, 255, 255, 0.07); }
.tree-branches strong { color: var(--navy-ink); font-size: 16px; line-height: 1.25; padding-bottom: 3px; border-bottom: 2px solid var(--site-navy); }
.tree :focus-visible { outline-color: #ffffff; }
@media (max-width: 900px) { .hero-front .hero-visual { display: none; } }      /* the cards follow at once and say the same */

/* The four cards, two by two: each site's logo on its navy band, its sentence, a preview, one button in the site's color */
.doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.door { display: flex; flex-direction: column; margin: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.door:hover { border-color: var(--rule); box-shadow: var(--shadow); }
.door-logo { margin: 0; background: var(--navy); border-bottom: 4px solid var(--site-navy); font-size: 19px; color: var(--navy-ink); }
.door-logo a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: inherit; text-decoration: none; }
.door-coin { flex: none; width: 40px; height: 40px; }
.door-word { display: block; height: 24px; width: auto; min-width: 0; max-width: calc(100% - 50px); object-fit: contain; object-position: left center; }
.door-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 16px 18px 18px; }
.door-text { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.door-label { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; }
.door-list { list-style: none; margin: 0; padding: 0; }
.door-list li { margin: 0; border-top: 1px solid var(--hairline); }
.door-list li:first-child { border-top: 0; }
.door-list a { display: block; padding: 7px 0; }                 /* the whole row is the link, so a finger has room */
.door-list li:first-child a { padding-top: 0; }
.door-figure { margin: 0; font-size: 17px; }
.door-figure .live { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.door-when { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.door-action { margin: auto 0 0; }
.door .button { background: var(--site); }
@media (max-width: 900px) { .doors { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* "What brings you here?": a question, and the site that answers it */
.asks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.ask { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin: 0; padding: 13px 16px 12px; background: var(--surface); border: 1px solid var(--hairline); border-left: 4px solid var(--site); border-radius: 10px; }
.ask:hover { border-color: var(--rule); border-left-color: var(--site); box-shadow: var(--shadow); }
.ask a { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: none; }
.ask a::after { content: ""; position: absolute; inset: 0; }
.ask:hover a { color: var(--accent); }
@media (max-width: 900px) { .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .asks { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ask a { font-size: 17px; } }

/* The featured topic: one idea followed across the three sites */
.topic { padding: 22px 24px 24px; background: var(--navy); border-radius: 14px; color: #d6deea; }
.topic-eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-muted); }
.topic h2 { margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -0.015em; color: #ffffff; }
.topic-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.topic-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 16px 15px; border-top: 3px solid var(--site-navy); border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, 0.07); }
.topic-steps li:hover { background: rgba(255, 255, 255, 0.11); }
.topic-role { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--site-navy); }
.topic-steps a { font-size: 19px; font-weight: 700; line-height: 1.25; color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.45); }
.topic-steps a::after { content: ""; position: absolute; inset: 0; }
.topic-desc { font-size: 15px; line-height: 1.45; }
.topic :focus-visible { outline-color: #ffffff; }
@media (max-width: 800px) { .topic { padding: 18px 16px 18px; } .topic-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* A reason to return: this week's chart, explanation, and guide */
.week-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 20px; }
.week-card { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 18px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; }
.week-card:hover { border-color: var(--rule); box-shadow: var(--shadow); }
.week-card-chart { grid-row: 1 / span 2; }
.week-card picture img { display: block; width: 100%; height: auto; border-radius: 6px; }
.week-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.week-card h3 { margin: 0; font-size: 21px; line-height: 1.22; }
.week-card h3 a { color: var(--ink); text-decoration: none; }
.week-card h3 a::after { content: ""; position: absolute; inset: 0; }
.week-card:hover h3 a { color: var(--accent); }
.week-card p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.week-card p.week-label { font-size: 13px; }
.week-card .quoted-line { color: var(--ink); }
.week-credit, .week-card p.week-credit { position: relative; z-index: 1; font-size: 12.5px; color: var(--muted); }      /* above the card's own link, so its link can be followed */
.week-credit:empty { display: none; }
.week-cta { margin-top: auto; padding-top: 2px; font-weight: 600; color: var(--accent); }
.week-cta::after { content: " \2192"; }
@media (max-width: 800px) { .week-cards { grid-template-columns: minmax(0, 1fr); } .week-card-chart { grid-row: auto; } }

/* A word from DG Tulman */
.creator { max-width: var(--measure); padding: 18px 22px 16px; background: var(--wash); border-radius: 14px; }
.creator h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; }
.creator p { margin: 0 0 10px; font-size: 18px; }
.creator-sign, .creator p.creator-sign { margin-top: 14px; font-weight: 700; }
.creator p.creator-more { margin: 0; font-size: 16px; font-weight: 600; }
.creator-more a { display: inline-block; padding: 3px 0; }

/* Explore: the directory by topic */
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
.topics h3 { margin: 0; padding-bottom: 7px; border-bottom: 2px solid var(--rule); font-size: 19px; line-height: 1.25; }
.topics ul { list-style: none; margin: 0; padding: 0; }
.topics li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin: 0; border-bottom: 1px solid var(--hairline); }
.topics li a { flex: 1; padding: 8px 0; font-weight: 600; text-decoration: none; }
.topics li a:hover { text-decoration: underline; }
@media (max-width: 900px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .topics { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
#explore { scroll-margin-top: 12px; }

/* Start Here: each stop's number wears the color of the site it opens */
.stop[class*="of-"]::before { color: var(--site-navy); }
.minute .site-tag { margin-left: 8px; font-size: 12px; }
.stop-go, .prose .stop-go { margin: 0 0 6px; font-size: 19px; font-weight: 700; }

/* ---------------------------------------------------------------------------------------------------------------
   Fast News for Sats: the home page (the news beside a narrow column), an item, an edition's page, the archive,
   the topics, the list of sources. An item's words are plain text from its edition file (lib/news.py).
   --------------------------------------------------------------------------------------------------------------- */
.news-front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; margin-top: 6px; }
.news-main h2, .news-side h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.news-side h2 { font-size: 18px; }
.news-earlier { margin-top: 40px; }
.news-item { padding: 18px 0 20px; border-top: 1px solid var(--hairline); }
h2 + .news-item, h3 + .news-item, .page-head + .news-item { border-top: 0; padding-top: 4px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 5px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.news-topic { color: var(--brand-ink); text-decoration: none; }
.news-topic:hover { text-decoration: underline; }
.news-place { color: var(--ink-2); }
.news-item .news-headline { margin: 0 0 7px; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.news-summary { margin: 0 0 10px; }
.news-why { margin: 0 0 10px; padding: 9px 13px; background: var(--wash); border-radius: 8px; font-size: 16px; }
.news-source { margin: 0; font-size: 14px; color: var(--ink-2); }
.news-link { margin-left: 4px; white-space: nowrap; }
.news-note { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--accent-2); font-size: 15px; }
.news-gone .news-note { margin: 0; }
.news-edition { margin: 30px 0 2px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.news-edition a { color: inherit; text-decoration: none; }
.news-edition a:hover { text-decoration: underline; }
.news-stale { margin: 12px 0 0; padding: 9px 13px; border-left: 3px solid var(--accent-2); background: var(--surface); font-size: 15px; }
.news-empty { padding: 18px; background: var(--surface); border: 1px dashed var(--rule); border-radius: 10px; color: var(--ink-2); }
.news-more { margin: 22px 0 0; font-weight: 600; }
.news-side section { margin: 0 0 18px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; font-size: 15.5px; }
.news-side p { margin: 0 0 10px; }
.news-side ul { margin: 0; padding-left: 18px; }
.news-side ul.news-topics { list-style: none; padding: 0; }
.news-topics li { margin: 0; border-top: 1px solid var(--hairline); }
.news-topics li:first-child { border-top: 0; }
.news-topics a { display: block; padding: 7px 0; }                /* the whole row is the link, so a finger has room */
.news-turn { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hairline); font-weight: 600; }
.news-newer { margin-left: auto; }
.news-newer::after { content: " \2192"; }
.news-older::before { content: "\2190  "; }
.news-sources { list-style: none; margin: 0 0 20px; padding: 0; }
.news-sources li { margin: 0 0 10px; }
@media (max-width: 900px) { .news-front { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .news-item .news-headline { font-size: 19px; } }