/* Beth's photos: portrait, kitchen, "Made in my kitchen".
 *
 * Shared by index.html (self-contained styles) and about.html (css/styles.css),
 * so it leans only on the tokens both pages define. Every photo arrives from
 * the editor at whatever shape her phone took it; the frames below fix the
 * shape and `object-position` (her "tap the face" focus point) picks the crop,
 * so a tall selfie and a wide counter shot both land without layout shift.
 *
 * Zero, one or eight photos must all look deliberate: the kitchen photo and
 * the gallery are `hidden` until there is something to show, and the gallery
 * grid is chosen by count (data-count) so no layout leaves an orphan tile.
 */

/* ---- Portrait: an arched window with an offset outline behind it --------- */
.about-layout { display: grid; gap: 2.5rem; justify-items: center; margin-top: 1.5rem; }
.about-layout .about-story { max-width: 640px; }
@media (min-width: 880px) {
  .about-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 4.5rem; align-items: start; justify-items: stretch; max-width: 1040px; margin-left: auto; margin-right: auto; }
  .about-layout .portrait { position: sticky; top: 7rem; }
}

.portrait { position: relative; margin: 0; width: min(100% - 14px, 240px); justify-self: center; }
@media (min-width: 880px) { .portrait { width: 100%; } }
.portrait::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4 / 5;
  transform: translate(14px, 14px);
  border: 1.5px solid var(--sage);
  border-radius: 999px 999px 24px 24px;
  pointer-events: none;
}
.portrait-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 24px 24px;
  background: var(--cream-deep);
  box-shadow: 0 18px 40px rgba(92, 31, 42, 0.16), 0 4px 10px rgba(45, 56, 41, 0.08);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The placeholder illustration is a centred avatar; keep it whole and small
   inside the arch rather than cropping it like a photo. */
.portrait:not(.has-photo) .portrait-frame img { object-fit: contain; padding: 18%; }

/* ---- Beth in her kitchen: one wide, quiet photograph ---------------------- */
.kitchen-photo { margin: 0 auto 3rem; max-width: 1040px; }
.kitchen-photo[hidden] { display: none; }
.kitchen-photo img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--cream-deep);
  box-shadow: 0 18px 40px rgba(92, 31, 42, 0.14), 0 4px 10px rgba(45, 56, 41, 0.06);
}
@media (min-width: 720px) { .kitchen-photo img { aspect-ratio: 2 / 1; } }
.kitchen-photo figcaption {
  margin: 1rem auto 0; max-width: 60ch; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-muted);
}
.kitchen-photo figcaption:empty { display: none; }

/* ---- Made in my kitchen ------------------------------------------------- */
.made { max-width: 1040px; margin: 4rem auto 0; }
.made[hidden] { display: none; }
.made-title {
  text-align: center; margin: 0 0 1.75rem;
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--sage-deep);
}
.made-grid { display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.made-item { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.made-item img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 14px; background: var(--cream-deep);
  box-shadow: 0 8px 20px rgba(92, 31, 42, 0.10), 0 2px 6px rgba(45, 56, 41, 0.06);
}
.made-item figcaption {
  margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.made-item figcaption:empty { display: none; }

/* Phones: two columns; an odd count lets the first photo run full width as a
   landscape lead, so the grid always closes evenly. */
.made-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
.made-grid[data-count="3"] .made-item:first-child,
.made-grid[data-count="5"] .made-item:first-child,
.made-grid[data-count="7"] .made-item:first-child { grid-column: 1 / -1; }
.made-grid[data-count="3"] .made-item:first-child img,
.made-grid[data-count="5"] .made-item:first-child img,
.made-grid[data-count="7"] .made-item:first-child img { aspect-ratio: 4 / 3; }

/* Wider screens: columns follow the count. Five and seven get a tall lead
   photo spanning two rows, which fills a 3x2 or 4x2 block exactly. */
@media (min-width: 880px) {
  .made-grid { gap: 1.75rem 1.25rem; }
  .made-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
  .made-grid[data-count="3"], .made-grid[data-count="5"], .made-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .made-grid[data-count="4"], .made-grid[data-count="7"], .made-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .made-grid[data-count="3"] .made-item:first-child { grid-column: auto; }
  .made-grid[data-count="3"] .made-item:first-child img { aspect-ratio: 4 / 5; }
  .made-grid[data-count="5"] .made-item:first-child,
  .made-grid[data-count="7"] .made-item:first-child { grid-column: auto; grid-row: span 2; }
  .made-grid[data-count="5"] .made-item:first-child img,
  .made-grid[data-count="7"] .made-item:first-child img { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; }
}