/* The Care Ledger by Soro.
   Soro greens and type (Abel display, Montserrat interface) with a reading serif for stories.
   No italics anywhere, no decorative icons. Motion is slow and eased.
   Soro Data panels ("From the publisher") use the data platform's own carbon and mist, with no green
   in their backgrounds, so a reader can always tell the advertising from the reporting. */

:root {
  --ink: #16211C;
  --text: #2C3B33;
  --muted: #4C5A52;
  --sage: #4F8F6C;
  --sage-text: #2E6B4F;
  --sage-light: #9AD0B4;
  --mint: #CFE8DA;
  --pine: #24503C;
  --pine-deep: #16352A;
  --wash: #F1F7F3;
  --line: #DFEAE4;
  --line-strong: #C2D6C9;
  --cream: #FDF6ED;
  --sand: #DCCFC0;
  --flag: #A6473E;

  /* Soro Data */
  --carbon: #0C0F14;
  --carbon-lift: #141A22;
  --carbon-line: rgba(237, 240, 245, .14);
  --mist: #EDF0F5;
  --mist-soft: rgba(237, 240, 245, .74);
  --data-green: #5CB489;
  --steel: #59626E;
  --steel-line: #DDE1E7;
  --steel-wash: #F3F5F8;

  --display: "Abel", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --ui: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --read: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;
  --narrow: 760px;
  --frame: 1068px;      /* 640 text column + rail of 300 */
  --read-ink: #1F2723;  /* body copy stays near-black; greens are for rules and labels */
  --gutter: 32px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* long, soft landing: the data platform's settle curve */
  --slow: 1000ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Lenis drives the wheel (site.js). Native smooth scrolling only when it is not running: both at once
   is the stutter the data platform already learned about. */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html, body { overflow-x: clip; }   /* a panel sliding in from the right never widens the page */
.lenis.lenis-stopped { overflow: clip; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font: 400 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;            /* never fake an italic */
}
em, i, cite, address, dfn { font-style: normal; }
img { max-width: 100%; display: block; }
a { color: var(--sage-text); text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: rgba(46, 107, 79, .35); transition: color 400ms var(--ease), text-decoration-color 400ms var(--ease); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--sage-text); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 400; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; }
button { font: inherit; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.wrap.frame { max-width: calc(var(--frame) + 2 * var(--gutter)); }   /* story pages: header, text and rail share one left edge */
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 8px;
        background: var(--ink); color: #FFFFFF; font: 600 14px/1 var(--ui); text-decoration: none; }
.skip:focus { top: 12px; }

.preview-mark {
  margin: 0; padding: 8px 16px; text-align: center;
  background: var(--pine-deep); color: var(--mint);
  font: 500 12px/1.4 var(--ui);
}

/* ---------- Masthead: one nameplate, closed by a ledger's double rule ---------- */
.masthead { background: #FFFFFF; }
.masthead-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 14px; padding-bottom: 14px; color: var(--muted);
}
.masthead-data { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); font: 500 13px/1 var(--ui); text-decoration: none; }
.masthead-data .mono { color: var(--steel); font-size: 10.5px; }
.masthead-data:hover { color: var(--sage-text); }
.by-soro { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; }
.by-soro img { height: 15px; width: auto; }
.nameplate-row { display: flex; justify-content: center; padding-top: 6px; padding-bottom: 18px; }
.nameplate {
  font-family: var(--display); font-size: clamp(38px, 6.4vw, 78px); line-height: 1;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  text-align: center;
}
.rule-double { display: block; border-top: 4px double var(--ink); }
.nav {
  display: flex; justify-content: center; gap: clamp(16px, 2.6vw, 36px);
  border-bottom: 1px solid var(--line);
  padding-top: 13px; padding-bottom: 13px;
}
.nav a { color: var(--ink); font: 500 14px/1 var(--ui); text-decoration: none; padding: 4px 0; white-space: nowrap;
         border-bottom: 1px solid transparent; transition: border-color 500ms var(--ease), color 500ms var(--ease); }
.nav a:hover, .nav a[aria-current="page"], .nav a.here { border-bottom-color: var(--ink); }

/* ---------- Painted canvases (one per page) ---------- */
.canvas { position: relative; isolation: isolate; overflow: hidden; }
.canvas::before {
  content: ""; position: absolute; inset: -20%; z-index: -2;
  translate: 0 var(--para, 0px);   /* the paint trails the page a little as it scrolls (site.js) */
  background-color: var(--pine-deep);
  background-image:
    /* the lightest paint sits behind the glass panel on the right; the text side stays deep so
       small mint and cream type keeps its contrast */
    radial-gradient(40% 56% at 76% 34%, rgba(79, 143, 108, .95) 0%, rgba(79, 143, 108, 0) 70%),
    radial-gradient(30% 42% at 90% 14%, rgba(154, 208, 180, .60) 0%, rgba(154, 208, 180, 0) 70%),
    radial-gradient(34% 46% at 14% 18%, rgba(46, 107, 79, .70) 0%, rgba(46, 107, 79, 0) 70%),
    radial-gradient(48% 52% at 42% 100%, rgba(46, 107, 79, .95) 0%, rgba(46, 107, 79, 0) 72%),
    radial-gradient(26% 36% at 58% 58%, rgba(220, 207, 192, .22) 0%, rgba(220, 207, 192, 0) 72%),
    radial-gradient(60% 70% at 100% 100%, rgba(22, 53, 42, .9) 0%, rgba(22, 53, 42, 0) 70%);
  animation: drift 48s var(--ease) infinite alternate;
}
.canvas::after, .data-band::after, .data-hero::after {   /* paper grain so the paint reads as painted, not as a CSS gradient */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.canvas-soft::before {
  background-color: var(--wash);
  background-image:
    radial-gradient(40% 70% at 12% 20%, rgba(154, 208, 180, .55) 0%, rgba(154, 208, 180, 0) 70%),
    radial-gradient(38% 60% at 88% 10%, rgba(207, 232, 218, .95) 0%, rgba(207, 232, 218, 0) 70%),
    radial-gradient(44% 60% at 70% 100%, rgba(253, 246, 237, .95) 0%, rgba(253, 246, 237, 0) 70%),
    radial-gradient(30% 50% at 40% 80%, rgba(79, 143, 108, .16) 0%, rgba(79, 143, 108, 0) 70%);
}
.canvas-soft::after { opacity: .10; }
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

.eyebrow { color: var(--sage-text); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.eyebrow span[aria-hidden] { margin: 0 .5em; opacity: .6; }

/* ---------- Home: the lead on paint, the numbers on glass ---------- */
.lead { color: var(--cream); }
.lead-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px);
}
.lead .eyebrow { color: var(--mint); }
.lead h1 { font-family: var(--display); font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.005em; margin: 18px 0 22px; }
.lead h1 a { color: var(--cream); text-decoration: none; transition: color 600ms var(--ease); }
.lead h1 a:hover { color: #FFFFFF; }
.lead .dek { font-family: var(--read); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; color: rgba(253, 246, 237, .88); max-width: 34em; }
.read {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 13px 24px;
  border-radius: 100px; background: var(--cream); color: var(--pine-deep);
  font: 600 15px/1 var(--ui); text-decoration: none;
  transition: background-color 600ms var(--ease), transform 600ms var(--ease);
}
.read:hover { background: #FFFFFF; transform: translateY(-1px); }

.numbers .panel-label { margin-bottom: 6px; }
.glass {
  border-radius: 22px; padding: 26px 28px 18px;
  background: rgba(253, 246, 237, .09);
  border: 1px solid rgba(253, 246, 237, .24);
  box-shadow: 0 30px 80px rgba(8, 26, 19, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.glass .panel-label { color: var(--mint); }
.figure-row { padding: 16px 0; border-top: 1px solid var(--line); }
.glass .figure-row { border-top-color: rgba(253, 246, 237, .18); }
.figure-row:first-of-type { border-top: 0; }
.figure { font-family: var(--display); font-size: 46px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.glass .figure { font-size: 50px; color: var(--cream); }
.unit { font: 500 14px/1 var(--ui); letter-spacing: 0; margin-left: 8px; color: var(--muted); }
.glass .unit { color: var(--mint); }
.figure-label { margin-top: 8px; font: 400 14.5px/1.45 var(--ui); color: var(--text); }
.glass .figure-label { color: rgba(253, 246, 237, .86); }
.figure-source { margin-top: 6px; font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.figure-source a { text-decoration: none; }
.glass .figure-source a { color: var(--mint); }
.panel-label { color: var(--sage-text); }

/* ---------- Section furniture ---------- */
.section-label {
  display: flex; align-items: center; gap: 14px;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-text);
  margin-bottom: 26px;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.also { padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 5vw, 64px); }
.also-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }
.also-item { padding: 4px 28px 8px; border-left: 1px solid var(--line); }
.also-item:first-child { padding-left: 0; border-left: 0; }
.also-n { display: block; color: var(--sage-text); font-size: 11px; margin-bottom: 10px; }
.also-item h3 { font: 600 17px/1.35 var(--ui); color: var(--ink); margin-bottom: 10px; }
.also-item p { font: 400 17px/1.55 var(--read); color: var(--text); }
.also-item .also-source { margin-top: 12px; font-size: 11px; }
.also-item .also-source a { text-decoration: none; }

.earlier, .more { padding: 8px 0 clamp(48px, 6vw, 80px); }
.more { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.story-list { list-style: none; }
.story-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.story-list li:last-child { border-bottom: 1px solid var(--line); }
.story-list time { color: var(--muted); padding-top: 9px; }
.row-topic { display: inline-block; margin-bottom: 8px; color: var(--sage-text); font-size: 10.5px; text-decoration: none; }
.row-topic:hover { text-decoration: underline; }
.story-list h3 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; }
.story-list h3 a { color: var(--ink); text-decoration: none; }
.story-list h3 a:hover { color: var(--sage-text); }
.story-list p { margin-top: 8px; font: 400 17px/1.5 var(--read); color: var(--muted); max-width: 46em; }

.top-stories { padding: 8px 0 clamp(48px, 6vw, 80px); }
.card-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; }
.story-card { position: relative; display: flex; flex-direction: column; padding: 4px 0 6px; }
.story-card + .story-card::before { content: ""; position: absolute; left: -28px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.story-card h3 { font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; margin-bottom: 12px; }
.story-card h3 a { color: var(--ink); text-decoration: none; }
.story-card h3 a:hover { color: var(--sage-text); }
.card-dek { font: 400 17px/1.5 var(--read); color: var(--text); }
.card-fig { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.card-fig .figure { font-size: 38px; }
.card-fig-label { margin-top: 6px; font: 400 13.5px/1.45 var(--ui); color: var(--muted); }
.story-card time { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 10.5px; }

.topics { padding: clamp(48px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.section-cols { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 52px; }
.section-cols > li { position: relative; display: flex; flex-direction: column; padding: 2px 0 4px; }
.section-cols > li + li::before { content: ""; position: absolute; left: -26px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.section-cols h3 { font-family: var(--display); font-size: 30px; line-height: 1.05; margin-bottom: 8px; }
.section-cols h3 a { color: var(--ink); text-decoration: none; }
.section-cols h3 a:hover { color: var(--sage-text); }
.col-list { list-style: none; }
.col-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.col-list a { display: block; font: 600 15px/1.4 var(--ui); color: var(--ink); text-decoration: none; }
.col-list a:hover { color: var(--sage-text); }
.col-list time { display: block; margin-top: 6px; color: var(--muted); font-size: 10.5px; }
.col-blurb { margin-top: 6px; font: 400 16px/1.55 var(--read); color: var(--text); }
.col-more { margin-top: auto; padding-top: 18px; font: 600 14px/1 var(--ui); text-decoration: none; }
.topics .how-more { margin-top: 40px; }

.step-n { display: block; color: var(--sage-text); margin-bottom: 14px; }

.tools-strip { background: var(--wash); padding: clamp(48px, 6vw, 84px) 0; }
.tool-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.tool-card a {
  display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px; border-radius: 18px;
  background: #FFFFFF; border: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: border-color 600ms var(--ease), transform 600ms var(--ease-out), box-shadow 600ms var(--ease);
}
.tool-card a:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 53, 42, .08); }
.tool-card h3 { font: 600 17px/1.3 var(--ui); color: var(--ink); margin-bottom: 8px; }
.tool-card p { font: 400 14.5px/1.55 var(--ui); }
.tool-go { margin-top: auto; padding-top: 18px; font: 600 14px/1 var(--ui); color: var(--sage-text); }
.tool-pub { display: block; margin-bottom: 12px; font-size: 10px; color: var(--mist-soft); }
.tool-card.is-publisher a { background: var(--carbon); border-color: var(--carbon); color: var(--mist-soft); }
.tool-card.is-publisher h3, .tool-card.is-publisher .tool-go { color: var(--mist); }
.section-body .tool-grid { padding-bottom: 40px; }
.how-more { margin-top: 34px; font: 600 15px/1 var(--ui); }
.how-more a { text-decoration: none; }

/* ---------- Story ---------- */
.story-head { padding: clamp(44px, 6vw, 80px) 0 clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--line); }
.head-copy > * { max-width: 860px; }
.head-copy .dek, .head-copy .meta-strip { max-width: 640px; }
.story-head h1 { font-family: var(--display); font-size: clamp(36px, 5vw, 66px); line-height: 1.04; margin: 18px 0 20px; }
.story-head .dek { font: 400 clamp(19px, 1.8vw, 23px)/1.45 var(--read); color: var(--text); }
.meta-strip { list-style: none; display: flex; flex-wrap: wrap; margin-top: 28px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: 11px; }
.meta-strip li { padding: 11px 16px; border-left: 1px solid var(--line-strong); }
.meta-strip li:first-child { padding-left: 0; border-left: 0; color: var(--ink); }
.meta-strip a { color: inherit; text-decoration: none; }
.meta-strip a:hover { color: var(--sage-text); }
@keyframes settle { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.story-grid {
  display: grid; grid-template-columns: minmax(0, 640px) 300px; justify-content: space-between;
  column-gap: 40px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px);
}
.prose { font: 400 19.5px/1.68 var(--read); color: var(--read-ink); overflow-wrap: break-word; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font: 600 19px/1.35 var(--ui); color: var(--ink); margin: 1.9em 0 .7em; }
.prose ul, .prose ol { margin: 0 0 1.1em 1.2em; }
.prose li { margin-bottom: .4em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose.small { font-size: 17px; }
.ref { font: 500 10.5px/0 var(--mono); margin-left: 2px; vertical-align: super; }
.ref a { text-decoration: none; padding: 0 1px; }
.ref a:hover { text-decoration: underline; }
.rail { position: relative; }
.numbers-card { position: sticky; top: 28px; border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 8px; background: #FFFFFF;
                transition: top 700ms var(--ease); }
.bar-on .numbers-card { top: 84px; }   /* clears the slim header while it is down */
.correction { margin-bottom: 2em; padding: 18px 20px; border-left: 3px solid var(--flag); background: #F8ECEA; font: 400 16px/1.55 var(--ui); }
.correction .panel-label { color: var(--flag); margin-bottom: 6px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.share .mono { margin-right: 6px; color: var(--muted); font-size: 10.5px; }
.share-btn {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line-strong); background: #FFFFFF; color: var(--ink);
  font: 500 13.5px/1 var(--ui); text-decoration: none; cursor: pointer;
  transition: border-color 500ms var(--ease), background-color 500ms var(--ease);
}
.share-btn:hover { border-color: var(--ink); }
html:not(.js) .js-only { display: none !important; }
.share-btn[aria-pressed="true"] { background: var(--wash); border-color: var(--sage); }
.share-btn.done { background: var(--wash); border-color: var(--sage); }

.sources { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.sources .wrap > * { max-width: 860px; }
.sources-note { font: 400 15px/1.5 var(--ui); color: var(--muted); margin: -12px 0 18px; }
.ledger { list-style: none; border-top: 4px double var(--ink); }
.ledger li { scroll-margin-top: 24px; transition: background-color 900ms var(--ease); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
main [id], .ledger li { scroll-margin-top: 96px; }   /* anchor targets land clear of the slim header */
.ledger li:target, .ledger li.flash { background: var(--wash); }
.src-n { color: var(--sage-text); font-size: 11px; }
.src-label { font: 400 16px/1.5 var(--read); color: var(--text); }
.src-host { font-size: 10.5px; text-decoration: none; white-space: nowrap; }

.pager { border-top: 1px solid var(--line); }
.pager-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 32px; padding-bottom: 40px; }
.pager a { display: block; text-decoration: none; }
.pager .mono { display: block; color: var(--muted); font-size: 10.5px; margin-bottom: 10px; }
.pager-h { font-family: var(--display); font-size: 24px; line-height: 1.15; color: var(--ink); transition: color 500ms var(--ease); }
.pager a:hover .pager-h { color: var(--sage-text); }
.pager-newer { text-align: right; }

/* ---------- Plain pages ---------- */
.page-head { padding: clamp(44px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 64px); line-height: 1.04; margin: 14px 0 16px; }
.page-head .dek { font: 400 clamp(18px, 1.7vw, 22px)/1.45 var(--read); color: var(--text); max-width: 36em; }
.archive { padding-top: 40px; padding-bottom: 80px; }
.archive-month + .archive-month { margin-top: 48px; }
.section-body { padding-top: 32px; padding-bottom: 48px; }
.empty-note { padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 18px/1.55 var(--read); color: var(--muted); }
.promo-slot { padding-bottom: clamp(56px, 7vw, 96px); }
.standards, .about-page { padding-top: 32px; padding-bottom: 88px; }
.standards h2, .about-page h2 { font: 600 20px/1.3 var(--ui); margin-top: 2em; }
.steps { list-style: none; margin: 0 !important; }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 18px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .step-n { margin: 6px 0 0; }
.steps h3 { font: 600 17px/1.35 var(--ui); margin-bottom: 6px; }
.steps p { margin: 0; font-size: 18px; }
.empty { padding: 96px var(--gutter); text-align: center; font: 400 19px/1.5 var(--read); }
.empty h1 { font-family: var(--display); font-size: 52px; margin-bottom: 16px; }

/* The numbers: a ledger of every figure, grouped by story */
.tallies { padding-top: 40px; padding-bottom: 56px; }
.tally + .tally { margin-top: 48px; }
.tally h2 { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 4px double var(--ink); }
.tally h2 time { color: var(--muted); font-size: 11px; }
.tally h2 a { font-family: var(--display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; color: var(--ink); text-decoration: none; }
.tally h2 a:hover { color: var(--sage-text); }
.tally .prose { padding-top: 16px; }
.tally-rows { list-style: none; }
.tally-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) 200px; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tally-row .figure { font-size: 40px; }
.tally-label { font: 400 17px/1.5 var(--read); color: var(--read-ink); }
.tally-source { font-size: 10.5px; text-align: right; }
.tally-source a { text-decoration: none; }

/* Search */
.search-form { margin-top: 26px; }
.search-form label { display: block; color: var(--sage-text); margin-bottom: 10px; font-size: 11px; }
.search-row { display: flex; gap: 10px; }
.search-row input {
  flex: 1; min-width: 0; padding: 14px 18px; border-radius: 100px; border: 1px solid var(--line-strong);
  background: #FFFFFF; color: var(--ink); font: 400 17px/1.2 var(--ui);
}
.search-row input:focus { outline: 2px solid var(--sage-text); outline-offset: 1px; border-color: transparent; }
.search-row button {
  padding: 0 24px; border-radius: 100px; border: 0; background: var(--ink); color: #FFFFFF;
  font: 600 15px/1 var(--ui); cursor: pointer; transition: background-color 500ms var(--ease);
}
.search-row button:hover { background: var(--pine); }
.search-body { padding-top: 28px; padding-bottom: 88px; }
.search-status { color: var(--muted); font: 500 14px/1.4 var(--ui); margin-bottom: 14px; }
.search-results mark { background: var(--mint); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Home page headlines show a faint arrow on hover, in place of an underline. */
.lead h1 a::after, .story-card h3 a::after, .section-cols h3 a::after, .col-list a::after {
  content: "\2192"; display: inline-block; margin-left: .32em; font: 400 .5em/1 var(--ui); vertical-align: .2em;
  opacity: 0; transform: translateX(-.5em); transition: opacity 600ms var(--ease), transform 800ms var(--ease-out);
}
.col-list a::after { font-size: .9em; vertical-align: 0; }
.lead h1 a:hover::after, .story-card h3 a:hover::after, .section-cols h3 a:hover::after, .col-list a:hover::after,
.lead h1 a:focus-visible::after, .story-card h3 a:focus-visible::after, .section-cols h3 a:focus-visible::after, .col-list a:focus-visible::after { opacity: .45; transform: none; }

/* ---------- Photos ----------
   Freely licensed photos from Wikimedia Commons, credited under each large photo, in each story's sources
   and on /credits/. They fade in as they load and drift a little closer on hover. */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-photo, .col-photo, .row-photo, .photo-frame { display: block; overflow: hidden; background: var(--wash); }
.card-photo { aspect-ratio: 3 / 2; border-radius: 14px; margin-bottom: 18px; }
.col-photo { aspect-ratio: 3 / 2; border-radius: 12px; margin: 6px 0 2px; }
.row-photo { aspect-ratio: 3 / 2; border-radius: 10px; align-self: start; margin-top: 4px; }
.story-list li:has(.row-photo) { grid-template-columns: 120px minmax(0, 1fr) 180px; }
.story-photo { padding-top: clamp(28px, 4vw, 44px); }
.photo-frame { aspect-ratio: 16 / 9; border-radius: 20px; }
.story-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font: 400 13.5px/1.5 var(--ui); color: var(--muted); }
.story-photo .cap { color: var(--text); }
.credit { font-size: 12.5px; }
.credit a { color: inherit; }

/* the lead's photo sits under the paint, darkened on the text side so the headline keeps its contrast */
.lead-photo { position: absolute; inset: -14% 0 0; z-index: -3; }
.lead-photo .photo { translate: 0 calc(var(--para, 0px) * .5); }
.lead-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 36, 28, .95) 0%, rgba(14, 36, 28, .88) 40%, rgba(14, 36, 28, .6) 70%, rgba(14, 36, 28, .45) 100%);
}
.lead.has-photo::before { background-color: transparent; opacity: .7; }
.lead.has-photo .lead-grid { padding-bottom: clamp(76px, 9vw, 118px); }
.lead-credit { position: absolute; right: var(--gutter); bottom: 14px; max-width: calc(100% - 2 * var(--gutter)); text-align: right; font: 400 11.5px/1.4 var(--ui); color: rgba(253, 246, 237, .66); }
.lead-credit a { color: inherit; text-decoration-color: rgba(253, 246, 237, .3); }

/* image credits page */
.credit-list { list-style: none; }
.credit-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.credit-row > .photo { height: auto; aspect-ratio: 3 / 2; border-radius: 10px; background: var(--wash); }
.credit-cap { font: 600 15px/1.4 var(--ui); color: var(--ink); }
.credit-line { margin-top: 6px; font: 400 14px/1.55 var(--ui); color: var(--text); }
.credit-used { margin-top: 10px; font-size: 10.5px; color: var(--muted); line-height: 1.7; }
.credit-used a { font: 500 12.5px/1.5 var(--ui); letter-spacing: 0; text-transform: none; }

/* ---------- Tools ---------- */
.tool-fine { margin-top: 28px; max-width: 46em; font: 400 13.5px/1.6 var(--ui); color: var(--muted); }

/* form fields, shared by the estimator, the glossary filter and the price lookup */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 600 14px/1.35 var(--ui); color: var(--ink); }
.field-hint { font: 400 13px/1.5 var(--ui); color: var(--muted); }
.field-box {
  display: flex; align-items: center; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 12px; background: #FFFFFF;
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.field-box:focus-within { border-color: var(--sage-text); box-shadow: 0 0 0 3px rgba(79, 143, 108, .16); }
.field-box input, .field-box select {
  flex: 1; min-width: 0; padding: 13px 14px; border: 0; background: transparent; color: var(--ink);
  font: 500 17px/1.2 var(--ui); font-variant-numeric: tabular-nums; outline: none; appearance: none;
}
.field-box select { cursor: pointer; padding-right: 40px; }
.field-box:has(select) { position: relative; }
.field-box:has(select)::after {   /* the select's caret, drawn so it matches the site's other carets */
  content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); color: var(--muted);
}
.lookup-form .field-box:has(select)::after { color: var(--mist-soft); }
.affix { padding: 0 0 0 14px; color: var(--muted); font: 500 16px/1 var(--ui); }
.affix + input { padding-left: 6px; }
input + .affix { padding: 0 14px 0 0; }

/* bill estimator */
.estimator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.est-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.est-fields .field:first-child { grid-column: 1 / -1; }
.est-result { position: sticky; top: 90px; padding: 26px 28px 24px; border: 1px solid var(--line); border-radius: 22px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(22, 53, 42, .06); }
.est-total { margin: 6px 0 18px; font-size: clamp(54px, 6vw, 72px); }
.est-bar { display: flex; height: 14px; border-radius: 100px; overflow: hidden; background: var(--wash); }
.seg { flex: 0 0 0%; transition: flex-basis 900ms var(--ease-out); }
.seg-ded, .key-ded { background: var(--pine-deep); }
.seg-coins, .key-coins { background: var(--sage); }
.seg-plan, .key-plan { background: var(--mint); }
.est-break { margin: 18px 0 0; }
.est-break div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.3 var(--ui); }
.est-break dt { display: flex; align-items: center; gap: 10px; color: var(--text); }
.est-break dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.key { width: 10px; height: 10px; border-radius: 3px; }
.est-note { margin-top: 14px; font: 400 14px/1.55 var(--ui); color: var(--sage-text); min-height: 1.55em; }

/* bill checklist */
.check-wrap { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.check-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.check-progress .mono { flex: none; color: var(--sage-text); font-size: 11px; }
.check-track { flex: 1; height: 6px; border-radius: 100px; background: var(--wash); overflow: hidden; }
.check-fill { display: block; height: 100%; width: 100%; background: var(--sage); transform: scaleX(var(--done, 0)); transform-origin: left; transition: transform 900ms var(--ease-out); }
.check-list { list-style: none; border-top: 4px double var(--ink); }
.check-step label { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-step input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { position: relative; width: 24px; height: 24px; margin-top: 2px; border: 1.5px solid var(--line-strong); border-radius: 7px; background: #FFFFFF; transition: background-color 500ms var(--ease), border-color 500ms var(--ease); }
.check-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(45deg) scale(0); transition: transform 500ms var(--ease-out); }
.check-step input:checked + .check-box { background: var(--sage); border-color: var(--sage); }
.check-step input:checked + .check-box::after { transform: rotate(45deg) scale(1); }
.check-step input:focus-visible + .check-box { outline: 2px solid var(--sage-text); outline-offset: 3px; }
.check-copy { display: flex; flex-direction: column; gap: 6px; }
.check-n { color: var(--sage-text); font-size: 10.5px; }
.check-copy strong { font: 600 17px/1.35 var(--ui); color: var(--ink); transition: color 500ms var(--ease); }
.check-text { font: 400 17px/1.6 var(--read); color: var(--read-ink); transition: color 500ms var(--ease); }
.check-src { font-size: 10.5px; text-decoration: none; }
.check-step input:checked ~ .check-copy strong, .check-step input:checked ~ .check-copy .check-text { color: var(--muted); }

/* quiz */
.quiz { min-height: 420px; }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; color: var(--muted); }
.quiz-top .mono { font-size: 11px; }
.quiz-track { height: 4px; border-radius: 100px; background: var(--wash); overflow: hidden; margin-bottom: 30px; }
.quiz-track span { display: block; height: 100%; background: var(--sage); transform: scaleX(var(--q, 0)); transform-origin: left; transition: transform 900ms var(--ease-out); }
.quiz-q { font: 400 clamp(22px, 2.6vw, 28px)/1.35 var(--read); color: var(--read-ink); margin-bottom: 26px; }
.quiz-q .unit-hint { display: block; margin-top: 8px; font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-text); }
.quiz-options { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quiz-opt {
  width: 100%; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line-strong); background: #FFFFFF; cursor: pointer; text-align: left;
  font: 400 clamp(30px, 3.4vw, 40px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums;
  transition: border-color 500ms var(--ease), background-color 500ms var(--ease), transform 500ms var(--ease-out), opacity 500ms var(--ease);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-right { background: var(--wash); border-color: var(--sage); color: var(--pine-deep); }
.quiz-opt.is-wrong { background: #F8ECEA; border-color: var(--flag); color: var(--flag); }
.quiz-opt.is-dim { opacity: .45; }
.quiz-answer { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: var(--wash); font: 400 15px/1.6 var(--ui); animation: fade .6s var(--ease-out) both; }
.quiz-answer strong { color: var(--ink); }
.quiz-answer .mono { display: block; margin-bottom: 6px; font-size: 11px; color: var(--sage-text); }
.quiz-answer p + p { margin-top: 8px; }
.quiz-next { margin-top: 22px; }
.quiz-end { text-align: center; padding: 20px 0; animation: fade .7s var(--ease-out) both; }
.quiz-end .figure { font-size: clamp(72px, 10vw, 112px); }
.quiz-end p { margin: 12px auto 26px; max-width: 30em; font: 400 19px/1.5 var(--read); color: var(--text); }
.btn-dark { background: var(--ink); color: #FFFFFF; border: 0; cursor: pointer; }
.btn-dark:hover { background: var(--pine); }

/* glossary */
.glossary-label { display: block; margin: 26px 0 10px; color: var(--sage-text); font-size: 11px; }
.glossary-jump { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.glossary-jump a { text-decoration: none; }
.glossary { margin: 0; }
.term { padding: 22px 0; border-bottom: 1px solid var(--line); transition: background-color 900ms var(--ease); }
.term.flash, .term:target { background: var(--wash); }
.term dt { font: 600 18px/1.3 var(--ui); color: var(--ink); margin-bottom: 8px; }
.term dd { margin: 0; }
.term dd p { font: 400 17.5px/1.6 var(--read); color: var(--read-ink); }
.term-more { display: inline-block; margin-top: 10px; font-size: 10.5px; text-decoration: none; }
.term[hidden] { display: none; }

/* price lookup: a Soro Data page, so it wears the platform's carbon */
.lookup-hero .data-copy { margin-bottom: 30px; }
.lookup-form { display: grid; gap: 18px; padding: 24px; border-radius: 20px; background: rgba(237, 240, 245, .05); border: 1px solid var(--carbon-line); }
.lookup-form .field-label { color: var(--mist); }
.lookup-form .field-box { background: rgba(237, 240, 245, .08); border-color: rgba(237, 240, 245, .2); }
.lookup-form .field-box:focus-within { border-color: var(--mist); box-shadow: 0 0 0 3px rgba(237, 240, 245, .12); }
.lookup-form input, .lookup-form select { color: var(--mist); }
.lookup-form input::placeholder { color: rgba(237, 240, 245, .45); }
.lookup-form option { color: var(--carbon); }
.lookup-form .btn { justify-self: start; border: 0; cursor: pointer; }
.lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.codes-note { margin: -8px 0 22px; }
.code-chips { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 24px; }
.code-chip {
  width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--steel-line); background: #FFFFFF; color: var(--carbon); font: 500 15px/1.4 var(--ui);
  transition: border-color 500ms var(--ease), transform 500ms var(--ease-out), background-color 500ms var(--ease);
}
.code-chip .mono { color: var(--steel); font-size: 10.5px; }
.code-chip:hover { border-color: var(--carbon); transform: translateY(-2px); }
.code-chip.is-on { background: var(--steel-wash); border-color: var(--carbon); }

/* saved */
.saved-list .share-btn { margin-top: 10px; }

/* ---------- From the publisher: Soro Data ---------- */
.publisher { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.publisher .mono { color: var(--mist-soft); font-size: 10.5px; padding-right: 14px; border-right: 1px solid var(--carbon-line); }
.publisher img { height: 17px; width: auto; }
.data-band, .data-hero, .data-card { color: var(--mist-soft); }
.data-band h2, .data-hero h1, .data-card h2 { color: var(--mist); font-family: var(--ui); font-weight: 600; letter-spacing: -.012em; }
.data-band, .data-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--carbon); }
.data-band::before, .data-hero::before {   /* light only: soft white highlights, never green */
  content: ""; position: absolute; inset: -20% 0; z-index: -2; translate: 0 var(--para, 0px);
  background:
    radial-gradient(46% 70% at 82% 20%, rgba(237, 240, 245, .10) 0%, rgba(237, 240, 245, 0) 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(237, 240, 245, .06) 0%, rgba(237, 240, 245, 0) 70%);
}
.data-band::after, .data-hero::after { opacity: .12; }
.data-band { padding: clamp(56px, 7vw, 96px) 0; }
.data-hero { padding: clamp(56px, 7vw, 104px) 0; }
.data-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.data-band h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; margin-bottom: 18px; }
.data-hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; margin-bottom: 20px; }
.data-copy > p:not(.publisher) { font: 400 17px/1.6 var(--ui); max-width: 34em; }
.data-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px;
  font: 600 14.5px/1 var(--ui); text-decoration: none;
  transition: background-color 600ms var(--ease), border-color 600ms var(--ease), transform 600ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-light { background: var(--mist); color: var(--carbon); }
.btn-light:hover { background: #FFFFFF; }
.btn-line { border: 1px solid rgba(237, 240, 245, .32); color: var(--mist); }
.btn-line:hover { border-color: var(--mist); }
.data-card :focus-visible, .data-band :focus-visible, .data-hero :focus-visible { outline-color: var(--mist); }

.rate-example {
  margin: 0; padding: 22px 24px 18px; border-radius: 20px;
  background: rgba(237, 240, 245, .045); border: 1px solid var(--carbon-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rate-example figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; color: var(--mist); font: 600 15px/1.35 var(--ui); }
.rate-example figcaption .mono { color: var(--data-green); font-size: 11px; }
.rate-example table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--ui); }
.rate-example th, .rate-example td { padding: 11px 10px 11px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--carbon-line); }
.rate-example thead th { padding-top: 0; border-top: 0; font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-soft); }
.rate-example tbody th { font-weight: 500; color: var(--mist); }
.rate-example .num { text-align: right; padding-right: 0; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mist); }
.rate-example tbody td.num { font-weight: 600; }
.rate-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--carbon-line); font: 400 13px/1.5 var(--ui); color: var(--mist-soft); }

.data-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 28px 30px 30px; border-radius: 22px; background: var(--carbon);
}
.data-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 90% at 100% 0%, rgba(237, 240, 245, .09) 0%, rgba(237, 240, 245, 0) 70%);
}
.data-card h2 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
.data-card > p:not(.publisher) { font: 400 15.5px/1.6 var(--ui); max-width: 40em; }
.data-card .data-actions { margin-top: 22px; }
.data-card.in-story { margin-top: 40px; }

/* The Soro Data page: product voice in the platform's neutral greys */
.kind-data .section-label { color: var(--steel); }
.kind-data .section-label::after { background: var(--steel-line); }
.kind-data .how-more a { color: var(--carbon); }
.data-section { padding: clamp(48px, 6vw, 80px) 0; }
.data-section.alt { background: var(--steel-wash); }
.data-figs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.data-figs li { padding: 0 24px; border-left: 1px solid var(--steel-line); }
.data-figs li:first-child { padding-left: 0; border-left: 0; }
.data-fig { font-family: var(--display); font-size: clamp(44px, 4.4vw, 60px); line-height: 1; color: var(--carbon); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.data-figs p:not(.data-fig) { font: 400 15px/1.5 var(--ui); color: #3D4550; }
.data-tools { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.data-tools li { padding: 22px 0; border-top: 1px solid var(--steel-line); }
.data-tools h3, .data-plans h3 { font: 600 17px/1.3 var(--ui); color: var(--carbon); margin-bottom: 8px; }
.data-tools p, .data-plans p { font: 400 15.5px/1.55 var(--ui); color: #3D4550; }
.data-plans { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: plan; }
.data-plans li { counter-increment: plan; padding: 0 22px; border-left: 1px solid var(--steel-line); }
.data-plans li:first-child { padding-left: 0; border-left: 0; }
.data-plans li::before { content: counter(plan, decimal-leading-zero); display: block; margin-bottom: 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--steel); }
.plans-note { margin-top: 30px; font: 400 15px/1.55 var(--ui); color: var(--steel); }
.plans-note a, .disclosure a { color: var(--carbon); }
.data-section .btn-light { background: var(--carbon); color: var(--mist); }
.data-section .btn-light:hover { background: #000000; }
.data-section .btn-line { border-color: #B9C0CA; color: var(--carbon); }
.data-section .btn-line:hover { border-color: var(--carbon); }
.data-section :focus-visible { outline-color: var(--carbon); }
.disclosure { padding-top: 8px; padding-bottom: 72px; }
.disclosure p { max-width: 760px; padding-top: 22px; border-top: 1px solid var(--steel-line); font: 400 14px/1.6 var(--ui); color: var(--steel); }

/* ---------- Footer ---------- */
.footer { background: var(--pine-deep); color: rgba(253, 246, 237, .82); }
.footer a { color: var(--mint); text-decoration-color: rgba(207, 232, 218, .4); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-top: 56px; padding-bottom: 44px; font-size: 14.5px; line-height: 1.6; }
.footer-grid p + p { margin-top: 8px; }
.footer-grid ul { list-style: none; }
.footer-grid li + li { margin-top: 6px; }
.footer-grid li a { text-decoration: none; }
.footer-grid li a:hover { text-decoration: underline; }
.footer-name { font-family: var(--display); font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); margin-bottom: 10px; }
.footer-label { color: var(--mint); margin-bottom: 12px; font-size: 11px; }
.footer-contact { margin-top: 14px !important; }
.footer-data img { height: 17px; width: auto; margin-bottom: 14px; }
.footer-base {
  display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 28px; color: rgba(207, 232, 218, .7);
  background: linear-gradient(rgba(253, 246, 237, .14), rgba(253, 246, 237, .14)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.footer-base img { height: 16px; width: auto; opacity: .9; }

/* ---------- Slim header and reading progress ---------- */
.minibar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transform: translateY(-101%); visibility: hidden;
  transition: transform 650ms var(--ease), visibility 0s linear 650ms;
}
.bar-on .minibar { transform: none; visibility: visible; transition: transform 650ms var(--ease), visibility 0s; }
.minibar-row { display: flex; align-items: center; gap: 20px; height: 56px; }
.mini-name { flex: none; font-family: var(--display); font-size: 21px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mini-title { flex: 1; min-width: 0; padding-left: 20px; border-left: 1px solid var(--line-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font: 500 14px/1.2 var(--ui); }
.mini-title .mono { margin-right: 10px; color: var(--sage-text); font-size: 10.5px; }
.mini-link { flex: none; color: var(--ink); font: 500 14px/1 var(--ui); text-decoration: none; }
.mini-link:hover { color: var(--sage-text); }
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 41; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--sage); transform: scaleX(var(--p, 0)); transform-origin: left; }
html:not(.js) .minibar, html:not(.js) .progress { display: none; }

/* ---------- Skeletons: the shape of what is loading, with a slow sweep ---------- */
.skel { display: inline-block; position: relative; overflow: hidden; height: 1em; min-width: 2.5em; border-radius: 4px; background: var(--wash); vertical-align: -.15em; }
.skel-w-sm { width: 5.5em; }
.skel-w-lg { width: 9em; }
.skel-line { display: block; height: .8em; margin-top: 12px; }
.skel-head { display: block; height: 1.6em; width: 78%; margin-top: 10px; }
.skel-short { width: 55%; }
html:not(.js) .skel-list { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .skel::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: skelSweep 1.9s var(--ease) infinite;
  }
  @keyframes skelSweep { to { transform: translateX(100%); } }
}

/* ---------- Motion: settles in, never snaps ----------
   Three layers, all off under reduced motion:
   1. Arrival. Elements marked .enter (headlines, deks, panels) wait for the fonts ("ready", set in the
      page head, never later than 700ms), then rise in with their own delay (--d). The masthead (.mh)
      plays only on the first page of a visit.
   2. Page to page. Same-site links cross-fade with the masthead held still, as on the data platform.
   3. Scrolling. .reveal items settle in as they arrive and section rules draw across. Figures never count. */

@media (prefers-reduced-motion: no-preference) {
  .js:not(.ready) .enter { opacity: 0; }
  .ready .enter { animation: rise 1.1s var(--ease-out) var(--d, 0s) both; }
  .ready .enter.wipe { animation-name: wipe; animation-duration: 1.25s; }
  .ready .enter.slide { animation-name: slideIn; animation-duration: 1.3s; }
  .ready .enter.draw { animation-name: draw; animation-duration: 1.4s; }

  /* first page of a visit: the masthead arrives, and the page waits a beat for it */
  .js:not(.seen):not(.ready) .mh { opacity: 0; }
  .ready:not(.seen) .mh { animation: fade 1s var(--ease-out) var(--d, 0s) both; }
  .ready:not(.seen) .mh-name { animation-name: nameIn; animation-duration: 1.6s; }
  .ready:not(.seen) .mh-rule { animation-name: ruleOpen; animation-duration: 1.4s; }
  .ready:not(.seen) main .enter { animation-delay: calc(var(--d, 0s) + .45s); }

  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes wipe {
    from { opacity: 0; transform: translateY(30px); clip-path: inset(100% -6% -25% -6%); }
    to   { opacity: 1; transform: none; clip-path: inset(-25% -6% -25% -6%); }
  }
  @keyframes slideIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
  @keyframes draw { from { opacity: 0; clip-path: inset(0 100% 0 0); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 -1% 0 0); } }
  @keyframes nameIn { from { opacity: 0; letter-spacing: .16em; } to { opacity: 1; letter-spacing: .07em; } }
  @keyframes ruleOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

  /* scrolling */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
  html.js:not(.io) .reveal { animation: fade 0s linear 2.5s forwards; }   /* if the script never runs, hand the content back */
  .js .section-label::after { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) .15s; }
  .js .section-label.in::after { transform: none; }

  /* photos fade in as they arrive and drift closer on hover */
  .js .photo { opacity: 0; transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out); }
  .js .photo.is-in { opacity: 1; }
  html.js:not(.io) .photo { animation: fade 0s linear 2.5s forwards; }
  .story-card:hover .card-photo .photo, .section-cols > li:hover .col-photo .photo, .story-list li:hover .row-photo .photo { transform: scale(1.045); }

  /* small hovers */
  .story-list h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 500ms var(--ease), background-size 800ms var(--ease-out); }
  .story-list h3 a:hover { background-size: 100% 1px; }
  .read span, .btn span, .how-more span { display: inline-block; transition: transform 600ms var(--ease-out); }
  .read:hover span, .btn:hover span, .how-more a:hover span { transform: translateX(4px); }
  .js .rate-example tbody tr.reveal { transition: background-color 500ms var(--ease), opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
  .rate-example tbody tr:hover { background: rgba(237, 240, 245, .05); }
  .search-results > * { animation: fade .45s var(--ease-out) both; }

  /* page to page */
  .masthead { view-transition-name: masthead; }
  ::view-transition-group(masthead), ::view-transition-old(masthead), ::view-transition-new(masthead) { animation: none; }
  ::view-transition-old(root) { animation: vtOut .28s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vtIn .55s var(--ease-out) both; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; } }
}
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .canvas::before { animation: none; }
  .btn:hover, .read:hover { transform: none; }
  .minibar, .numbers-card { transition: none; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .data-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .data-plans li:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 980px) {
  .masthead-data { display: none; }
  .lead-photo::after { background: linear-gradient(180deg, rgba(14, 36, 28, .9), rgba(14, 36, 28, .82) 55%, rgba(14, 36, 28, .92)); }
  .estimator { grid-template-columns: minmax(0, 1fr); }
  .est-result { position: static; }
  .nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 24px;
         -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a:last-child { padding-right: 32px; }
  .lead-grid { grid-template-columns: minmax(0, 1fr); }
  .story-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .meta-strip li { padding: 9px 12px; }
  .rail { order: -1; }
  .numbers-card { position: static; }
  .numbers-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .numbers-card .panel-label { grid-column: 1 / -1; }
  .numbers-card .figure-row:nth-of-type(2) { border-top: 0; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .story-card, .story-card:first-child { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .story-card + .story-card::before { display: none; }
  .story-card:first-child { border-top: 0; padding-top: 0; }
  .section-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .section-cols > li:nth-child(odd)::before { display: none; }
  .data-band-grid { grid-template-columns: minmax(0, 1fr); }
  .data-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .data-figs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .data-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally-row { grid-template-columns: 200px minmax(0, 1fr); }
  .tally-source { grid-column: 2; text-align: left; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .story-list li:has(.row-photo) { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 14px; }
  .story-list li:has(.row-photo) > time, .story-list li:has(.row-photo) > div { grid-column: 1; }
  .row-photo { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1; }
  .photo-frame { aspect-ratio: 4 / 3; border-radius: 14px; }
  .lead-credit { left: var(--gutter); text-align: left; }
  .credit-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .est-fields { grid-template-columns: minmax(0, 1fr); }
  .quiz-options { grid-template-columns: minmax(0, 1fr); }
  .code-chips, .lookup-row { grid-template-columns: minmax(0, 1fr); }
  .lookup-form { padding: 18px; }
  .masthead-top .mono { font-size: 10px; letter-spacing: .1em; }
  .by-soro .mono { display: none; }
  .nav { gap: 20px; }
  .also-item { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .also-item:first-child { border-top: 0; padding-top: 0; }
  .story-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .story-list time { padding-top: 0; }
  .meta-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-strip li, .meta-strip li:first-child { padding: 10px 0; border-left: 0; }
  .meta-strip li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line-strong); }
  .meta-strip li:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .numbers-card { padding: 18px 18px 4px; column-gap: 18px; }
  .numbers-card .figure { font-size: 34px; }
  .numbers-card .unit { display: block; margin: 6px 0 0; font-size: 12.5px; }
  .numbers-card .figure-label { font-size: 13px; }
  .ledger li { grid-template-columns: 32px minmax(0, 1fr); }
  .src-host { grid-column: 2; }
  .prose { font-size: 18.5px; }
  .glass { padding: 22px 20px 12px; }
  .section-cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .section-cols > li, .section-cols > li:first-child, .section-cols > li:nth-child(3) { padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
  .section-cols > li:first-child { border-top: 0; padding-top: 0; }
  .section-cols > li::before { display: none; }
  .pager-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pager-newer { text-align: left; }
  .tally-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tally-row .figure { font-size: 34px; }
  .tally-source { grid-column: 1; }
  .search-row button { padding: 0 18px; }
  .minibar-row { height: 50px; gap: 14px; }
  .mini-name { font-size: 17px; }
  .mini-title { padding-left: 14px; font-size: 13px; }
  .mini-title .mono { display: none; }
  .bar-on .numbers-card { top: 0; }
  .data-card { padding: 24px 20px 24px; border-radius: 18px; }
  .publisher { flex-wrap: wrap; gap: 10px; }
  .rate-example { padding: 18px 16px 14px; }
  .rate-example table { font-size: 13px; }
  .rate-example th, .rate-example td { padding-right: 8px; }
  .data-figs { grid-template-columns: minmax(0, 1fr); }
  .data-figs li, .data-figs li:first-child, .data-figs li:nth-child(3) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--steel-line); }
  .data-figs li:first-child { border-top: 0; padding-top: 0; }
  .data-tools { grid-template-columns: minmax(0, 1fr); }
  .data-plans { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .data-plans li, .data-plans li:first-child, .data-plans li:nth-child(4) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--steel-line); }
  .data-plans li:first-child { border-top: 0; padding-top: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}