/* participating-artists-basic-info: page-only CSS (shared Design B rules = src/styles/hh.css).
   Restyled into Design B 2026-10-27: the boxed cards became hairline-topped columns, serif headings, photos and films bigger.
   Selectors carry a .section/.pow prefix so they outrank the single-class inner-page rules in hh.css (which loads after this file). */

.pow .pow-copy .kicker{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.05rem,1.3vw,1.2rem);letter-spacing:0}

.prose{max-width:84ch}
.prose p,.prose ul{margin-top:16px}
.prose p:first-child{margin-top:0}
.prose h2+p,.prose h3+p{margin-top:14px}
.prose h2+p{margin-top:22px}
.section .prose h3{margin-top:36px;font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.22}
/* lists on hairlines */
.section .prose ul{list-style:none;padding:0;border-top:1px solid var(--hh-quote-rule)}
.section .prose li{margin:0;padding:12px 0;border-bottom:1px solid var(--hh-quote-rule)}
.section.sky .prose ul,.section.sky .prose li{border-color:var(--hh-quote-rule)}
.section .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.section .split{grid-template-columns:1fr}}
figure{margin:0}
figure img{border-radius:var(--radius);width:100%}

.section .poster{box-shadow:var(--print)}
.section .poster .play{white-space:nowrap}

/* basics: the film big, its title beside it as a serif line */
.basic-title{margin-bottom:clamp(32px,4vw,52px)}
.section .video-row{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.section .video-row h2{margin:0;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.2;color:var(--muted);font-style:italic}
.section .cols p{break-inside:avoid;margin-top:0;margin-bottom:16px}
@media (max-width:860px){.section .video-row{grid-template-columns:1fr}.section .video-row h2{order:-1}}

/* in-person: the photo beside the story */
.section .sticky{position:sticky;top:110px}
.section figure.sticky img{box-shadow:var(--print)}
@media (max-width:900px){.section .sticky{position:static}.section.dark .split figure{order:-1}}

/* the former boxed cards: hairline-topped columns */
.section .cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px) clamp(32px,5vw,72px)}
.section .card{background:none;border:0;border-top:1px solid var(--hh-quote-rule);border-radius:0;padding:24px 0 0;box-shadow:none}
.section .card h2{font-size:clamp(1.55rem,2.2vw,1.95rem);line-height:1.18}
.section .card p{margin-top:14px;color:var(--text)}
.section .card p + p{margin-top:12px}
@media (max-width:860px){.section .cards{grid-template-columns:1fr}}

/* pay: the fee paragraph reads as the serif lead */
.section .money h2 + p{font-family:var(--serif);font-size:clamp(1.22rem,1.55vw,1.38rem);line-height:1.55;color:var(--white)}
.section .money h2 + p :is(strong,b,em){color:var(--white)}

/* close */
.close h2{margin:0 auto}
.close .btn span{display:inline-block}
.close .btn span::first-letter{text-transform:uppercase}
@media (max-width:600px){
  .section .video-row .poster,.section .split .sticky .poster{margin:0 calc(-1 * var(--gut));border-radius:0;box-shadow:none}
  .section figure.sticky{margin:0 calc(-1 * var(--gut))}
  .section figure.sticky img{border-radius:0;box-shadow:none}
}