/* Course controls and surfaces inherit the host site. */
:root{--course-field:var(--family-field);--course-ink:var(--family-ink);--course-quiet:var(--family-quiet);--course-hover:var(--family-hover);--course-active:var(--family-active);--course-play-hover:var(--family-hover);--course-play-active:var(--family-active)}
.course-family :is(h1,h2,h3){color:var(--course-ink)}
.course-family main a:not(.button),.course-family main .text-button{color:var(--course-ink)}
.course-family main :focus-visible{outline-color:var(--course-ink)}
.course-family main>.section:nth-child(even),.course-family main>#courses{background:var(--course-quiet)}
.course-family main>.weekly{background:var(--color-sage-quiet)}
.course-family #choose-course .course-card{background:var(--course-quiet)}
.course-family main .button:not(.play){background:var(--course-field);border-color:var(--course-ink);color:var(--course-ink)}
.course-family main .button:not(.play):hover:not(:disabled){background:var(--course-hover)}
.course-family main .button:not(.play):active:not(:disabled){background:var(--course-active)}
.course-family main .button.completion-button[aria-pressed=true]{background:var(--course-quiet)}
.course-family main .button:disabled{background:var(--color-disabled-surface);color:var(--color-disabled-ink);border-color:var(--color-border)}
.course-family .weekly :is(h2,a){color:var(--color-sage-ink)}
.course-family .weekly .button{background:var(--color-sage);border-color:var(--color-sage-ink);color:var(--color-sage-ink)}
.course-family .weekly .button:hover:not(:disabled){background:var(--color-sage-hover)}
.course-family .lesson-list a[aria-current]{background:var(--course-quiet);border-left-color:var(--course-ink)}
.course-family .lesson-state.is-complete,.course-family .course-progress>span{color:var(--course-ink)}
.course-family .lesson-disclosure>summary{color:var(--course-ink)}
.course-family .discussion .comment-replies .comment-card{background:var(--course-quiet)}
/* Course landing pages share the full-height, right-third player composition. */
.inner-page main>.course-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0;padding:0;align-items:stretch}
.course-hero-copy{padding:calc(44px + var(--edge-half)) var(--layout-gutter) calc(48px + var(--edge-half));align-self:center}
.course-hero-copy .intro-copy{max-width:44ch}
.course-hero-copy .button{margin-top:26px}
.course-hero>.player{display:flex;flex-direction:column;border-radius:0;min-height:430px}
.course-hero .player-image{flex:1;min-height:170px;height:auto;position:relative}
.course-hero .player-image img{position:absolute;inset:0;object-position:50% 50%}
.course-hero .player-content{padding:28px 32px calc(28px + var(--edge-half));flex:none}
.course-hero .practice h2{font-size:29px;max-width:17ch}
.course-family .lesson-player .player.player-horizontal{display:grid;grid-template-columns:minmax(140px,.65fr) minmax(0,1.35fr)}
.course-family .lesson-player .player-image{display:block;min-height:190px}
.course-family .lesson-player .practice{display:none}
.lesson-thumb{width:64px;height:48px;object-fit:cover;border-radius:3px}
.course-family .lesson-list a{grid-template-columns:28px 64px minmax(0,1fr) auto;gap:14px}
.course-family .lesson-sidebar .lesson-list a{grid-template-columns:52px minmax(0,1fr);gap:10px}
.course-family .lesson-sidebar .lesson-number{display:none}
.course-family .lesson-sidebar .lesson-thumb{width:52px;height:52px;grid-column:1;grid-row:1/3}
.course-family .lesson-sidebar .lesson-state{grid-column:2}
.course-family .lesson-player .player.player-horizontal.missing-image{display:block}
.course-family .lesson-player .player-image.missing-image{display:none}
.course-family .lesson-list a.missing-image{grid-template-columns:28px minmax(0,1fr) auto}
.course-family .lesson-sidebar .lesson-list a.missing-image{grid-template-columns:1fr}
.course-family .lesson-sidebar .lesson-list a.missing-image .lesson-state{grid-column:1}
/* A photograph can sit quietly behind words without fading the words themselves. */
.newsletter-copy{position:relative;isolation:isolate;overflow:hidden;background:var(--color-canvas);align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.newsletter-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 27%;opacity:var(--image-newsletter-opacity);z-index:-1;pointer-events:none}
@media(max-width:1000px){
 .course-hero .player-content{padding-left:24px;padding-right:24px}
 .course-family .lesson-list a{grid-template-columns:28px 56px minmax(0,1fr);gap:12px}
 .course-family .lesson-thumb{width:56px;height:48px}
 .course-family .lesson-state{grid-column:3}
 .course-family .lesson-player .player.player-horizontal{display:block}
 .course-family .lesson-player .player-image{height:140px;min-height:0}
}
@media(max-width:760px){
 .inner-page main>.course-hero{display:block}
 .course-hero-copy{padding:calc(28px + var(--edge-half)) var(--layout-gutter) 32px}
 .course-hero>.player{min-height:0}
 .course-hero .player-image{height:156px;min-height:0;flex:none}
 .course-hero .player-content{padding:24px var(--layout-gutter) calc(28px + var(--edge-half))}
 .course-family .lesson-list-title{font-size:18px}
 .course-family .lesson-list a{grid-template-columns:24px 52px minmax(0,1fr);gap:9px}
 .course-family .lesson-thumb{width:52px;height:52px}
}
@media print{.newsletter-background{display:none}}
