/* ==========================================================================
   About page only. Tokens only; shared components stay untouched.
   Sections: hero creds · bridge · sticky chapters · dark quote ·
   word timeline · split layouts · credentials · "systems I run for fun"
   ========================================================================== */

/* ---- Hero: credentials either side of the portrait -------------------- */
/* Berlin travel photo: calm the bright sky and sign a little */
.about-hero .hero__media img { filter: grayscale(1) contrast(1.08) brightness(0.86); }
.about-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  column-gap: var(--space-6);
}
.about-hero__creds {
  padding-bottom: calc(var(--fs-hero) * 0.85);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
/* .about-hero prefix beats base.css ul[class] { padding: 0 } */
.about-hero .about-hero__creds--left { text-align: left; padding-left: clamp(0px, 4vw, 72px); }
.about-hero .about-hero__creds--right { text-align: right; padding-right: clamp(0px, 4vw, 72px); }

@media (max-width: 767px) {
  .about-hero .container { display: flex; flex-direction: column; align-items: center; }
  .about-hero__stage { display: contents; }
  .about-hero .hero__media { order: 1; }
  .about-hero .hero__title { order: 2; }
  .about-hero .hero__sub { order: 3; }
  .about-hero .hero__cta { order: 4; }
  .about-hero .about-hero__creds {
    width: 100%;
    padding: 0;
    text-align: center !important;
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-caps);
  }
  .about-hero .about-hero__creds--left { order: 5; margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline); }
  .about-hero .about-hero__creds--right { order: 6; }
  /* "BLACK BELT." must fit 358px */
  .about-hero .hero__line { font-size: clamp(44px, 14vw, 64px); }
  .about-hero .hero__line--serif { font-size: clamp(48px, 15vw, 68px); }
  .about-hero .hero__title { margin-top: -0.55em; }
}

/* ---- Bridge (dark, full height) -------------------------------------- */
.about-bridge {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: var(--section-y);
}
.about-bridge__inner { display: grid; gap: var(--space-9); }
.about-bridge__title { max-width: 11em; }
.about-bridge__sub {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  font-style: italic;
  color: var(--muted);
}
.about-bridge__arrow { justify-self: center; }

/* ---- ( 02 ) Story: sticky stacking chapter cards -----------------------
   CSS only. Each card sticks one "tab" lower than the one before, so the
   finished stack reads like filed index cards. Typographic poster layout
   (no photos: a photo cut by the next card left slivers mid-stack).
   Number bottom-left, story top-right, lesson bottom-right. Sticky only
   where a whole card fits the viewport; elsewhere the cards simply stack. */
.about-story { padding-bottom: 0; }
.chapters { margin-top: var(--block-gap); }
.chapter {
  --tab: 56px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
}
.chapter__card {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}
.chapter__tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tab);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.chapter__num {
  font-size: clamp(96px, 15vw, 280px);
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.chapter__main {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.chapter__title {
  max-width: 13em;
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.chapter__story { max-width: 34em; }
.chapter__label { margin-top: var(--space-4); font-style: italic; }
.chapter__lesson {
  max-width: 19em;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

@media (min-width: 992px) {
  .chapter__card {
    grid-template-columns: var(--offset) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 0;
    row-gap: var(--space-5);
  }
  .chapter__tab { grid-column: 1 / -1; display: grid; grid-template-columns: var(--offset) minmax(0, 1fr); }
  .chapter__aside { align-self: end; padding-right: var(--space-7); }
  .chapter__main {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-8);
    align-content: stretch;
    padding-top: var(--space-2);
  }
  .chapter__label,
  .chapter__lesson { align-self: end; }
  .chapter__label { margin-top: 0; padding-bottom: 0.5em; }
}

@media (min-width: 992px) and (min-height: 700px) {
  .chapter {
    position: sticky;
    top: calc(var(--i, 0) * var(--tab));
    min-height: calc(100svh - var(--i, 0) * var(--tab));
  }
}

/* ---- Dark quote (full height) ---------------------------------------- */
.about-quote {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: var(--section-y);
  overflow: hidden;
}
.about-quote__inner { display: grid; gap: var(--space-8); align-items: center; }
.about-quote__mark {
  display: block;
  height: 0.42em;
  font-size: clamp(96px, 10vw, 180px);
  font-weight: 700;
  line-height: 0.8;
}
.about-quote__text {
  max-width: 12em;
  font-size: clamp(36px, 4.6vw, 80px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.about-quote__by {
  margin-top: var(--space-7);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.about-quote__media { width: min(72%, 420px); justify-self: end; }

@media (min-width: 992px) {
  .about-quote__inner { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .about-quote__figure { padding-left: clamp(0px, 4vw, 80px); }
  .about-quote__media { width: 100%; max-width: 400px; }
}

/* ---- Word timeline ------------------------------------------------------
   Static list by default. about.js adds .is-live (motion only): the list
   pins for a few screens and one word lights up per beat. */
.timeline__sticky {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: var(--section-y);
  overflow: hidden;
}
.timeline__list { text-align: center; }
.timeline__word {
  font-size: clamp(34px, min(10vw, 13svh), 150px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  transition: color 0.45s var(--ease);
}
.timeline__word--serif {
  margin-top: 0.08em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
}
/* Pinned travel: about 1.5 screens on desktop, 1.2 on mobile */
.timeline.is-live { height: 250svh; }
@media (max-width: 767px) { .timeline.is-live { height: 220svh; } }
.timeline.is-live .timeline__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  padding-block: 0;
}
.timeline.is-live .timeline__word { color: var(--line); }
.timeline.is-live .timeline__word.is-active { color: var(--on-surface); }

/* ---- Playfair accent inside a caps H2 ("Calm is designed.") ------------ */
.about-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ---- Split: photo in the left 36%, content at the offset -------------- */
.about-split { display: grid; gap: var(--space-7); }
.about-split__media.media,
.about-split__media .media { --ratio: 3 / 2; }
@media (min-width: 992px) {
  .about-split { grid-template-columns: var(--offset) minmax(0, 1fr); gap: 0; }
  .about-split__media {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    width: min(100% - var(--space-8), 340px);
  }
  .about-split__media.media,
  .about-split__media .media { --ratio: 4 / 5; }
}
.about-caption { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--muted); }
.about-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-7); }

/* ---- ( 04 ) Credentials: long notes use the shared .creds--notes ------- */
.about-creds .creds__item {
  font-size: clamp(26px, 2.5vw, 42px);
  text-transform: uppercase;
}

/* ---- ( 05 ) Systems I run for fun ---------------------------------------
   Same card language as .cards--ruled: a left rule on the ink surface.
   Every card opens with a 3:2 visual, either a photo or a big Playfair
   figure, so the six read as one set. DOM order = visual order. */
.fun {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) clamp(24px, 3vw, 48px);
}
.fun__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--line-strong);
}
.fun__visual {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-4);
}
.fun__visual--photo { --ratio: 3 / 2; }
.fun__stat {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(96px, 9vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.fun__stat--phrase { font-size: clamp(48px, 4.2vw, 76px); line-height: 0.95; }
.fun__unit {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.fun__body { display: grid; gap: var(--space-3); align-content: start; }
.fun__index { color: var(--muted); }
.fun__title {
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.fun__lesson {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line-strong);
}
.fun__lesson span { font-weight: 700; }

@media (min-width: 700px) {
  .fun { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fun__visual { aspect-ratio: 3 / 2; }
}
@media (min-width: 1100px) {
  .fun { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}