/* =============================================================
   ABOUT — /de/about/, /en/about/
   Tokens only. Every colour comes from tokens.css; see the
   Global Constraints in the plan for why literals are banned.
   ============================================================= */

.about-main {
  flex: 1;
}

/* ── Header ──────────────────────────────────────────────────── */
.about-header {
  padding: var(--space-16) 0 var(--space-8);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}

.about-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
}


/* min-width: 0 lets the flex item shrink; overflow-wrap: anywhere is what
   actually reduces its intrinsic min-content width. Neither substitutes for
   the other, and a German compound is one unbreakable token without both. */
.about-header__copy {
  flex: 1 1 20rem;
  min-width: 0;
  overflow-wrap: anywhere;
  justify-content: center;
}

.about-header__name, .about-header__role, .about-header__stance {
  text-align: center;
}

.about-header__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-emphasis);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.about-header__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: var(--space-2);
}

.about-header__stance {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  margin-inline: auto;
  margin-top: var(--space-4);
  max-width: 40ch;
}

/* ── Intro ───────────────────────────────────────────────────── */
/* Centred the same way as .about-pillar / .about-practice: a plain 68ch box,
   no horizontal padding of its own. The horizontal inset comes from the
   `.container` wrapper in Intro.astro — the same class .about-body uses for
   the pillars — so both columns line up. A flat `padding-inline` here was
   the cause of a 24px column stagger against the pillars; see
   tests/build-output.test.ts, describe('about'). */
.about-intro {
  padding-top: var(--space-12);
  max-width: 68ch;
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-intro__para {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ── Contact ─────────────────────────────────────────────────── */
/* Rendered inside .about-body.container (see about/index.astro), which
   already provides the horizontal inset the pillars use — no padding of its
   own, same treatment as .about-pillar / .about-practice. Vertical spacing
   from the previous sibling comes from .about-body's own `gap`. */
.about-contact {
  list-style: none;
  max-width: 68ch;
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.about-contact__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.about-contact__item a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-interactive);
}

.about-contact__item a:hover {
  color: var(--text-primary);
}

/* ── Body ────────────────────────────────────────────────────── */
.about-body {
  padding-top: var(--space-16);
  padding-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Scroll-reveal base state. The html.js scope is what keeps the pillars
   visible when JavaScript never runs — without it, a no-JS visitor gets a
   page of permanently invisible content. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
  }

  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Pillars ─────────────────────────────────────────────────── */
.about-pillar {
  max-width: 68ch;
  margin-inline: auto;
  width: 100%;
}

.about-pillar__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-emphasis);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-interactive);
  margin-bottom: var(--space-6);
}

.about-pillar__number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--accent-text);
  margin-right: var(--space-3);
}

.about-pillar__claim {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-pillar__claim p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ── Evidence ────────────────────────────────────────────────── */
.about-evidence {
  list-style: none;
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-evidence__item {
  padding-left: var(--space-5);
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
}

.about-evidence__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--space-3);
  height: 1px;
  background: var(--accent);
}

.about-evidence__label {
  font-size: var(--text-base);
  font-weight: var(--weight-emphasis);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.about-evidence__detail {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Practice ────────────────────────────────────────────────── */
.about-practice {
  max-width: 68ch;
  margin-inline: auto;
  width: 100%;
}

.about-practice__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-interactive);
  margin-bottom: var(--space-6);
}

.about-practice__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-practice__item {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  padding-left: var(--space-5);
  position: relative;
}

.about-practice__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--space-3);
  height: 1px;
  background: var(--accent);
}

/* =============================================================
   PRINT
   ============================================================= */
@media print {
  /* Force the light theme regardless of the reader's chosen or system
     scheme. Both selectors are load-bearing: the bare :root covers readers
     who never touched the toggle (no data-theme attribute at all), and
     :root[data-theme] ties tokens.css's :root[data-theme='dark'] rule at
     (0,2,0) so an explicit dark choice also prints light — source order
     (about.css loads after tokens.css) settles the tie. */
  :root, :root[data-theme] { color-scheme: only light; }

  @page {
    size: A4;
    margin: 15mm;
  }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .site-header,
  .skip-link,
  .site-footer,
  body::before {
    display: none !important;
  }

  .about-main { min-height: unset; }

  .about-header {
    padding: 0 0 var(--space-6) 0;
    border-bottom: 2px solid var(--border-interactive);
    background: transparent;
  }

  .about-header__inner { padding: 0; }

  .about-body {
    padding-top: var(--space-6);
    padding-bottom: 0;
    gap: var(--space-8);
  }

  /* Reveal state must never survive into print: a [data-reveal] element
     that was never scrolled into view would print blank. */
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .about-pillar,
  .about-practice {
    break-inside: avoid;
  }
}