.lesson-hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:6vw;padding:65px var(--gutter) 85px}
.lesson-hero h1{font:400 clamp(100px,14vw,210px)/.95 var(--serif);letter-spacing:-.045em;margin:0 0 48px}
.lesson-jump{display:grid;max-width:420px}
.lesson-jump a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.8}
.lesson-jump a:last-child{border-bottom:1px solid var(--line)}.lesson-jump a:hover{color:var(--red)}
.lesson-cover{margin:0;padding:15px;background:var(--light);box-shadow:0 20px 45px #333c2f13;transform:rotate(2deg)}
.lesson-cover-button{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.lesson-cover img{width:100%;height:auto;display:block}.lesson-cover .image-plus{font-size:26px}
.classrooms{display:grid;grid-template-columns:1fr 1fr;background:var(--sage);padding:65px var(--gutter);gap:60px}
.classroom+ .classroom{border-left:1px solid #b9bfad;padding-left:60px}
.classroom h2,.course-sidebar h2{font:500 23px/1.8 var(--jp);margin:0 0 24px}
.classroom p,.course-section p,.course-section li{font:400 14px/2.2 var(--sans);letter-spacing:.035em}
.classroom p:last-child{margin-top:24px;font-size:12px}
.classroom a,.course-section a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#9a8c76}
.atelier-courses{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:8vw;padding:100px var(--gutter)}
.course-sidebar{position:sticky;top:125px;align-self:start}.course-sidebar nav{display:grid;gap:13px}.course-sidebar nav a{font-size:11px;line-height:1.8;color:var(--muted);padding:5px 0}.course-sidebar nav a:hover{color:var(--red)}
.course-section{border-top:1px solid var(--line);padding:34px 0 54px;scroll-margin-top:120px}
.course-section h3{font:500 21px/1.9 var(--jp);margin:0 0 22px;overflow-wrap:anywhere}
.course-section p{margin:0 0 20px}.course-section ul{padding-left:20px;margin-top:28px}.course-section li{margin:12px 0}
.course-section table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.9;margin-top:30px}
.course-section td,.course-section th{padding:19px 16px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.course-section th{width:28%;background:#e8e5da}.course-section td{padding-left:24px}.course-section tr:first-child>*{border-top:1px solid var(--line)}
.course-section img{display:block;margin-top:24px;width:100px;height:100px}
#classrooms,#kameshima,#atelier{scroll-margin-top:110px}.lesson-page .image-prev,.lesson-page .image-next,.lesson-page .image-counter{display:none}
@media(max-width:1050px){.lesson-hero{gap:35px}.lesson-jump a{font-size:12px}.classrooms{gap:30px}.classroom+.classroom{padding-left:30px}.classroom h2{font-size:20px}.atelier-courses{gap:40px;grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:800px){.lesson-hero{grid-template-columns:1fr;padding-top:35px;gap:38px;padding-bottom:55px}.lesson-hero h1{margin-bottom:30px}.lesson-jump{max-width:none}.lesson-cover{transform:rotate(1deg)}.classrooms{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px;gap:30px}.classroom+.classroom{border-left:0;border-top:1px solid #b9bfad;padding:30px 0 0}.atelier-courses{grid-template-columns:1fr;padding-top:50px;gap:35px}.course-sidebar{position:static}.course-sidebar nav{grid-template-columns:1fr 1fr;gap:10px 20px}.course-section{padding:28px 0 35px}.course-section h3{font-size:19px}.course-section th{width:32%}.course-section th,.course-section td{padding:15px 12px;font-size:13px}.course-section p,.course-section li{font-size:13px}.classroom h2{font-size:21px}}

/* Cap content width while keeping the classroom background full bleed. */
.lesson-hero,.atelier-courses{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--content-gutter)}
.classrooms{padding-inline:max(var(--content-gutter),calc((100% - var(--content-inner-max))/2))}
@media(min-width:1440px){.lesson-hero{gap:86.4px}.atelier-courses{gap:115.2px}}

/* Compact, clearly actionable course table of contents. */
.course-toc-label{font:500 16px/1.5 var(--sans);color:var(--muted);margin:0 0 10px}
.course-sidebar nav.course-toc{gap:0;grid-template-columns:1fr}
.course-sidebar nav.course-toc a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 6px;line-height:1.5;border:0;border-radius:3px;color:var(--ink);text-decoration:none}
.course-toc-arrow{flex-shrink:0;color:var(--red);font-size:20px;text-decoration:none}
.course-sidebar nav.course-toc a:hover{background:var(--sage);color:var(--red)}
.course-sidebar nav.course-toc a:focus-visible{outline:2px solid var(--red);outline-offset:2px;background:var(--sage)}
.lesson-cover-image{display:block;width:100%}