/*
 * About page
 *
 * Four sections, each under a plain heading: an intro, a loose
 * scatter of the work (the one playful moment on the site), experience,
 * and capabilities. Loads after tokens.css and site.css.
 *
 * Named about.page.css because css/about.css still belongs to the older
 * pages' stylesheet set.
 */

.page-about main {
  padding-top: calc(var(--nav-height) + var(--sp-7));
}

.page-about .about-title {
  margin-bottom: var(--sp-5);
}

/* ---- Title ---------------------------------------------------------- */

.about-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

/* ---- Sections ------------------------------------------------------- */

/* The rule sits on the section's first row, inside the page margins, so
   it lines up with the text rather than running into the rail. Plain
   headings, no chapter numbers or eyebrows (Zoey's call, 2026-10-19). */
.about-section {
  padding-bottom: var(--module-half);
}

.about-section > :first-child {
  padding-top: var(--module-half);
  border-top: 1px solid var(--rule-dark);
}

/* The intro has no visible title, so no rule or gap above it. */
.about-section:first-of-type > :first-child {
  padding-top: 0;
  border-top: 0;
}

.about-section__title {
  grid-column: 1 / span 5;
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

@media (max-width: 860px) {
  .about-section__title {
    grid-column: 1 / -1;
    margin-bottom: var(--sp-4);
  }
}


/* ---- Intro --------------------------------------------------------- */
/* A big plain sans statement top right, the quote low on the left, the
   resume button and the portrait along the foot. Skills and interests
   live in What I do now, not here. */

.intro {
  grid-template-rows: 1fr auto;
  min-height: min(78svh, 760px);
  row-gap: var(--sp-6);
}

.intro__main {
  grid-column: 6 / -1;
  grid-row: 1;
}

.intro__statement {
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 20ch;
}

.intro__more {
  margin-top: var(--sp-4);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: var(--leading-body);
}

.intro__more + .intro__more {
  margin-top: var(--sp-2);
}

/* The quote opens the left column, level with the statement. */
.intro__quote {
  grid-column: 1 / span 4;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 16ch;
  text-wrap: balance;
}

.intro__actions {
  grid-column: 6 / span 4;
  grid-row: 2;
  align-self: end;
  font-size: var(--step-1);
}

/* Resume request as a plain text link; Email in the footer stays the one
   button. */
.intro__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.intro__link:hover {
  text-decoration-thickness: 2px;
}

.intro__portrait {
  grid-column: 10 / -1;
  grid-row: 2;
  align-self: end;
  justify-self: end;
}

/* The only portrait available is 180px wide, so it is shown small to stay
   sharp. Replace images/about/portrait.webp with a larger one and raise
   max-width to fill the corner. */
.intro__portrait img {
  width: 100%;
  max-width: 220px;
}

@media (max-width: 860px) {
  .intro {
    grid-template-rows: none;
    min-height: 0;
  }

  .intro__main,
  .intro__quote,
  .intro__actions,
  .intro__portrait {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

}

/* ---- Selected work: the scatter ------------------------------------ */
/* The work dropped loosely across the page, each piece at a slight tilt.
   Hovering one straightens it and brings it to the front. The tilt uses
   the separate rotate property so the scroll-in reveal (which animates
   transform) can't flatten it. */

/* The box keeps a fixed shape (3:2), and card positions and widths are
   percentages of it, so the arrangement scales as one piece and cards
   never drift into each other on wide screens. */
.scatter {
  position: relative;
  aspect-ratio: 3 / 2;
}

/* The pinned moment (desktop, motion on): the stage sticks under the nav
   while the tall wrapper scrolls past, and js/site.js uses that scroll to
   push the cards apart and raise the line beneath them. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .scatter-pin {
    height: 240svh;
    /* The cards are pushed outward past the page edge; clip them so the
       page never scrolls sideways (clip, unlike hidden, keeps the sticky
       stage working). */
    overflow-x: clip;
  }

  .scatter-pin__stage {
    position: sticky;
    top: var(--nav-height);
    height: calc(100svh - var(--nav-height));
    display: grid;
    place-items: center;
  }

  .scatter-pin .scatter {
    width: min(100%, calc((100svh - var(--nav-height) - var(--sp-7)) * 1.5));
    margin-top: 0;
  }
}

/* A typography moment under the work: one big serif line whose letters
   rise into place as the scatter scrolls through (js/site.js). It sits
   behind the cards and peeks out between them. */
.scatter__type {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  z-index: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
}

.scatter__type .ch {
  display: inline-block;
  will-change: transform;
}

.polaroid {
  z-index: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  padding: var(--sp-1) var(--sp-1) 0;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(26, 26, 23, 0.08), 0 12px 32px rgba(26, 26, 23, 0.14);
  rotate: calc(var(--r) * 0.6);
  /* js/site.js pushes the cards apart on scroll with translate. */
  translate: var(--tx, 0px) var(--ty, 0px);
  transition: rotate var(--dur-base) var(--ease), scale var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.polaroid:hover,
.polaroid:focus-visible {
  z-index: 5;
  rotate: 0deg;
  scale: 1.04;
  box-shadow: 0 2px 4px rgba(26, 26, 23, 0.1), 0 24px 48px rgba(26, 26, 23, 0.2);
}

.polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.polaroid__caption {
  display: block;
  padding: var(--sp-1) 0 var(--sp-2);
  font-size: var(--step--1);
  line-height: var(--leading-label);
  color: var(--ink);
}

@media (max-width: 860px) {
  .scatter {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-3);
  }

  .scatter__type {
    display: none;
  }

  .polaroid {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    rotate: calc(var(--r) * 0.4);
  }

  /* Seven cards: the last one sits alone, so centre it. */
  .polaroid:last-child {
    grid-column: 2;
  }
}

@media (max-width: 599px) {
  .scatter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .polaroid:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--sp-3) / 2);
  }
}

/* ---- Experience ---------------------------------------- */

.exp {
  grid-column: 4 / -1;
}

.exp__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule-dark);
}

.exp__where {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}

.exp__when {
  text-align: right;
}

@media (max-width: 860px) {
  .exp {
    grid-column: 1 / -1;
  }

  .exp__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--sp-1);
  }

  .exp__what {
    grid-row: 2;
  }
}

/* ---- Capabilities --------------------------------------- */

.caps {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
}

/* What I do now: one row per area, the name on the left and one plain
   line on the right, ruled like the experience list above. */
.caps__do {
  grid-column: 1 / -1;
}

.caps__do > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule-dark);
}

.caps__do dt {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}

.caps__do dd {
  max-width: 48ch;
}

.caps h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  font-family: var(--font-display);
  font-weight: 400;
}

.caps li {
  line-height: 1.35;
}

.caps li + li {
  margin-top: var(--sp-1);
}

.caps__tools {
  columns: 2;
  column-gap: var(--gutter);
}

.caps__tools li {
  break-inside: avoid;
  margin-bottom: var(--sp-1);
}

.caps__tools li + li {
  margin-top: 0;
}

@media (max-width: 860px) {
  .caps {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .caps__do > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-1);
  }
}

/* Between phone and full desktop the 9-column slot is too narrow for the
   experience rows, so they and the capabilities take the full width. */
@media (min-width: 861px) and (max-width: 1100px) {
  .exp,
  .caps {
    grid-column: 1 / -1;
  }
}

/* Wide screens: the title sits beside its list, on the same first row. */
@media (min-width: 1101px) {
  .about-section__title {
    grid-column: 1 / span 4;
    grid-row: 1;
    margin-bottom: 0;
  }

  .exp,
  .caps {
    grid-column: 5 / -1;
    grid-row: 1;
  }
}