/* A reading page within the same sunset, typography and shared content frame. */
body.course-page .site-header { position:absolute; }
.course-shell { display:block; height:auto; min-height:calc(100svh - var(--header-height)); padding-bottom:clamp(80px,10vw,180px); }
.course-page { --course-space:clamp(70px,7vw,135px); --course-gap:clamp(32px,5vw,90px); }
.course-heading { margin-bottom:clamp(48px,5.5vw,96px); }
.course-shell p,.course-shell li { font:300 1rem/1.7 var(--sans); }
.course-shell h2 { font-size:clamp(2.3rem,3.5vw,4.25rem); line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
.course-intro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--course-gap); align-items:center; }
.course-story h2 { margin-bottom:30px; }
.course-story p { margin-top:18px; }
.course-summary { border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.18); border-radius:22px; padding:clamp(28px,3vw,52px); }
.course-summary h3 { font:400 clamp(1.6rem,2.15vw,2.7rem)/1.15 var(--serif); letter-spacing:-.025em; margin-bottom:26px; }
.course-facts { margin:0 0 32px; padding:0; list-style:none; }
.course-facts li { border-bottom:1px solid var(--line); padding:12px 0; display:flex; justify-content:space-between; gap:14px; }
.course-facts li:last-child { border-bottom:0; }
.course-facts strong { font-weight:400; }
.course-price { display:flex; align-items:baseline; gap:13px; margin-bottom:24px; }
.course-price strong { font:400 clamp(1.85rem,2.6vw,3.1rem)/1.2 var(--sans); letter-spacing:-.045em; white-space:nowrap; }
.course-price span { font:300 .8125rem/1.5 var(--sans); }
.course-primary { width:fit-content; max-width:100%; display:flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:12px 24px; border:1px solid rgba(255,255,255,.56); border-radius:100px; background:rgba(255,255,255,.62); color:var(--ink); font:300 16px/1.35 var(--sans); transition:background 380ms var(--ease); }
.course-primary:hover { background:rgba(255,255,255,.94); }
.course-primary span { font-size:1.15rem; }
.course-enrol-buttons { display:grid; width:100%; gap:12px; }
.course-enrol-buttons .course-primary { width:100%; }
.course-primary--purchase { background:#292929; border-color:#292929; color:#fff8e9; }
.course-primary--purchase:is(:hover,:focus-visible) { background:#3a3a3a; border-color:#3a3a3a; }
.course-text-link { display:inline-flex; gap:20px; align-items:center; font:400 .8125rem/1.6 var(--sans); padding-block:10px; border-bottom:1px solid var(--line); transition:border-color .3s; }
.course-text-link:hover { border-color:var(--ink); }
.course-section { margin-top:var(--course-space); padding-top:clamp(36px,4vw,70px); border-top:1px solid var(--line); scroll-margin-top:48px; }
.course-section-header { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--course-gap); align-items:end; margin-bottom:clamp(32px,4vw,64px); }
.course-skill-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,2.5vw,48px); }
.course-skill-grid article { border-top:1px solid var(--line); padding-top:25px; }
.course-icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.course-skill-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:22px; border-radius:50%; background:rgba(255,255,255,.55); color:var(--ink); }
.course-skill-grid h3 { font:400 clamp(1.5rem,2vw,2.45rem)/1.2 var(--serif); letter-spacing:-.025em; margin-bottom:16px; }
.course-included-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px var(--course-gap); margin:0; }
.course-included-list>div { padding:0 0 28px; border-bottom:1px solid var(--line); }
.course-included-list>div:nth-last-child(-n+2) { border:0; padding-bottom:0; }
.course-included-list dt { display:flex; align-items:center; gap:12px; font:500 1rem/1.5 var(--sans); margin-bottom:8px; }
.course-included-list .course-icon { width:18px; height:18px; }
.course-included-list dd { margin:0; font:300 1rem/1.7 var(--sans); }
.course-update { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--course-gap); align-items:center; padding:clamp(32px,4vw,70px); border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.18); border-radius:22px; }
.course-update p+p { margin-top:20px; }
.course-shell .course-review-date { width:fit-content; max-width:100%; margin-top:30px; padding-top:16px; border-top:1px solid var(--line); font:300 .875rem/1.5 var(--sans); }
.course-enrol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--course-gap); align-items:center; }
.course-enrol-copy { margin-top:24px; }
.course-enrol-action { width:100%; justify-self:stretch; }
.course-shell .course-enrol-note { margin-top:16px; }
.course-enrol-note a { text-decoration:underline; text-underline-offset:4px; }
.course-reveal { transition:opacity 700ms var(--ease); }
.course-reveal.is-awaiting { opacity:0; }
.course-shell [tabindex="-1"]:focus { outline:none; }
@media(max-width:1100px) { .course-page { --course-gap:32px; } .course-summary { padding:28px; } .course-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; } }
@media(max-width:767px) { .course-included-list { grid-template-columns:minmax(0,1fr); gap:24px; } .course-included-list>div:nth-last-child(2) { border-bottom:1px solid var(--line); padding-bottom:28px; } }
@media(max-width:640px) { .course-intro,.course-section-header,.course-update,.course-enrol { grid-template-columns:1fr; } .course-skill-grid { grid-template-columns:1fr 1fr; gap:24px; } .course-heading { margin-bottom:48px; } }
@media(prefers-reduced-motion:reduce) { .course-reveal.is-awaiting { opacity:1; } }

/* Match index typography at its rendered size inside the legacy page stage. */
body.course-page .course-shell { --course-type-scale:var(--page-composition-scale,1); }
body.course-page .course-shell .course-heading h1 { font-size:calc(clamp(40px,4.34vw,84px) / var(--course-type-scale)); }
body.course-page .course-shell .course-heading p,
body.course-page #course-view :is(p,li,dt,dd) { font-size:calc(16px / var(--course-type-scale)); }
body.course-page #course-view h2 { font-size:calc(clamp(29px,3.2vw,48px) / var(--course-type-scale)); }
body.course-page #course-view .course-summary h3 { font-size:min(calc(clamp(26px,2.1vw,32px) / var(--course-type-scale)),6cqw); white-space:nowrap; }
body.course-page #course-view .course-skill-grid h3 { font-size:calc(clamp(23px,1.8vw,28px) / var(--course-type-scale)); }
body.course-page #course-view .course-price strong {
  font:500 calc(17.6px / var(--course-type-scale))/1.3 var(--sans);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
body.course-page #course-view .course-price span { font-size:calc(14px / var(--course-type-scale)); }
body.course-page #course-view .course-review-date { font-size:calc(16px / var(--course-type-scale)); font-weight:500; }
body.course-page #course-view .course-primary {
  min-height:calc(48px / var(--course-type-scale));
  padding:calc(12px / var(--course-type-scale)) calc(24px / var(--course-type-scale));
  font-size:calc(16px / var(--course-type-scale));
}
body.course-page #course-view .course-primary span { font-size:1em; }
body.course-page #course-view .course-enrol-action {
  width:100%; max-width:none; justify-self:stretch;
  padding:calc(32px / var(--course-type-scale));
  border:1px solid rgba(255,255,255,.8); border-radius:22px; background:rgba(255,255,255,.18);
}
body.course-page #course-view .course-intro { align-items:start; }
body.course-page #course-view .course-summary {
  align-self:stretch; display:flex; flex-direction:column; container-type:inline-size;
  padding:calc(24px / var(--course-type-scale));
}
body.course-page #course-view .course-summary h3 { margin-bottom:calc(14px / var(--course-type-scale)); }
body.course-page #course-view .course-summary .course-facts { margin-bottom:calc(14px / var(--course-type-scale)); }
body.course-page #course-view .course-summary .course-facts li { padding-block:calc(5px / var(--course-type-scale)); }
body.course-page #course-view .course-summary .course-price { margin-bottom:calc(10px / var(--course-type-scale)); }
body.course-page #course-view .course-summary .course-primary { margin-top:auto; flex-shrink:0; }