/* Alternative homepage flow, 5 November 2026.
   The flat lavender version is preserved on design-lavender-homepage-2026-11-05. */

.home-page .studio-note {
  background: var(--cream);
  padding-block: 20px 96px;
}
.home-page .studio-note__card .chapter {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.home-page .studio-note h2 {
  max-width: 800px;
  font-size: clamp(38px, 3.5vw, 54px);
  line-height: 1.12;
}
.home-page .studio-note .studio-note__detail {
  max-width: 560px;
  margin: 26px auto 0;
  font: 400 18px/1.8 var(--body);
  color: var(--ink);
}
.home-page .studio-note .studio-note__invitation {
  max-width: 850px;
  margin: 24px auto 0;
  font: 400 clamp(32px, 3vw, 44px)/1.2 var(--serif);
  letter-spacing: -.02em;
  color: var(--purple);
}
.home-page .studio-note__card>.underlink { margin-top: 26px; }
.home-page .flower-index { padding-top: 14px; }

/* Let the text determine the height; keep the layering on wide screens. */
@media (min-width: 1100px) {
  .home-page .field-note { padding-block: 36px 64px; }
  .home-page .field-note__composition {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 28px 0;
    align-items: start;
    max-width: 1040px;
    min-height: 0;
    margin-top: 34px;
    padding: 0;
  }
  .home-page .field-note__image {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    margin: 42px 0 0;
  }
  .home-page .field-note__image img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
  .home-page .field-note__headline {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    top: auto;
    right: auto;
    align-self: end;
    margin: 0 0 0 -24px;
    padding-block: 12px 0;
    font-size: clamp(62px, 5.5vw, 80px);
    line-height: .98;
  }
  .home-page .postcard {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 2;
    justify-self: start;
    align-self: start;
    width: calc(100% + 44px);
    max-width: none;
    margin: 4px 0 0 -44px;
    padding: 32px 38px;
    transform: rotate(-1deg);
  }
  .home-page .postcard>p { max-width: 38ch; }
}

/* The layered desktop composition does not alter the stacked mobile layout. */
@media (max-width: 720px) {
  .home-page .studio-note { padding-block: 46px 48px; }
  .home-page .studio-note h2 { font-size: clamp(30px, 6.5vw, 42px); line-height: 1.2; }
  .home-page .studio-note .studio-note__detail { font-size: 15px; line-height: 1.8; margin-top: 22px; }
  .home-page .studio-note .studio-note__invitation { font-size: clamp(28px, 6.6vw, 38px); margin-top: 22px; }
  .home-page .flower-index { padding-top: 14px; }
}