/* Home page only. Phone-first; wider screens are added at the bottom of each block. */

/* ---------- 1. Overview line ---------- */
.overview { padding-top: clamp(116px, 18vw, 170px); padding-bottom: clamp(36px, 6vw, 64px); }
.overview p {
  margin: 0; max-width: 22em; text-wrap: balance;
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 4.2vw, 2.7rem); line-height: 1.22;
}
.overview p.ph { font-size: clamp(1.1rem, 2.4vw, 1.4rem); }

/* ---------- 2. Hero: full width, text over it ---------- */
.hero { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #0a0a09; }
.hero-media, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {                                    /* darkens the bottom so the words stay readable on any photo or video */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 8, 7, .88) 0%, rgba(8, 8, 7, .5) 34%, rgba(8, 8, 7, 0) 66%);
}
.hero-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(18px, 4vw, 44px); }
.hero-text h1 { margin: 0 0 10px; font-style: italic; font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.05; text-wrap: balance; }
.hero-text p { margin: 0; max-width: 30em; color: #e4dccb; font-size: clamp(.95rem, 1.8vw, 1.1rem); }
@media (min-width: 701px) { .hero { aspect-ratio: 16 / 8; max-height: 620px; } }

/* ---------- 3. Featured pieces: one big photo per row on phones, 3 x 3 on larger screens ---------- */
.featured { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); display: flex; flex-direction: column; gap: 22px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 701px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* --p (set by home.js) goes 0 to 1 as a piece scrolls into view; without JavaScript it stays at 1 (full size). */
.piece { margin: 0; scale: calc(.9 + .1 * var(--p, 1)); opacity: calc(.35 + .65 * var(--p, 1)); transform-origin: 50% 60%; will-change: scale, opacity; }
.piece img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #151616; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .9); }
.piece figcaption { display: flex; flex-direction: column; padding-top: 10px; font-size: .9rem; color: var(--muted); }
.piece figcaption strong { font-family: var(--display); font-weight: 500; font-size: 1.3rem; color: var(--text); letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) { .piece { scale: 1; opacity: 1; will-change: auto; } }
.featured .note { margin: 0; color: var(--muted); font-style: italic; font-size: .92rem; }

/* ---------- 4. Numbered chapters ---------- */
.chapters { padding-bottom: clamp(56px, 9vw, 110px); }
.chapter { display: grid; grid-template-columns: 1fr; gap: 10px 48px; padding-block: 34px; border-top: 1px solid rgba(74, 124, 111, .55); }
.chapter .n { grid-column: 1 / -1; }
.chapter h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.chapter p { margin: 0; align-self: center; }
.chapter .more { display: inline-block; margin-top: 12px; color: var(--text); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--verdigris); padding: 6px 0; transition: color .2s; }
.chapter .more:hover { color: var(--gold-hot); }
@media (min-width: 701px) { .chapter { grid-template-columns: 1fr 2fr; padding-block: 44px; } }