/* /about V6 «Measured» (Benjamin 29/10). Every value is the rule in ~/Claude code/nettside/about/STEG0.md part 3,
   the same numbers as AboutRule in SiteAboutV6.swift:
     unit 8; grid 12 columns, gap 24, margin 32 (phone: 24, one column);
     five sizes: title 64/64 (phone 40/44), part 40/48 (phone 32/40), belief 24/32, body 17/28, label 14/20;
     rhythm: between parts 120 (phone 72), eyebrow to title 32, title to lead 24, heading to body 16,
     text to picture 64, picture to caption 12; pictures 16:9 and 1:1, corners 8; colour only in the picture and the
     elements. The site's CSP has no inline styles, so all of it lives here. */

.page-about { --g: 32px; }
@media (max-width: 833px) { .page-about { --g: 24px; } }

.ab {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding: 0 var(--g);
  align-items: start;
}
.ab > * { grid-column: 1 / -1; min-width: 0; }
.ab-part { padding-top: 120px; }
.ab-last { padding-bottom: 120px; }

/* Type: five sizes and no others. */
.ab h2 { font-size: 40px; line-height: 48px; letter-spacing: -0.02em; font-weight: 600; }
.ab h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; font-weight: 600; }
.ab p, .ab dd { font-size: 17px; line-height: 28px; letter-spacing: normal; color: var(--body); }

/* The hero: 64 bar + 80 = 144 from the top. */
.ab-hero { padding-top: 80px; }
.ab .ab-eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; }
.ab-title { grid-column: 1 / span 8; margin-top: 32px; font-size: 64px; line-height: 64px; letter-spacing: -0.02em; }
.ab .ab-mission { grid-column: 1 / span 6; margin-top: 24px; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); }
.ab-lead { grid-column: 1 / span 6; margin-top: 16px; }
.ab-figure { margin: 64px 0 0; }
.ab-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.ab-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--body); }

/* Two halves: the part's heading in columns 1 to 6, the text in 7 to 12. */
.ab-left { grid-column: 1 / span 6; }
.ab-right { grid-column: 7 / span 6; }
.ab-stack { display: grid; gap: 16px; }

/* A belief: heading, 16, body. */
.ab-belief p { margin-top: 16px; }

/* What We Believe: two beliefs with an element each (text 1 to 5, the square 7 to 11), then four in two columns. */
.ab-object { display: grid; grid-template-columns: subgrid; align-items: center; margin-top: 64px; }
.ab-object > .ab-belief { grid-column: 1 / span 5; }
.ab-object > .ab-tile { grid-column: 7 / span 5; }
.ab-tile { aspect-ratio: 1 / 1; border-radius: 8px; background: var(--kull); display: grid; place-items: center; overflow: hidden; }
.ab-el { display: block; width: 100%; height: 100%; }
.ab-el text { font-family: var(--font); font-size: 20.8px; }
.ab-num { fill: #FFFFFF; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-name { fill: #111114; font-weight: 600; }

.ab-ring { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ab-ring svg { width: 50%; height: auto; display: block; margin-bottom: 24px; }
.ab-track { stroke: var(--ink); stroke-opacity: 0.14; }
.ab-score { font-family: var(--font); font-size: 34px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.ab .ab-who { font-size: 17px; line-height: 28px; font-weight: 600; color: var(--ink); }
.ab .ab-what { font-size: 14px; line-height: 20px; }

.ab-four { display: grid; grid-template-columns: subgrid; row-gap: 48px; margin-top: 64px; }
.ab-four > * { grid-column: span 6; }

/* How We Work: three columns of four. */
.ab-three { display: grid; grid-template-columns: subgrid; margin-top: 64px; }
.ab-three > * { grid-column: span 4; }

/* Where We Are: the date in two of the six columns, the event in four. */
.ab-dates { margin: 0; display: grid; gap: 16px; }
.ab-dates > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; }
.ab-dates dt { grid-column: span 2; font-size: 17px; line-height: 28px; font-weight: 600; color: var(--ink); }
.ab-dates dd { grid-column: span 4; margin: 0; }

/* The bet: the part size over eight columns, one part below. */
.ab .ab-bet { grid-column: 1 / span 8; margin-top: 120px; font-size: 40px; line-height: 48px; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }

@media (max-width: 833px) {
  .ab { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .ab > *, .ab-left, .ab-right, .ab-title, .ab .ab-mission, .ab-lead, .ab .ab-bet { grid-column: 1 / -1; }
  .ab-part { padding-top: 72px; }
  .ab-last { padding-bottom: 72px; }
  .ab-title { font-size: 40px; line-height: 44px; }
  .ab h2, .ab .ab-bet { font-size: 32px; line-height: 40px; }
  .ab-left + .ab-right { margin-top: 32px; }
  .ab .ab-bet { margin-top: 72px; }
  .ab-object, .ab-four, .ab-three { grid-template-columns: minmax(0, 1fr); }
  .ab-object { row-gap: 32px; }
  .ab-object > .ab-belief, .ab-object > .ab-tile, .ab-four > *, .ab-three > * { grid-column: 1 / -1; }
  .ab-four, .ab-three { row-gap: 48px; }
  .ab-dates > div { grid-template-columns: 128px minmax(0, 1fr); }
  .ab-dates dt, .ab-dates dd { grid-column: auto; }
}