/* Homepage composition; other public pages keep their existing layouts. */
@layer components {
  .home-page .section { padding-block: clamp(4rem, 7vw, 7rem); }
  .home-page .home-hero {
    min-block-size: clamp(34rem, 81svh, 48rem);
    padding-block: 5rem clamp(3rem, 6vw, 6rem);
  }
  .home-hero::before {
    background: linear-gradient(90deg, rgb(33 28 24 / .79), rgb(33 28 24 / .27) 55%, rgb(33 28 24 / .06)), linear-gradient(0deg, rgb(33 28 24 / .25), transparent 55%);
  }
  .home-hero h1 { font-size: clamp(3.4rem, 6.5vw, 6.3rem); line-height: 1.02; letter-spacing: -.035em; max-inline-size: 11ch; }
  .home-hero .hero__actions { gap: 1.5rem 2rem; align-items: center; margin-block-start: 2rem; }
  .home-hero .home-link { color: var(--color-cream); }
  .home-link { display: inline-flex; align-items: center; gap: 1rem; min-block-size: 44px; color: inherit; text-decoration: none; font-size: var(--fs--1); font-weight: 500; }
  .home-link:hover { text-decoration: underline; text-underline-offset: .3em; }
  .home-arrow { flex: 0 0 auto; transition: transform var(--dur-mid) var(--ease); }
  .home-link:hover .home-arrow { transform: translateX(4px); }
  .home-intro { display: grid; gap: .5rem; padding-block-end: clamp(2.5rem, 5vw, 5rem); }
  .home-intro h2 { font-family: var(--font-body); font-size: var(--fs--1); font-weight: 500; }
  .home-intro .lede { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; max-inline-size: 29ch; }
  .home-kinds { display: grid; gap: 3rem; }
  .home-kind { min-inline-size: 0; }
  .home-kind__photo { display: block; overflow: hidden; background: var(--color-surface); }
  .home-kind__photo img { inline-size: 100%; block-size: 100%; aspect-ratio: 1.12; object-fit: cover; object-position: 50% 43%; transition: transform var(--dur-slow) var(--ease); }
  .home-kind__photo:hover img { transform: scale(1.025); }
  .home-kind--connect .home-kind__photo img { object-position: 50% 65%; }
  /* M34 rider: no static picture ships; the empty frame keeps the card's shape and shows the mark, as the portraits do */
  .home-kind__photo--empty { display: grid; place-items: center; aspect-ratio: 1.12; color: var(--color-text-muted); }
  .home-kind__photo--empty .logo-mark { inline-size: 4rem; block-size: auto; }
  .home-kind__copy { padding-block-start: 1.5rem; display: grid; gap: .65rem; }
  .home-kind h3 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); letter-spacing: -.03em; }
  .home-kind p { max-inline-size: 33ch; color: var(--color-text-muted); }
  .home-kind .home-link { justify-self: start; margin-block-start: .25rem; border-block-end: var(--border); }
  .home-page .home-upcoming { padding-block-start: 0; }
  .home-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-block-start: var(--border); padding-block: 2rem; }
  .home-section-heading h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); letter-spacing: -.03em; }
  .home-section-heading > a { flex-shrink: 0; }
  /* M124.2: every upcoming evening is the same card, the events page's with its
     photo on top in 16:9 (event-row--stacked): one column on a phone, two across
     from 760 px (M124.3), three across from 1024 px. The columns stay even with
     fewer evenings, so a card is one size whatever the count. From 760 to 1279 px
     the cards' sides narrow so the title keeps room beside the date block. */
  .home-events { display: grid; gap: var(--space-md); }
  @media (min-width: 760px) {
    .home-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .home-events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 760px) and (max-width: 1279px) {
    .home-events .event-row--card { padding-inline: var(--space-lg); }
  }
  @media (min-width: 760px) {
    .home-kinds { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
  }
  @media (max-width: 759px) {
    .home-page .home-hero { min-block-size: 36rem; padding-block: 3rem; }
    .home-hero h1 { font-size: clamp(3.4rem, 10vw, 4.5rem); }
    .home-hero::before { background: linear-gradient(0deg, rgb(33 28 24 / .83), rgb(33 28 24 / .25) 70%, rgb(33 28 24 / .12)); }
    .home-hero .hero__image { object-position: var(--fx, 58%) var(--fy, 50%); }
    .home-section-heading { flex-direction: column; align-items: start; }  /* M124.3: on a phone the link always sits under the title, whatever room is left beside it */
    .home-section-heading h2 { max-inline-size: 100%; }
    .home-section-heading .home-link { gap: .5rem; }
  }
  /* M-next: spacing pass from the 390px review (visual-editor session, 2026-09-13).
     Values derived from the reviewed render, expressed against the existing gaps. */
  @media (max-width: 759px) {
    /* uniform 71px visual gap from each block's call to action to the next section */
    .home-kinds { gap: 4.3125rem; }
    .home-page .home-experiences { padding-block-end: 4.3125rem; }
    .home-page .site-footer { margin-block-start: 4rem; }
    .home-kind__copy { padding-block-start: .85rem; gap: .3rem; }
    .home-kind .home-link { margin-block-start: 0; }
    .home-section-heading { padding-block: .5rem .8125rem; }  /* + the flow gap (1rem) ≈ the image-to-copy gap */
    .home-section-heading { row-gap: 0; }  /* M124.2: the link sits under the title; its own 44 px tap height is the space between them */
    .home-section-heading .home-link { margin-block-start: -.35rem; }
    .home-page .section:has(.insta-grid) { padding-block: .35rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .home-page .home-arrow, .home-page .home-kind__photo img { transition: none; transform: none; }
  }
}