:root {
  --bg: #faf9f6;
  --ink: #1c1b19;
  --ink-soft: #55524a;
  --accent: #8a5a3b;
  --card-bg: #ffffff;
  --card-border: #e6e2d8;
  --max-width: 40rem;
  /* Subtle per-card accent cycle — purely decorative, safe to delete along
     with the :nth-child rules below if it doesn't earn its keep. */
  --tint-1: #8a5a3b;
  --tint-2: #5f7d5f;
  --tint-3: #4f7290;
  --tint-4: #a3792f;
  --tint-5: #8a5a78;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --ink: #f3f1ea;
    --ink-soft: #b9b4a6;
    --accent: #d3a17e;
    --card-bg: #211f1c;
    --card-border: #34312b;
    --tint-1: #d3a17e;
    --tint-2: #9bc0a0;
    --tint-3: #92bdd6;
    --tint-4: #d9b876;
    --tint-5: #c495b8;
  }
}

* { box-sizing: border-box; }

/* Invisible until a keyboard user tabs to it, then jumps straight past the
   header nav (now five links deep on the homepage) to the actual content. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--bg);
  padding: 0.6rem 1rem;
  border-radius: 0 0 0.4rem 0;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  line-height: 1.6;
}

.hero, .site-footer, main.faq, main.submit-form {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

/* Bare <main> (homepage only — faq/submit pages have a class and are
   caught by the narrower rule above) is deliberately uncapped: no max-width
   at all, just the side padding for a gutter. column-width on the grid
   below already keeps individual bubbles a sane minimum size, so this is
   what actually lets the column count keep growing with the window instead
   of plateauing once some fixed container width is reached — the previous
   --max-width-wide cap defeated that. .founder-affirmation pulls itself
   back to reading width below regardless, since that section is prose, not
   a grid, and reads badly stretched full-width. */
main {
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.hero { text-align: center; padding-bottom: 1rem; }
.hero-small { padding-bottom: 0.5rem; }

.badge {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a04b3a;
  border: 1px solid #a04b3a;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 1rem;
}

h1 { font-size: 2.25rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.3rem; margin: 0 0 0.75rem; }

.hero-sub { color: var(--ink-soft); font-size: 1.05rem; }

.hero-links { margin-top: 1.25rem; font-family: system-ui, sans-serif; font-size: 0.9rem; }
.hero-links a, .site-footer a { color: var(--accent); text-decoration: none; }
.hero-links a:hover, .site-footer a:hover { text-decoration: underline; }
.hero-links span, .site-footer span { color: var(--ink-soft); margin: 0 0.4rem; }

.founder-affirmation {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 0.5rem;
}
.founder-affirmation blockquote {
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--accent);
  border-radius: 0.5rem;
  font-style: italic;
}
.founder-affirmation footer {
  margin-top: 0.5rem;
  font-style: normal;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.affirmations { padding-top: 1.5rem; }

/* Bento/mosaic layout: cards vary in both width (longer text spans 2
   columns — see .wide, added by app.js based on length) and height (no
   forced row-alignment). CSS grid alone gives fluid column count and
   width-spanning for free, but would still force every card in a row to
   share one height band — a plain masonry trick (CSS multi-column) solves
   height but can't vary width at all. Splitting the difference: grid here,
   with app.js measuring each card after render and setting how many fine
   grid-auto-rows it should span, so height stays fully organic too. See
   the "masonry span" block in app.js.
   grid-auto-rows/gap values are read by that JS — keep them in sync if
   either changes. */
.affirmation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 8px;
  gap: 1rem;
  /* Without this, grid items stretch to fill their row-span by default —
     which both defeats the point of measuring real content height (see
     app.js) AND was the actual bug: a card gets measured right after
     insertion, before its span is corrected, so a stretch-by-default card
     reports its *placeholder* span's height back, not its content's. Every
     card fed the same wrong number into the span math. align-items: start
     keeps each card's box at its natural content height always, so
     measuring is accurate no matter when it happens. */
  align-items: start;
}

.affirmation-card {
  grid-row-end: span 20; /* placeholder until app.js measures and overrides */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--card-border);
  border-radius: 1.5rem; /* bubble, not box */
  padding: 1.2rem 1.4rem;
}

.affirmation-card.wide { grid-column: span 2; }

@media (max-width: 28rem) {
  /* On a one-column viewport, a 2-column span would just overhang — drop
     back to span 1 so it can't. */
  .affirmation-card.wide { grid-column: span 1; }
}

/* Subtle per-card accent — cycles through five muted tones so adjacent
   cards read as distinct without turning into a rainbow. Delete this block
   (and the border-left-color above) to go back to a single neutral border. */
.affirmation-card:nth-child(5n+1) { border-left-color: var(--tint-1); }
.affirmation-card:nth-child(5n+2) { border-left-color: var(--tint-2); }
.affirmation-card:nth-child(5n+3) { border-left-color: var(--tint-3); }
.affirmation-card:nth-child(5n+4) { border-left-color: var(--tint-4); }
.affirmation-card:nth-child(5n+5) { border-left-color: var(--tint-5); }

.affirmation-card p { margin: 0 0 0.5rem; }
.affirmation-card cite {
  font-style: normal;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.empty-state, .load-status {
  font-family: system-ui, sans-serif;
  color: var(--ink-soft);
  text-align: center;
  font-size: 0.9rem;
}

.capacity-notice {
  font-family: system-ui, sans-serif;
  color: var(--ink-soft);
  text-align: center;
  font-size: 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
}
.capacity-notice a { color: var(--accent); }

.faq section { margin-bottom: 1.75rem; }
.faq p { color: var(--ink-soft); }

.site-footer {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-soft);
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.disabled { color: var(--ink-soft); opacity: 0.6; cursor: default; }

.submit-form { padding-top: 0.5rem; font-family: system-ui, sans-serif; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-family: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--card-border);
  border-radius: 0.4rem;
  background: var(--card-bg);
  color: var(--ink);
}
.field-hint { font-size: 0.75rem; color: var(--ink-soft); margin: 0.3rem 0 0; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-checkbox label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--ink); }
.field-checkbox input { width: auto; }

.submit-form button {
  display: block;
  margin-left: auto;
  font: inherit;
  font-family: system-ui, sans-serif;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 0.4rem;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
}
.submit-form button:disabled { opacity: 0.6; cursor: default; }

.form-status { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft); }
.form-status-error { color: #a04b3a; }

.ai-note { margin-top: 0.4rem; font-size: 0.78rem; }
.ai-note a { color: var(--ink-soft); }