/* Eva's Log · About page layout
   Laid out to _design-export/about.dc.html. Shared pieces (header,
   footer, paper, polaroids, washi, reveal) live in site.css; this file
   carries only what the About canvas does differently. */

/* ---------- Hero ---------- */
.about-hero { max-width: 720px; margin: 0 auto; padding: 80px 16px 40px; text-align: center; }
.about-eyebrow {
  font: var(--type-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  animation: elReveal .8s .05s cubic-bezier(.22, 1, .36, 1) both;
}
.about-hero h1 {
  font: 400 clamp(38px, 8vw, 56px)/1.08 var(--font-serif-display);
  margin: 0 0 14px;
  text-wrap: balance;
  animation: elReveal .8s .12s cubic-bezier(.22, 1, .36, 1) both;
}
.about-hero p {
  font: var(--type-editorial-accent);
  color: var(--text-secondary);
  margin: 0;
  text-wrap: balance; /* on a phone the last word ("app.") sat alone on line two */
  animation: elReveal .8s .2s cubic-bezier(.22, 1, .36, 1) both;
}

/* ---------- The three family polaroids ----------
   Three across, or one across on a narrow phone, so the row is never
   two and a short one. The middle print sits a little lower, as drawn. */
.family { max-width: 860px; margin: 0 auto; padding: 8px 16px 40px; }
.family-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 228px));
  justify-content: center;
  align-items: start;
  gap: 22px;
}
@media (max-width: 559px) {
  .family-photos { grid-template-columns: minmax(0, 260px); gap: 30px; }
}

.polaroid--family {
  --lift: 0px;
  margin: 0;
  transform: rotate(var(--rot)) translateY(var(--lift));
  transition: transform var(--dur-quick) var(--ease-spring);
}
.polaroid--family:hover { transform: rotate(0deg) translateY(calc(var(--lift) - 4px)); }
.polaroid--family-low { --lift: 10px; }
@media (max-width: 559px) {
  .polaroid--family-low { --lift: 0px; }
}
/* The frame itself is the shared polaroid (site.css: the elevated white
   with a soft hairline, the drop shadow from .polaroid--shadowed, and a
   strip of washi), so these prints match the ones on Features. The full
   --outline border drew a hard gray rule round each print in daybreak. */
.polaroid--family .frame { margin: 0; }
.polaroid--family img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.polaroid--family .caption {
  font: italic 500 15px/1.3 var(--font-serif);
  margin-top: 0;
  padding-top: 10px;
  text-wrap: balance;
}

/* ---------- The family's note ---------- */
.letter { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
.letter .paper {
  --rot: -.5deg;
  filter: drop-shadow(0 2px 3px rgba(31, 24, 54, .10)) drop-shadow(0 18px 28px rgba(31, 24, 54, .13));
}
.letter-sheet { padding: clamp(26px, 6vw, 44px) clamp(18px, 5.5vw, 42px) 34px; }
/* The envelope fills about a third of its painting, so at 84 px it read
   as a speck in a cream disc. The round window crops in to the envelope
   and its glow; the ring is the soft hairline the polaroids use. */
.letter-seal {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent);
  margin: 0 0 22px;
}
/* Sized up and centered with negative margins rather than a transform,
   because Safari can let a transformed child escape a rounded clip. */
.letter-seal img {
  max-width: none;
  width: 160%;
  height: 160%;
  margin: -30%;
  object-fit: cover;
}
.letter-body {
  font: var(--type-body-serif);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-wrap: pretty;
}
.letter-body p { margin: 0; }
.letter-sign {
  font: italic 500 20px/1.3 var(--font-serif);
  color: var(--text-secondary);
  margin-top: 26px;
}

/* ---------- Contact ---------- */
.about-contact { max-width: 720px; margin: 0 auto; padding: 24px 16px 8px; text-align: center; }
.about-contact p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0; text-wrap: balance; }

/* ---------- Closing ---------- */
.about-cta { max-width: 720px; margin: 0 auto; padding: 40px 16px 96px; text-align: center; }
.about-cta h2 { font: 400 clamp(31px, 6vw, 42px)/1.12 var(--font-serif-display); margin: 0 0 12px; text-wrap: balance; }
/* Balanced so a phone breaks it at the sentence ("...yet. / When it is, ...")
   rather than leaving "the link will be right here." hanging. */
.about-cta p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0; text-wrap: balance; }
/* Kept for launch, when the "Get Eva's Log" button returns to the closing section. */
.about-cta .ds-button { padding: 16px 34px; font-size: 17px; margin-top: 26px; }