/* About: Randi first, then one statement and her story. */

.about-stage { background: var(--pink); }
.about-inner {
  width: min(var(--page), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(32px, 5vw, 80px) 0 clamp(64px, 7vw, 112px);
  display: grid;
  gap: 40px clamp(48px, 7vw, 112px);
  align-items: end;
}
.about-portrait { display: grid; gap: 12px; width: min(100%, 360px); }
/* The doorway arch: the one image mask, cropped to Randi at the center of the photograph. */
.about-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 50% 50% 0 0 / 38% 38% 0 0; }
.about-portrait figcaption { font-size: var(--fs-meta); }
.about-copy h1 { font-size: var(--fs-title); line-height: 1; }
.about-copy p { max-width: 31em; margin-top: 1em; }
.about-copy h1 + .lead { margin-top: 24px; color: var(--cobalt); }
.about-copy a { font-weight: 600; }
@media (min-width: 900px) {
  .about-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .about-portrait { width: 100%; max-width: 460px; }
  .about-copy { padding-bottom: 36px; }
}

/* Randi's work: three member template covers, each opening its preview. */
.about-work h2 { max-width: 1000px; margin: 0 auto 24px; font: 600 var(--fs-h3)/1.3 var(--body); color: var(--cobalt); }
.about-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); max-width: 1000px; margin-inline: auto; }
.about-covers a { display: grid; gap: 12px; text-decoration: none; }
.about-covers img { border-radius: var(--radius-s); box-shadow: var(--shadow-card); }
.about-covers span { font-weight: 600; font-size: var(--fs-small); line-height: 1.35; }
@media (min-width: 720px) { .about-covers span { font-size: 18px; } }
@media (hover: hover) and (pointer: fine) {
  .about-covers img { transition: translate .2s ease; }
  .about-covers a:hover img { translate: 0 -4px; }
  .about-covers a:hover span { text-decoration: underline; text-underline-offset: 4px; }
}

/* The close sits on Oxblood like the other promotional pages; the footer scallop shows it. */
.about-close { display: grid; justify-items: center; gap: 20px; padding: var(--marketing-section-y) var(--gutter); background: var(--oxblood); color: var(--cream); text-align: center; }
.about-close h2 { max-width: 16ch; color: var(--blush); font-size: clamp(40px, 5vw, 72px); line-height: 1.04; }
.about-close p { max-width: 32em; font-size: var(--fs-lead); }
.about-close .actions { justify-content: center; margin-top: 8px; }
.about-close .button { background: var(--blush); color: var(--oxblood); }
.about-close .join-disclosure { text-align: center; margin-inline: auto; }
.about-close :focus-visible { outline-color: var(--butter); }
@media (hover: hover) and (pointer: fine) { .about-close .button:hover { background: var(--butter); color: var(--ink); } }

/* Phones: a squarer crop and a tighter gap bring "Made by Randi." into the first screen. */
@media (max-width: 899px) {
  .about-inner { gap: 24px; padding-top: 24px; }
  .about-portrait { width: min(100%, 300px); }
  .about-portrait img { aspect-ratio: 1; object-position: 50% 24%; }
}

/* Phones: each template is a row, a small cover beside its full title. */
@media (max-width: 559px) {
  .about-covers { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .about-covers li { border-bottom: 1px solid var(--line); }
  .about-covers a { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 44px; padding-block: 14px; }
  .about-covers span { font-size: var(--fs-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}