/* Shared design tokens for every current page. Page styles own composition. */
:root {--hero-heading-size:clamp(2.75rem,calc(1.75rem + 3vw),4.5rem)}
html body.playroom {
 --lime:#d5f1d8;
 --mint:var(--lime);
 --wash:#f5faf5;
 --ink:#193a2b;
 --muted:#4f6557;
 --line:#193a2b26;
 --heading:Fraunces,Georgia,serif;
 --serif:var(--heading);
 --sans:Inter,Arial,sans-serif;
 --content-width:1200px;
 --page-gutter:32px;
 --section-space:85px;
 --section-heading-size:clamp(2.5rem,4vw,3.6rem);
 --intro-size:1.1rem;
 --intro-leading:1.75;
 font-family:var(--sans);
 overflow-wrap:anywhere;
 font-size:1rem;
 line-height:1.65;
 -webkit-font-smoothing:antialiased;
}
html body.playroom main {background:var(--wash)}
html body.playroom .wrap {width:calc(100% - 2 * var(--page-gutter));max-width:var(--content-width);margin-inline:auto}
html body.playroom :is(h1,h2,h3,h4) {font-family:var(--heading);letter-spacing:-.03em}
html body.playroom main h1 {font-size:var(--hero-heading-size)!important;font-weight:650;line-height:1.06!important}
html body.playroom main h2.section-title {font-size:var(--section-heading-size);font-weight:650;line-height:1.08;letter-spacing:-.03em}
html body.playroom.detail-page :is(.bar b,.numbers b,.pull p) {font-family:var(--heading)}

/* One description style, whether the hero is centred or split into columns. */
html body.playroom :is(.hero-copy>p,.service-intro,.reading-hero p,.chero .lede,.gateway-intro>p:not(.member-kicker)) {font-size:var(--intro-size);line-height:var(--intro-leading);color:var(--ink)}
html body.playroom .service-intro {max-width:47ch;margin-block:28px}
html body.playroom .service-intro p {margin:0;font-size:inherit;line-height:inherit;color:inherit}
html body.playroom .service-intro p+p {margin-top:1em}
html body.playroom .service-hero h1 {margin:0}
html body.playroom :is(.pop-hero,.service-hero),
html body.playroom.detail-page main>.reading-hero {margin-top:-82px}
html body.playroom .chero {grid-template-columns:1.1fr 1fr;gap:55px}
html body.playroom .chero>div {min-width:0}
html body.playroom .chero .lede {max-width:47ch;margin-top:28px}
html body.playroom .pop-course-art::before {display:none}

html body.playroom :is(.service-section,.career,.training-feature,.pop-quote,.section,.pop-contact,.studio-about),
html body.playroom.course-page main>section {padding-block:var(--section-space)}
html body.playroom .section-intro h2 {margin-top:0}

/* The floating navigation and badge footer have their own shared widths. */
html body.playroom .site-header.site-header {top:18px;margin-top:18px;width:calc(100% - 32px);max-width:1280px;line-height:1.65}
html body.playroom .site-header .wordmark {font-family:var(--heading);font-size:1.4rem;font-weight:700;letter-spacing:-.06em;line-height:1.2;text-decoration:none;white-space:normal;min-width:0;max-width:100%}
html body.playroom .badge-grid {max-width:800px}
html body.playroom :is(.button,.btn) {min-height:48px}
html body.playroom .skip {font-family:var(--sans)}
/* Standalone text links get the same comfortable touch area as controls. */
html body.playroom :is(.text-link,.next>.more,.back-link,.member-footer a) {display:inline-flex;align-items:center;min-height:44px;padding-block:10px}

/* Homepage copy, recommendations and writing share one reading column. */
.playroom[data-page="home"] {--home-content-width:960px}
html .playroom[data-page="home"] .about-copy {max-width:var(--home-content-width)}
html .playroom[data-page="home"] .pop-quote>.wrap,
html .playroom[data-page="home"] #writing {width:calc(100% - 64px);max-width:var(--home-content-width);margin-inline:auto}
html .playroom[data-page="home"] .recommendations {max-width:none;width:100%}

@media(max-width:800px) {
 html body.playroom {--page-gutter:20px;--section-space:55px;--section-heading-size:2.5rem;--intro-size:1.0625rem;--intro-leading:1.65;font-size:1.0625rem}
 html body.playroom :is(.pop-hero,.service-hero),
 html body.playroom.detail-page main>.reading-hero {margin-top:-88px}
 html body.playroom .badge-grid {max-width:560px}
 html body.playroom .service-hero {text-align:center}
 html body.playroom .service-intro {margin:22px auto}
 html body.playroom .chero {gap:25px}
 html body.playroom :is(.service-hero,.pop-hero,.chero) :is(.button,.btn) {font-size:1.0625rem;font-weight:400;line-height:1.65}
 html .playroom[data-page="home"] .studio-about {padding-inline:24px}
 html .playroom[data-page="home"] .pop-quote>.wrap,
 html .playroom[data-page="home"] #writing {width:calc(100% - 48px)}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 html body.playroom *,html body.playroom *::before,html body.playroom *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print {
 html body.playroom .site-header,html body.playroom .certification-footer {display:none}
}