/* zerotorecurring.com — built from brand/design.md ("The Ledger") */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/ibm-plex-mono-700.woff2") format("woff2");
}
@font-face {
  /* Google serves one static file for 400 and 500 — declare the range, one download */
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --paper:      #EDF0E5;
  --rule:       #C7D0BA;
  --ink:        #23261E;
  --ink-muted:  #5A6150;
  --red-ink:    #9E2B25;
  --margin-red: #C9938E;
  --green-ink:  #1F6E43;

  --accent: var(--red-ink); /* flips to green at break-even */

  --font-mono: "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-num: 2.5rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --measure: 42rem;
}

/* the break-even flip: update-scoreboard.sh sets data-state from the CSV */
html[data-state="green"] { --accent: var(--green-ink); }

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; }

html { font-size: 112.5%; } /* 18px body */

body {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 31px,
    color-mix(in srgb, var(--rule) 55%, transparent) 31px,
    color-mix(in srgb, var(--rule) 55%, transparent) 32px);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

/* the red margin rule — desktop only (collides with content on small screens) */
@media (min-width: 52rem) {
  body {
    background-image:
      repeating-linear-gradient(
        to bottom, transparent 0, transparent 31px,
        color-mix(in srgb, var(--rule) 55%, transparent) 31px,
        color-mix(in srgb, var(--rule) 55%, transparent) 32px),
      linear-gradient(to right,
        transparent 0, transparent calc(50% - 23rem),
        var(--margin-red) calc(50% - 23rem),
        var(--margin-red) calc(50% - 23rem + 1px),
        transparent calc(50% - 23rem + 1px));
  }
}
/* two-column layout shifts the main column left — move the margin rule with it
   (main text edge sits at 50% − 29.25rem; the rule stays 3rem left of it) */
@media (min-width: 62rem) {
  body {
    background-image:
      repeating-linear-gradient(
        to bottom, transparent 0, transparent 31px,
        color-mix(in srgb, var(--rule) 55%, transparent) 31px,
        color-mix(in srgb, var(--rule) 55%, transparent) 32px),
      linear-gradient(to right,
        transparent 0, transparent calc(50% - 32.25rem),
        var(--margin-red) calc(50% - 32.25rem),
        var(--margin-red) calc(50% - 32.25rem + 1px),
        transparent calc(50% - 32.25rem + 1px));
  }
}

main, header, footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
h2 { font-size: var(--text-lg); margin-block: var(--space-4) var(--space-2); }
p  { margin-block: var(--space-2); }

.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- header ---------- */
header {
  padding-block: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .arrow { color: var(--accent); }
nav {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  display: flex;
  gap: var(--space-2);
}
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- two-column layout: content + newsletter sidebar ---------- */
/* mobile/tablet: sidebar renders first (right under the header), then the content column */
.sidebar {
  max-width: var(--measure);
  width: 100%;
  margin-inline: auto;
  margin-block-start: var(--space-3);
  padding-inline: var(--space-2);
}

@media (min-width: 62rem) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) 16rem;
    gap: var(--space-4);
    /* content tracks + own padding */
    max-width: calc(var(--measure) + var(--space-4) + 16rem + 2 * var(--space-2));
    margin-inline: auto;
    padding-inline: var(--space-2);
  }
  .layout > main { grid-column: 1; grid-row: 1; }
  .sidebar {
    grid-column: 2; grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* the sidebar column is as tall as the page — keep the card in view while scrolling */
  .newsletter-card { position: sticky; top: var(--space-3); }
  /* widen header/footer so their text aligns with the main column's left edge */
  header, footer { max-width: calc(var(--measure) + var(--space-4) + 16rem); }
}

/* ---------- scoreboard (the hero) ---------- */
.scoreboard {
  margin-block: var(--space-4);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 60%, white 40%);
  padding: var(--space-3);
}
.sb-meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-block: 0 var(--space-2);
}
.scoreboard dl { margin: 0; }
.sb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--space-1);
}
.sb-row dt {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.sb-row dd {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-num);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sb-net { border-top: 3px double var(--ink); margin-top: var(--space-1); }
.sb-net dd { color: var(--accent); }
.sb-updated {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-block: var(--space-2) 0;
}

/* ---------- ledger table ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 400;
  text-align: left;
}
th:last-child, td:last-child { text-align: right; }
th, td { border-bottom: 1px solid var(--rule); padding: var(--space-1) 0; }
td:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.amt-neg { color: var(--red-ink); }
.amt-pos { color: var(--green-ink); }

/* ---------- rules list ---------- */
.rules { padding-left: 0; list-style: none; counter-reset: rule; }
.rules li { margin-block: var(--space-2); padding-left: var(--space-4); position: relative; }
.rules li::before {
  counter-increment: rule;
  content: counter(rule) ".";
  position: absolute; left: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}
.rules strong { font-weight: 500; }

/* ---------- projects ---------- */
.section-note { font-size: var(--text-sm); color: var(--ink-muted); }

.project {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 60%, white 40%);
  padding: var(--space-3);
  margin-block: var(--space-3);
}
.project-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}
.project-head h3 { font-size: 1rem; }
.project table { margin-top: var(--space-2); }
.project-zero {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: 0;
}

/* status badges: building/next/recurring muted · live ink · earning/sold green · dumped red */
.status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  border: 1px solid currentColor;
  padding: 1px 8px;
  white-space: nowrap;
}
.status-live    { color: var(--ink); }
.status-earning { color: var(--green-ink); }
.status-sold    { color: var(--green-ink); }
.status-dumped  { color: var(--red-ink); }

/* project ledger totals */
tfoot td:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.t-sub td { border-bottom: none; }
.t-net td { border-top: 3px double var(--ink); border-bottom: none; font-weight: 700; }

/* ---------- newsletter card (beside the scoreboard) ---------- */
.newsletter-card {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 60%, white 40%);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.newsletter-card h2 {
  font-size: 1rem;
  margin-block: 0 var(--space-1);
}
.newsletter-card p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-block: 0 var(--space-2);
}
.newsletter-card .subscribe { margin-top: auto; }

.subscribe {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.subscribe input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 60%, white 40%);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: var(--space-1) var(--space-2);
  width: 100%;
}
.subscribe input::placeholder { color: var(--ink-muted); }
.subscribe input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- button (rare) ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-5);
  padding-block: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
footer p { margin-block: var(--space-1); }
footer a { color: var(--ink-muted); }