/* ============================================
   ABOUT — a chaptered letter.
   One left-aligned column; every block opens the same way. The page's
   only emphasis device is the bold run-in lead (it comes from the copy
   itself). Hierarchy steps down in even grades: display headline →
   bold leads → card run-ins. Blocks are separated by axis-width
   hairlines; the closing "Who makes it" block changes surface to
   indigo (rendered from YAML by about.njk).
   ============================================ */
.about-main {
  position: relative;
  padding-top: calc(var(--space-3xl) + 2rem);
  overflow: hidden;
}

/* Dawn wash behind the opening — the page's one piece of atmosphere.
   z-index: -1 on both washes: absolutely-positioned pseudos otherwise
   paint ABOVE earlier-positioned siblings (the makers block) and above
   static backgrounds (the cards) — the washes must sit under everything
   except the page canvas. */
.about-main::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translate(-50%, -40%);
  width: min(1400px, 160vw);
  height: 720px;
  background: radial-gradient(ellipse at 50% 50%,
    var(--wash-amber-medium) 0%,
    var(--wash-amber-soft) 45%,
    transparent 72%);
  pointer-events: none;
}

/* Cool wash rising behind the principles — the page's temperature arc:
   dawn amber at the open, cool blue at the principles, indigo night at
   the close. Anchored to the bottom of main; the opaque makers block
   paints over its lower half, so the visible glow sits in the cards
   region regardless of locale text length. */
.about-main::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: -25%;
  width: min(900px, 100vw);
  height: 820px;
  background: radial-gradient(ellipse at 50% 50%,
    var(--wash-blue-medium) 0%,
    var(--wash-blue-soft) 45%,
    transparent 72%);
  pointer-events: none;
}

/* The single axis. Everything — headline, prose, cards, rules —
   shares this width and left edge. */
.about-main .container {
  position: relative;
  max-width: 720px;
}

/* Title — the essay's first sentence, the page's one display moment. */
.about-content h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: var(--space-md);
}

/* Lede — completes the title's thought, one step up from body. */
.about-content h1 + p {
  font-size: var(--text-lg);
  font-weight: 420;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* Body voice. */
.about-content p {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  text-wrap: pretty;
}

/* The archive line ("A month in…") mirrors the opening lede — the
   narrative opens and closes on the same secondary scale. Targets the
   paragraph right before the principles heading; structure is identical
   in every locale. */
.about-content p:has(+ hr + h2) {
  font-size: var(--text-lg);
  font-weight: 420;
  line-height: 1.6;
}

/* Bold run-in leads (**What if…**, **Privacy.** …). */
.about-content p strong {
  font-weight: 600;
  color: var(--text);
}

/* Block breaks — hairlines on the axis. 2.5rem each side ≈ 2.5× the
   paragraph gap: clearly a block break, but the blocks keep talking
   to each other (4rem each side read as slides, not a letter). */
.about-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

/* Section heading — sits between the body voice and the headline.
   The type scale has no step between --text-xl (1.5) and --text-2xl
   (2.9); 2rem fills that gap for this page (same practice as
   home.css's 2.2/2.4rem one-offs). */
.about-content h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: var(--space-md);
}

/* Principle cards — every paragraph after the principles heading
   carries a bold run-in title; each gets a quiet card surface at the
   same width as the prose. (The bold-lead paragraphs in the essay sit
   BEFORE the h2, so this selector reaches only the principles.) */
.about-content h2 ~ p:has(> strong:first-child) {
  background: var(--about-card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-sm);
  line-height: 1.72;
}

/* Card surface: lighter than the page in light mode, elevated in dark. */
:root {
  --about-card-bg: rgba(255, 255, 255, 0.6);
}
:root[data-theme="dark"] {
  --about-card-bg: rgba(245, 240, 232, 0.045);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --about-card-bg: rgba(245, 240, 232, 0.045);
  }
}

/* Links — quiet underlines that sharpen on hover. */
.about-content a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.15s;
}

.about-content a:hover {
  text-decoration-color: currentColor;
}

/* ---- Who makes it — the closing block changes surface to indigo. ----
   A pure vertical linear gradient: darkens downward and lands exactly
   on the footer's background (theme-scoped), so the close is one
   continuous descent into night — no overlays, no band-step at the
   seam, and a perfectly uniform bottom edge. */
/* The indigo edge acts as this break's "rule": same 2.5rem approach as
   the hairline gaps, then 4rem inside the band — a dark surface needs
   more internal air than an in-flow section, but the totals stay in
   rhythm with the rest of the page. */
.about-makers {
  --about-makers-end: var(--indigo-900); /* = light-theme .footer bg */
  background: linear-gradient(180deg, var(--indigo-800) 0%, var(--about-makers-end) 100%);
  margin-top: var(--space-lg);
}

:root[data-theme="dark"] .about-makers {
  --about-makers-end: var(--bg-elevated); /* = dark-theme .footer bg */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-makers {
    --about-makers-end: var(--bg-elevated);
  }
}

.about-makers .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.about-makers-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2rem; /* matches .about-content h2 — same heading grade */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
  margin-bottom: var(--space-md);
}

.about-makers p {
  font-size: var(--text-base);
  line-height: 1.78;
  color: var(--text-on-dark-secondary);
  margin-bottom: var(--space-sm);
}

.about-makers p:last-child {
  margin-bottom: 0;
}

.about-makers a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.15s;
}

.about-makers a:hover {
  text-decoration-color: currentColor;
}

/* The cream focus ring reads better than red on the indigo surface
   (same override the footer and pricing card use in tokens.css). */
.about-makers :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

/* Embed mode */
.embed .about-main {
  padding-top: var(--space-lg);
}

@media (max-width: 768px) {
  .about-content h2,
  .about-makers-title {
    font-size: var(--text-xl);
  }

  .about-content h2 ~ p:has(> strong:first-child) {
    padding: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 480px) {
  /* The 12-word headline sets ~5 lines at --text-2xl on small phones —
     a full screen of display type. One step down (same one-off practice
     as home.css's 2.2rem feature headings). */
  .about-content h1 {
    font-size: 2.2rem;
  }
}