:root { color-scheme: light; font-family: Arial, sans-serif; color: #26352f; background: #f5f0e6; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1440px, 100% - 64px); margin: 48px auto; }
header { max-width: 74ch; margin-bottom: 30px; }
h1 { margin: 0 0 12px; color: #173d2f; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; }
h2 { color: #173d2f; font-size: 1.35rem; margin: 0 0 18px; }
p { font-size: 1rem; line-height: 1.65; margin: 0 0 12px; }
.intro { font-size: 1.35rem; }
figure { margin: 0; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #142e2a; }
figcaption { max-width: 78ch; margin-top: 14px; font-size: .95rem; line-height: 1.6; }
#player-status { margin-top: 8px; color: #405d4d; font-size: .9rem; }
section { margin-top: 38px; }
ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 0 28px; }
li { border-top: 1px solid #b7c3b9; }
button { display: flex; align-items: center; text-align: left; gap: 14px; width: 100%; min-height: 58px; padding: 12px 0; border: 0; background: transparent; color: #173d2f; font: inherit; cursor: pointer; }
button:hover, button[aria-current="true"] { color: #142e2a; background: #e3e9dc; }
time { color: #405d4d; font-variant-numeric: tabular-nums; flex-shrink: 0; }
a { color: #245c46; text-underline-offset: .2em; }
a:hover { color: #142e2a; }
:focus-visible { outline: 3px solid #245c46; outline-offset: 4px; }
::selection { background: #c7e579; color: #142e2a; }
.files p, footer { display: flex; gap: 18px 30px; flex-wrap: wrap; }
footer { border-top: 1px solid #b7c3b9; margin-top: 38px; padding-top: 22px; font-size: .95rem; }
.transcript { max-width: 76ch; }
.transcript section { border-top: 1px solid #b7c3b9; padding-top: 22px; }
@media (max-width: 700px) { main { width: calc(100% - 32px); margin: 28px auto; } ol { grid-template-columns: 1fr; } .intro { font-size: 1.15rem; } section { margin-top: 28px; } }