/*
  Foglio site — the Ledger design system, on the web.
  Tokens mirror Foglio/DesignSystem/LedgerTokens.swift. Light is paper,
  dark is ink; neither is the other minus a luminance flip.
*/

:root {
  --paper: rgb(247 245 242);
  --paper-recess: rgb(241 238 234);
  --ink-rgb: 27 29 46;
  --red-ink: rgb(168 50 40);

  --ink: rgb(var(--ink-rgb));
  --ink-body: rgb(var(--ink-rgb) / 0.78);
  --ink-secondary: rgb(var(--ink-rgb) / 0.55);
  --ink-tertiary: rgb(var(--ink-rgb) / 0.38);
  --hairline: rgb(var(--ink-rgb) / 0.16);
  --hairline-strong: rgb(var(--ink-rgb) / 0.28);

  /* Spacing meter: a rhythm, not a grid. */
  --tight: 8px;
  --close: 12px;
  --breath: 24px;
  --pause: 40px;
  --hero: 56px;
  --margin: 22px;

  --serif: ui-serif, "New York", Charter, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: rgb(22 23 29);
    --paper-recess: rgb(29 31 38);
    --ink-rgb: 238 237 232;
    --red-ink: rgb(219 97 79);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--margin);
}

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

hr, .rule { border: 0; border-top: 0.5px solid var(--hairline); margin: 0; }

/* Masthead */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--breath) 0 var(--close);
  border-bottom: 0.5px solid var(--hairline-strong);
}
.wordmark {
  font: 22px/1 var(--serif);
  color: var(--ink);
  text-decoration: none;
}
.masthead nav { display: flex; gap: var(--breath); }
.masthead nav a, .label {
  font: 600 11px/1 var(--sans);
  font-stretch: expanded;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  text-decoration: none;
}
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--ink); }

/* Type */

h1, h2, h3 { color: var(--ink); font-weight: 400; margin: 0; }

h1 {
  font: 400 clamp(38px, 8vw, 54px)/1.08 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2 { font: 400 26px/1.2 var(--serif); }
h3 { font: 400 20px/1.3 var(--serif); }

p { margin: 0; }
.lede { font-size: 19px; color: var(--ink-body); max-width: 34em; }
.note { font: italic 17px/1.5 var(--serif); color: var(--ink-tertiary); }
.fig { font-variant-numeric: tabular-nums; }

/* Home */

.hero { padding: var(--hero) 0 var(--pause); }
.hero h1 { margin-bottom: var(--breath); }

.plate {
  border-top: 0.5px solid var(--hairline-strong);
  border-bottom: 0.5px solid var(--hairline-strong);
  padding: var(--breath) 0;
  margin: 0 calc(var(--margin) * -1 + 8px);
}
.plate figcaption {
  margin-top: var(--close);
  padding: 0 calc(var(--margin) - 8px);
  font-size: 13px;
  color: var(--ink-tertiary);
}

.sankey { display: block; width: 100%; height: auto; }
.sankey .flow { opacity: 0.32; }
.sankey .flow-in, .sankey .flow-left { fill: var(--ink); }
.sankey .flow-out { fill: var(--red-ink); }
.sankey .node-in { fill: var(--ink); opacity: 0.55; }
.sankey .node-total { fill: var(--ink); }
.sankey .node-out { fill: var(--red-ink); opacity: 0.75; }
.sankey text { font-family: var(--sans); }
.sankey .lbl {
  font-size: 10.5px; font-weight: 600; font-stretch: expanded;
  letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-secondary);
}
.sankey .fig { font-size: 14px; fill: var(--ink); font-variant-numeric: tabular-nums; }

.points { padding: var(--hero) 0 var(--pause); }
.point {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  gap: 0 var(--close);
  padding: var(--breath) 0;
  border-top: 0.5px solid var(--hairline);
}
.point:last-child { border-bottom: 0.5px solid var(--hairline); }
.point .numeral { font: 18px/1.35 var(--serif); color: var(--ink-tertiary); }
.point h2 { font-size: 22px; margin-bottom: var(--tight); }

.availability { padding: 0 0 var(--hero); }
.availability .label { display: block; margin-bottom: var(--close); }

/* Documents: privacy, support */

.doc { padding: var(--hero) 0 var(--hero); max-width: 36em; }
.doc h1 { font-size: clamp(34px, 7vw, 44px); margin-bottom: var(--close); }
.doc .effective { display: block; margin-bottom: var(--pause); }
.doc .summary {
  font: 20px/1.45 var(--serif);
  color: var(--ink);
  padding-bottom: var(--pause);
  border-bottom: 0.5px solid var(--hairline-strong);
}
.doc section { padding-top: var(--pause); }
.doc h2 { font-size: 22px; margin-bottom: var(--close); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: var(--close); }
.doc ul { margin: 0; padding-left: 1.1em; }
.doc li + li { margin-top: var(--tight); }
.doc dl { margin: 0; }
.doc dt { font: 19px/1.35 var(--serif); color: var(--ink); padding-top: var(--breath); }
.doc dd { margin: var(--tight) 0 0; padding-bottom: var(--breath); border-bottom: 0.5px solid var(--hairline); }

.contact {
  font: 22px/1.3 var(--serif);
  margin-top: var(--close);
}

/* Footer */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--close) var(--breath);
  padding: var(--breath) 0 var(--pause);
  border-top: 0.5px solid var(--hairline-strong);
  font-size: 13px;
  color: var(--ink-tertiary);
}
footer nav { display: flex; gap: var(--breath); }
footer a { color: var(--ink-secondary); }

@media (max-width: 520px) {
  .masthead nav { gap: var(--close); }
  .point { grid-template-columns: 1.8em 1fr; }
}

/* Two drawings of the same month: one laid out for wide pages, one at
   roughly 1:1 for phones, so labels never shrink below legibility. */
.sankey.narrow { display: none; }
.sankey.narrow .lbl { font-size: 9px; }
.sankey.narrow .fig { font-size: 12px; }
@media (max-width: 520px) {
  .sankey.wide { display: none; }
  .sankey.narrow { display: block; }
}