/* ==========================================================================
   Page: Home
   The main column runs on a 32px vertical rhythm, tightening to 8px between
   a title and the copy beneath it. Widths and figure geometry still come
   from the Figma export; the comments record those source measurements.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------
   Portrait top sits at y=88 in the reference, 32px below the 56px header. */

.hero {
  padding-top: var(--space-l);
}

.hero__figure {
  width: var(--portrait-size);
  max-width: 100%;
}

/* The text column starts slightly below the portrait's top edge (name glyphs
   begin at y=112 against a portrait top of y=88). */
@media (width >= 48rem) {
  .hero__body {
    padding-top: var(--space-s);
  }
}

.hero__name {
  margin-bottom: var(--space-2xs);
}

.hero__role {
  margin-bottom: var(--space-2xs);
}

/* ---- How I see design --------------------------------------------------- */

.lenses {
  padding-top: var(--space-l);
}

.lenses__title {
  margin-bottom: var(--space-2xs);
}

.lenses__intro {
  margin-bottom: var(--space-l);
}

/* Rows repeat on a 254px pitch: a 222px figure plus a 32px gap. */
.lenses__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Rail ---------------------------------------------------------------
   Card group spacing. Work cards and writing cards use the same rhythm; the
   heavier rule between the two groups comes from .rail__divider. */

.rail__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.rail__more {
  margin-bottom: var(--space-s);
}

/* ---- Below the shell breakpoint -----------------------------------------
   The rail becomes a normal block beneath the main column. Constrain the
   thumbnails so they do not stretch to full width and dwarf the text. */

@media (width < 62rem) {
  .rail__group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-l);
    align-items: start;
  }
}