/* ═══════════════════════════════════════════════════════════════════════
   RASTA Collective — About
   Authored as a plain vertical stack. about-pin.js adds .is-pinned at
   ≥1024 with motion allowed, and only then does any of the horizontal
   machinery switch on — so mobile and reduced-motion are correct by
   construction rather than by patching a broken pin back into a stack.
   ═══════════════════════════════════════════════════════════════════════ */

.about {
  position: relative;
  /* No transform / filter / will-change / contain:paint may EVER land on
     this element or its ancestors: any of them silently demotes the sticky
     child to static and the pin dies with no error. */
  padding-block: var(--section-y);
}

.about__sticky { position: static; }

.about__track {
  display: grid;
  gap: var(--section-y);
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}


/* ── Panel ──────────────────────────────────────────────────────────────── */

.panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  align-content: start;
}

.panel__num {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem);
  line-height: 1;
  color: var(--red);
  padding-top: .35em;
}

.panel__body { display: grid; gap: var(--s-4); max-width: 62ch; }

.panel h2 {
  font-size: var(--t-h2);
  color: var(--ink);
  margin-bottom: var(--s-2);
}

/* Scoped to `.panel__body >` rather than `.panel p`: the latter is a class
   plus an element, so it outranks the single-class .panel__num / .panel__lead
   and quietly greys both out. Restricting the dim colour to direct children
   of the body also leaves .panel__num — a sibling of the body — untouched. */
.panel__body > p { color: var(--text-on-light-dim); }
.panel__body > .panel__lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--text-on-light);
}
.panel strong { color: var(--text-on-light); }

.panel__body > .panel__kicker {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--red);
  padding-top: var(--s-3);
  border-top: 2px solid var(--rule-on-light);
}

.panel__org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-on-light);
}
.panel__org-logo { width: clamp(150px, 20vw, 200px); height: auto; }

.panel__list { display: grid; gap: var(--s-4); }
.panel__list li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--text-on-light-dim);
}
/* Square bullets, matching the arc's handle-nodes and the stencil logo. */
.panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 10px;
  height: 10px;
  background: var(--red);
}

/* Pairs are wrapped in <div> (valid inside <dl>) so a grid keeps each term
   with its definition — gridding the dt/dd directly would deal them
   alternately across the columns instead. */
.panel__defs { display: grid; gap: var(--s-5); }
.panel__defs > div { display: grid; gap: var(--s-1); align-content: start; }
.panel__defs dt {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  margin-bottom: var(--s-1);
}
.panel__defs dd { margin: 0; color: var(--text-on-light-dim); }

/* A bullet list nested inside a definition is already two levels in, so it
   runs tighter than a top-level .panel__list: the outer term is doing the
   grouping the generous gap would otherwise have to do. */
.panel__defs dd .panel__list { gap: var(--s-2); }
.panel__defs dd .panel__list li { padding-left: var(--s-5); }
.panel__defs dd .panel__list li::before {
  top: .48em;
  width: 7px;
  height: 7px;
}
.panel__note {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-on-light-dim);
}

.panel__cta { padding-top: var(--s-4); }


/* ── Timeline ───────────────────────────────────────────────────────────
   Stacked cards on small screens, a real table from 640 up. */

.timeline thead { display: none; }
.timeline tr {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-on-light);
}
.timeline th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
}
.timeline td { color: var(--text-on-light-dim); }

.timeline__start th,
.timeline__start td { color: var(--red); }
.timeline__start { border-bottom: 0; }

@media (min-width: 640px) {
  .timeline thead { display: table-header-group; }
  .timeline thead th {
    font-family: var(--font-body);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    color: var(--text-on-light-dim);
    padding-bottom: var(--s-3);
  }
  .timeline tr { display: table-row; }
  .timeline th,
  .timeline td {
    padding: var(--s-4) var(--s-4) var(--s-4) 0;
    border-bottom: 1px solid var(--rule-on-light);
  }
  .timeline td { text-align: right; padding-right: 0; white-space: nowrap; }
  .timeline__start th,
  .timeline__start td { border-bottom: 0; }
}


/* ── Bottom control strip: pinned mode only ─────────────────────────────── */

.about__bar { display: none; }


/* ── ≥768: give the number column more presence ─────────────────────────── */
@media (min-width: 768px) {
  .panel { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s-5) var(--s-7); }
  .panel__num { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
}


/* ═══════════════════════════════════════════════════════════════════════
   PINNED MODE — added by about-pin.js only at ≥1024 with motion allowed
   ═══════════════════════════════════════════════════════════════════════ */

.about.is-pinned {
  /* The track always travels its full width; --pin-scale decides how much
     vertical scrolling that costs. At 1:1 the seven chapters demanded about
     five screens of wheel on a tall display, which reads as the page being
     stuck rather than as a considered pace. 0.62 keeps the motion tied to the
     wheel while getting through the section in a reasonable distance. */
  --pin-scale: .62;
  height: calc(100svh + var(--pin-len, 0px) * var(--pin-scale));
  padding-block: 0;
}

.about.is-pinned .about__sticky {
  --bar-h: 88px;
  --edge-fade: clamp(48px, 6vw, 110px);

  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;   /* NOT dvh: a URL-bar collapse would change the pin
                       length mid-scroll and force a re-measure. */
  display: flex;
  /* The track is only as tall as its tallest chapter, so centring IT — while
     the panels inside stay top-aligned to each other — keeps every heading on
     one horizon AND keeps the block optically centred on a tall display.
     Stretching the track instead pinned everything to the top and left a
     third of the screen empty underneath. */
  align-items: center;
  padding-bottom: var(--bar-h);   /* reserved for the control strip */
  overflow: hidden;
}

/* Panels are meant to peek in and out — but cut hard at the viewport edge, a
   half-word of 60px display type reads as a broken layout rather than as an
   invitation. Fading both edges says "there is more this way" instead.
   Paint-only, so neither can disturb the sticky element they sit inside. */
.about.is-pinned .about__sticky::before,
.about.is-pinned .about__sticky::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--bar-h);
  width: var(--edge-fade);
  pointer-events: none;
  z-index: 1;
}
.about.is-pinned .about__sticky::before {
  left: 0;
  background: linear-gradient(to left, rgba(244, 236, 228, 0), var(--paper));
}
.about.is-pinned .about__sticky::after {
  right: 0;
  background: linear-gradient(to right, rgba(244, 236, 228, 0), var(--paper));
}

.about.is-pinned .about__track {
  display: flex;
  /* Top-aligned, not centred: with centring, a three-line chapter and a
     five-row table start their first line at completely different heights,
     so the headings jump up and down as the track travels. Aligning the top
     lines gives the sequence one steady horizon. The sticky parent then
     centres the whole track (see above). */
  align-items: start;
  gap: clamp(var(--s-8), 7vw, var(--s-10));
  width: auto;
  max-width: none;
  margin: 0;
  /* Leading pad clears the left fade so panel 01 is never dimmed at rest.
     It counts toward scrollWidth, so the measured pin length absorbs it. */
  padding-left: calc(var(--gutter) + var(--edge-fade));
  padding-right: var(--gutter);
  transform: translate3d(calc(var(--about-p) * -1 * var(--pin-len, 0px)), 0, 0);
  /* Safe here: will-change is on a DESCENDANT of the sticky element, never
     on an ancestor. On an ancestor it would kill the pin. */
  will-change: transform;
}

.about.is-pinned .panel {
  flex: 0 0 min(72vw, 740px);
  align-content: start;
}
.about.is-pinned .panel--wide { flex-basis: min(78vw, 860px); }

/* Panel 05 carries six term/definition pairs and panel 07 a seven-row table.
   Vertical room is finite in a pinned viewport, so the pinned register runs
   tighter than the stacked one rather than letting content spill past the
   fold with no way to scroll to it. */
.about.is-pinned .panel__body { gap: var(--s-3); max-width: none; }
.about.is-pinned .panel h2 { margin-bottom: 0; }
.about.is-pinned .panel__defs { gap: var(--s-4); }
.about.is-pinned .panel__defs dt { margin-bottom: 0; }

/* Two-up only when pinned — stacked, the single column reads better and
   there is unlimited height to spend. */
.about.is-pinned .panel__defs--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-7);
}
.about.is-pinned .panel__defs--two dt { grid-column: auto; }
.about.is-pinned .timeline th,
.about.is-pinned .timeline td { padding-block: var(--s-3); }
.about.is-pinned .panel__cta { padding-top: var(--s-3); }


/* ── The bottom strip ───────────────────────────────────────────────────── */

.about.is-pinned .about__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 4vh, 40px);
  z-index: var(--z-about-nav);
}

.about__nav { display: flex; gap: var(--s-2); flex: 0 0 auto; }

.about__progress {
  flex: 1 1 auto;
  height: 3px;
  background: var(--rule-on-light);
}
.about__progress-bar {
  display: block;
  height: 100%;
  background: var(--red);
  transform-origin: 0 50%;
  transform: scaleX(var(--about-p));
}

.about__count {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: .08em;
  color: var(--text-on-light-dim);
  font-variant-numeric: tabular-nums;
}
.about__count span { color: var(--red); }
/* Always visible, never hover-revealed: this is the keyboard affordance and
   the touch affordance at the same time. */
.about__nav-btn {
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid var(--rule-on-light);
  border-radius: var(--radius);
  font-size: 1.1rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.about__nav-btn:hover:not([disabled]) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.about__nav-btn[disabled] { opacity: .3; cursor: not-allowed; }