/* ─────────────────────────────────────────────────────────────
   Parenting Notes — editorial redesign
   A warm, paper-grade reading experience. Newsreader for prose,
   DM Mono for labels. Earthy parchment + ink. No slop.
   ───────────────────────────────────────────────────────────── */

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

/* ── Tokens ── */
:root {
  /* Light (default) — warm parchment */
  --bg:           oklch(96.5% 0.012 78);
  --bg-edge:      oklch(94.2% 0.014 76);
  --paper:        oklch(98.6% 0.008 80);
  --paper-2:      oklch(96.8% 0.012 78);
  --rule:         oklch(85% 0.020 76);
  --rule-soft:    oklch(90% 0.015 78);
  --ink:          oklch(22% 0.020 60);
  --ink-2:        oklch(34% 0.020 60);
  --ink-mute:     oklch(50% 0.022 62);
  --ink-faint:    oklch(62% 0.022 64);
  --terra:        oklch(54% 0.115 38);   /* terracotta accent */
  --terra-soft:   oklch(70% 0.085 40);
  --terra-wash:   oklch(94% 0.030 50);
  --sage:         oklch(50% 0.050 145);
  --sage-soft:    oklch(72% 0.045 145);
  --sage-wash:    oklch(94% 0.025 130);
  --gold:         oklch(62% 0.090 80);
  --shadow-sm:    0 1px 2px oklch(20% 0.02 60 / 0.06), 0 2px 6px oklch(20% 0.02 60 / 0.04);
  --shadow-md:    0 2px 4px oklch(20% 0.02 60 / 0.05), 0 8px 24px oklch(20% 0.02 60 / 0.08);

  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono:  'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --max-prose: 680px;
  --max-wide:  1140px;
}

:root.dark {
  /* Dark — deep ink, candle-warm */
  --bg:           oklch(18% 0.012 60);
  --bg-edge:      oklch(15% 0.012 60);
  --paper:        oklch(22% 0.014 60);
  --paper-2:      oklch(25% 0.016 60);
  --rule:         oklch(34% 0.018 60);
  --rule-soft:    oklch(28% 0.014 60);
  --ink:          oklch(92% 0.018 80);
  --ink-2:        oklch(82% 0.018 80);
  --ink-mute:     oklch(68% 0.020 76);
  --ink-faint:    oklch(54% 0.020 70);
  --terra:        oklch(72% 0.105 42);
  --terra-soft:   oklch(64% 0.090 42);
  --terra-wash:   oklch(30% 0.040 45);
  --sage:         oklch(75% 0.055 145);
  --sage-soft:    oklch(65% 0.050 145);
  --sage-wash:    oklch(28% 0.025 145);
  --gold:         oklch(78% 0.085 82);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-md:    0 2px 4px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--serif);
  font-feature-settings: "onum", "kern", "liga";
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
  /* Subtle paper grain (light only via mask) */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg) 0%, var(--bg-edge) 100%);
  background-attachment: fixed;
}

/* faint paper noise */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root.dark body::before { mix-blend-mode: screen; opacity: 0.18; }

/* lift content above noise */
.shell, .gate { position: relative; z-index: 1; }

/* ── Typography helpers ── */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.eyebrow-mute {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

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

/* ── Site frame ── */
.shell { padding: 32px 28px 80px; }
.wrap  { max-width: var(--max-prose); margin: 0 auto; }
.wrap-wide { max-width: var(--max-wide); margin: 0 auto; }

/* ── Top bar ── */
.topbar {
  max-width: var(--max-wide);
  margin: 0 auto 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar .mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}
.topbar .mark .glyph {
  width: 22px; height: 22px;
  border: 1px solid var(--ink-mute);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 0.95rem; line-height: 1;
  color: var(--terra);
  background: var(--paper);
}
.topbar .meta { display: flex; gap: 22px; align-items: center; }
.topbar .meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--terra); display: inline-block; margin-right: 8px; vertical-align: middle; }
.topbar a { color: var(--ink-faint); }
.topbar a:hover { color: var(--ink); text-decoration: none; }

.theme-toggle {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-mute);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-toggle:hover { border-color: var(--terra); color: var(--terra); }

/* ── Masthead (home) ── */
.masthead {
  text-align: center;
  padding: 24px 0 56px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
  position: relative;
}
.masthead .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 18px;
}
.masthead h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.masthead h1 .amp {
  font-style: italic;
  color: var(--terra);
  font-weight: 300;
}
.masthead .lede {
  margin: 28px auto 0;
  max-width: 540px;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
  font-weight: 300;
}
.masthead .ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 30px;
  color: var(--terra); font-family: var(--serif); font-size: 1.4rem;
}
.masthead .ornament::before,
.masthead .ornament::after {
  content: ""; height: 1px; width: 56px; background: var(--rule);
}

.masthead .issue {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
  line-height: 1.5;
}
.masthead .issue strong { color: var(--ink-2); font-weight: 500; }

@media (max-width: 720px) {
  .masthead .issue { position: static; text-align: center; margin-bottom: 16px; }
  .masthead { padding-top: 0; }
}

/* ── Section header ── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 64px 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.section-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.section-head .count {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Topic grid (home) ── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.topic-card {
  display: block;
  position: relative;
  padding: 28px 30px 30px;
  border-bottom: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  color: inherit;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease;
  min-height: 220px;
}
.topic-card:hover {
  background: var(--paper);
  text-decoration: none;
}
.topic-card:nth-child(3n) { border-right: none; }

@media (max-width: 920px) {
  .topic-card:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
  .topic-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .topic-card { border-right: none !important; padding: 24px 4px; min-height: 0; }
}

.topic-card .num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.topic-card .num::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-soft);
}
.topic-card .num .badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--terra);
  letter-spacing: 0.12em;
  font-size: 0.62rem;
}
.topic-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.topic-card h3 em { color: var(--terra); font-style: italic; }
.topic-card .desc {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.topic-card .read {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute;
  bottom: 28px;
}
.topic-card .read .arrow { transition: transform 0.2s ease; display: inline-block; }
.topic-card:hover .read .arrow { transform: translateX(4px); }

.topic-card.placeholder { opacity: 0.55; pointer-events: none; }
.topic-card.placeholder .read { color: var(--ink-faint); }

/* Ribbon/category color cue on left edge */
.topic-card { border-left: 0px solid transparent; }
.topic-card[data-cat="behavior"]   { box-shadow: inset 3px 0 0 0 var(--terra-soft); }
.topic-card[data-cat="routines"]   { box-shadow: inset 3px 0 0 0 var(--sage-soft); }
.topic-card[data-cat="connection"] { box-shadow: inset 3px 0 0 0 var(--gold); }

/* ── Featured / lead story ── */
.lead {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: stretch;
  padding: 36px 0 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}
.lead .lead-text { display: flex; flex-direction: column; justify-content: center; }
.lead .lead-text .eyebrow { margin-bottom: 18px; }
.lead .lead-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.lead .lead-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.lead .lead-text .read {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex; align-items: center; gap: 10px;
}
.lead .lead-text .read .arrow { display: inline-block; transition: transform 0.2s; }
.lead .lead-text .read:hover .arrow { transform: translateX(4px); }
.lead .lead-text .read:hover { text-decoration: none; }

.lead .lead-art {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.lead .lead-art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient( -45deg,
      transparent 0 14px,
      var(--terra-wash) 14px 15px);
  opacity: 0.6;
  z-index: 0;
}
.lead .lead-art > * { position: relative; z-index: 1; }
.lead .lead-art .quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
.lead .lead-art .quote .open { color: var(--terra); font-size: 2.6rem; line-height: 0; vertical-align: -0.45em; margin-right: 4px; font-style: italic; }
.lead .lead-art .cite {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

@media (max-width: 820px) {
  .lead { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Quick reference strip (home) ── */
.quickref {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  margin: 48px 0;
  overflow: hidden;
}
.quickref .qr {
  padding: 22px 24px;
  border-right: 1px solid var(--rule-soft);
}
.quickref .qr:last-child { border-right: none; }
.quickref .qr .label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.quickref .qr .value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.quickref .qr .value strong { color: var(--terra); font-weight: 500; font-style: normal; }
@media (max-width: 720px) {
  .quickref { grid-template-columns: 1fr; }
  .quickref .qr { border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .quickref .qr:last-child { border-bottom: none; }
}

/* ─────────────── GUIDE PAGE ─────────────── */

/* Breadcrumb */
.crumbs {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 36px;
  display: flex; align-items: center; gap: 12px;
}
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--terra); text-decoration: none; }
.crumbs .sep { color: var(--ink-faint); }

/* Hero */
.guide-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.guide-hero .topic {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.guide-hero .topic::after {
  content: ""; flex: 0 0 36px; height: 1px; background: var(--terra-soft);
}
.guide-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
  font-feature-settings: "onum", "kern", "liga", "ss01";
}
.guide-hero h1 em { font-style: italic; color: var(--terra); }
.guide-hero .lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 0 28px;
}
.guide-hero .meta-row {
  display: flex; flex-wrap: wrap; gap: 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.guide-hero .meta-row .item .lab { color: var(--ink-faint); }
.guide-hero .meta-row .item .val { color: var(--ink-2); margin-left: 8px; }

/* TL;DR card */
.tldr {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 28px 32px;
  margin: 40px 0;
  position: relative;
}
.tldr::before {
  content: "";
  position: absolute;
  left: 30px; right: 30px;
  top: 0; height: 3px;
  background: linear-gradient(90deg, var(--terra) 0%, var(--terra-soft) 60%, transparent 100%);
}
.tldr .label-col {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terra);
  border-right: 1px solid var(--rule-soft);
  padding-right: 24px;
  align-self: start;
}
.tldr .label-col .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  display: block;
  margin-top: 6px;
  letter-spacing: -0.02em;
}
.tldr .label-col .num small { font-size: 0.9rem; color: var(--ink-faint); }
.tldr .body-col p {
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.6;
}
.tldr .body-col p:last-child { margin-bottom: 0; }
.tldr .body-col p strong { color: var(--terra); font-weight: 500; }
.tldr .body-col ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.tldr .body-col ul li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
  line-height: 1.55;
}
.tldr .body-col ul li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: var(--terra);
  font-family: var(--serif);
}

@media (max-width: 720px) {
  .tldr { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .tldr .label-col { border-right: none; padding-right: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
}

/* Body prose */
.prose { font-size: 1.08rem; line-height: 1.72; color: var(--ink); }
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose p:has(+ .callout), .prose p:has(+ .pullquote) { margin-bottom: 1.4em; }

.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 3.2rem 0 0.8rem;
  position: relative;
  padding-left: 0;
}
.prose h2 .h-num {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--terra);
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.prose h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 2rem 0 0.5em;
  letter-spacing: -0.005em;
}
.prose h3::before {
  content: "§";
  color: var(--terra);
  font-style: italic;
  font-weight: 300;
  margin-right: 10px;
  opacity: 0.7;
}

.prose ul, .prose ol { margin: 0.4em 0 1.3em 1.6em; padding: 0; }
.prose ul li, .prose ol li { margin-bottom: 0.4em; line-height: 1.65; }
.prose ul { list-style: none; padding-left: 0; margin-left: 0; }
.prose ul li {
  padding-left: 28px;
  position: relative;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 8px; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--terra);
}
.prose ol { counter-reset: item; list-style: none; padding-left: 0; margin-left: 0; }
.prose ol > li {
  counter-increment: item;
  padding-left: 44px;
  position: relative;
  margin-bottom: 0.8em;
}
.prose ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--terra);
  letter-spacing: 0.04em;
}

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

/* drop cap on first paragraph after lede */
.prose > p.dropcap::first-letter,
.prose > .opening::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 4.6em;
  line-height: 0.85;
  padding: 6px 12px 0 0;
  color: var(--terra);
  margin-top: 4px;
}

/* Pull quote */
.pullquote {
  margin: 2rem 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--terra);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
.pullquote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 14px;
  font-weight: 500;
}

/* Callout: try this / do this */
.callout {
  margin: 2rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px 26px 24px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}
.callout .ct-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  align-self: stretch;
  border-right: 1px solid var(--rule-soft);
  padding-right: 16px;
  text-align: center;
  font-weight: 500;
}
.callout .ct-body p:first-child { margin-top: 0; }
.callout .ct-body p:last-child { margin-bottom: 0; }
.callout .ct-body h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.1rem;
  margin: 0 0 0.5em;
  color: var(--ink);
}
.callout.tone-warn { border-color: oklch(85% 0.04 60); }
.callout.tone-warn .ct-tag { color: oklch(54% 0.13 50); }
.callout.tone-do { border-color: var(--rule); }
.callout.tone-do .ct-tag { color: var(--sage); }
:root.dark .callout.tone-do .ct-tag { color: var(--sage-soft); }
:root.dark .callout.tone-warn { border-color: oklch(40% 0.04 50); }
:root.dark .callout.tone-warn .ct-tag { color: oklch(78% 0.10 60); }

@media (max-width: 600px) {
  .callout { grid-template-columns: 1fr; gap: 12px; }
  .callout .ct-tag { writing-mode: horizontal-tb; transform: none; border-right: none; border-bottom: 1px solid var(--rule-soft); padding: 0 0 10px; text-align: left; }
}

/* Two-column compare (do/don't) */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 1.8rem 0;
}
.compare .col {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px 22px;
}
.compare .col .head {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.compare .col.do  .head { color: var(--sage); }
.compare .col.dont .head { color: var(--terra); }
:root.dark .compare .col.do .head { color: var(--sage-soft); }
.compare .col .head .sigil { font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height: 1; }
.compare .col ul { margin: 0; padding: 0; list-style: none; }
.compare .col li {
  padding: 8px 0 8px 18px;
  position: relative;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}
.compare .col li:first-child { border-top: none; padding-top: 0; }
.compare .col.do li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--sage); font-family: var(--serif); }
.compare .col.do li:first-child::before { top: 0; }
.compare .col.dont li::before { content: "×"; position: absolute; left: 0; top: 8px; color: var(--terra); font-family: var(--serif); font-size: 1.1em; }
.compare .col.dont li:first-child::before { top: 0; }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } }

/* Script blocks (parent says / child hears) */
.script {
  margin: 1.8rem 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
}
.script .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-top: 1px solid var(--rule-soft);
  align-items: stretch;
}
.script .row:first-child { border-top: none; }
.script .who {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 18px 18px;
  border-right: 1px solid var(--rule-soft);
  background: var(--paper-2);
  font-weight: 500;
}
.script .row.parent .who { color: var(--terra); }
.script .row.child .who { color: var(--sage); }
:root.dark .script .row.child .who { color: var(--sage-soft); }
.script .said {
  padding: 18px 22px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 600px) {
  .script .row { grid-template-columns: 1fr; }
  .script .who { border-right: none; border-bottom: 1px solid var(--rule-soft); padding: 10px 16px; background: transparent; }
}

/* Steps (numbered, large) — override .prose ol cascade */
.prose ol.steps,
.steps {
  list-style: none; padding: 0; margin: 1.6rem 0 2rem;
  counter-reset: step;
  display: grid; gap: 14px;
}
.prose ol.steps > li,
.steps > li {
  counter-increment: step;
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 22px 18px 78px;
  margin-bottom: 0;
  min-height: 64px;
}
.prose ol.steps > li::before,
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 22px;
  top: 18px;
  width: 40px;
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.03em;
  font-weight: 300;
}
.prose ol.steps > li h4,
.steps > li h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.15rem;
  margin: 0 0 6px;
  color: var(--ink);
}
.prose ol.steps > li p,
.steps > li p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-2); }
.prose ol.steps > li .why,
.steps > li .why {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
}
.steps > li .why span { color: var(--terra); margin-right: 6px; }

/* Source pills inline */
.src {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  background: var(--terra-wash);
  border: 1px solid var(--rule);
  color: var(--terra);
  padding: 1px 7px;
  border-radius: 999px;
  margin: 0 2px;
  vertical-align: 1px;
  white-space: nowrap;
  font-weight: 500;
}

/* Bilingual phrase rendering — Spanish line beneath English */
em.es,
.es {
  display: block;
  font-size: 0.92em;
  color: var(--ink-mute);
  margin: 2px 0 4px 0;
  font-style: italic;
  font-weight: 300;
}
em.es::before,
.es::before {
  content: "→ ";
  color: var(--terra-soft);
  font-style: normal;
  margin-right: 4px;
  letter-spacing: 0;
}
/* Tighten Spanish inside list items so the dash-after-phrase stays on its own visual line */
li > em + em.es,
li > em + .es { margin-top: 0; }
/* Inside callouts and pullquotes the Spanish should still be visually subordinate but not lost */
.callout em.es,
.pullquote em.es,
.tldr em.es { color: var(--ink-mute); opacity: 0.95; }
/* Inside .script blocks ("said" cells) — Spanish underneath what the parent says */
.script .said em.es { font-size: 0.95em; margin-top: 4px; }

/* Sources block at bottom */
.sources {
  margin-top: 4rem;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.sources h3 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
  font-weight: 500;
}
.sources ol { list-style: none; padding: 0; margin: 0; counter-reset: src; }
.sources li {
  counter-increment: src;
  padding: 10px 0 10px 36px;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
  border-top: 1px solid var(--rule-soft);
}
.sources li:first-child { border-top: none; }
.sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0; top: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--terra);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.sources li strong { color: var(--ink); font-weight: 500; }
.sources li .where { color: var(--ink-faint); font-style: italic; }

/* Bottom nav */
.guide-foot {
  margin-top: 4rem;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.guide-foot a {
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 10px;
}
.guide-foot a:hover { color: var(--terra); text-decoration: none; }
.guide-foot .next { text-align: right; }
.guide-foot .next .ttl, .guide-foot .prev .ttl {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  margin-top: 6px;
}

/* ── Site footer ── */
.site-footer {
  max-width: var(--max-wide);
  margin: 80px auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.site-footer .col { display: flex; align-items: center; gap: 16px; }
.site-footer em { font-style: italic; color: var(--terra); font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

@media (max-width: 600px) {
  .site-footer { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── Password gate ── */
.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 50;
  padding: 24px;
}
.gate-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.gate-card .mark-big {
  width: 56px; height: 56px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.8rem; color: var(--terra);
  background: var(--paper);
  margin-bottom: 24px;
}
.gate-card h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 2rem;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gate-card .sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 32px;
}
.gate-card input {
  width: 100%;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.gate-card input:focus { outline: none; border-color: var(--terra); }
.gate-card button {
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.gate-card button:hover { background: var(--terra); }
.gate-card button:active { transform: translateY(1px); }
.gate-card .err {
  display: none;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--terra);
}

/* ── Print ── */
@media print {
  body::before, .topbar, .guide-foot, .site-footer, .theme-toggle { display: none; }
  body { background: white; color: black; }
  .prose { font-size: 11pt; }
}

/* ── Small screens overall ── */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .shell { padding: 20px 18px 60px; }
  .topbar { margin-bottom: 36px; flex-wrap: wrap; }
  .topbar .meta { gap: 14px; }
  .prose h2 { font-size: 1.45rem; margin-top: 2.4rem; }
  .prose h3 { font-size: 1.05rem; }
  .pullquote { font-size: 1.15rem; padding-left: 18px; }
  .guide-hero h1 { letter-spacing: -0.012em; }
  .prose ol.steps > li, .steps > li { padding: 14px 16px 14px 64px; min-height: 56px; }
  .prose ol.steps > li::before, .steps > li::before { font-size: 1.9rem; left: 16px; top: 16px; width: 36px; }
  .crumbs { font-size: 0.66rem; gap: 8px; flex-wrap: wrap; }
  .guide-hero { margin-bottom: 32px; padding-bottom: 24px; }
  .tldr { margin: 28px 0; }
}