.cohort-section { margin-top: 8px; }
.cohort-head { align-items: flex-end; }
.cohort-head h2 { max-width: 870px; text-wrap: balance; }
.cohort-head h2 span { display: block; margin-top: 10px; font-size: .68em; line-height: 1.22; font-weight: 550; letter-spacing: -.03em; }
.cohort-hint { font-size: 14px; color: #5d594e; margin-bottom: 12px; }
.cohort-track { display: flex; overflow-x: auto; list-style: none; padding: 2px 1px 12px; margin: 0; gap: 14px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-color: #d5cbb0 #f6f3ea; scrollbar-width: thin; }
.cohort-track li { flex: 0 0 clamp(280px,31%,395px); scroll-snap-align: start; min-width: 0; display: flex; }
.cohort-shot { width: 100%; display: flex; flex-direction: column; border: 1px solid #e1ddce; border-radius: 18px; overflow: hidden; background: #fbfaf6; text-decoration: none; color: inherit; }
.cohort-shot:focus-visible { outline: 2px solid #796121; outline-offset: -3px; }
.cohort-picture { display: grid; place-items:center; height: clamp(230px,23vw,290px); background: #efede5; }
.cohort-picture img { width: 100%; height: 100%; object-fit: contain; min-height:0; }
.cohort-shot-label { display: grid; gap: 4px; padding: 13px 16px 15px; }
.cohort-shot-label strong { font-size: 15px; line-height: 1.25; }
.cohort-shot-label span { font-size: 13px; color: #59564e; line-height: 1.35; }
.cohort-viewer { inset: 0; margin: auto; width: min(94vw,1050px); height: min(94dvh,1000px); max-width: 100vw; max-height: 100dvh; padding: 0; border: 0; border-radius: 18px; background: #1e201c; color: white; }
.cohort-viewer[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.cohort-viewer::backdrop { background: rgb(13 14 12/.85); }
html:has(.cohort-viewer[open]) { overflow: hidden; }
.cohort-toolbar,.cohort-controls { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.cohort-toolbar { justify-content:space-between; }
.cohort-viewer-info { display:grid; gap:2px; line-height:1.3; }
.cohort-viewer-info strong { font-size:15px; }
.cohort-viewer-info span { font-size:12px; color:#e1ddce; }
.cohort-controls { justify-content: center; }
.cohort-viewer button { font: inherit; cursor:pointer; border:1px solid #5f6258; background:#31352e; color:white; min-height:44px; min-width:44px; padding:0 14px; border-radius:24px; }
.cohort-controls button[data-back],.cohort-controls button[data-forward] { background:var(--yellow,#ffce21); color:#15150d; font-size:22px; border:none; }
.cohort-viewer button:disabled { opacity:.35; cursor:default; }
.cohort-viewer button:focus-visible { outline:2px solid white; outline-offset:2px; }
.cohort-stage { cursor:pointer; overflow:auto; min-width:0; min-height:0; display:flex; background:#11120f; overscroll-behavior:contain; touch-action: pan-y pinch-zoom; }
.cohort-stage img { display:block; margin:auto; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.cohort-viewer.is-zoomed .cohort-stage { touch-action:pan-x pan-y pinch-zoom; }
.cohort-viewer.is-zoomed .cohort-stage img { flex:none; max-width:none; max-height:none; width:var(--full-width); }
@media(max-width:680px) {
  .cohort-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .cohort-head h2 { grid-column:1/-1; }
  .cohort-head .story-nav { grid-row:2; grid-column:2; }
  .cohort-head { margin-bottom:4px; }
  .cohort-section .cohort-hint { max-width:calc(100% - 106px); margin:-48px 0 12px; min-height:44px; display:flex; align-items:center; }
  .cohort-track li { flex-basis:86%; }
  .cohort-picture { height:clamp(210px,70vw,315px); }
  .cohort-viewer { width:100vw; height:100dvh; border-radius:0; }
  .cohort-toolbar { padding-top:max(10px,env(safe-area-inset-top)); }
  .cohort-controls { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
}

.course-films { display:grid; grid-template-columns: minmax(185px,.92fr) minmax(0,2fr); gap:clamp(22px,3vw,45px); align-items:start; margin-top:clamp(20px,3vw,38px); padding:clamp(20px,3vw,38px); background:#fff6d9; border-radius:24px; }
.course-films-head h3 { max-width:11em; margin:0; font-size:clamp(25px,3vw,41px); letter-spacing:-.045em; line-height:1.1; text-wrap:balance; }
.course-films-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,2vw,24px); width:100%; max-width:640px; justify-self:end; }
.course-film { margin:0; min-width:0; }
.course-film-player { position:relative; overflow:hidden; border-radius:16px; background:#24241f; }
.course-film video { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; }
.course-film figcaption { color:#37352b; font-size:clamp(14px,1.2vw,17px); line-height:1.4; font-weight:550; padding:10px 1px 0; }
.course-film-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-flex; gap:9px; align-items:center; border:0; padding:0 13px; min-height:44px; border-radius:99px; background:#ffda48; color:#1a1913; box-shadow:0 3px 16px #0003; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.course-film-play small { color:#514111; font-weight:550; font-size:12px; font-variant-numeric:tabular-nums; }
.course-film-play[hidden] { display:none; }
.course-play-symbol { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; }
.course-film-play:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media(max-width:850px) {
  .course-films { grid-template-columns:1fr; }
  .course-films-head h3 { max-width:100%; }
  .course-films-grid { justify-self:start; }
}
@media(max-width:560px) {
  .course-films { padding:18px; gap:16px; border-radius:20px; }
  .course-films-grid { grid-template-columns:1fr; gap:23px; }
  .course-film { width:100%; max-width:350px; justify-self:center; }
}