/* Home page: the four hero designs */

.home { display: block; }
.home .artist-roll, .home .note-2027 { padding-inline: var(--gutter); }
.about-line { max-width: var(--read); margin-inline: auto; text-align: center; }
.about-line p:last-child { margin-bottom: 0; }

/* ---------- A: framed on the wall ---------- */
.a-intro { max-width: 44rem; margin: var(--space-4) auto 0; padding-inline: var(--gutter); }
.a-frame {
  margin: var(--space-4) auto var(--space-5);
  width: min(36rem, 100% - 2 * var(--gutter), 78svh * 0.8);
}
.a-frame figcaption { margin-top: 1.25rem; }
.home-a .artist-roll { margin-top: var(--space-5); }
.a-note { margin-top: var(--space-5); }

/* ---------- B: text in the sky ---------- */
.b-hero { position: relative; }
.b-hero > img { width: 100%; }
.b-sky {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 6.5%; width: 54%; left: 45%;
  color: var(--moon);
  text-shadow: 0 0 0.9em rgb(8 44 39 / 0.55), 0 0 0.2em rgb(8 44 39 / 0.35);
}
.b-sky a { color: inherit; }
.b-below { padding-top: var(--space-3); }
.b-below .artist-roll { margin-top: var(--space-6); }
.b-below .note-2027 { margin-top: var(--space-5); }
@media (max-width: 48rem) {
  /* On phones, sit the text under the moon, still clear of the skyline */
  .b-sky { top: 17%; width: 86%; left: 50%; }
}

/* ---------- D: cards over the Heath ---------- */
.hero-d .site-footer { margin-top: 0; }
.d-bg { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; }
.d-bg img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 40% 0%;
  will-change: transform;
}
.d-cards { position: relative; z-index: 1; padding: 11.5svh var(--gutter) 40svh; }
/* Home page cards (shared by C and D): the look comes from .card in site.css */
.d-cards .hcard { margin-bottom: 19.5svh; }
.d-cards .hcard:last-child { margin-bottom: 0; }
.hcard .artist-roll, .hcard .note-2027 { padding-inline: 0; }
.hcard .credit { margin: 1.5rem 0 0; }

/* D: card one, the opening text */
.hcard--intro { max-width: 40rem; }
.setlines { container-type: inline-size; margin: 0; }
.setlines__line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--display); text-transform: uppercase; white-space: nowrap;
  letter-spacing: calc(0.14em + var(--track, 0em)); margin-right: calc(-0.14em - var(--track, 0em));
  font-size: calc(100cqi / var(--w)); line-height: 2.1;
}
.setlines--narrow { display: none; }
@media (max-width: 40rem) {
  .setlines--wide { display: none; }
  .setlines--narrow { display: block; }
  .hcard--intro { padding-inline: 1.1rem; }
}
.caps { letter-spacing: 0.06em; }

/* D: the artists line-up. Each line is stretched edge to edge, with a dot centred in every gap.
   Type size scales with the card so the lines keep the same shape at every width. */
.hcard--artists { max-width: 40rem; text-align: center; }
/* Card heading set exactly like "HEATHBOUND 2026" at the start of card one (also HEATHBOUND 2027) */
.hcard .card-heading { margin: 0 0 1.2rem; }
.lineup { container-type: inline-size; }
.lineup__line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap;
  font-size: calc(100cqi / var(--w)); line-height: 2.3;
  margin-right: -0.14em;
}
.lineup__line a { text-decoration: none; }
.lineup__line a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
/* Names in Alegreya small capitals, with separate measured line-ups for wide and narrow screens */
.lineup--wide { width: 84%; margin-inline: auto; }   /* names a little smaller than the card width */
.lineup--narrow { display: none; }
.lineup .lineup__line { font-family: "Alegreya Sans SC", var(--body); text-transform: none; letter-spacing: .08em; margin-right: -.08em; }
@media (max-width: 40rem) {
  .lineup--wide { display: none; }
  .lineup--narrow { display: block; width: 86%; margin-inline: auto; }   /* wider blank margins either side */
  .hcard--artists { padding-inline: 1.1rem; }
}

/* D: card text a little smaller */
.hcard .about-line p, .hcard .note-2027 p { font-size: 0.97rem; line-height: 1.7; }
.hcard .credit { font-size: 0.8rem; }

/* D4: no header shadow; a very soft shadow behind each card instead */
.hero-d4 .hcard { box-shadow: 0 1px 2px rgb(10 30 26 / .10), 0 14px 30px -10px rgb(10 30 26 / .40); }