@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Mandate.
   The subject is a spending record, so the page is built as one: ruled
   entries, figures right-aligned in a column, a running balance, and a hard
   rule under the total. Colour comes from aged ledger stock rather than the
   usual cream, and the one accent marks money NOT spent, because refusing to
   buy is what this software is for. */
:root {
  --paper:    #ede7d8;   /* aged ledger stock, warmer than the usual cream */
  --paper-2:  #e5dcc9;   /* the darker band between entry blocks */
  --card:     #f6f2e7;
  --rule:     #cfc3a8;   /* the printed rule */
  --rule-2:   #8fa5b8;   /* the faint blue guide line */
  --ink:      #1b2a24;
  --ink-soft: #5c6a5f;
  --sealed:   #2f6b4f;   /* money committed */
  --retained: #9d4e1b;   /* money held back: the point of the page */
  --deep:     #16261f;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px;  --s8: 56px; --s9: 72px; --s10: 96px;

  /* Type, after Bringhurst: a modular scale, not arbitrary steps. */
  --t-fine:  13px;
  --t-entry: 16px;
  --t-read:  19px;
  --t-sum:   25px;
  --t-head:  33px;
  --t-hero:  clamp(40px, 5.4vw, 68px);

  --col: 1040px;
  --gutter: 40px;
  --r: 3px;            /* ledgers are printed, not rounded */
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: var(--t-entry); line-height: 1.62;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sealed); }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }

/* Keyboard focus is visible on every interactive element, on both grounds. */
a:focus-visible {
  outline: 2px solid var(--sealed); outline-offset: 3px; border-radius: var(--r);
}
.hero a:focus-visible, section.dark a:focus-visible {
  outline-color: #a9d8bd;
}

/* Motion is decoration here; the figures read the same without it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* Sticky bar. Transparent over the hero, frosted once the page scrolls. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(245,243,234,.82);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(224,220,203,.65);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px;
}
/* The wordmark has no descenders, so centring its line box leaves the
   letters sitting high against the logo. Aligning the two by eye rather
   than by box is the difference between right and nearly right. */
.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-weight: 650; font-size: var(--t-entry); color: var(--ink);
  text-decoration: none; letter-spacing: -.01em;
  line-height: 1;
}
.brand img { border-radius: var(--r); display: block; flex: none; }
.brand span { display: block; transform: translateY(.06em); }
.topnav { display: flex; align-items: center; gap: var(--s5); }
.topnav a {
  font-size: var(--t-fine); color: var(--ink-soft); text-decoration: none;
  transition: color .15s;
}
.topnav a:hover { color: var(--ink); }
.topnav a.cta {
  display: inline-flex; align-items: center;
  padding: calc(var(--s2) + .09em) var(--s4) calc(var(--s2) - .09em);
  border-radius: var(--r-pill); line-height: 1.15;
  background: var(--ink); color: var(--paper); font-weight: 600;
}
.topnav a.cta:hover { background: var(--deep); color: #fff; }
@media (max-width: 720px) {
  .topnav a:not(.cta) { display: none; }
}

/* Hero. Copy on the left, the argument drawn on the right. No photograph:
   the figure is the hero, because it says in one glance what the page spends
   the rest of its length proving. */
.hero {
  position: relative; padding-bottom: 46px;
  background:
    radial-gradient(760px 340px at 86% 14%, rgba(138,214,175,.2), transparent 62%),
    radial-gradient(1100px 520px at 18% 104%, rgba(8,24,18,.78), transparent 70%),
    linear-gradient(162deg, #1d4234 0%, #153227 44%, #0a1c15 100%);
  color: var(--paper);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) 430px;
  gap: var(--s8); align-items: center;
  padding: var(--s9) var(--gutter) var(--s4);
}

.hero-copy { min-width: 0; }
.chip {
  display: inline-block; margin: 0 0 var(--s6); line-height: 1.2;
  padding: calc(var(--s1) + .08em) var(--s3) calc(var(--s1) - .08em);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r);
  color: rgba(255,255,255,.7); font-size: var(--t-fine); font-style: italic;
}

.hero h1 {
  font-size: var(--t-hero); line-height: 1.06;
  letter-spacing: -.034em; font-weight: 680;
  margin: 0 0 var(--s5); color: #f7f4ea; max-width: 13.5em;
  text-wrap: balance; hyphens: none;
}
.hero .sub {
  color: #a9c6b7; margin: 0 0 var(--s7); max-width: 24em;
  font-size: var(--t-read); line-height: 1.55;
}

.links { margin: 0; }
.links a {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 var(--s2) var(--s2) 0;
  /* A serif reserves more room above the cap height than the label uses,
     so equal padding leaves the letters riding high. The offset is a
     fraction of the size, not a fixed pixel, so it holds at any scale. */
  padding: calc(var(--s3) + .09em) var(--s5) calc(var(--s3) - .09em);
  border: 1px solid #37634e; border-radius: var(--r); color: var(--paper);
  text-decoration: none; font-size: var(--t-entry); font-weight: 500;
  line-height: 1.15;
  transition: background .15s, border-color .15s, transform .15s;
}
.links a:hover { background: #1d4034; border-color: #4a7a62; transform: translateY(-1px); }
.links a.primary {
  background: var(--paper); color: #14231c; border-color: var(--paper); font-weight: 620;
}
.links a.primary:hover { background: #fff; border-color: #fff; }

/* The hero figure */
.hero-fig { min-width: 0; }
.hf-cap { font: italic 400 var(--t-fine) var(--serif); fill: rgba(255,255,255,.42); }
.hf-line { font: 500 var(--t-read) var(--serif); fill: #f2f8f3; }
.hf-line.mono { font-family: var(--mono); font-size: var(--t-entry); fill: #c6dbcd; }
.hf-found { font: 400 var(--t-fine) var(--serif); fill: #8aa89a; }
.hf-pay { font: 500 var(--t-read) var(--mono); fill: #7ad9a8; font-variant-numeric: tabular-nums; }
.hf-big { font: 600 42px var(--mono); fill: #fbfaf4; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hf-sub { font: italic 400 var(--t-fine) var(--serif); fill: #7fa393; }
.hf-left { font: 500 var(--t-head) var(--mono); fill: #cfe3d6; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr; gap: var(--s8);
    padding: var(--s8) var(--gutter);
  }
  .hero-fig { max-width: 520px; }
}

/* The loop, above the fold of the first section */
.explainer { background: var(--card); padding: var(--s10) 0; }

/* Charts. Everything is inline SVG scaled to the column, so it stays sharp
   at any density and needs no library. */
.chart, .hero-figure { width: 100%; height: auto; display: block; max-width: 100%; }
.loop { margin: 0; }
.c-key, .c-foot { font: 600 var(--t-fine) var(--serif); fill: var(--ink); }
.c-key.strong { font-weight: 700; }
.c-mute, .lp-s { font: 400 var(--t-fine) var(--serif); fill: var(--ink-soft); }
.c-head { font: italic 400 var(--t-entry) var(--serif); fill: var(--ink-soft); }
.c-price { font: 500 var(--t-entry) var(--mono); fill: var(--ink-soft); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.c-price.strong { font-size: var(--t-sum); fill: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-route { font: 600 var(--t-entry) var(--serif); fill: var(--ink-soft); }
.c-route.strong { fill: var(--ink); font-weight: 700; }
.c-badge { font: 500 var(--t-fine) var(--serif); fill: #fff; letter-spacing: .01em; }

.lp-n { font: 700 var(--t-fine) var(--serif); fill: var(--sealed); }
.lp-n.first { fill: #fff; }
.lp-t { font: 650 var(--t-entry) var(--serif); fill: var(--ink); }

.lp-loop { font: italic 400 var(--t-fine) var(--serif); fill: var(--sealed); }

/* The re-planning chart is the argument of the whole page, so it gets its
   own band rather than sitting inline with the body text. */
.chart-stage {
  background: var(--card); border: 1px solid rgba(224,220,203,.7);
  border-radius: var(--r); padding: var(--s7) var(--s6) var(--s6);
  margin: var(--s7) 0 0; box-shadow: var(--shadow-2);
}
.chart-hero { max-width: 100%; }
.route.chosen { filter: drop-shadow(0 1px 2px rgba(45,122,88,.22)); }

/* Motion is decoration here: the numbers are all still readable without it. */
@media (prefers-reduced-motion: reduce) {
  .chart animate { display: none; }
  .chart rect[width="0"] { width: auto; }
}

/* Sections are terrain, not slabs. Each one carries a faint contour wash
   so the page has depth rather than reading as stacked rectangles, and the
   boundaries between them are cut as a ridge line rather than a hard edge. */
section { padding: var(--s10) 0; position: relative; }

section.tint {
  margin-top: 34px; padding-top: calc(var(--s10) - 34px);
  background:
    radial-gradient(1200px 340px at 12% -10%, rgba(47,107,79,.06), transparent 70%),
    radial-gradient(900px 300px at 88% 110%, rgba(47,107,79,.055), transparent 70%),
    var(--paper-2);
}

/* Contour lines, as on a survey map. Barely visible, but they stop the
   light bands reading as blank slabs of paper. */
section.tint::after,
section:not(.tint):not(.dark):not(.close):not(.explainer)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -14deg, rgba(47,107,79,.035) 0 1px, transparent 1px 76px);
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 12%, transparent 72%);
}
section > .wrap { position: relative; z-index: 1; }
section:not(.tint):not(.dark):not(.close):not(.explainer) {
  background:
    radial-gradient(1000px 300px at 85% -8%, rgba(47,107,79,.04), transparent 68%),
    var(--paper);
}

/* A ridge line: the dark bands rise into the light ones as a horizon
   rather than butting against them. Drawn in CSS, so it costs no request. */
/* The hero descends into the light band below it, so its ridge hangs from
   the bottom edge rather than rising from the top. A different range of
   hills from the ones further down the page. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 52px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 100%, 100% 52%, 92% 66%, 83% 44%, 71% 62%,
                     59% 38%, 47% 58%, 36% 40%, 25% 60%, 13% 46%, 5% 58%, 0 44%);
}

/* The light bands meet on a ridge too. Without this the page still reads
   as slabs wherever two pale sections touch, which is most of it. */
section.tint::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 35px;
  background: var(--paper-2); z-index: 0;
  clip-path: polygon(0 100%, 0 58%, 11% 44%, 22% 62%, 34% 40%, 46% 56%,
                     58% 36%, 70% 54%, 81% 42%, 91% 58%, 100% 46%, 100% 100%);
}
/* And where a tinted band gives way to plain paper below it. */
section.tint + section:not(.dark):not(.close) {
  margin-top: 34px; padding-top: calc(var(--s10) - 34px);
}
section.tint + section:not(.dark):not(.close)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 35px;
  background: var(--paper); z-index: 0;
  clip-path: polygon(0 100%, 0 50%, 9% 62%, 20% 40%, 32% 58%, 44% 38%,
                     57% 56%, 69% 42%, 80% 60%, 90% 44%, 100% 56%, 100% 100%);
}

section.dark, section.close {
  margin-top: 44px; padding-top: calc(var(--s10) - 44px);
}
section.dark::before, section.close::before {
  content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 45px;
  background: #1a3c30;
  clip-path: polygon(0 100%, 0 66%, 8% 50%, 17% 60%, 28% 34%, 39% 52%,
                     51% 26%, 63% 46%, 74% 32%, 86% 48%, 94% 38%, 100% 46%, 100% 100%);
}
section.dark {
  background:
    radial-gradient(680px 300px at 82% 18%, rgba(122,199,160,.16), transparent 66%),
    radial-gradient(900px 420px at 20% 96%, rgba(9,26,20,.7), transparent 72%),
    linear-gradient(164deg, #1a3c30 0%, #143026 46%, #0b1d17 100%);
  color: #eaf3ec;
}
section.dark h2 { color: #7fa393; }
section.dark h3 { color: #fbfaf4; }
section.dark .note {
  color: var(--ink-soft); max-width: 62ch; margin: 0 0 var(--s6);
  font-size: var(--t-read); line-height: 1.66;
}
section.dark .refusal {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1);
  border-left-color: #c58a49; box-shadow: none;
}
section.dark .refusal-plain { color: #eaf3ec; }
section.dark .refusal code { color: #9fbcab; }
.kv div b {
  display: block; font-family: var(--mono); font-size: var(--t-sum);
  font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--t-read); color: var(--ink-soft);
  margin: 0 0 var(--s2); letter-spacing: 0; text-transform: none;
}
h3 {
  font-size: var(--t-head); line-height: 1.18; font-weight: 500;
  letter-spacing: -.015em; margin: 0 0 var(--s5); max-width: 21em;
}
.note { color: var(--ink-soft); max-width: 44em; margin: 0 0 var(--s5); }
.fineprint { color: var(--ink-soft); font-size: var(--t-fine); margin: var(--s5) 0 0; }

/* Legend explaining the two numbers on every card */

/* Route cards */
.plans { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid rgba(224,220,203,.7);
  border-radius: var(--r); padding: var(--s5);
  box-shadow: var(--shadow-1);
  transition: box-shadow .2s, transform .2s;
}
.plan:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.plan.chosen {
  border-color: rgba(47,107,79,.4);
  background:
    linear-gradient(to top, rgba(47,107,79,.09), rgba(47,107,79,0) 58%),
    var(--card);
  box-shadow: var(--shadow-2);
}
/* The route that was taken carries a stem up its edge. */
.plan.chosen::before {
  content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(to top, var(--sealed), rgba(111,224,172,.55));
}
.plan .head { display: flex; justify-content: space-between; align-items: baseline; }
.plan .kind { font-size: var(--t-entry); font-weight: 600; }
.plan .tag {
  font-size: var(--t-fine); color: var(--sealed); font-weight: 500;
  font-style: italic; letter-spacing: 0; text-transform: none;
}
.plan .tag.no { color: var(--ink-soft); font-weight: 600; }
.plan .amt { font-family: var(--mono); font-size: var(--t-sum); margin: var(--s4) 0 var(--s1);
  letter-spacing: -.02em; }
.plan .lbl { font-size: var(--t-fine); color: var(--ink-soft); }
/* The price as a length, not just a number. Scaled against the dearest
   route so the three cards can be compared at a glance. */
.gauge {
  height: 5px; border-radius: var(--r-pill); background: rgba(22,36,29,.08);
  margin: var(--s3) 0 0; overflow: hidden;
}
.gauge i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: rgba(22,36,29,.24);
}
.plan.chosen .gauge i {
  background: linear-gradient(to right, var(--sealed), #6fe0ac);
}

.plan .bound { font-size: var(--t-fine); color: var(--ink-soft); margin-top: var(--s3); }
.plan .bound b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.plan ul {
  /* auto pushes the list to the foot so the three cards end level. */
  margin: auto 0 0; padding: var(--s4) 0 0 var(--s4);
  font-size: var(--t-fine); color: var(--ink-soft);
}
.plan li { margin-bottom: var(--s1); }

table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid rgba(224,220,203,.7); border-radius: var(--r);
  overflow: hidden; font-size: var(--t-entry); box-shadow: var(--shadow-1);
}
th {
  text-align: left; font-size: var(--t-fine); font-style: italic;
  font-weight: 400; color: var(--ink-soft);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule);
}
td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.mono { font-family: var(--mono); font-size: var(--t-fine); }
/* A container that scrolls says so: the content fades at the edge it
   continues past, and stops fading once you reach the end. */
.scroll, .chart-stage {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.refusal {
  background: var(--card); border: 1px solid rgba(224,220,203,.7);
  border-left: 3px solid var(--retained); border-radius: var(--r);
  padding: var(--s6); box-shadow: var(--shadow-1);
}
.refusal-plain { margin: 0 0 var(--s4); font-size: var(--t-read); }
.refusal code {
  font-family: var(--mono); font-size: var(--t-fine); line-height: 1.7;
  color: var(--ink-soft); display: block; word-break: break-word;
}
.kv {
  display: flex; gap: var(--s8); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}


.pill {
  display: inline-block; line-height: 1.2;
  padding: calc(var(--s1) + .08em) var(--s3) calc(var(--s1) - .08em);
  border-radius: var(--r-pill); font-size: var(--t-fine);
  background: rgba(47,107,79,.1); color: var(--sealed); font-weight: 600;
}
.pill.grey { background: #e3ddcb; color: var(--ink-soft); }

/* The one pool that moved is the only row worth money, so it is the only
   row the eye should stop on. */
tr.moved td { background: rgba(47,107,79,.06); }
tr.moved td:first-child { box-shadow: inset 3px 0 0 var(--sealed); }

/* A note that follows a table belongs to it, but not pressed against it. */
.scroll + .note, table + .note, .plans + .note { margin-top: var(--s6); }

/* The close. The page argues for five sections, then says what to do with
   it. The commands are the point, so they carry the weight. */
section.close {
  background:
    radial-gradient(680px 300px at 78% 16%, rgba(122,199,160,.14), transparent 64%),
    radial-gradient(900px 420px at 24% 98%, rgba(9,26,20,.66), transparent 72%),
    linear-gradient(164deg, #1a3c30 0%, #143026 46%, #0b1d17 100%);
  color: #eaf3ec;
}
section.close h2 { color: rgba(255,255,255,.5); }
section.close h3 { color: #fbfaf4; margin-bottom: var(--s6); }
section.close .note { color: #a9c6b7; }
section.close .note code {
  font-family: var(--mono); font-size: .92em;
  background: rgba(255,255,255,.08); padding: 1px var(--s1); border-radius: var(--r);
}
.commands {
  margin: 0 0 var(--s6); padding: var(--s5) var(--s6);
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); overflow-x: auto;
}
.commands code {
  font-family: var(--mono); font-size: var(--t-entry); line-height: 2;
  color: #cfe6d8; white-space: pre; display: block;
}

footer {
  padding: var(--s9) 0 var(--s10);
  color: var(--ink-soft); font-size: var(--t-entry);
  border-top: 1px solid var(--rule);
}
.links-row a { margin-right: var(--s5); }

@media (max-width: 820px) {
  .plans { grid-template-columns: 1fr; }
  h3 { font-size: var(--t-sum); }

  /* A drawing authored at 1000px would shrink its own labels to about 9px
     here. Let the wide figures scroll instead, the way the tables do. */
  .chart-stage { overflow-x: auto; }
  .scroll .loop { min-width: 760px; }
  .chart-stage .chart { min-width: 700px; }
}

/* Narrow screens: the gutter shrinks, the hero stacks, and every wide
   element is allowed to scroll inside itself rather than widen the page. */
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .chart-stage { padding: var(--s5) var(--s4); overflow-x: auto; }
  .chart-stage .chart { min-width: 620px; }
  .scroll .loop { min-width: 700px; }
  body { font-size: var(--t-fine); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: none; }
  .hero .sub { font-size: var(--t-entry); max-width: none; }
  .links a { display: block; text-align: center; margin-right: 0; }
  .kv { gap: var(--s5); }
  .kv div { min-width: 40%; }
  h3 { font-size: var(--t-sum); }
  .note { font-size: var(--t-entry); }
  section { padding: var(--s8) 0; }
}
html, body { max-width: 100%; overflow-x: hidden; }
.noscript-note {
  margin: var(--s8) auto; padding: var(--s5);
  border-left: 3px solid var(--retained); background: var(--card);
  font-size: var(--t-read); max-width: 62ch;
}
.noscript-note p { margin: 0; }

/* Nothing on this page may be wider than the screen it is read on. */
*, *::before, *::after { min-width: 0; }
/* Containers must not exceed the viewport, but .wrap keeps its column: a
   blanket max-width:100% here overrode it and let every band run full
   width, which is what broke the page's alignment. */
.hero-copy, section, header, footer { max-width: 100%; }
h1, h2, h3, p, td, .refusal code { overflow-wrap: anywhere; }