/* =============================================================================
   WIMM — website

   The app's language, carried over intact: one greyscale ramp with no hue in
   the chrome, condensed uppercase for labels, money set in mono, black held
   back so that when it appears it means something. The only colour in the
   system is the calendar heat — green for a clean day, an ochre-to-rust ramp
   for what a day cost — and it is only ever used on numbers that encode it.

   No webfonts. Nothing to load, and no third party watching who reads the
   privacy page. No JavaScript: what motion there is runs on scroll-driven CSS
   and simply does not happen where that is unsupported.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  color-scheme: light dark;

  /* Greyscale ramp — the same values as Theme.swift. */
  --ground:      #ffffff;   /* root */
  --raised:      #fafafa;   /* sections lifted off the root */
  --sheet:       #f4f4f4;   /* cards, modals */
  --rule:        #dcdcdc;   /* section rules */
  --row-rule:    #e8e8e8;   /* hairlines inside a block */
  --dim:         #8c8c8c;
  --muted:       #6f6f6f;   /* small-caps labels */
  --secondary:   #565656;
  --body:        #262626;
  --ink:         #121212;   /* primary text */
  --lit:         #000000;   /* the accent — scarce on purpose */
  --on-lit:      #ffffff;

  /* The only hue outside the mock: the clean-day green on the status dot, and
     one rust for the pre-launch reminder. The full heat ramp lives with the
     device it belongs to, under `.app`. */
  --clean:       #1b7f4d;
  --warn:        #a33a1e;

  --shadow-lg:   0 1px 2px rgba(0,0,0,.05), 0 30px 60px -28px rgba(0,0,0,.30);
  --glow:        transparent;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Space — an 8pt spine with a few half steps. */
  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --page: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 66ch;
  --bay: clamp(72px, 9vw, 132px);   /* vertical breathing between sections */

  --radius-sm: 8px;
  --radius:    14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #0d0d0d;
    --raised:    #141414;
    --sheet:     #181818;
    --rule:      #2c2c2c;
    --row-rule:  #232323;
    --dim:       #7c7c7c;
    --muted:     #9a9a9a;
    --secondary: #b4b4b4;
    --body:      #e2e2e2;
    --ink:       #f6f6f6;
    --lit:       #ffffff;
    --on-lit:    #0d0d0d;

    --clean:     #3da46b;
    --warn:      #e0603a;

    --shadow-lg: 0 1px 2px rgba(0,0,0,.5), 0 34px 70px -24px rgba(0,0,0,.85);
    --glow:      rgba(255,255,255,.07);
  }
}

/* ------------------------------------------------------------ 2. reset/base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
svg { display: block; }

::selection { background: var(--ink); color: var(--ground); }

:focus-visible {
  outline: 2px solid var(--lit);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-160%);
  z-index: 100;
  background: var(--ink); color: var(--ground);
  padding: 10px 16px; border-radius: var(--radius-sm);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.skip:focus { transform: none; }

/* -------------------------------------------------------------- 3. layout   */

.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Half a bay each side, so two adjacent blocks add up to one full bay and a
   rule between them lands exactly in the middle of the gap — never hard
   against the heading it introduces. */
.bay { padding-block: calc(var(--bay) / 2); }

.ruled {
  border-top: 1px solid var(--row-rule);
  padding-block: calc(var(--bay) / 2);
}

.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }

/* ----------------------------------------------------------- 4. typography  */

/* The uppercase tracked label the app uses for every small-caps run. */
.label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  font-stretch: condensed;
  margin: 0;
}

h1, h2, h3 {
  color: var(--ink);
  font-stretch: condensed;
  text-wrap: balance;
  margin: 0;
}

.display {
  font-size: clamp(2.5rem, 1.1rem + 5.2vw, 4.4rem);
  line-height: .99;
  font-weight: 700;
  letter-spacing: -.032em;
}

.title {
  font-size: clamp(1.75rem, 1.05rem + 2.4vw, 2.6rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.024em;
}

.lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem);
  line-height: 1.55;
  color: var(--secondary);
  max-width: 54ch;
}

p { margin: 0 0 var(--s-4); }
.prose p + p { margin-top: 0; }

ul { margin: 0 0 var(--s-4); padding-left: 1.2em; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--dim); }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--dim); }

strong { color: var(--ink); font-weight: 650; }
em { font-style: italic; }

/* Amounts, dates, anything the reader might compare line to line. */
.mono {
  font-family: var(--mono);
  font-size: .9em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Eyebrow + heading pair — the unit every section on the site opens with. */
.head { margin-bottom: var(--s-6); }
.head .label { margin-bottom: var(--s-3); }
.head .lede  { margin-top: var(--s-4); }

/* ------------------------------------------------------------- 5. the mark  */

.mark { display: block; color: var(--ink); }
.mark .dot-lit  { fill: currentColor; }
.mark .dot-dim  { fill: var(--dim); }

/* --------------------------------------------------------------- 6. header  */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--row-rule);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar {
    background: color-mix(in srgb, var(--ground) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand__word {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.012em;
  font-stretch: condensed;
}

.topnav { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }

.topnav a {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  font-stretch: condensed;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.topnav a:hover { color: var(--secondary); }
.topnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* -------------------------------------------------------------- 7. controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--lit { background: var(--lit); color: var(--on-lit); }
.btn--lit:hover { background: color-mix(in srgb, var(--lit) 84%, var(--ground)); }

.btn--quiet { border-color: var(--rule); color: var(--ink); }
.btn--quiet:hover { border-color: var(--dim); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* A status, not a button — there is nothing to tap yet and pretending
   otherwise is the kind of small lie a privacy-first app cannot afford. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-stretch: condensed;
  color: var(--muted);
  background: var(--ground);
}
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clean);
}

/* ----------------------------------------------------------------- 8. hero  */

.hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: calc(var(--bay) / 2); }

.hero__grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 5vw, 80px);
  }
}

.hero .display { margin-bottom: var(--s-5); }
.hero .status { margin-bottom: var(--s-5); }
.hero .actions { margin-top: var(--s-7); }

.hero__stage {
  display: flex;
  justify-content: center;
  position: relative;
}

/* An ambient lift so the device does not float on nothing in dark mode. */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 8% -6% 4%;
  border-radius: 50%;
  background: radial-gradient(60% 50% at 50% 50%, var(--glow), transparent 72%);
  pointer-events: none;
}

/* ------------------------------------------------------- 9. device + app UI */

/* The mock is a photograph of the product, so it does not follow the site's
   theme — the app itself is light-only, and showing it inverted in dark mode
   would be a picture of something that does not exist. Tokens are pinned. */
/* The add-expense card below is still a reconstruction rather than a capture,
   so it keeps the app's own tokens pinned: it is a picture of a light-only app
   and should not invert with the page. Values are Theme.swift's. */
.app {
  color-scheme: light;
  --a-ground:    #ffffff;
  --a-sheet:     #f4f4f4;
  --a-rule:      #d8d8d8;
  --a-outline:   #cfcfcf;
  --a-muted:     #787878;
  --a-secondary: #5f5f5f;
  --a-ink:       #121212;
  --a-lit:       #000000;

  font-family: var(--sans);
  color: var(--a-ink);
  background: var(--a-ground);
}

.device {
  width: min(304px, 74vw);
  padding: 8px;
  /* 44px inner is the iPhone 17 Pro's own 62pt screen radius at the scale this
     renders (286px wide for a 402pt device); 52 = that plus the bezel. */
  border-radius: 52px;
  background: linear-gradient(170deg, #e9e9e9, #c9c9c9 38%, #efefef 62%, #bfbfbf);
  box-shadow: var(--shadow-lg);
}

/* The capture is light-mode and carries its own status bar and Dynamic Island,
   so nothing is drawn over it — a screenshot of a light-only app should not
   invert just because the page around it is dark. */
.device__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 44px;
  background: #ffffff;
}

/* --- the add-expense sheet, shown as a standalone card --- */

.sheet-card {
  width: min(330px, 100%);
  border-radius: 26px;
  padding: 22px 20px 18px;
  background: var(--a-sheet);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.05);
}

.sheet-card__bar {
  width: 34px; height: 4px;
  border-radius: 999px;
  background: var(--a-outline);
  margin: 0 auto 18px;
}

.sheet-card__eyebrow {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-stretch: condensed;
  color: var(--a-muted);
}

.sheet-card__amount {
  margin-top: 8px;
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--a-ink);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.sheet-card__amount span { color: var(--a-outline); }

.sheet-card__note {
  margin-top: 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--a-rule);
  font-size: 15px;
  color: var(--a-secondary);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chip {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-stretch: condensed;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--a-outline);
  color: var(--a-muted);
  background: var(--a-ground);
}
.chip--on { background: var(--a-lit); border-color: var(--a-lit); color: #fff; }

.sheet-card__save {
  margin-top: 20px;
  height: 44px;
  border-radius: 14px;
  background: var(--a-lit);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 650;
}

/* ---------------------------------------------------- 10. splitting diagram */

.split-grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
}

.knots {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
}

.knot { text-align: center; }
/* Capped: stacked on a phone the pair is the argument, not the backdrop, and
   two full-width hexagons ran to most of a screen each. */
.knot svg { width: 100%; max-width: 230px; height: auto; margin-inline: auto; }
.knot .label { margin-top: var(--s-3); text-align: center; }
.knot .label b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.knot__node { fill: var(--sheet); stroke: var(--rule); stroke-width: 1.5; }
.knot__initial {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: central;
}
.knot__tangle { stroke: var(--dim); stroke-width: 1; opacity: .45; }
.knot__flow   { stroke: var(--lit); stroke-width: 2; }
.knot__head   { fill: var(--lit); }
.knot--after .knot__node { stroke: var(--rule); }

.knots__arrow { color: var(--dim); }
.knots__arrow svg { width: clamp(20px, 3vw, 30px); height: auto; }

.knots__cap {
  grid-column: 1 / -1;
  margin: var(--s-5) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--dim);
}

/* The resulting transfers, set the way the app sets them. */
.ledger {
  margin: var(--s-5) 0 0;
  border: 1px solid var(--row-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--raised);
}
.ledger__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--row-rule);
  font-size: 15px;
}
.ledger__row:first-child { border-top: 0; }
.ledger__who { color: var(--ink); font-weight: 600; }
.ledger__arrow { color: var(--dim); }
.ledger__amt {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ledger__cap {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--row-rule);
  background: var(--sheet);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-stretch: condensed;
  color: var(--muted);
}

/* ------------------------------------------------------- 11. cards + stats  */

.cards {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  padding: var(--s-6);
  border: 1px solid var(--row-rule);
  border-radius: var(--radius);
  background: var(--raised);
}
.card h3 { margin-bottom: var(--s-2); font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 15.5px; color: var(--secondary); }

.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  border: 1px solid var(--row-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--raised);
}
.tally div {
  padding: var(--s-5);
  border-left: 1px solid var(--row-rule);
}
.tally div:first-child { border-left: 0; }
/* Prose that follows a block rather than a heading. */
.after-block { margin-top: var(--s-6); }

.tally b {
  display: block;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tally span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-stretch: condensed;
  color: var(--muted);
}

/* Pre-launch reminder. Visually unmistakable as scaffolding so it cannot be
   published by accident — delete the whole block, not the styling. */
.todo {
  border: 1px dashed var(--rule);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--raised);
  padding: var(--s-5);
  margin: 0 0 var(--s-6);
  font-size: 15px;
  color: var(--secondary);
}
.todo strong { color: var(--warn); }
.todo .label { color: var(--warn); margin-bottom: 6px; }

/* ------------------------------------------------------------ 12. documents */

.doc { display: block; }

@media (min-width: 1000px) {
  .doc {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(40px, 6vw, 84px);
    align-items: start;
  }
}

.toc {
  position: sticky;
  top: 92px;
  display: none;
}
@media (min-width: 1000px) { .toc { display: block; } }

.toc .label { margin-bottom: var(--s-3); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 7px 0 7px var(--s-4);
  border-left: 1px solid var(--row-rule);
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
}
.toc a:hover { color: var(--ink); border-left-color: var(--dim); }

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

.doc__body h2 {
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-7);
  border-top: 1px solid var(--row-rule);
  scroll-margin-top: 92px;
}
.doc__body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-6); }
.doc__body h2 .label { margin-bottom: 7px; }

.doc__body h3 {
  font-size: 1rem;
  font-weight: 650;
  margin: var(--s-6) 0 var(--s-2);
  scroll-margin-top: 84px;
}

.doc__head { margin-bottom: var(--s-6); }
.doc__head .display { margin-bottom: var(--s-4); }
.updated { color: var(--dim); font-size: 14px; margin: 0; }

/* The four facts someone actually came to check. */
.gist {
  display: grid;
  gap: 0;
  /* Two by two, always — auto-fit gave three across and one orphan below. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--row-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--raised);
  margin-bottom: var(--s-7);
}
.gist > div {
  padding: var(--s-5);
  border-top: 1px solid var(--row-rule);
  border-left: 1px solid var(--row-rule);
}
.gist > div:nth-child(-n+2)   { border-top: 0; }
.gist > div:nth-child(odd)    { border-left: 0; }

@media (max-width: 620px) {
  .gist { grid-template-columns: 1fr; }
  /* :nth-child(n) only to match the specificity of the two-column rules above,
     which would otherwise keep the second panel's top border switched off. */
  .gist > div:nth-child(n) { border-top: 1px solid var(--row-rule); border-left: 0; }
  .gist > div:first-child  { border-top: 0; }
}
.gist .label { margin-bottom: 6px; }
.gist p { margin: 0; font-size: 15px; color: var(--secondary); }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--raised);
}
.contact__addr {
  font-family: var(--mono);
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  font-weight: 500;
  color: var(--ink);
  text-underline-offset: 4px;
}
.contact__hint {
  margin: 0;
  flex: 1 1 15rem;
  max-width: 34ch;
  font-size: 15px;
  color: var(--secondary);
}

/* -------------------------------------------------------------- 13. footer  */

.foot {
  border-top: 1px solid var(--rule);
  /* No margin: the block above already pads below itself, so the rule sits a
     half-bay under the last line and 64px over the first. */
  padding-block: var(--s-8) var(--s-7);
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  justify-content: space-between;
  align-items: flex-start;
}

.foot__blurb { max-width: 30ch; }
.foot__blurb p {
  margin: var(--s-3) 0 0;
  font-size: 14px;
  color: var(--dim);
}

.foot__links { display: flex; flex-wrap: wrap; gap: clamp(28px, 6vw, 72px); }
.foot__col ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.foot__col li { margin-bottom: 7px; }
.foot__col a {
  font-size: 14.5px;
  color: var(--secondary);
  text-decoration: none;
}
.foot__col a:hover { color: var(--ink); text-decoration: underline; }

.foot__base {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--row-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: 13px;
  color: var(--dim);
}

/* -------------------------------------------------------------- 14. motion  */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 34%;
    }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---------------------------------------------------------- 15. responsive  */

@media (max-width: 899px) {
  /* Stacked, the device is 600px of phone before a reader has been told what
     the app is. The words go first and the proof follows them. */
  .hero .lede { max-width: none; }
  .hero__grid > .hero__stage { margin-top: var(--s-4); }

  /* Same reason: two hexagons of six initials mean nothing until the heading
     has said what they are, so the diagram follows the argument here too. */
  .split-grid > .knots { order: 2; margin-top: var(--s-2); }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .topbar__in { min-height: 56px; }
  .brand__word { font-size: 17px; }
  .knots { grid-template-columns: 1fr; gap: var(--s-4); }
  .knots__arrow { transform: rotate(90deg); justify-self: center; }
  .knots__cap { margin-top: var(--s-4); }
  .contact { padding: var(--s-5); }
  .tally div { border-left: 0; border-top: 1px solid var(--row-rule); }
  .tally div:first-child { border-top: 0; }
}

@media print {
  .topbar, .toc, .hero__stage, .foot__links { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; }
}