/* A shared reading rhythm for the chapters. Scroll-pinned scenes retain their
   measured heights, while their surrounding chapters use the same spacing. */
:root{
 --section-space:clamp(2rem,4vw,3.5rem);
 --rhythm-label:16px;
 --rhythm-copy:16px;
 --rhythm-content:clamp(32px,3vw,40px);
 --rhythm-group:calc(2 * var(--section-space));
 --rhythm-card:24px;
}

/* The first chapter is pinned: add the missing entry space outside the pin. */
#inside.club-scroll-enabled{margin-block:max(0px,calc(var(--section-space) - clamp(20px,2.6vh,28px)))}

/* One title scale, including pinned scenes; their controllers measure the
   resulting height and use natural flow when a short screen cannot fit it. */
main h2,
.section h2,
.community-copy h2,
#inside.club-scroll-enabled .section-heading h2,
#inside .club-panel-copy h3,
#mentor h2,
#mentor.mentor-interactive #mentor-title,
#plans .plans-heading h2,
.nest-discography .discography-heading h3,
.league-step .league-story h3,
#league-artists .league-story h3{
 font-family:var(--heading);
 font-size:var(--section-title-size);
 font-weight:500;
 line-height:1.12;
 letter-spacing:-.035em;
 text-wrap:pretty;
}
main :is(h1,h2,h3,h4),
main .eyebrow,
#mentor .mentor-action strong,
#mentor .mentor-example-heading,
#mentor .mentor-flow-heading>span,
.league-topline p,
.club-files strong,
dialog h2{ text-transform:lowercase }

.audience-cards h3,
.community-caption h3,
.community-feature .community-caption h3,
.community-story .community-caption h3,
.onboarding-grid h3{font-size:var(--subheading-size);line-height:1.25}

/* Every chapter contributes the same edge space. Pin padding counts toward
   that space, so it is not added a second time around scroll scenes. */
main>#mentor{margin-block:max(0px,calc(var(--section-space) - var(--mentor-inset)))}
main>#opportunities>.section{padding-block:var(--section-space)}
main>#plans{--plans-edge-space:var(--section-space);margin-block:0}
#opportunities .league-route{margin-top:calc(var(--rhythm-group) - 24px)}

/* All chapter labels share one type scale, including component and mobile
   overrides. Keep this component after the individual section styles. */
body .eyebrow,
body .section .eyebrow,
body .closing-surface .eyebrow,
body .community-copy>.eyebrow,
body .discography-heading .eyebrow,
body #mentor .section-kicker .eyebrow,
body #plans .plans-heading>.eyebrow,
body #inside.club-scroll-enabled .section-heading .eyebrow,
body .league-topline p{
 font-family:var(--body);
 font-size:14px;
 font-weight:400;
 font-style:normal;
 line-height:1.5;
 letter-spacing:.075em;
 text-transform:lowercase;
 color:var(--lime);
 padding:0;
 margin:0 0 var(--rhythm-label);
}
#mentor .section-kicker{margin:0 0 var(--rhythm-label)}
body #mentor .section-kicker .eyebrow,
body #plans .plans-heading>.eyebrow,
body .league-topline p{margin:0}
#plans .plans-heading{row-gap:var(--rhythm-label)}
.closing h2{margin-top:0;margin-bottom:var(--rhythm-copy)}

/* Lead content starts on one baseline across regular sections. */
.who-section>.audience-cards,
#nest>.nest-intro,
#results>.results-grid,
#plans .onboarding-grid{margin-top:var(--rhythm-content)}
#community .community-scene{row-gap:var(--rhythm-content)}
#mentor h2{margin-bottom:var(--rhythm-content)}
#opportunities .opportunity-opening{align-items:start}
#plans .plans-heading{margin-bottom:calc(var(--rhythm-content) - 12px)}
#nest>.nest-discography{gap:var(--rhythm-content)}

/* Related chapters and groups use the same larger step. */
#opportunities .opportunity-route{margin-top:var(--rhythm-group)}
#plans .onboarding{margin-top:calc(var(--rhythm-group) - 14px)}
#nest>.nest-discography{margin-top:calc(var(--rhythm-group)/2);padding-top:calc(var(--rhythm-group)/2)}
#nest .discography-film{bottom:calc(-1 * var(--section-space))}

/* Cards and the text within them use the same repeated intervals. */
.who-section .audience-cards,
#results .results-grid,
#nest .track-list{gap:var(--rhythm-card)}
.club-panel-copy h3{margin-bottom:var(--rhythm-copy)}
.community-caption h3,
.community-story .community-caption h3{margin-bottom:var(--rhythm-copy)}
.audience-cards h3,
.opportunity-feedback h3,
.opportunity-route-steps h3{margin-bottom:var(--rhythm-copy)}
.onboarding-grid p{margin-top:var(--rhythm-copy)}

@media(max-width:900px){
 :root{--section-space:32px;--rhythm-label:12px;--rhythm-copy:12px;--rhythm-content:24px;--rhythm-card:16px}
 #inside.club-scroll-enabled{margin-top:calc(var(--section-space) - 8px);margin-bottom:calc(var(--section-space) - 12px)}
 #mentor .mentor-footer{padding-bottom:0}
 /* Keep both scroll scenes inside a phone viewport. */
 #mentor.mentor-interactive h2{margin-bottom:12px}
 #plans .plans-heading{margin-bottom:calc(var(--rhythm-content) - 20px)}
 #community .community-stories{gap:var(--rhythm-content)}
 #nest .track-list{gap:12px}
 #results .results-grid{column-gap:16px;row-gap:var(--rhythm-content)}
}
@media(max-width:760px){
 #opportunities .league-route{margin-top:calc(var(--rhythm-group) - 16px)}
}