/* firstpack-v2 — about page. Owner: fp2-about. ADDS only; never restyles base chrome.
   press-grammar discipline: paper ground, ink + two panel hues, generous rhythm, motion slow/few.
   Palette tokens consumed from base.css :root — never redefined here. */

/* ---- 1. quiet photo-band hero (ink scrim, claim lower-left) ---- */
.ab-hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--ink);
}
.ab-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 21, 27, .12) 0%, rgba(16, 21, 27, .34) 46%, rgba(16, 21, 27, .78) 100%);
}
.ab-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--paper);
  padding-block: 0 clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
.ab-hero-copy .eyebrow {
  color: var(--paper);
  opacity: .82;
}
.ab-hero-head {
  margin-top: 1rem;
  max-width: 18ch;
}

/* ---- shared editorial eyebrow (far-left brow, hairline lead-in) ---- */
.ab-brow {
  color: var(--press-blue);
}

/* ---- 2. gem-box editorial (mechanic 4) ---- */
.ab-gem {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 42rem);
  gap: clamp(1.5rem, 1rem + 4vw, 5rem);
  align-items: start;
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.ab-gem .ab-brow {
  padding-top: .55rem;
}
.ab-gem-beats {
  display: grid;
  gap: 1.5rem;
}
.ab-gem-lead {
  max-width: 20ch;
  margin-bottom: .5rem;
}
.ab-gem-p {
  color: color-mix(in oklab, var(--ink) 74%, var(--paper));
}
.ab-seal {
  margin-top: .75rem;
  max-width: 40rem;
  font-weight: 400;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  line-height: 1.5;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
}
.ab-seal .cn {
  color: var(--press-blue);
  letter-spacing: 0;
}

/* ---- 3. the house, fifty years (mechanic 4, story + framed still) ---- */
.ab-house {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  grid-template-areas: "lede fig" "body fig";
  column-gap: clamp(2rem, 1rem + 5vw, 6rem);
  row-gap: 2rem;
  align-items: start;
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.ab-house-lede { grid-area: lede; }
.ab-house-body { grid-area: body; display: grid; gap: 1.25rem; max-width: 40rem; }
.ab-house-fig  { grid-area: fig; }
.ab-house-head {
  margin-top: 1rem;
  font-size: var(--display-sm);
  max-width: 16ch;
}
.ab-house-fig img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
}
.ab-house-body .cn { color: var(--press-blue); letter-spacing: 0; }

/* ---- 4. PRINTS — caps rows, initials read down the left edge ---- */
.ab-prints {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.ab-prints-lede { max-width: 40rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.ab-prints-head {
  margin-top: 1rem;
  font-size: var(--display-sm);
  max-width: 20ch;
}
.ab-prints-rows {
  list-style: none;
  display: grid;
  border-top: 1px solid var(--line);
}
.ab-pr {
  display: grid;
  grid-template-columns: clamp(3.5rem, 2rem + 5vw, 7rem) minmax(0, 1fr);
  gap: clamp(1rem, .5rem + 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  border-bottom: 1px solid var(--line);
}
.ab-pr-l {
  font-size: clamp(2.4rem, 1.4rem + 3vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  color: var(--press-blue);
  letter-spacing: .02em;
}
.ab-pr-c { display: grid; gap: .5rem; max-width: 44rem; }
.ab-pr-t {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .9rem;
  font-weight: 500;
}
.ab-pr-b {
  color: color-mix(in oklab, var(--ink) 72%, var(--paper));
  font-weight: 300;
  max-width: 40rem;
}

/* ---- 5. certified band ---- */
.ab-certs {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.ab-certs-head { margin-top: 1rem; font-size: var(--display-sm); }
.ab-certs-row {
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.ab-cert {
  display: grid;
  gap: .5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--press-blue);
}
.ab-cert-k {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: var(--eyebrow);
  color: color-mix(in oklab, var(--ink) 60%, var(--paper));
}
.ab-cert-v {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ab-cert-n {
  color: color-mix(in oklab, var(--ink) 68%, var(--paper));
  font-weight: 300;
  font-size: .95rem;
}

/* ---- 6. SG↔JB split panel (mechanic 3) — photo | flat press-blue ---- */
.ab-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.ab-split-fig {
  position: relative;
  overflow: clip;
  min-height: 100%;
}
.ab-split-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-split-panel {
  background: var(--press-blue);
  color: var(--paper);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
  display: grid;
  align-content: center;
  gap: 1.75rem;
}
.ab-split-brow { color: color-mix(in oklab, var(--paper) 78%, var(--press-blue)); }
.ab-split-head { font-size: var(--display-sm); max-width: 16ch; }
.ab-split-pitch {
  max-width: 40ch;
  font-weight: 300;
  color: color-mix(in oklab, var(--paper) 90%, var(--press-blue));
}
.ab-split-cta { justify-self: start; }

/* the route/axis graphic — CSS only, no map embed */
.ab-axis {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(.75rem, .3rem + 2vw, 1.75rem);
  align-items: start;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line-paper);
}
.ab-node { display: grid; gap: .4rem; }
.ab-reg { font-size: 1rem; color: var(--paper); opacity: .7; line-height: 1; }
.ab-node-place {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .82rem;
  font-weight: 500;
}
.ab-node-addr {
  font-weight: 300;
  font-size: .82rem;
  line-height: 1.5;
  color: color-mix(in oklab, var(--paper) 82%, var(--press-blue));
}
.ab-node-role {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .66rem;
  color: color-mix(in oklab, var(--paper) 70%, var(--press-blue));
}
.ab-node-tel {
  font-weight: 300;
  font-size: .78rem;
  color: color-mix(in oklab, var(--paper) 82%, var(--press-blue));
}
.ab-axis-track {
  display: grid;
  justify-items: center;
  gap: .5rem;
  align-self: center;
  padding-top: 1.4rem;
}
.ab-axis-rule {
  width: clamp(2rem, 1rem + 5vw, 5rem);
  height: 1px;
  background: var(--paper);
  opacity: .55;
  position: relative;
}
.ab-axis-rule::before,
.ab-axis-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--paper);
  transform: translateY(-50%) rotate(45deg);
}
.ab-axis-rule::before { left: -2px; }
.ab-axis-rule::after { right: -2px; }
.ab-axis-cap {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .6rem;
  opacity: .72;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ab-gem,
  .ab-house { grid-template-columns: 1fr; }
  .ab-house { grid-template-areas: "lede" "body" "fig"; }
  .ab-split { grid-template-columns: 1fr; }
  .ab-split-fig { min-height: 56vw; }
  .ab-certs-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ab-axis { grid-template-columns: 1fr; gap: 1.25rem; }
  .ab-axis-track {
    grid-auto-flow: column;
    padding-top: 0;
    justify-content: start;
    align-items: center;
  }
  .ab-pr { grid-template-columns: 2.75rem 1fr; }
}


/* r27 — the certificates themselves, above the certified band (Charlie 2026-08-31
   "add above the iso thing as image"). Served at the 768px native ceiling, centred
   on the page axis; the source scan carries its own frames, so no border here. */
.ab-certs-img {
  max-width: 768px;
  margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3rem);
}
.ab-certs-img img { display: block; width: 100%; height: auto; }