/* ============================================================================
   HOME LAYOUT  —  hero + collections grid ("Atelier")
   Centred, classic gallery presentation. Used by index.html.
   ========================================================================== */

/* ---- Home hero --------------------------------------------------------- */
/* ---- Home masthead (slim) ---------------------------------------------- */
.home-hero { text-align: center;
  padding-block: clamp(1.8rem, 1.4rem + 1.6vw, 3rem); }
.home-hero__eyebrow { margin-bottom: 0.8rem; display: inline-block; }
.home-hero__name { font-size: var(--fs-small); font-weight: 500;
  color: color-mix(in oklab, var(--ink-mute) 82%, var(--paper));
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.9rem; }
.home-hero__line { font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.69rem, 1.3rem + 1.95vw, 2.73rem); line-height: 1.15; letter-spacing: -0.01em;
  text-wrap: balance; max-width: 26ch; margin: 0 auto; }
.home-hero__statement { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6;
  text-wrap: balance; max-width: 52ch; margin: 1rem auto 0; }

/* ---- Featured painting (home hero artwork) ----------------------------- */
.featured { padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.featured__link { display: block; }
.featured__media { display: flex; justify-content: center; }
.featured__inner { display: inline-flex; flex-direction: column; max-width: 100%; }
.featured__frame {
  height: clamp(340px, 70vh, 760px); width: auto; max-width: 100%; margin-inline: auto;
  border: 1px solid var(--line-soft);
  box-shadow: 0 50px 90px -55px oklch(0.3 0.02 60 / 0.55);
  transition: transform 0.6s var(--ease);
}
.featured__link:hover .featured__frame { transform: translateY(-5px); }
.featured__caption { margin-top: 0.9rem; font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  color: var(--ink-mute); font-style: italic; font-family: var(--serif); text-align: left;
  transition: color 0.25s var(--ease); }
.featured__caption strong { font-weight: 600; font-style: normal; color: var(--ink); }
.featured__link:hover .featured__caption { color: var(--ink-soft); }

.section-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); flex-wrap: wrap; }
.section-head h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; white-space: nowrap; }
@media (max-width: 560px) { .section-head h2 { white-space: normal; } }

/* ---- Collections grid (Selected work) ---------------------------------- */
/* Uniform 2-up tiles so collection titles align across the row. Max 2 columns,
   collapsing to 1 on narrow screens; rows grow as needed. */
.collections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 1.4rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
.cc { display: flex; flex-direction: column; }
.cc__cover { overflow: hidden; }
.cc__cover .frame { aspect-ratio: 3 / 2; transition: transform 0.7s var(--ease); }
.cc:hover .cc__cover .frame { transform: scale(1.02); }
.cc__body { text-align: center; padding-top: 1.2rem; }
.cc__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500;
  transition: color 0.25s var(--ease); }
.cc:hover .cc__title { color: var(--accent-deep); }
.cc__count { display: block; margin-top: 0.35rem; font-size: var(--fs-small);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 620px) {
  .collections { grid-template-columns: 1fr; }
}