/* =========================================================
   ABOUT — /about/, since 19 October 2026
   =========================================================
   Four bands: a dark text hero, "Why Fronteras?" on --paper, the nine letters
   on --ink, and the two short prose sections on --paper-2 and --paper.

   One photograph, in the hero, since 20 October 2026 — see the scrim note
   there. Everything below the hero sits on flat grounds, where the token table
   in styles.css is the whole contrast story.

   Colour, by ground (the brand guide's pairs, nothing new):
   - on --ink: --paper type, --saffron for the big letters and the lead letter in
     each word (8.25:1)
   - on --paper / --paper-2: --ink and --steel type, --petrol for <em> and the
     lead letters (9.01:1 on --paper). --saffron is never used on a light ground
     here — 1.88:1. */

/* ---------- Hero ---------- */
/* A photograph since 20 October 2026: a road cut through a mixed palm forest in
   the Paraguayan Chaco (Joel's, February 2025). Same construction as the
   publications hero — <img> behind, one graded scrim on ::after, type in the
   colours every scrimmed hero on the site uses: --saffron-lift eyebrow (the
   11px eyebrow is the binding constraint on all of them), --paper headline with
   no accent word, --paper lead. */
.a-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 120px 0 72px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.a-hero__bg { position: absolute; inset: 0; z-index: -1; }
.a-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 72% down the slack. At 1280 the box is ~455px tall over a 960px-tall
     scaled image, so this shows rows ~38-85% of the frame: the cloud base, the
     horizon, and the road running out of the forest toward it. Centred, the
     box loses the road; at 100% it loses the horizon. On a phone the box is
     taller than wide, the image scales to its height, and the vertical half
     does nothing — the centred horizontal crop still holds the road. */
  object-position: 50% 72%;
  display: block;
}
/* THE SCRIM. This frame is bright cloud over dark forest — the source measures
   165-182 mean luminance above the horizon and 75-82 below it (see
   tools/make-about-hero.py) — so the gradient is heaviest at the top, where the
   eyebrow and headline sit on cloud, and lets the forest and road up below.

   Measured 20 October 2026 by compositing the served image and this gradient
   in a canvas at the browser's own cover geometry, then taking the BRIGHTEST
   pixel under every line box of hero text. Worst case per element over ten
   widths, 320-1920:

     eyebrow   --saffron-lift  4.70:1  (414px)   needs 4.5 — the binding one
     headline  --paper         6.40:1  (1280px)  needs 3
     lead      --paper         5.69:1  (375px)   needs 4.5
     toc links --paper         4.98:1  (1280px)  needs 4.5

   The eyebrow binds, as it does on every scrimmed hero on the site. The steep
   part of the curve is the TOP stop: 0.74 there fails the eyebrow at 768, and
   lightening the lower stops alone fails the TOC links, which sit on the bright
   cloud base just above the horizon at desktop widths. 0.80/0.66/0.50 also
   passes, at 4.53, and was rejected for headroom: the source is a re-encoded
   copy, and the camera original may sit a little brighter.

   RE-MEASURE when the original replaces it, and after any change to the hero's
   copy — a longer lead moves the TOC down onto different cloud. */
.a-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 13, 18, 0.80) 0%,
      rgba(10, 13, 18, 0.68) 50%,
      rgba(10, 13, 18, 0.54) 100%);
}
.a-hero__inner { max-width: 860px; margin-left: 0; }
.a-hero__eyebrow { color: var(--saffron-lift); }
.a-hero__title {
  font-family: var(--display);
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--paper);
  margin: 18px 0 22px;
}
.a-hero__lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--paper);
  max-width: 46ch;
}

/* Three in-page links rather than the sticky .secnav bar the long pages carry.
   This page is about three screens on desktop; a sticky bar would cost more of
   it than it saves. */
.a-hero__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(239, 236, 228, 0.18);
}
.a-hero__toc a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(239, 236, 228, 0.35);
  text-underline-offset: 5px;
}
.a-hero__toc a:hover { text-decoration-color: var(--saffron); }

/* ---------- Shared type ---------- */
.a-title {
  font-family: var(--display);
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--ink);
  margin-top: 12px;
  text-wrap: balance;
}
.a-title em { font-style: italic; color: var(--petrol); }

.a-subtitle {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 18px;
}
.a-subtitle em { font-style: italic; }
.a-subtitle--dark { color: var(--paper); }

/* ---------- Why Fronteras? ---------- */
.a-why { background: var(--paper); padding: 96px 0 80px; }
.a-why__grid,
.a-text__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  align-items: start;
}
.a-why__body p,
.a-text__body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 64ch;
}
.a-why__body p + p,
.a-text__body p + p { margin-top: 18px; }

/* ---------- The nine letters ---------- */
.a-acronym { padding: 88px 0 96px; }
.a-acronym__head { max-width: 640px; margin-bottom: 48px; }
.a-acronym__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper);
}

/* 3×3, so the first letters spell the name across the rows. The hairlines are
   drawn by the grid gap showing the ground of the list through it, which keeps
   every tile's border the same 1px however the grid wraps. */
.a-letters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(239, 236, 228, 0.16);
  border: 1px solid rgba(239, 236, 228, 0.16);
}
.a-letter {
  background: var(--ink);
  padding: 30px 28px 34px;
  display: flex;
  flex-direction: column;
}
.a-letter__glyph {
  font-family: var(--display);
  font-size: clamp(72px, 7vw, 104px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  font-weight: 300;
  color: var(--saffron);
  margin-bottom: 22px;
}
.a-letter__word {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 10px;
}
/* The letter the acronym draws from, picked out inside the word — the same
   device the homepage used, in the dark-ground accent. */
.a-letter__lead { color: var(--saffron); }
.a-letter__desc {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(239, 236, 228, 0.82);
}

/* ---------- The two prose sections ---------- */
.a-text { background: var(--paper); padding: 88px 0; }
.a-text--paper2 { background: var(--paper-2); }
.a-text__links { margin-top: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .a-letters { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .a-why__grid,
  .a-text__grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 720px) {
  .a-hero { padding: 96px 0 52px; }
  .a-why { padding: 64px 0 56px; }
  .a-acronym { padding: 60px 0 64px; }
  .a-text { padding: 60px 0; }
  .a-letters { grid-template-columns: 1fr; }
  /* One column: the big letter moves beside the word rather than above it,
     the layout the homepage used. Stacked, each tile spent a full line of
     phone height on a single glyph, nine times over. */
  .a-letter {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 22px 20px 24px;
  }
  .a-letter__word { margin-top: 6px; }
  .a-letter__glyph {
    grid-row: span 2;
    font-size: 60px;
    margin-bottom: 0;
  }
  .a-why__body p,
  .a-text__body p { font-size: 16px; }
}