/* ============================================================
   About — page-scoped styles
   Loaded AFTER subpages.css on /about/ only. Two concerns:
   (1) the tunnel hero — an ENDLESS one-direction dusk sky seen
       through the arch cut-out (a doubled seamless panorama panned
       right-to-left, plus a faster near-cloud wisp band for wind,
       with the existing pointer/scroll parallax on the whole stack);
   (2) the CHARTER body — an About-only register: a printed document
       you arrive at through the tunnel. Asymmetric grid (marginalia
       rail + wide measure), hairline-ruled ledger rows, gold only as
       a hairline. Reuses subpages.css TOKENS, never its COMPONENTS.
   ============================================================ */

/* ============================================================
   1. Tunnel hero — endless one-direction sky
   Layer stack (back -> front):
     .about-sky        (parallax container, overscanned, clips)   z 0
       .about-sky-pan  (doubled seamless panorama, slow drift)
       .about-sky-wisp (near-cloud band, ~1.7x faster -> wind)
     .about-arch       (arch-frame.png cut-out, opaque tunnel)    z 1
     .about-hero-scrim (text-contrast wash)                        z 2
   The pan is transform-only + will-change. Parallax lives on the
   .about-sky container so it moves the ENTIRE stack; the pan/wisp
   animations run inside that transformed space. Reduced-motion /
   save-data fall back to the untouched still-arch.jpg (below).
   ============================================================ */
.about-hero-media {
  background: var(--sp-ink);
}

.about-sky,
.about-arch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Parallax + overscan on the whole sky stack (var set by about.js).
   The dusk poster sits under the pan as a correct first frame: on a slow
   network it shows through the arch (registered by the same transform)
   until the panorama JPG arrives, instead of a bare ink opening. */
.about-sky {
  overflow: hidden;
  z-index: 0;
  background: url("/assets/v9/arch-sky-poster.jpg") center / cover no-repeat var(--sp-ink);
  transform: scale(1.085) translate3d(var(--sky-tx, 0px), var(--sky-ty, 0px), 0);
  will-change: transform;
}

/* -- The endless pan: two identical, horizontally-seamless copies of
   the panorama laid side by side; translating the track by exactly one
   copy width (-50% of a 2-copy track) returns to an identical frame, so
   the motion is continuous with zero net snap. Right-to-left stream. -- */
.about-sky-pan,
.about-sky-wisp {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: max-content;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  animation: about-sky-drift var(--about-pan-dur, 85s) linear infinite;
}

.about-sky-pano {
  height: 100%;
  width: auto;
  max-width: none; /* defeat the global img{max-width:100%} so the track can exceed the viewport */
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Near-cloud wisp: a feathered band anchored over the lower cloud sea,
   panning ~1.7x faster (60s -> ~35s) at reduced opacity. Two speeds is
   what reads as WIND rather than a flat scroll. */
.about-sky-wisp {
  top: auto;
  bottom: 0;
  height: 56%;
  opacity: 0.5;
  animation-duration: var(--about-wisp-dur, 50s);
}

.about-sky-wisp-strip {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center top;
}

@keyframes about-sky-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.about-arch {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  /* slightly less overscan than the sky so the two layers drift apart
     on pointer/scroll move -> the depth cue */
  transform: scale(1.045) translate3d(var(--arch-tx, 0px), var(--arch-ty, 0px), 0);
  will-change: transform;
}

.about-hero-scrim {
  z-index: 2;
}

/* ---------- Reveal robustness ----------
   Default every revealed element VISIBLE (transform-rise is the only
   entrance) so first paint is always readable even in hidden-tab /
   headless renderers where opacity transitions stall. */
.sp-page [data-reveal],
.about-hero[data-reveal-group] [data-reveal-child] {
  opacity: 1;
}

/* ---------- Static fallback (reduced-motion / save-data / decode) ----------
   about.js flags .is-static on save-data (JS reads navigator.connection);
   the media query below is the no-JS belt-and-suspenders for reduced-motion
   and reduced-data. Either path hides the moving layers and reveals the
   untouched .sp-hero-fallback (still-arch.jpg) exactly as before. */
[data-sp-hero-media].is-static .about-sky,
[data-sp-hero-media].is-static .about-arch {
  display: none;
}

.about-hero .sp-hero-fallback {
  z-index: 0;
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .about-hero .about-sky,
  .about-hero .about-arch {
    display: none;
  }
  .about-hero .sp-hero-fallback {
    display: block;
  }
  .about-sky-pan,
  .about-sky-wisp {
    animation: none;
  }
}

/* ============================================================
   2. The charter — About-only register (printed document)
   ============================================================ */

.about-charter {
  padding-bottom: clamp(40px, 7vw, 96px);
}

/* -- Shared asymmetric grid: a narrow marginalia rail + a wide measure.
   Every article aligns to the same two columns so the rail reads as one
   continuous document margin. On mobile it collapses to a single column
   and the rail note becomes a kicker above (see responsive block). -- */
.about-article {
  width: var(--sp-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: [rail] minmax(0, 11rem) [measure] minmax(0, 1fr);
  column-gap: clamp(28px, 5.5vw, 84px);
  align-items: start;
  padding-block: clamp(46px, 7vw, 96px);
}

/* tighten the seams between consecutive articles so the document reads
   as one continuous letter rather than stacked sections */
.about-article + .about-article {
  padding-top: 0;
}

.about-measure {
  max-width: 40rem; /* ~62-68ch of Fraunces/Inter: annual-letter measure */
}

/* -- Marginalia rail: small, quiet, upper-case letterhead notes. Gold
   hairline lead-in. Only two articles carry a note (placeline + the one
   approved kicker); the rest keep an open margin, as a fine document does. -- */
.about-rail {
  min-height: 1px;
}

.about-rail-note {
  display: inline-block;
  padding-top: 0.55em;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-ink-40);
  border-top: 1px solid var(--sp-gold);
}

/* -- Preamble: the opening declaration, largest serif on the page -- */
.about-preamble {
  padding-top: clamp(64px, 9vw, 120px);
}

.about-charter .about-preamble-lead {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.85rem, 3.7vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--sp-ink);
  text-wrap: balance;
}

.about-preamble-sub {
  max-width: 54ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  line-height: 1.72;
  color: var(--sp-ink-70);
  text-wrap: pretty;
}

/* -- Creed: the one line the document turns on. Full-measure, hung
   opening word, gold only as a hairline under the held phrase. -- */
.about-creed {
  padding-block: clamp(40px, 6vw, 84px);
}

.about-creed-line {
  margin: 0;
  text-indent: -0.5ch; /* hanging first glyph -> typeset, not boxed */
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  text-wrap: balance;
}

.about-creed-hold {
  white-space: nowrap;
  box-shadow: inset 0 -0.06em 0 0 var(--sp-gold); /* fine gold underline hairline */
  padding-bottom: 0.02em;
}

/* -- Ledger: three kinds of work as ruled entries. Name in the display
   serif, its one line of copy in the measure. Hairlines top, between,
   and bottom -> the table-of-record feel. -- */
.about-article-head {
  margin: 0 0 clamp(22px, 3vw, 34px);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  text-wrap: balance;
}

.about-ledger-rows {
  margin: 0;
  border-top: 1px solid var(--sp-ink-14);
}

.about-ledger-row {
  display: grid;
  grid-template-columns: minmax(6rem, 0.32fr) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--sp-ink-14);
}

.about-ledger-name {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
}

.about-ledger-copy {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--sp-ink-70);
  text-wrap: pretty;
}

/* -- Tenets: why one company holds all three. Lead then three single
   clauses, each with a short gold hairline tick — echoes the ledger's
   rule language without repeating the two-column row. -- */
.about-charter .about-tenets-lead {
  max-width: 34ch;
  margin: 0 0 clamp(28px, 3.6vw, 42px);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  text-wrap: balance;
}

.about-tenets-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-tenets-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 26px);
  padding-block: clamp(15px, 1.9vw, 22px);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  color: var(--sp-ink);
}

.about-tenets-list li + li {
  border-top: 1px solid var(--sp-ink-14);
}

.about-tenets-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  transform: translateY(-0.34em);
  background: var(--sp-gold);
}

/* -- Close: crest small and quiet, the door, then the note. Left-aligned
   to the charter measure (not the homepage's centered CTA block). -- */
.about-close {
  padding-bottom: clamp(72px, 11vw, 150px);
}

.about-crest {
  display: block;
  width: clamp(44px, 5vw, 60px);
  height: auto;
  margin: 0 0 clamp(22px, 3vw, 32px);
  color: var(--sp-ink);
  opacity: 0.3;
}

.about-close-head {
  margin: 0 0 clamp(26px, 3.4vw, 38px);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sp-ink);
  text-wrap: balance;
}

.about-close-cta {
  align-self: start;
}

/* ============================================================
   3. Responsive — collapse to a single column; rail -> kicker above
   ============================================================ */
@media (max-width: 860px) {
  .about-article {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 3vw, 18px);
    padding-block: clamp(38px, 8vw, 60px);
  }
  .about-article + .about-article {
    padding-top: 0;
  }
  .about-measure {
    max-width: none;
  }
  /* rail note becomes a kicker sitting above its article */
  .about-rail-note {
    padding-top: 0;
    border-top: 0;
    padding-bottom: 0.5em;
    box-shadow: 0 1px 0 0 var(--sp-gold);
  }
  .about-rail:empty {
    display: none;
  }
  .about-preamble {
    padding-top: clamp(48px, 12vw, 72px);
  }
}

@media (max-width: 520px) {
  .about-ledger-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .about-creed-line {
    text-indent: 0;
  }
}