.tutorial-hero { padding: 1rem 0 2rem; }
.tutorial-hero h1 { max-width: 60ch; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.15; }
.tutorial-hero .page-lede { max-width: 80ch; font-size: 1.05rem; margin-bottom: 1.5rem; }
.tutorial-watch-layout { max-width: 64rem; margin-inline: auto; }
.tutorial-supporting { display: grid; grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); gap: var(--space-24); align-items: start; }
.tutorial-page .cookie-banner { position: static; margin-top: 1rem; }
.tutorial-page .cookie-banner-inner { box-shadow: none; }
.youtube-player { border: 1px solid var(--line); background: #102620; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); }
.youtube-player iframe { display: block; width: 100%; height: 100%; border: 0; scroll-margin-top: 6rem; }
.tutorial-materials { min-width: 0; padding: var(--space-24); }
.tutorial-materials h2 { font-size: 1.2rem; }
.tutorial-materials li + li { margin-top: .85rem; }
.tutorial-reading { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: var(--space-48); align-items: start; }
.tutorial-chapters { padding-left: 1.3rem; }
.tutorial-chapters li { margin-bottom: .7rem; }
.tutorial-chapters time { font-variant-numeric: tabular-nums; font-weight: 700; }
.tutorial-transcript section { scroll-margin-top: 7rem; }
.resource-thumbnail { display: block; margin: 0 0 1rem; }
.resource-thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--radius-sm); }
.manual-tutorials { margin-top: var(--space-20); padding: var(--space-20); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.manual-tutorials ul { padding-left: 1.2rem; }
.manual-tutorials li + li { margin-top: .7rem; }
@media (max-width: 800px) {
  .tutorial-supporting, .tutorial-reading { grid-template-columns: minmax(0, 1fr); }
  .tutorial-reading { gap: var(--space-24); }
  .tutorial-hero { padding-top: 1rem; }
  .youtube-player { border-radius: var(--radius-sm); }
}

/* Keep the single player complete in the initial viewport; support remains available below. */
.tutorial-watch-layout .youtube-player { max-width: min(64rem, calc((100vh - 11rem) * 1.777778)); margin-inline: auto; }
@supports (height: 100svh) {
  .tutorial-watch-layout .youtube-player { max-width: min(64rem, calc((100svh - 11rem) * 1.777778)); }
}
.tutorial-video-label { margin-top: 1rem; }
.tutorial-details > summary { cursor: pointer; font-weight: 700; font-size: 1.2rem; padding-block: .75rem; }
.tutorial-details[open] > summary { margin-bottom: 1rem; }