/* ==========================================================================
   about.css — intro + asymmetric media/text block + Experience/Education
   lists + Expertise grid. Layout/copy measured off the user-supplied
   About.pdf. Reuses existing site type tokens (hero title, H2-scale,
   18px medium body, work__meta-style gray text) rather than inventing
   new sizes per element.
   ========================================================================== */

/* ---------- intro ---------- */
.about-hero {
  padding-inline: var(--margin);
  padding-top: 10.25rem; /* same as .pg-hero/.doodles-hero */
}

.about-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

.about-hero__title {
  grid-column: 1 / 13;
  font-size: 8.75rem; /* 140px, trying a layout experiment per direct request (matching AI Playground) — was 5rem/80px */
  font-weight: 500; /* medium — reverted back from 600 semibold per direct request */

  line-height: 1.25; /* was 1.1 — bumped to fix Satoshi descender clipping; see DESIGN note in ai-playground.css's .pg-hero__title for the metric reasoning */
  letter-spacing: -0.01em;
}

.about-hero__subtitle {
  grid-column: 8 / 13; /* trying a layout experiment per direct request (matching AI Playground) — was 5/12 */
  font-size: 1rem; /* 16px, per direct request — was 1.125rem/18px, the site's new standard body text size */
  font-weight: 500; /* medium — matches the site-wide standard */
  color: #bababa; /* per direct request — was inheriting the default (near-white) text color */
  line-height: 1.3; /* per direct request — was 1.22 */
  max-width: 26rem;
  margin-top: 1rem; /* 16px, trying a layout experiment per direct request (matching AI Playground) — was 1.5rem/24px */
}

/* ---------- intro media/text bento ----------
   Measured pixel-for-pixel off About.pdf (rendered at 150dpi, page width
   3601px = exactly 1728 baseline px, so PDF-px * (1728/3601) = baseline
   CSS px — confirmed via the left margin (83px -> 39.8px = 2.5rem) and
   gutter (51px -> 24.5px = 1.5rem) landing exactly on the site's own
   --margin/--gutter tokens).

   This is NOT a single grid with row-spanning/stretch — three
   independent columns, each sized by its own content, was the first
   guess (tall image stretched to match the stacked pair's combined
   height) and it was wrong: the tall image's measured bottom (y2230)
   sits well above the stacked pair's bottom (y2816), with nothing
   filling the gap below it. All three placeholder boxes are also each
   their own square (~1:1) aspect ratio, not a wide 179:168 — that ratio
   was guessed, not measured.

   Column spans (12-col grid): tall image 1/5 (4 cols), stacked pair
   5/8 (3 cols), text 8/13 (5 cols) — the text column measured to x2115,
   which is exactly grid-column-8's start, not 9 as first built. */
.about-intro {
  margin-top: 6.5rem; /* was 11.375rem — reduced so the first image lands at the same distance from the page top as doodles.html's first image (both hero paddings match; this closes the gap difference caused by each page's own subtitle line count), per direct request */
  align-items: start;
  /* How far .about-intro__stack (the 2nd image pair) is pushed down
     from the row's top, per direct request (80px, then +40px more).
     .about-intro__text's own margin-top below is expressed as a
     calc() off this same variable so the heading stays aligned to
     the pair's second (bottom) image without hand-recomputing a
     second hardcoded number every time this value changes. */
  --intro-stack-shift: 7.5rem;
}

.about-intro__media {
  position: relative;
  overflow: hidden;
  background: var(--black); /* placeholder fill until real photos replace these — was #0d0d0d */
}

.about-intro__media--tall {
  grid-column: 1 / 5;
  aspect-ratio: 1 / 1; /* measured 1110:1122 — practically square */
}

.about-intro__stack {
  grid-column: 5 / 8;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  /* 120px down total (80px, then +40px more), per direct request —
     .about-intro uses align-items:start (see above), so the tall
     image stays put at the row's top while this stack alone shifts
     down. Grid auto-sizing accounts for a grid item's own margin when
     computing the row's intrinsic height, so this also grows
     .about-intro's row by the same 120px, pushing every section after
     it (Experience list, etc.) down in normal document flow — no
     extra height/margin rule needed anywhere else for that cascade to
     happen. .about-intro__text's own margin-top below is now derived
     from this same value via calc(), so the heading stays aligned to
     this stack's second (bottom) image regardless of future tweaks
     to this number. */
  margin-top: var(--intro-stack-shift);
}

.about-intro__media--top,
.about-intro__media--bottom {
  aspect-ratio: 1 / 1; /* measured 820:829 / 820:828 — practically square */
}

.about-intro__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.35);
  will-change: transform;
}

/* Two stacked <img> layers per slot (see js/about.js's
   initBentoSlideshow) — the top one is whatever's currently showing,
   the other sits just off-screen below it (yPercent:100, set via GSAP
   in JS) ready to slide up and cover it on the next swap. Both fill
   the slot completely regardless of the source photo's own aspect
   ratio; every photo in assets/images/about/ is already a 1:1 square
   matching these slots, so object-fit:cover here is a safety net
   rather than something that'll ever visibly crop. */
.about-intro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.about-intro__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--white);
  will-change: transform;
}

html.dark-mode .about-intro__cover {
  background: #0B0A0B;
}

.about-intro__text {
  grid-column: 8 / 13;
  /* Top of heading flush-aligned to the stacked pair's bottom (2nd)
     image's own top, per direct request — was previously hardcoded
     independent of the stack's own shift. Empirically verified via
     live bounding-rect measurement (title top vs. bottom-image top,
     0px diff): 26.125rem — one stacked image's height (24.625rem) +
     the gutter between the pair (1.5rem) — is the exact top-aligned
     value when the stack has zero shift of its own, so it's kept
     as-is and simply added to var(--intro-stack-shift) (see
     .about-intro above) so both stay in sync as that shift changes. */
  margin-top: calc(var(--intro-stack-shift) + 26.125rem);
}

.about-intro__title {
  font-size: 2.5rem; /* 40px — established H2/section-title scale */
  font-weight: 500; /* medium — was 600 semibold (bold pass) */

  line-height: 1.25; /* was 1.2 — bumped to fix Satoshi descender clipping ("shaped", "people"), same reasoning as .pg-hero__title */
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  /* Sized to force the break after "by" — not a column width. Measured:
     "A designer shaped by" = 382px, "...by people," = 521px, and the
     full second line "people, places and curiosity" = 492px, so
     anything in the 492–512px gap forces exactly a 2-line "by /
     people, places and curiosity" split without wrapping the second
     line again. 31.25rem (500px) sits in that gap. */
  max-width: 31.25rem;
}

.about-intro__paragraph {
  font-family: "Satoshi", sans-serif; /* site-wide, per direct request — was "PP Neue Montreal" */
  font-size: 1rem; /* 16px, per direct request — was 1.125rem/18px, the site's new standard body text size */
  font-weight: 500;
  line-height: 1.3; /* per direct request — was 1.22 */
  color: #BABABA; /* per direct request — was inheriting the default black/white */
  /* Narrower than the heading on purpose — 3 columns starting at page
     column 9, not the block's own column 8. Since this is nested
     inside .about-intro__text (grid-column: 8/13), the offset is done
     with margin-left rather than grid-column: one column + one gutter
     (7.2083rem + 1.5rem) shifts it from the block's col-8 edge to
     col-9, and max-width caps it at the 3-column formula
     (3 × 7.2083rem + 2 × 1.5rem). */
  margin-left: 8.7083rem;
  max-width: 24.625rem;
}

/* ---------- Experience / Education lists ----------
   Measured off the PDF: the content column does NOT start right after
   the 2-col label (grid-column 3) — it starts at grid-column 5, leaving
   two empty columns as a deliberate gap. Each row is also not a single
   date/title/org line — the date sits alone on its own line above, then
   title (left) and org (right) share a second, baseline-aligned line.
   Row cycle (date-top to next date-top) measured at 10.4rem with a
   4.98rem content height, so padding-block works out to ~2.75rem/side. */
.about-list {
  margin-top: 12.75rem; /* bento bottom -> Experience label top, measured */
  align-items: start;
}

.about-list__label {
  grid-column: 1 / 3;
  font-size: 0.75rem; /* 12px, per direct spec — was 16px */
  font-weight: 500; /* medium — was 700 (bold pass) */
  text-transform: uppercase; /* per direct spec */
  letter-spacing: -0.01em;
}

/* Sticky "Experience" label only, per direct spec — Education/Expertise
   stay static. Only the Experience section carries this modifier (see
   about.html), so the label's sticky containing block is that one
   section's own box: it sticks while the Experience rows scroll past,
   then stops sticking exactly at the section's bottom edge as Education
   begins, no JS needed. top = header's own bottom edge (~6.5rem at the
   1728 baseline: var(--margin) top padding + logo line + var(--margin)
   bottom padding) + 40px, expressed as a single rem value per the site's
   scale-everything-off-1728 convention. */
.about-list--sticky-label .about-list__label {
  position: sticky;
  top: 9rem; /* 144px at baseline: ~104px header bottom + 40px */
  align-self: start;
}

.about-list__rows {
  grid-column: 5 / 13;
  display: flex;
  flex-direction: column;
}

.about-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--gutter);
  padding-block: 2.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.14); /* a bit darker — was 0.1 */
}

html.dark-mode .about-list__row {
  /* A genuinely dark grey instead of a white-based rgba — a bright white
     line at any opacity reads as glowing/high-contrast against the
     near-black bg, the opposite of what "darker, less contrast" means
     here. This sits close to the bg color, not far from it. A bit
     darker still than the first pass (#242424 -> #161616), continuing
     that same direction, closer to the #0B0A0B bg. */
  border-top-color: #161616; /* separator */
}

.about-list__row:first-child {
  border-top: none;
  padding-top: 0;
}

.about-list__date {
  grid-column: 1 / -1;
  margin-bottom: 0.75rem;
  font-family: "Satoshi", sans-serif; /* site-wide, per direct request — was "PP Neue Montreal" */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  /* Resting-state color, per direct request — overrides .scroll-highlight's
     var(--gray) in light mode (same specificity, this rule loads later).
     html.dark-mode .scroll-highlight's own pre-highlight color (#1e1e1e)
     still wins in dark mode, since that selector has higher specificity —
     the deliberate "hidden until scrolled into view" dark-mode effect is
     unaffected. */
  color: #BABABA;
}

.about-list__date.is-active {
  color: var(--gray); /* fixed light grey on scroll, not title's black/white */
}

html.dark-mode .about-list__date.is-active {
  color: var(--gray); /* same fixed light grey in dark mode — matches .scroll-highlight's specificity so it isn't overridden by the white dark-mode is-active rule */
}

.about-list__title {
  grid-column: 1;
  align-self: baseline;
  font-size: 2rem; /* 32px — established hero-paragraph/work-title scale */
  font-weight: 500; /* medium — was 600 semibold (bold pass) */

  line-height: 1.25; /* was 1.15 — bumped to fix Satoshi descender clipping ("Product Designer", "Software Dev Intern"), same reasoning as .pg-hero__title */
  letter-spacing: -0.01em;
}

.about-list__org {
  grid-column: 2;
  align-self: baseline;
  justify-self: end;
  font-family: "Satoshi", sans-serif; /* site-wide, per direct request — was "PP Neue Montreal" */
  font-size: 1rem; /* 16px, per direct request — was 1.125rem/18px, the site's new standard body text size */
  font-weight: 500;
  line-height: 1.3; /* per direct request — new standard body line-height */
  /* color intentionally not set here — .scroll-highlight (grey default,
     black/white on is-active) handles it, same as .about-list__title */
  text-align: right;
  white-space: nowrap;
}

/* ---------- Expertise ----------
   Same "content starts at column 5" rule as the Experience/Education
   list above — col1 items measured starting at x1246 (grid-column 5),
   col2 at x2408 (grid-column 9), each spanning 4 columns. */
.about-expertise {
  margin-top: 12.75rem; /* matches the other major-section gaps */
  padding-bottom: var(--margin);
  align-items: start;
}

.about-expertise__label {
  grid-column: 1 / 3;
  font-size: 0.75rem; /* 12px, per direct spec — was 16px */
  font-weight: 500; /* medium — was 700 (bold pass) */
  text-transform: uppercase; /* per direct spec */
  letter-spacing: -0.01em;
}

.about-expertise__col {
  grid-column: 5 / 9;
  display: flex;
  flex-direction: column;
  gap: 3.25rem; /* row cycle measured 5.72rem minus ~2.5rem line-height box */
}

.about-expertise__col + .about-expertise__col {
  grid-column: 9 / 13;
}

.about-expertise__item {
  font-size: 2rem; /* 32px — same scale as .about-list__title, matches the PDF's visual weight */
  font-weight: 500; /* medium — was 600 semibold (bold pass) */

  line-height: 1.25; /* was 1.15 — bumped to fix Satoshi descender clipping ("Design", "Workflows"), same reasoning as .pg-hero__title */
  letter-spacing: -0.01em;
}

/* ==========================================================================
   mobile breakpoint (<=768px) — see style.css's "mobile breakpoint"
   comment for the shared root-font-freeze this all builds on. Every
   section collapses from its desktop grid-column layout to a single
   stacked column, per direct spec ("Everything should be stacked") —
   .grid-12's own shared mobile padding-inline (see style.css) already
   handles the 24px side inset on every section here since they all
   carry that class in the HTML.
   ========================================================================== */
@media (max-width: 768px) {
  .about-hero {
    padding-inline: 1.5rem; /* 24px, per direct spec — was var(--margin)/40px */
    padding-top: 7.5rem; /* 120px — matches every other page's mobile hero clearance */
  }

  .about-hero__title {
    font-size: 2.5rem; /* 40px — was 80px, matches every other page's mobile hero-text scale */
  }

  .about-hero__subtitle {
    /* Was grid-column:5/12 — a deliberate desktop-only indent under the
       title, same pattern as every other page's hero subtitle. */
    grid-column: 1 / 13;
    max-width: none;
  }

  /* ---------- intro media/text bento ----------
     Three images (one tall, two stacked) side-by-side with text to the
     right doesn't fit a phone — keep just the first (tall) slot and let
     it keep cycling through the photo pool exactly as it already does
     (initBentoSlideshow in about.js queries all .about-intro__media
     elements generically; hiding the other two via CSS is enough, no JS
     change needed), then the text block stacks below it, per direct
     spec ("just keep one and it works as usual"). */
  .about-intro {
    margin-top: 12.5rem; /* 200px, per direct spec — hero paragraph -> first image, matches every other page's mobile grid spacing */
  }

  .about-intro__media--tall {
    grid-column: 1 / 13;
  }

  .about-intro__stack {
    display: none;
  }

  .about-intro__text {
    grid-column: 1 / 13;
    margin-top: 1.5rem; /* 24px — was 26.125rem, a desktop-only offset that aligned this text block to the stacked pair's second image, no longer relevant with that pair hidden */
  }

  .about-intro__title {
    font-size: 1.5rem; /* 24px, per direct spec — was 40px */
  }

  .about-intro__paragraph {
    margin-left: 0; /* was 8.7083rem, a desktop-only sub-column indent */
    max-width: none;
  }

  /* ---------- Experience / Education lists ----------
     Label above its rows instead of a narrow left-hand column beside
     them. The sticky-while-scrolling behavior (see
     .about-list--sticky-label above) is a desktop-only refinement tied
     to that side-by-side layout — turned off here since the label isn't
     sitting next to a tall column of rows any more, it's just a normal
     heading above them. */
  .about-list {
    margin-top: 5rem; /* 80px — was 12.75rem/204px */
  }

  .about-list--sticky-label .about-list__label {
    position: static;
  }

  .about-list__label {
    grid-column: 1 / 13;
    margin-bottom: 2rem; /* 32px, per direct spec — was 1.5rem/24px */
  }

  .about-list__rows {
    grid-column: 1 / 13;
  }

  /* Title/org no longer share one baseline-aligned line (org's own
     white-space:nowrap plus a long org name doesn't fit a 342px-wide
     row) — stacked instead, org below title. */
  .about-list__row {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .about-list__title {
    font-size: 1.5rem; /* 24px, per direct spec — was 32px */
  }

  .about-list__org {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  /* ---------- Expertise ----------
     Label above, both columns collapse to full width — they naturally
     stack into two rows (tall column 1, then column 2) since grid's
     default auto-flow starts a new row once two same-span items no
     longer fit side by side. */
  .about-expertise {
    margin-top: 5rem; /* 80px — was 12.75rem/204px */
  }

  .about-expertise__label {
    grid-column: 1 / 13;
    margin-bottom: 2rem; /* 32px, per direct spec — was 1.5rem/24px */
  }

  .about-expertise__col,
  .about-expertise__col + .about-expertise__col {
    grid-column: 1 / 13;
    gap: 1.5rem; /* 24px between stacked items — was 3.25rem, tuned for the two-column desktop layout's own row cycle */
  }

  .about-expertise__col + .about-expertise__col {
    margin-top: 1.5rem; /* 24px gap between the two stacked columns */
  }

  .about-expertise__item {
    font-size: 1.5rem; /* 24px, per direct spec — was 32px */
  }
}