/* ========================================
   /about: long-form editorial page
   ========================================

   Every custom property used here was checked against public/css/shared/style.css
   before being written. That is not pedantry: a single undefined token makes the
   WHOLE declaration invalid at computed-value time and the property silently
   falls back to its initial value, with no console error and nothing visibly
   broken until someone measures it. The defined scales are:
     --space-*   4 8 12 16 32 40 48 64 80   (there is NO 20, 24, 56 or 72)
     --text-*    xs sm md lg xl halo
     --radius-*  xs sm md
   Do not add a var() here without grepping for its definition first. */

/* The reading column lives on the PAGE, not on the prose block, the same shape
   legal.css:3 uses. Putting it on the inner block instead left the page heading
   full-width while the body was centred, a measured 270px disagreement between
   the h1 and the text under it. Heading and prose must share one left edge.

   900px rather than a ch measure: 68ch resolved to 739px, which is the better
   line length (81 chars) but left the column at 29% of a 2523px viewport while
   the navbar spanned 90% and the footer 1200px. The column read as stranded.
   900px sits nearer the site's other containers and stays a single column;
   it is also in the same family as legal.css's 800px, so this page and the
   legal pages no longer disagree about how wide a page of text is. */
.about-page {
  max-width: 900px;
  margin-inline: auto;
  padding-block: var(--space-32) var(--space-64);
  padding-inline: var(--space-16);
}

.about-body {
  font-family: var(--font-paragraph);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--colour-text);
}

/* --colour-primary (#104C91) is NOT theme-aware. style.css defines it once and
   the dark block overrides only bg/paper/text/border/text-muted. On the dark
   background that navy measures 2.46:1, i.e. effectively invisible; AA wants
   4.5:1 for body text. So the link colour is a local token that flips, rather
   than a raw --colour-primary reference.
   NOTE: .legal-content a has the identical problem site-wide and is NOT fixed
   here. That is a shared stylesheet and a separate change. */
.about-body {
  --about-link: var(--colour-primary);
}

:root[data-theme="dark"] .about-body {
  --about-link: #8FBFF0;
}

/* The lift block: the self-contained answer to "what is TrackingTCG?". Given
   visual weight because it is the paragraph most likely to be read alone. */
.about-answer {
  margin-block: 0 var(--space-40);
  padding: var(--space-16);
  border-left: 3px solid var(--about-link);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--colour-paper);
  font-size: var(--text-md);
  line-height: 1.6;
}

.about-section {
  margin-block: 0 var(--space-40);
}

.about-section h2 {
  margin-block: 0 var(--space-12);
  font-family: var(--font-header);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--colour-text);
}

.about-section h3 {
  margin-block: var(--space-32) var(--space-8);
  font-family: var(--font-header);
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--colour-text);
}

.about-section p {
  margin-block: 0 var(--space-16);
}

.about-section p:last-child,
.about-section ul:last-child,
.about-section ol:last-child {
  margin-block-end: 0;
}

.about-section ul,
.about-section ol {
  margin-block: 0 var(--space-16);
  padding-inline-start: var(--space-32);
}

.about-section li {
  margin-block-end: var(--space-8);
}

.about-section a {
  color: var(--about-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-section a:hover,
.about-section a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Tier definitions. A description list is the honest element for term/definition
   pairs, and it is also the shape a machine reader extracts most reliably. */
.about-deflist {
  margin-block: 0 var(--space-16);
  padding: 0;
}

.about-deflist > div {
  padding-block: var(--space-12);
  border-block-end: 1px solid var(--colour-border);
}

.about-deflist > div:last-child {
  border-block-end: 0;
}

.about-deflist dt {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  color: var(--colour-text);
}

.about-deflist dd {
  margin: var(--space-4) 0 0;
  color: var(--colour-text-muted);
}

@media (max-width: 600px) {
  .about-page {
    padding-block-end: var(--space-40);
  }

  .about-answer {
    font-size: var(--text-sm);
  }

  .about-section h2 {
    font-size: var(--text-md);
  }
}