/* One typographic composition system. Separate line boxes avoid mixed-font
   baseline expansion; script keeps room for ascenders and descenders. */
@font-face{font-family:'JS Hand';src:url('assets/fonts/MrsSaintDelafield-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--font-script:'JS Hand',cursive;--heading-leading:1.02;--script-leading:.92;--heading-gap:0;--script-ink:#292e33}
body h1,body h2,body h3,body h4,body h5{font-family:var(--font-display);font-weight:400;font-synthesis:none}
body h2.composed-heading{display:flex;flex-direction:column;align-items:flex-start;gap:var(--heading-gap);line-height:1;margin:0;overflow:visible;letter-spacing:-.035em}
body .composed-heading>.heading-line{display:block;font:inherit;line-height:var(--heading-leading);padding:0;max-width:100%;text-wrap:balance}
body .composed-heading>.heading-script{font-family:var(--font-script);font-size:1.25em;font-weight:400;font-style:normal;letter-spacing:0;line-height:var(--script-leading);padding:0 .08em .08em 0;margin-top:-.07em;color:var(--script-ink);text-wrap:balance}
body .hero h1{display:flex;flex-direction:column;align-items:center;gap:0;font-size:clamp(64px,7.7vw,132px);line-height:1;letter-spacing:-.045em;text-shadow:none}
body .hero h1 .title-line:first-child{font:inherit;font-size:1em;line-height:1.02;letter-spacing:inherit;text-transform:none;margin:0}
body .hero h1 .title-line:last-child{font:inherit;line-height:1;margin:-.06em 0 0}
body .hero h1 .title-line em{display:block;font-family:var(--font-script);font-size:1.4em;font-style:normal;font-weight:400;letter-spacing:0;line-height:.9;padding:0 .08em .1em;color:var(--script-ink)}
body .hero-heading .eyebrow{margin-bottom:28px}body .hero-description{margin-top:18px}
body .story h2{font-size:clamp(48px,5.6vw,90px)}
body .selection h2,body .stores h2{font-size:clamp(48px,5.6vw,90px)}
body .club-scrapbook h2.composed-heading{font-size:clamp(44px,4.7vw,74px);align-items:center;gap:0}
body .club-scrapbook h2 .heading-script{color:var(--script-ink);font-size:1.25em}
body .commitments h2{font-size:clamp(44px,4.8vw,78px)}
body .faq h2{font-size:clamp(44px,4.9vw,78px)}
body .join-heading h2.composed-heading{align-items:center;font-size:clamp(48px,5.6vw,90px)}
body .join-heading h2 .heading-script{font-size:1.25em}
body .join-card-title{line-height:1.13;font-size:clamp(28px,2.5vw,40px)}
body .join-card-title em{display:block;font-family:var(--font-script);font-size:1.25em;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;margin-top:0;color:var(--script-ink)}
body .card-bottom h3{line-height:1.13;font-size:clamp(25px,2.5vw,38px)}
body .card-bottom h3 .title-kicker{font-family:var(--font-display);font-size:.7em;line-height:1.15;letter-spacing:0;text-transform:none;margin-bottom:5px}
body h4,body h5{line-height:1.2}
body .footer-big-link{font-family:var(--font-display);line-height:1.04;font-size:clamp(80px,12vw,190px)}
body .footer-big-link>em{font-family:var(--font-script);font-size:1.25em;font-style:normal;font-weight:400;letter-spacing:0;line-height:.95;margin-left:12vw;color:#f4f1e8}
@media(max-width:760px){
 :root{--heading-gap:0}
 body .hero h1{font-size:9.3vw;gap:0}
 body .hero h1 .title-line em{font-size:1.4em}
 body .story h2,body .selection h2,body .stores h2,body .commitments h2,body .faq h2,body .join-heading h2.composed-heading{font-size:10.5vw}
 body .join-heading h2.composed-heading{align-items:flex-start}
 body .club-scrapbook h2.composed-heading{font-size:10.5vw}
 body .composed-heading>.heading-script{font-size:1.22em;line-height:.94}
 body .join-card-title{font-size:32px}
 body .card-bottom h3{font-size:30px}
 body .footer-big-link{font-size:19vw;line-height:1.05}
 body .footer-big-link>em{margin-left:5vw;font-size:1.25em}
}

/* Intentional overlap: handwriting is a foreground signature. */
body .composed-heading>.heading-script{position:relative;z-index:1;margin-top:-.32em;line-height:.86;padding-bottom:.13em;animation:script-colors 15s ease-in-out infinite}
body .hero h1 .title-line:last-child{position:relative;z-index:1;margin-top:-.35em}
body .hero h1 .title-line em{animation:script-colors 15s ease-in-out infinite;line-height:.86}
body .join-card-title em{position:relative;z-index:1;margin-top:-.22em;animation:script-colors 15s ease-in-out infinite}
body .footer-big-link>em{position:relative;z-index:1;margin-top:-.24em;animation:script-colors-light 15s ease-in-out infinite}
@keyframes script-colors{0%,100%{color:#2400ff}27%{color:#00ef36}58%{color:#ff00b8}83%{color:#ff3c00}}
@keyframes script-colors-light{0%,100%{color:#00eaff}27%{color:#49ff00}58%{color:#ff20df}83%{color:#ff5930}}
@media(max-width:760px){body .composed-heading>.heading-script{margin-top:-.29em}body .hero h1 .title-line:last-child{margin-top:-.3em}}
@media(prefers-reduced-motion:reduce){body .composed-heading>.heading-script,body .hero h1 .title-line em,body .join-card-title em{animation:none;color:#40694f}body .footer-big-link>em{animation:none;color:#c2db9f}}

@font-face{font-family:'JS Inter';src:url('assets/fonts/Inter.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
body .story .heading-caption{font-family:'JS Inter',Arial,sans-serif;font-size:clamp(18px,1.7vw,26px);font-weight:400;line-height:1.45;letter-spacing:-.03em;margin:18px 0 0;color:var(--color-ink)}
body .composed-heading>.heading-line{white-space:nowrap;text-wrap:nowrap}
body .join-heading h2.composed-heading{font-size:clamp(42px,5.6vw,90px)}
@media(max-width:760px){body .story .heading-caption{font-size:18px;margin-top:16px}body .join-heading h2.composed-heading{font-size:9.6vw}body .selection h2{font-size:9.7vw}}