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

/* contrashittification.com
   Family tokens only (vault: zz_System/Claudesidian/design-language-system.md).
   Paper ground, one ink, pen for links, gold inside charts and nowhere else,
   hard edges, 640 measure. Shape (a), the scroll. Nothing constructed but the
   type label before each post. */

:root {
  --paper: #fdfaf7;   /* paper-100 */
  --ink: #1a1a1a;
  --ink-muted: #6b6560;
  --ink-faint: #9a948d;
  --pen: #2f6fb0;
  --pen-deep: #24598f;
  --hairline: #e6e1d8;
  --gold: #c8a96e;    /* charts only */
  --measure: 640px;
  --voice: 'Newsreader', Georgia, 'Times New Roman', serif;
  --utility: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 18px; }

body {
  font-family: var(--voice);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--pen-deep); }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }

/* Header. The wordmark is the whole identity: lowercase, regular weight, the
   serif carries it. The subtitle does the explaining so the promise can be a
   promise (the bored-stranger read). */
header { margin-bottom: 3rem; }

h1 {
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  word-break: break-word;
}

.sub {
  font-family: var(--utility);
  font-size: 1rem;
  color: var(--ink-muted);
  margin-top: 0.35rem;
}

.promise {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 1.5rem;
}

/* Posts. Whitespace is the section break; no rules between them (CR-03). */
.post { margin-bottom: 3rem; }

.kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.say { font-size: 1.1rem; }

/* The occasional hand-drawn underline (JC, 2026-11-04). A mark on a phrase, not a
   decoration on every claim: two on the page, both on the thing a reader would repeat.
   Pen, the same blue as the chart lines, so the marks and the data read as one hand.
   It stretches to the phrase rather than tiling, so no two are the same length. */
.ul {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%207%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%2C4.6%20C16%2C2.3%2031%2C5.6%2047%2C3.4%20C62%2C1.6%2078%2C5.4%2093%2C3.2%20C103%2C1.9%20112%2C4.4%20119%2C2.9%22%20fill%3D%22none%22%20stroke%3D%22%232f6fb0%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.92%22%2F%3E%3Cpath%20d%3D%22M8%2C6.4%20C26%2C4.8%2048%2C6.8%2070%2C5.2%20C87%2C4.0%20102%2C6.2%20115%2C4.8%22%20fill%3D%22none%22%20stroke%3D%22%232f6fb0%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.38%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.44em;
  padding: 0 0.1em 0.16em;
  margin: 0 -0.1em;
}

figure { margin: 1.25rem 0 0.75rem; }

.chart { display: block; width: 100%; height: auto; overflow: visible; }

.chart text {
  font-family: var(--mono);
  fill: var(--ink-muted);
}
.chart .c-val { font-size: 11px; }
.chart .c-yr { font-size: 9px; letter-spacing: 0.08em; fill: var(--ink-faint); }
.chart .c-end { text-anchor: end; }

.src {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 0.5rem;
}
.src a { color: var(--ink-muted); text-decoration-color: var(--hairline); }
.src a:hover { color: var(--pen); text-decoration-color: currentColor; }

/* Foot. The one hairline on the page, because the about line is a different
   register from the stream and needs to read as the back of the shelf. */
footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.about {
  font-family: var(--utility);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.foot {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 1.5rem;
}
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--pen); text-decoration: underline; }

@media (max-width: 480px) {
  html { font-size: 17px; }
  h1 { font-size: 2rem; }
}