/* ============================================================================
   Still Paying — stylesheet
   CS336, Calvin University

   Visual idea: the page is built in the language of a loan statement.
   Ruled rows and figures right-aligned in a monospaced face, set in indigo.
   Crimson is reserved for what has gone wrong, and appears nowhere else.

   Units: no px or pt anywhere. Lengths are rem (relative to the root font
   size) so the whole layout scales when a reader sets a larger default text
   size in their browser. Media-query breakpoints are em, which in a media
   query always resolves against 16px regardless of the root font size — that
   keeps the breakpoints stable instead of letting them drift as text scales.
   em is also used where a value should track its own element's font size,
   such as heading margins and line lengths.

   Contents
     1. Tokens and theming
     2. Base elements
     3. Masthead, navigation, settings
     4. Hero and the statement card
     5. Sections, ledger, chart
     6. Effects, alert band
     7. Calculator
     8. Resources and actions
     9. Footer
    10. Responsive
    11. Reduced motion
   ========================================================================= */

/* ── 1. Tokens and theming ───────────────────────────────────────────── */

/* Palette: indigo and alarm.
   Indigo-violet is the page's colour — institutional, ink-like, and saturated
   enough to carry a whole page without going grey. It does the brand, the
   links, the structure AND the money figures, because on this site every
   figure is money and a separate colour for them only splits the reader's
   attention. Crimson is held back entirely for things that are wrong:
   delinquency, default, and the deadline. Two hues, strictly divided.

   Light mode gets its colour from tinted grounds rather than a third hue —
   the paper is pale periwinkle and alternating sections step a shade deeper,
   so white only ever appears on cards that sit on top. */

:root {
  --paper:        #EBEDFA;   /* pale periwinkle, never white */
  --surface:      #FFFFFF;
  --surface-2:    #E0E4F6;   /* alternating sections step deeper */
  --ink:          #161A34;   /* near-black, violet-biased */
  --ink-2:        #454C7A;
  --ink-3:        #5A6285;
  --rule:         #C8CDEC;
  --rule-strong:  #9AA2D4;

  --brand:        #4B34D4;   /* brand, links, structure, figures */
  --brand-deep:   #3320A8;
  --brand-soft:   #DBD7FA;

  --figure:       #4B34D4;   /* money amounts share the brand hue */
  --figure-soft:  #DBD7FA;

  --alert:        #CC2440;   /* only where something is wrong */
  --alert-soft:   #FBDDE2;
  --alert-deep:   #7C1226;


  /* Tokens for the two inverted regions (the statement header and the deadline
     band). Expressing these as names rather than as extra theme selectors is
     what keeps the rule below this point theme-free — see the note above. */
  --on-brand:        #FFFFFF;
  --stmt-head-bg:    #4B34D4;
  --stmt-head-fg:    #FFFFFF;
  --stmt-head-meta:  rgba(255, 255, 255, .82);

  --band-bg:         #7C1226;
  --band-fg:         #FFF1F3;
  --band-muted:      rgba(255, 241, 243, .84);
  --band-rule:       rgba(255, 255, 255, .24);
  --band-chip-bg:    rgba(255, 255, 255, .15);
  --band-border:     #CC2440;

  --cd-bg:           rgba(0, 0, 0, .22);
  --cd-border:       rgba(255, 255, 255, .2);
  --cd-unit-bg:      rgba(255, 255, 255, .11);
  --cd-num:          #FFFFFF;
  --cd-label:        rgba(255, 241, 243, .78);

  --shadow:       0 0.0625rem 0 rgba(22, 26, 52, .05), 0 0.75rem 1.875rem -1.125rem rgba(22, 26, 52, .45);

  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 66ch;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  /* Fluid rather than a fixed width: on a wide monitor the page fills most of
     the screen instead of stranding it in margins, and because the first term
     is a viewport unit it keeps reflowing when the reader zooms in or narrows
     the window. Paragraphs stay readable regardless — they are capped
     separately by --measure. */
  --wrap: min(94vw, 105rem);
  --radius: 0.25rem;

  /* Height of the sticky masthead. Scroll anchoring is derived from this, so a
     nav jump lands with the section's top edge flush under the header. */
  --header-h: 3.875rem;
}

/* Dark mode is only a redefinition of the names above — no component rule
   anywhere in this file changes between the two themes. */
:root[data-theme="dark"] {
  --paper:        #0B0D20;
  --surface:      #151833;
  --surface-2:    #1A1E3E;
  --ink:          #E7E9FA;
  --ink-2:        #A8AEDA;
  --ink-3:        #7D85B4;
  --rule:         #272C52;
  --rule-strong:  #3D4478;

  --brand:        #A091FF;
  --brand-deep:   #7C68F0;
  --brand-soft:   #241F5A;

  --figure:       #A091FF;
  --figure-soft:  #241F5A;

  --alert:        #FF7A8E;
  --alert-soft:   #3A121E;
  --alert-deep:   #FFA9B6;


  --on-brand:        #0B0D20;
  --stmt-head-bg:    #241F5A;
  --stmt-head-fg:    #E7E9FA;
  --stmt-head-meta:  #7D85B4;

  --band-bg:         #240B14;
  --band-fg:         #E7E9FA;
  --band-muted:      #A8AEDA;
  --band-rule:       #4A1B29;
  --band-chip-bg:    rgba(255, 122, 142, .14);
  --band-border:     #5E1B2A;

  --cd-bg:           rgba(0, 0, 0, .35);
  --cd-border:       #4A1B29;
  --cd-unit-bg:      rgba(255, 255, 255, .05);
  --cd-num:          #FFA9B6;
  --cd-label:        #7D85B4;

  --shadow:       0 0.0625rem 0 rgba(0, 0, 0, .4), 0 1rem 2.25rem -1.25rem rgba(0, 0, 0, .95);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0B0D20;
    --surface:      #151833;
    --surface-2:    #1A1E3E;
    --ink:          #E7E9FA;
    --ink-2:        #A8AEDA;
    --ink-3:        #7D85B4;
    --rule:         #272C52;
    --rule-strong:  #3D4478;

    --brand:        #A091FF;
    --brand-deep:   #7C68F0;
    --brand-soft:   #241F5A;

    --figure:       #A091FF;
    --figure-soft:  #241F5A;

    --alert:        #FF7A8E;
    --alert-soft:   #3A121E;
    --alert-deep:   #FFA9B6;

    --on-brand:        #0B0D20;
    --stmt-head-bg:    #241F5A;
    --stmt-head-fg:    #E7E9FA;
    --stmt-head-meta:  #7D85B4;

    --band-bg:         #240B14;
    --band-fg:         #E7E9FA;
    --band-muted:      #A8AEDA;
    --band-rule:       #4A1B29;
    --band-chip-bg:    rgba(255, 122, 142, .14);
    --band-border:     #5E1B2A;

    --cd-bg:           rgba(0, 0, 0, .35);
    --cd-border:       #4A1B29;
    --cd-unit-bg:      rgba(255, 255, 255, .05);
    --cd-num:          #FFA9B6;
    --cd-label:        #7D85B4;
    --shadow:       0 0.0625rem 0 rgba(0, 0, 0, .4), 0 1rem 2.25rem -1.25rem rgba(0, 0, 0, .95);
  }
}

/* ── 2. Base elements ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anchor jumps: each target reserves exactly the header's height, so the
   section's top edge lands flush beneath the masthead and no part of the
   previous section stays on screen. scroll-margin on the target beats
   scroll-padding on the root here, because the sections are full-bleed. */
:target,
section[id],
[id^="deadline"] { scroll-margin-top: var(--header-h); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.1rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--brand); text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem; }
a:hover { text-decoration-thickness: 0.125rem; }

strong { font-weight: 600; }

:focus-visible {
  outline: 0.125rem solid var(--brand);
  outline-offset: 0.1875rem;
  border-radius: 0.125rem;
}

.skip-link {
  position: absolute;
  left: -100vw;          /* off-screen until focused; no magic pixel offset */
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .7rem 1.1rem;
  z-index: 200;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* Figures throughout the page use tabular monospace so columns line up. */
.stmt__value, .stmt__ticker, .ledger__figure, .plan__rows dd,
.chart__figure, .gauge__num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 3. Masthead, navigation, settings ───────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(0.875rem);
  border-bottom: 0.0625rem solid var(--rule);
}

.masthead__bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  flex: 0 0 auto;
}

.brand__mark { width: 1.625rem; height: 1.625rem; flex: 0 0 auto; }
.brand__mark line { stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.brand__mark .brand__page { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.brand__mark .brand__due { stroke: var(--alert); stroke-width: 2.4; }

.brand__name {
  font-family: var(--serif);
  font-size: 1.22rem;
  letter-spacing: -0.015em;
}

.nav { margin-left: auto; }

.nav ul {
  list-style: none;
  display: flex;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .925rem;
  padding: .3rem 0;
  border-bottom: 0.125rem solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a.is-current { color: var(--ink); border-bottom-color: var(--brand); }

/* The one nav item with a date attached to it. */
.nav__urgent { color: var(--alert); font-weight: 500; }
.nav__urgent:hover { color: var(--alert); }
.nav a.nav__urgent.is-current { color: var(--alert); border-bottom-color: var(--alert); }

.masthead__actions { display: flex; gap: .4rem; flex: 0 0 auto; }

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0.0625rem solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.iconbtn:hover { color: var(--ink); border-color: var(--rule-strong); }
.iconbtn svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.iconbtn__label {
  position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.iconbtn[aria-expanded="true"] {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.iconbtn--menu { display: none; }

.settings { border-top: 0.0625rem solid var(--rule); background: var(--surface); }

.settings__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.settings__group { border: 0; margin: 0; padding: 0; }
.settings__group legend {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-3);
  padding: 0 0 .5rem;
}
.settings__hint { font-size: .82rem; color: var(--ink-3); margin: .5rem 0 0; max-width: 34ch; }

.segmented {
  display: inline-flex;
  border: 0.0625rem solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.segmented button {
  font: inherit;
  font-size: .9rem;
  padding: .42rem 1rem;
  border: 0;
  border-right: 0.0625rem solid var(--rule);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { background: var(--surface-2); color: var(--ink); }
.segmented button[aria-checked="true"] { background: var(--brand); color: var(--on-brand); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .9rem;
  position: relative;        /* keeps the hidden input inside this label */
}

/* The real checkbox is hidden but still focusable and still the thing screen
   readers announce; the track and thumb below are only its picture. */
.switch input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch__track {
  width: 2.625rem; height: 1.5rem;
  border-radius: 0.75rem;
  background: var(--rule-strong);
  display: inline-block;
  position: relative;
  transition: background .18s ease;
}
.switch__thumb {
  position: absolute;
  top: 0.1875rem; left: 0.1875rem;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background: var(--surface);
  transition: transform .18s ease;
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(1.125rem); }
.switch input:focus-visible + .switch__track { outline: 0.125rem solid var(--brand); outline-offset: 0.1875rem; }

/* ── 4. Hero and the statement card ──────────────────────────────────── */

/* Full-bleed wash so the page opens in colour; the inner grid still respects
   --wrap, so the content stays aligned with every section below it. */
.hero {
  background:
    radial-gradient(90rem 40rem at 80% -10%,
      color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 7%, transparent) 0%, transparent 70%);
  border-bottom: 0.0625rem solid var(--rule);
}

.hero__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2.2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.hero__title { margin-bottom: .45em; }

.hero__lede {
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 54ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

.btn {
  display: inline-block;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  padding: .72rem 1.35rem;
  border-radius: var(--radius);
  border: 0.0625rem solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-deep); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-3); }

/* The hero's picture is a bill, so it is sized like one: a real document on
   the page rather than a caption beside the headline. */
.stmt {
  margin: 0;
  background: var(--surface);
  border: 0.0625rem solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Indigo masthead, the way a statement carries its issuer's bar across
   the top. */
.stmt__head {
  padding: 1.15rem 1.6rem 1.2rem;
  background: var(--stmt-head-bg);
  color: var(--stmt-head-fg);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.stmt__issuer {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.stmt__meta { font-size: .85rem; color: var(--stmt-head-meta); }
.stmt__acct { font-family: var(--mono); }

.stmt__body { padding: .5rem 1.6rem 1.5rem; }

.stmt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 0.0625rem dotted var(--rule);
}
.stmt__label { font-size: .96rem; color: var(--ink-2); }
.stmt__value {
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.stmt__value--alert { color: var(--alert); }

.stmt__accrual { padding-top: 1.35rem; }
.stmt__accrual .stmt__label { display: block; margin-bottom: .35rem; }

.stmt__ticker {
  display: block;
  font-size: clamp(2.4rem, 5.2vw, 3.4rem);
  font-weight: 600;
  color: var(--figure);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.stmt__foot {
  padding: 1rem 1.6rem 1.15rem;
  border-top: 0.0625rem solid var(--rule);
  background: var(--surface-2);
  font-size: .79rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ── 5. Sections, ledger, chart ──────────────────────────────────────── */

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}

.section--tint {
  max-width: none;
  background: var(--surface-2);
  border-block: 0.0625rem solid var(--rule);
}
/* Cards sitting on a tinted section need to stay white to lift off it. */
.section--tint .card,
.section--tint .plan,
.section--tint .calc__form,
.section--tint .calc__disclaimer,
.section--tint .acts { background: var(--surface); }
.section--tint > * { max-width: var(--wrap); margin-inline: auto; }

.section__head { margin-bottom: 2rem; }
.section__intro {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 0;
}

.ledger { list-style: none; margin: 0; padding: 0; border-top: 0.0625rem solid var(--rule-strong); }

.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 0.0625rem solid var(--rule);
}

.ledger__label { font-size: 1rem; color: var(--ink); }
.ledger__note { display: block; font-size: .84rem; color: var(--ink-3); margin-top: .12rem; }

.ledger__figure {
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  font-weight: 500;
  color: var(--figure);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ledger__row--alert .ledger__figure { color: var(--alert); }

.local {
  margin-top: 1.8rem;
  padding: 1.4rem 1.6rem;
  background: var(--brand-soft);
  border: 0.0625rem solid var(--rule);
  border-left: 0.1875rem solid var(--brand);
  border-radius: var(--radius);
}
.local h3 { margin-bottom: .45em; color: var(--brand); }
.local p { margin-bottom: 0; }

.chart { margin: 0 0 1.8rem; }

/* Capped so the small viewBox never scales the chart's text up too far on a
   wide screen, while still filling the width of a phone. */
.chart__svg { width: 100%; max-width: 35rem; height: auto; display: block; }
.chart figcaption { font-size: .82rem; color: var(--ink-3); margin-top: .6rem; max-width: var(--measure); }

.chart__label { font-family: var(--sans); font-size: 0.9375rem; fill: var(--ink-2); }
.chart__caption { font-family: var(--sans); font-size: 0.75rem; fill: var(--ink-3); }
.chart__figure { font-size: 1.1875rem; fill: var(--brand); font-weight: 600; }
.chart__figure--muted { fill: var(--ink-3); }
.chart__bar--tuition { fill: var(--brand); }
.chart__bar--cpi { fill: var(--brand); opacity: .3; }

.prose { max-width: var(--measure); }

/* ── 6. Effects, alert band ──────────────────────────────────────────── */

.effects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.effect {
  padding: 1.15rem 1.35rem 1.35rem;
  background: var(--surface);
  border: 0.0625rem solid var(--rule);
  border-top: 0.1875rem solid var(--brand);
  border-radius: var(--radius);
}
.effect h3 {
  font-size: 1.2rem;
  font-family: var(--serif);
  margin-bottom: .5em;
  text-wrap: balance;
}
.effect p { font-size: .97rem; line-height: 1.6; color: var(--ink-2); margin-bottom: .85em; }
.effect p:last-child { margin-bottom: 0; }

.gauge { margin: 1.6rem 0 0; }
.gauge svg { width: 100%; max-width: 28.75rem; height: auto; display: block; }
.gauge__track { fill: var(--rule); }
.gauge__fill { fill: var(--alert); opacity: .38; }       /* the 91 points lost */
.gauge__rule { stroke: var(--ink); stroke-width: 1.5; }
.gauge__rule--alert { stroke: var(--alert); stroke-width: 2; }
.gauge__num { font-size: 1rem; fill: var(--ink); font-weight: 600; }
.gauge__num--alert { fill: var(--alert); }
.gauge__when { font-family: var(--sans); font-size: 0.6875rem; fill: var(--ink-3); }
.gauge__scale { font-family: var(--mono); font-size: 0.625rem; fill: var(--ink-3); }

.delayed {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.delayed li {
  font-size: .88rem;
  color: var(--ink-2);
  border: 0.0625rem solid var(--rule);
  background: var(--surface);
  border-radius: 6.25rem;
  padding: .3rem .8rem;
}

/* This is the only section that inverts: dark red ground, light type. It is
   the one place on the page where something is actually running out, and it
   should stop the scroll. */
.alertband {
  background: var(--band-bg);
  color: var(--band-fg);
  border-block: 0.0625rem solid var(--band-border);
}

.alertband__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.4rem) var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;     /* the clock sits against the middle of the text */
}

.alertband__kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--band-fg);
  background: var(--band-chip-bg);
  border: 0.0625rem solid var(--band-rule);
  border-radius: 6.25rem;
  padding: .22rem .7rem .22rem .55rem;
  margin: 0 0 .9rem;
}

/* the small pulsing dot in the kicker */
.alertband__dot {
  width: 0.4375rem; height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.alertband h2 { color: inherit; max-width: 18ch; margin-bottom: .5em; }
.alertband p { color: var(--band-muted); max-width: 54ch; font-size: .97rem; }
.alertband strong { color: var(--band-fg); font-weight: 600; }

.alertband__do {
  margin-bottom: 0;
  padding-top: .9rem;
  border-top: 0.0625rem solid var(--band-rule);
  font-weight: 500;
}
.alertband a { color: var(--band-fg); text-decoration-thickness: 0.125rem; }
.alertband a:hover { color: var(--band-fg); text-decoration-thickness: 0.1875rem; }

/* ── Countdown ──────────────────────────────────────────────────────── */

.countdown {
  background: var(--cd-bg);
  border: 0.0625rem solid var(--cd-border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
}

.countdown__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cd-label);
  margin-bottom: .85rem;
}
.countdown__label svg {
  width: 0.9375rem; height: 0.9375rem;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  flex: 0 0 auto;
}

.countdown__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.countdown__unit {
  text-align: center;
  background: var(--cd-unit-bg);
  border-radius: 0.1875rem;
  padding: .55rem .2rem .45rem;
}

.countdown__num {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 4.2vw, 2.15rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cd-num);
}

.countdown__unit-name {
  display: block;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--cd-label);
  margin-top: .2rem;
}

.countdown__note {
  margin: .85rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--cd-label);
  max-width: none;
}

.countdown__note--passed { font-weight: 500; color: var(--band-fg); }

/* ── 7. Calculator ───────────────────────────────────────────────────── */

.calc { display: grid; gap: 1.6rem; }

.calc__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem 1.2rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 0.0625rem solid var(--rule);
  border-radius: var(--radius);
}

.field label {
  display: block;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: .4rem;
}

.field__input {
  display: flex;
  align-items: center;
  gap: .3rem;
  border: 0.0625rem solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0 .65rem;
}
.field__input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--brand) 18%, transparent); }

.field__input input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: .6rem 0;
  width: 100%;
  min-width: 0;
}
.field__input input:focus { outline: none; }
.field__prefix, .field__suffix { font-family: var(--mono); font-size: .92rem; color: var(--ink-3); }

.calc__out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.plan {
  background: var(--surface);
  border: 0.0625rem solid var(--rule);
  border-top: 0.1875rem solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem 1.5rem;
}
.plan { border-top-color: var(--rule-strong); }
.plan--rap { border-top-color: var(--brand); }

.plan__name { margin-bottom: .15em; }
.plan__sub { font-size: .84rem; color: var(--ink-3); margin-bottom: 1.1rem; }

.plan__rows { margin: 0; }
.plan__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 0.0625rem dotted var(--rule);
}
.plan__rows > div:last-child { border-bottom: 0; }
.plan__rows dt { font-size: .9rem; color: var(--ink-2); }
.plan__rows dd { margin: 0; font-size: 1.05rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.plan__rows > div:first-child dd { font-size: 1.5rem; color: var(--figure); letter-spacing: -0.02em; }

/* Both cards end with a note, so neither is left with dead space when the
   grid equalises their heights. */
.plan { display: flex; flex-direction: column; }
.plan__rows { flex: 1 0 auto; }

.plan__note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 0.0625rem solid var(--rule);
  font-size: .85rem;
  color: var(--ink-2);
}
.plan__note:empty { display: none; }

/* Spans the full width and splits into columns on a wide screen, so the note
   sits evenly under both plan cards instead of hugging the left edge. */
.calc__disclaimer {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: none;
  margin: 0;
  padding: 1.05rem 1.3rem;
  background: var(--surface);
  border: 0.0625rem solid var(--rule);
  border-radius: var(--radius);
  columns: 2;
  column-gap: 2.2rem;
  column-rule: 0.0625rem solid var(--rule);
  text-align: justify;
  hyphens: auto;
}
.calc__disclaimer strong { color: var(--ink-2); }

/* ── 8. Resources and actions ────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }

.chip {
  font: inherit;
  font-size: .88rem;
  padding: .42rem 1rem;
  border: 0.0625rem solid var(--rule-strong);
  border-radius: 6.25rem;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.chip:hover { background: var(--surface); color: var(--ink); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.filters__status { font-size: .84rem; color: var(--ink-3); margin: 0 0 1.6rem; min-height: 1.3em; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.1rem;
}

.card {
  background: var(--surface);
  border: 0.0625rem solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
}
.card[hidden] { display: none; }

.card__tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-3);
  border: 0.0625rem solid var(--rule);
  border-radius: 0.125rem;
  padding: .12rem .45rem;
  margin-bottom: .75rem;
}
.card h3 { font-size: 1.08rem; margin-bottom: .5em; }
.card h3 a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.card h3 a:hover { color: var(--brand); }
.card { transition: border-color .15s ease; }
.card:hover { border-color: var(--rule-strong); }
.card p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* One bordered block, divided rather than scattered: the four answers read as
   a single set, and the rules between them do the separating that big gaps
   used to do badly. */
.acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--surface);
  border: 0.0625rem solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.act {
  padding: 1.3rem 1.5rem;
  border-right: 0.0625rem solid var(--rule);
  border-bottom: 0.0625rem solid var(--rule);
}
.act:nth-child(2n) { border-right: 0; }
.act:nth-last-child(-n+2) { border-bottom: 0; }

.act h3 {
  margin-bottom: .5em;
  font-size: 1.02rem;
  color: var(--brand);
}
.act p {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 0;
  max-width: none;
}

.pull {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  padding: 0 0 0 clamp(1rem, 3vw, 2rem);
  border-left: 0.1875rem solid var(--brand);
}
.pull p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  line-height: 1.42;
  color: var(--ink);
  max-width: 34ch;
  margin: 0;
}

/* ── 9. Footer ───────────────────────────────────────────────────────── */

.colophon {
  background: var(--surface);
  border-top: 0.0625rem solid var(--rule-strong);
}

.colophon__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4rem) var(--gutter) 2.4rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
}

.brand--foot { margin-bottom: .9rem; }
.colophon__about p { font-size: .92rem; color: var(--ink-2); margin: 0; }

.colophon h2 {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .48rem; }
.colophon a { color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.colophon a:hover { color: var(--brand); text-decoration: underline; }
.colophon__sources a { font-size: .87rem; }

.colophon__base {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) 2.2rem;
  border-top: 0.0625rem solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  justify-content: space-between;
}
.colophon__base p { font-size: .8rem; color: var(--ink-3); margin: 0; max-width: none; }

/* ── 10. Responsive ──────────────────────────────────────────────────── */

@media (max-width: 60em) {
  .hero__grid { grid-template-columns: 1fr; }
  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__about { grid-column: 1 / -1; }
  .alertband__inner { grid-template-columns: 1fr; }
  .alertband h2 { max-width: 24ch; }

  /* Stacked, the clock goes first — it is the reason to read the rest, and a
     phone reader should not have to scroll past three paragraphs to find it. */
  .countdown { order: -1; }
}

@media (max-width: 53.75em) {
  .iconbtn--menu { display: inline-grid; }

  .nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    display: none;
    padding-top: .5rem;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a {
    display: block;
    padding: .72rem .1rem;
    border-bottom: 0.0625rem solid var(--rule);
    font-size: 1rem;
  }
  .nav a.is-current { border-bottom-color: var(--figure); }

  .masthead__bar { flex-wrap: wrap; }
  .masthead__actions { margin-left: auto; }
}

@media (max-width: 47.5em) {
  .effects, .calc__out { grid-template-columns: 1fr; }
  .settings__inner { gap: 1.6rem; flex-direction: column; }

  /* The four answers stack into one ruled column. */
  .acts { grid-template-columns: 1fr; }
  .act { border-right: 0; }
  .act:nth-last-child(-n+2) { border-bottom: 0.0625rem solid var(--rule); }
  .act:last-child { border-bottom: 0; }

  /* Two text columns are unreadable at this width. */
  .calc__disclaimer { columns: 1; text-align: left; hyphens: none; }
}

@media (max-width: 35em) {
  body { font-size: 1rem; }

  /* Four countdown cells stay side by side — it reads as a clock, and
     breaking it into two rows loses that. Only the padding tightens. */
  .countdown__clock { gap: .35rem; }
  .countdown__unit { padding: .45rem .1rem .4rem; }
  .countdown__unit-name { font-size: .62rem; letter-spacing: .02em; }

  .ledger__row, .stmt__row {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
  .ledger__figure { font-size: 1.85rem; }

  .hero__actions .btn { flex: 1 1 100%; text-align: center; }

  .colophon__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}

/* ── 11. Reduced motion ──────────────────────────────────────────────── */

/* Two ways to switch animation off: the visitor's OS setting, or the
   in-page control, which sets data-motion="reduced" on <html>. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

:root[data-motion="reduced"] { scroll-behavior: auto; }
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}