.workshop-hero { padding-bottom: 2.5rem; }
.workshop-hero h1 { max-width: none; }
.workshop-access-note { display: flex; align-items: flex-start; gap: 1rem; max-width: 56rem; margin-top: 2rem; }
.workshop-access-note p { margin: 0; font-size: .95rem; }
.workshop-status { display: inline-block; width: fit-content; border: 1px solid var(--colour-line); padding: .3rem .65rem; border-radius: .3rem; font: .75rem/1.5 var(--font-data); white-space: nowrap; }
.workshop-status.is-open { background: #183536; border-color: #35666a; color: var(--colour-brand-strong); }
.workshop-status.is-locked { color: var(--colour-muted); }
.workshop-series-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.workshop-series { scroll-margin-top: 2rem; }
.workshop-series .section-heading { align-items: end; }
.workshop-series .section-heading > p { color: var(--colour-muted); font-size: .9rem; }
.workshop-session-list { border-top: 1px solid var(--colour-line); }
.workshop-session-row { display: grid; grid-template-columns: 4rem minmax(0,1fr) auto; gap: 1.75rem; padding: 2rem 1.25rem; border-bottom: 1px solid var(--colour-line); align-items: center; }
.workshop-session-row.is-featured { background: linear-gradient(105deg,#203435 0%,var(--colour-surface) 80%); border-left: 3px solid var(--colour-brand); }
.workshop-week-number { font: 3.2rem/1 var(--font-display); color: var(--colour-muted); }
.is-featured .workshop-week-number { color: var(--colour-brand); }
.workshop-session-copy h3 { margin: 0 0 .4rem; font-size: 1.7rem; }
.workshop-session-copy p { max-width: 42rem; margin: 0; color: var(--colour-muted); }
.workshop-session-action { display: flex; align-items: flex-end; flex-direction: column; gap: .75rem; }
.workshop-release-note { font-size: .8rem; color: var(--colour-muted); }
.workshop-detail { max-width: 58rem; padding-top: 1.5rem; padding-bottom: 4rem; }
.workshop-lesson-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.75rem 0 2rem; }
.workshop-lesson-header .eyebrow { margin-bottom: .6rem; }
.workshop-lesson-header h1 { margin: 0; font-size: clamp(1.6rem,4vw,2.35rem); line-height: 1.2; }
/* Screen links should arrive at the lesson without animating down from the site header. */
html:has([data-lesson-player]) { scroll-behavior: auto; }
.lesson-player { max-width: 52rem; min-height: calc(100svh - 2rem); margin-inline: auto; scroll-margin-top: 1rem; }
.lesson-player:focus { outline: none; box-shadow: none; }
.lesson-toolbar { position: relative; display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.25rem; }
.lesson-position { color: var(--colour-brand); font: .8rem/1.5 var(--font-data); white-space: nowrap; }
.lesson-progress { position: relative; flex: 1; min-width: 0; }
.lesson-progress-track { display: flex; align-items: center; height: 2.75rem; padding: 0; margin: 0; list-style: none; touch-action: pan-y; user-select: none; }
.lesson-progress-track li { flex: 1; min-width: 0; }
.lesson-progress-stop { display: grid; place-items: center; height: 2.75rem; text-decoration: none; border-radius: .25rem; -webkit-tap-highlight-color: transparent; }
.lesson-progress-tick { display: block; width: 3px; height: .65rem; border-radius: 1rem; background: #65736c; transition: height 180ms cubic-bezier(.2,.8,.2,1), background-color 180ms, box-shadow 180ms; }
.lesson-progress-stop.is-before .lesson-progress-tick { background: var(--colour-brand); }
.lesson-progress-stop[aria-current="step"] .lesson-progress-tick { height: 1.15rem; background: var(--colour-brand-strong); box-shadow: 0 0 .65rem #81e7f055; }
.lesson-progress-stop[data-proximity="2"] .lesson-progress-tick { height: 1rem; }
.lesson-progress-stop[data-proximity="1"] .lesson-progress-tick { height: 1.4rem; }
.lesson-progress-stop[data-proximity="0"] .lesson-progress-tick,
.lesson-progress-stop:hover .lesson-progress-tick,
.lesson-progress-stop:focus-visible .lesson-progress-tick { height: 2rem; background: var(--colour-brand-strong); box-shadow: 0 0 .85rem #81e7f055; }
.lesson-progress-preview { position: absolute; z-index: 7; top: calc(100% + .35rem); left: 0; width: max-content; max-width: min(22rem,100%); padding: .7rem .9rem; border: 1px solid #456264; border-radius: .65rem; background: #202a28; box-shadow: 0 .75rem 2rem #0006; opacity: 0; visibility: hidden; transform: translateY(-.35rem) scale(.98); pointer-events: none; transition: opacity 140ms, transform 180ms cubic-bezier(.2,.8,.2,1), visibility 140ms; }
.lesson-progress.is-previewing .lesson-progress-preview { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.lesson-progress-preview .data-label { display: block; color: var(--colour-brand); font: .72rem/1.5 var(--font-data); margin-bottom: .4rem; }
.lesson-progress-title { display: block; color: var(--colour-ink); font-size: .85rem; font-weight: 600; line-height: 1.45; text-decoration: none; }
.lesson-progress-title:hover { color: var(--colour-brand); text-decoration: underline; }
.lesson-contents summary { cursor: pointer; color: var(--colour-muted); font-size: .85rem; padding: .6rem .75rem; border: 1px solid var(--colour-line); border-radius: .4rem; }
.lesson-contents summary:hover, .lesson-contents[open] summary { color: var(--colour-brand); }
.lesson-contents nav { position: absolute; z-index: 6; top: calc(100% + .5rem); right: 0; width: min(24rem,100%); padding: .5rem; border: 1px solid var(--colour-line); border-radius: .5rem; background: var(--colour-surface-raised); box-shadow: 0 1rem 3rem #0006; }
.lesson-contents ol { padding: 0; margin: 0; list-style: none; }
.lesson-contents a { display: block; font-size: .85rem; line-height: 1.5; padding: .8rem 1rem; border-radius: .3rem; text-decoration: none; }
.lesson-contents a:hover, .lesson-contents a[aria-current="step"] { background: #223738; color: var(--colour-brand); }
.lesson-card { background: var(--colour-surface-raised); border: 1px solid var(--colour-line); border-radius: .75rem; padding: clamp(1.25rem,3vw,2.5rem); animation: lesson-arrive 140ms ease-out; }
@keyframes lesson-arrive {
  from { opacity: .65; }
  to { opacity: 1; }
}
.lesson-prose { min-width: 0; overflow-wrap: anywhere; }
.lesson-section h2 { font: 500 clamp(1.6rem,3vw,2.1rem)/1.2 var(--font-display); letter-spacing: .025em; margin: 0 0 1.5rem; }
.lesson-section p { margin: 0 0 1.4rem; line-height: 1.8; }
.lesson-section > :last-child { margin-bottom: 0; }
.lesson-components { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.lesson-components li { border: 1px solid var(--colour-line); padding: .65rem 1rem; border-radius: .3rem; background: var(--colour-surface); }
.lesson-media { margin: 1.5rem 0 2rem; background: #101211; border: 1px solid var(--colour-line); border-radius: .4rem; overflow: hidden; }
.lesson-image-link { display: flex; justify-content: center; padding: .75rem; }
.lesson-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 25rem; object-fit: contain; }
/* Tall control panels need their original scale so annotated settings stay readable. */
.lesson-media.is-tall-panel img { max-height: none; }
.lesson-media video { display: block; width: 100%; max-height: 25rem; aspect-ratio: 16 / 9; background: #080a09; }
.lesson-media figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 1rem; font-size: .76rem; color: var(--colour-muted); border-top: 1px solid var(--colour-line); }
.lesson-media figcaption a { flex-shrink: 0; }
.lesson-disclosure { background: var(--colour-surface); border: 1px solid #35666a; border-radius: .5rem; margin: 1.5rem 0; }
.lesson-disclosure summary { cursor: pointer; color: var(--colour-brand); padding: 1rem 1.25rem; font-weight: 600; }
.lesson-disclosure[open] summary { border-bottom: 1px solid #35666a; margin-bottom: 1.25rem; }
.lesson-disclosure > div { padding: 0 1.25rem; }
.lesson-warning-rail { position: sticky; top: .5rem; z-index: 4; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin: 0 0 1.25rem; }
.lesson-warning { display: flex; flex: 1 1 100%; align-items: flex-start; gap: .75rem; min-width: 0; border: 1px solid #826326; border-left: 4px solid var(--colour-accent); border-radius: .5rem; padding: .8rem 1rem; margin: 0; background: #332d1d; color: #ffdc8a; font-size: .8rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 .3rem 1rem #0003; }
.lesson-warning svg { flex: 0 0 1.5rem; margin-top: .15rem; }
.lesson-warning p { margin: 0; }
.lesson-warning.is-compact { flex: 0 1 auto; max-width: 100%; padding: 0; }
.lesson-warning.is-compact:has(details[open]) { flex-basis: 100%; }
.lesson-warning details { width: 100%; min-width: 0; }
.lesson-warning summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem .75rem; cursor: pointer; list-style: none; }
.lesson-warning summary::-webkit-details-marker { display: none; }
.lesson-warning summary svg { margin-top: 0; }
.lesson-warning summary .lesson-warning-chevron { flex-basis: 1rem; margin-left: auto; transition: transform 140ms ease; }
.lesson-warning details[open] .lesson-warning-chevron { transform: rotate(180deg); }
.lesson-warning details p { padding: .25rem 1rem 1rem; }
.lesson-warning summary:focus-visible { outline: 2px solid var(--colour-accent); outline-offset: 3px; border-radius: .3rem; }
.lesson-navigation { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--colour-line); margin-top: 2rem; padding-top: 1.25rem; }
.lesson-navigation .button { gap: .7rem; min-width: 7rem; }
.lesson-navigation button:disabled { opacity: .35; cursor: default; transform: none; background: transparent; color: var(--colour-brand); }
@media (max-width: 55rem) {
  .workshop-session-row { grid-template-columns: 3rem minmax(0,1fr); gap: 1rem; }
  .workshop-session-action { grid-column: 2; align-items: flex-start; }
}
@media (max-width: 35rem) {
  .workshop-access-note { flex-direction: column; }
  .workshop-session-row { padding: 1.5rem .75rem; }
  .workshop-week-number { font-size: 2.5rem; }
  .workshop-session-copy h3 { font-size: 1.45rem; }
  .lesson-media figcaption { flex-direction: column; gap: .5rem; }
  .workshop-lesson-header { flex-direction: column; align-items: flex-start; padding: 1.5rem 0; }
  .lesson-toolbar { flex-wrap: wrap; justify-content: space-between; gap: .3rem .75rem; }
  .lesson-progress { flex-basis: 100%; order: 1; }
  .lesson-card { padding: 1.1rem; }
  .lesson-warning { gap: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-progress-tick, .lesson-progress-preview, .lesson-warning-chevron { transition: none; }
  .lesson-card { animation: none; }
}
@media (forced-colors: active) {
  .lesson-progress-tick { background: GrayText; forced-color-adjust: none; }
  .lesson-progress-stop.is-before .lesson-progress-tick,
  .lesson-progress-stop[aria-current="step"] .lesson-progress-tick,
  .lesson-progress-stop[data-proximity="0"] .lesson-progress-tick { background: Highlight; }
}