/* ═══ MONOGRAPH — pure type, asymmetric whitespace ═══
   Identity: small left-aligned H1 with a tiny rule below, 1px
   underlines without colour, italic indented blockquotes, minimal
   rules. Tufte-esque, no decoration unless it earns its keep.
*/

body { --content-width: min(55ch, 100% - 2rem); line-height: 1.75; }

/* ── Small, left-aligned, asymmetric H1 with subordinate rule ── */
h1 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  text-align: left;
  margin: var(--space-l) 0 var(--space-s);
}
h1::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--text);
  margin-top: 1rem;
}

h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 2.5rem; }
h3 { font-size: 1.1rem; font-weight: 600; }

.subtitle { font-size: 1.15rem; font-weight: 400; }

/* ── Header has no rule, just whitespace ── */
.site-header { border-bottom: none; padding: 1rem 0; }
.site-header .site-name { font-weight: 800; font-size: 1.2rem; }
.header-cta { border-radius: 0; }

/* ── Body type ── */
.prose p { font-size: 1.05rem; }
.prose strong { color: var(--text); font-weight: 700; }

/* ── Links: 1px underline, no colour shift ── */
.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--primary);
  text-decoration-color: var(--primary);
}

/* ── Minimal blockquote — italic, indented, no border ── */
.prose blockquote {
  border-left: none;
  font-style: italic;
  font-size: 1.05rem;
  margin: 2rem 2rem 2rem 1.5rem;
  padding: 0;
  color: var(--text);
}

/* ── Tiny black bar as divider ── */
.prose hr {
  border: none;
  height: 3px;
  background: var(--text);
  width: 32px;
  margin: 3rem 0;
}

/* ── Unadorned CTA ── */
.cta { background: transparent; border: 1px solid var(--border); border-radius: 0; }

.site-footer { border-top: 1px solid var(--border); }