/*
  About page - unique layout only.

  Built from the same pieces as the rest of the site so it reads as one system: the
  12-column grid, mono headings, hairline rules between sections, ruled lists like
  the services on the home page, and the scanned paper for anything laid on the page
  (the portrait is taped down, the principles are taped cards). One accent note:
  cobalt marks where Frankie is now.

  No section eyebrows. Every one of them ("The studio", "The path", "Values",
  "Toolkit") just restated the h2 underneath it. See
  .agents/skills/design-taste-frontend §4.7.
*/

/* ---------- Hero ---------- */

.about-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
  align-items: center;
  padding-block: clamp(var(--space-8), 10vh, var(--space-10)) var(--space-9);
}

.about-hero__text {
  grid-column: 1 / 7;
}

.about-hero__label {
  margin-block-end: var(--space-5);
}

.about-hero__title {
  font-size: var(--font-size-4xl);
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin-block-end: var(--space-6);
}

.about-hero__lede {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  max-width: 44ch;
}

.about-hero__note {
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
  max-width: 44ch;
}

.about-hero__facts {
  gap: var(--space-5) var(--space-7);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

/*
  The portrait: a photograph taped to the paper a degree off square. No mount; the
  shadow is on the picture itself, and the tape is the same strip the notes on the
  home page and the card on the contact page use.
*/
.about-hero__portrait {
  grid-column: 8 / -1;
  position: relative;
  margin: 0;
  transform: rotate(-1deg);
}

.about-hero__portrait::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  width: 30%;
  height: 24px;
  margin-left: -15%;
  background: rgb(236 230 214 / 0.62);
  box-shadow: 0 1px 2px rgb(40 40 36 / 0.12);
  transform: rotate(2.5deg);
  pointer-events: none;
}

.about-hero__portrait img,
.about-hero__portrait video {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.12),
    0 20px 46px -24px rgb(40 40 36 / 0.4);
}

/* ---------- Section rhythm ---------- */

.about-section {
  padding-block: clamp(var(--space-8), 10vh, var(--space-10));
  border-block-start: 1px solid var(--color-border);
}

.about-section__title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.035em;
  margin-block-end: var(--space-7);
}

/* The small running number, set like the services list on the home page. */
.about-n {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.about-studio a,
.about-timeline a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}

/* ---------- What Frankly does ---------- */

/* Three disciplines, three columns on one ruled line. */
.about-studio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-studio li {
  border-block-start: 1px solid var(--color-text);
  padding-block-start: var(--space-4);
}

.about-studio h3 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  letter-spacing: -0.03em;
  margin-block: var(--space-4) var(--space-3);
}

.about-studio p {
  color: var(--color-text-muted);
  max-width: 38ch;
}

/* ---------- How I got here ---------- */

.about-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}

/*
  The left column carries the heading, one line of the story and an object from the
  freelance years, and sticks so it stays beside the list all the way down. Sticky,
  not fixed: it releases at the end of the list.
*/
.about-story__aside {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  /* Clears the 80px header with room to breathe. */
  top: calc(var(--space-8) + var(--space-5));
}

.about-story__aside .about-section__title {
  margin-block-end: var(--space-4);
}

.about-story__intro {
  color: var(--color-text-muted);
  max-width: 30ch;
}

.about-fragment {
  margin: var(--space-8) 0 0;
  max-width: 200px;
  transform: rotate(-1.2deg);
}

.about-fragment img {
  display: block;
  width: 100%;
  height: auto;
}

/* Counter-rotated so the label reads square while the object sits off axis, the way
   a caption written on the mount does not tilt with the print. */
.about-fragment figcaption {
  margin-block-start: var(--space-4);
  transform: rotate(1.2deg);
}

.about-fragment .spec--key {
  display: block;
}

/*
  The path as a ruled register: when on the left in the mono, the stop on the right.
  The last row ("Now") is the only one in cobalt, so the one saturated note on the
  page marks where she is.
*/
.about-timeline {
  grid-column: 5 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: 1px solid var(--color-text);
}

.about-timeline li {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.about-timeline__when {
  padding-block-start: 0.3em;
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.about-timeline h3 {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  line-height: var(--line-height-snug);
  letter-spacing: -0.03em;
  margin-block-end: var(--space-2);
}

.about-timeline li p:last-child {
  color: var(--color-text-muted);
  max-width: 58ch;
}

.about-timeline li:last-child .about-timeline__when,
.about-timeline li:last-child h3 {
  color: var(--color-accent);
}

/* ---------- What I care about ---------- */

/*
  Four principles on taped cards of the scanned paper, bone and sage in turn, each a
  little off square and set at a slightly different height, like notes pinned up in
  a studio. The ten values Frankie named live inside the sentences.
*/
.about-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
  list-style: none;
  padding: var(--space-4) 0 0;
  margin: 0;
}

.about-value {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-7);
  background-color: var(--color-bone);
  background-image: var(--texture-scan);
  background-size: var(--texture-scan-size);
  background-blend-mode: multiply;
  box-shadow:
    0 1px 2px rgb(40 40 36 / 0.12),
    0 18px 34px -22px rgb(40 40 36 / 0.45);
  transform: rotate(var(--rot, 0deg));
}

.about-value::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 38%;
  height: 20px;
  margin-left: -19%;
  background: rgb(236 230 214 / 0.62);
  box-shadow: 0 1px 2px rgb(40 40 36 / 0.12);
  transform: rotate(var(--tape, -3deg));
  pointer-events: none;
}

.about-value:nth-child(1) { --rot: -1.2deg; --tape: -4deg; }
.about-value:nth-child(2) { --rot: 0.9deg;  --tape: 3deg;  margin-block-start: var(--space-6); background-color: var(--color-sage); }
.about-value:nth-child(3) { --rot: -0.5deg; --tape: -2deg; margin-block-start: var(--space-3); }
.about-value:nth-child(4) { --rot: 1.3deg;  --tape: 4deg;  margin-block-start: var(--space-7); background-color: var(--color-sage); }

.about-value h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-block: var(--space-5) var(--space-3);
}

.about-value p {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------- What I work with ---------- */

/*
  Grouped rather than listed: each discipline's skills and each kind of software on
  one ruled row, so the toolkit reads as a specification sheet instead of a cloud of
  words.
*/
.about-toolkit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-8);
}

.about-kit__label {
  margin-block-end: var(--space-4);
}

.about-kit__list {
  margin: 0;
  border-block-start: 1px solid var(--color-text);
}

.about-kit__list > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.about-kit__list dt {
  font-family: var(--font-family-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding-block-start: 0.15em;
}

.about-kit__list dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---------- Outside the studio ---------- */

.about-offclock {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.about-offclock .about-section__title {
  grid-column: 1 / 5;
}

.about-offclock__body {
  grid-column: 5 / -1;
  max-width: 62ch;
}

.about-offclock__body p {
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.about-offclock__body p + p {
  margin-block-start: var(--space-5);
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__portrait,
  .about-fragment,
  .about-fragment figcaption,
  .about-value {
    transform: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .about-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
  }

  .about-value:nth-child(n) {
    margin-block-start: 0;
  }
}

@media (max-width: 900px) {
  .about-hero__text,
  .about-hero__portrait,
  .about-story__aside,
  .about-timeline,
  .about-offclock .about-section__title,
  .about-offclock__body {
    grid-column: 1 / -1;
  }

  .about-hero__portrait {
    max-width: 460px;
  }

  .about-studio,
  .about-toolkit {
    grid-template-columns: 1fr;
  }

  /* No sticky column on a phone: it would pin the heading over the list. */
  .about-story__aside {
    position: static;
  }

  .about-fragment {
    max-width: 140px;
    margin-block-start: var(--space-6);
  }
}

@media (max-width: 600px) {
  .about-values {
    grid-template-columns: 1fr;
  }

  .about-timeline li,
  .about-kit__list > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}