/*
 * Classic theme — quiet, informative, sumi ink on washi paper.
 */

:root {
  --paper: #faf8f4;
  --surface: #fffdfa;
  --header-bg: #f4f1ea;
  --input-bg: #fffdfa;

  --ink: #1c1b18;
  --ink-soft: #5d5850;

  --line: #e2ddd3;
  /*
   * Used for the edge of anything a visitor has to aim at — inputs, buttons,
   * the mood toggle. The old #c9c2b4 was a 1.7:1 hairline against the paper;
   * WCAG asks for 3:1 on a control boundary, and this is 3.5:1.
   */
  --line-strong: #8b8477;

  --accent: #a8322a;
  --accent-dark: #862722;
  --accent-soft: #f8efec;
  --accent-line: #e9d4cf;

  --link: #a8322a;
  --focus: #a8322a;

  --error: #a8322a;
  --error-soft: #f8efec;

  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  background-image: radial-gradient(circle at 1px 1px, rgba(28, 27, 24, 0.035) 1px, transparent 0);
  background-size: 22px 22px;
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
}

/* A single ink stroke under the hero, rather than a decorative image. */
.hero__title::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: 1rem;
  background: var(--accent);
}