:root {
  color-scheme: light;
  --navy: #061d49;
  --ink: #253248;
  --muted: #4c5970;
  --blue: #325cbc;
  --orange: #f16a22;
  --dark-orange: #c2410c;
  --border: #d8dfe9;
  --wash: #f4f7fb;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-size: 1.0625rem; line-height: 1.62; }
a { color: var(--blue); text-underline-offset: .19em; }
a:focus-visible { outline: 3px solid var(--dark-orange); outline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
svg { width: 1.25rem; height: 1.25rem; flex: none; }
.shell { width: min(800px, calc(100% - 36px)); margin-inline: auto; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 9; padding: .75rem; background: #fff; }
.skip:focus { top: 1rem; }
.masthead { border-bottom: 2px solid var(--orange); }
.masthead .shell { min-height: 58px; display: flex; align-items: center; }
.brand { display: block; width: 162px; height: auto; }
h1, h2, h3 { color: var(--navy); line-height: 1.15; }
h1 { margin: 0; font-size: clamp(1.88rem, 4.3vw, 2.75rem); letter-spacing: -.03em; }
.hero .shell { padding-top: 1.5rem; }
.hero .intro { margin: .6rem 0 0; color: var(--muted); }
.lesson { padding-block: clamp(1.25rem, 4vw, 2rem) 2.5rem; }
.lesson h1 { margin-bottom: clamp(1.45rem, 4vw, 2rem); }
.training-audio { max-width: 28rem; margin: 0 0 1.6rem; }
.lesson .training-audio p { margin: 0 0 .35rem; color: var(--navy); font-weight: 700; }
.training-audio audio { display: block; width: 100%; }
.training-audio audio[hidden] { display: none; }
.training-audio-play { min-height: 44px; padding: .45rem .75rem; border: 0; border-radius: 7px; background: var(--navy); color: #fff; font: inherit; font-weight: 680; cursor: pointer; }
.training-audio-play:focus-visible { outline: 3px solid var(--dark-orange); outline-offset: 4px; }
.training-audio-play:disabled { opacity: .7; cursor: wait; }
.training-audio-status:not(:empty) { display: block; margin-top: .4rem; color: var(--muted); font-size: .94rem; }
.lesson section + section { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.lesson h2 { margin: 0 0 .85rem; font-size: clamp(1.42rem, 3.3vw, 1.95rem); letter-spacing: -.02em; }
.lesson h3 { margin: 1.5rem 0 .55rem; font-size: 1.17rem; }
.lesson p { margin: .75rem 0; }
.lesson p:last-child, .lesson ul:last-child, .lesson ol:last-child { margin-bottom: 0; }
.lesson ul, .lesson ol { padding-inline-start: 1.4rem; }
.lesson li { padding-inline-start: .18rem; margin-bottom: .38rem; }
.lesson li::marker { color: var(--dark-orange); font-weight: 700; }
.lesson table { width: 100%; margin: .9rem 0; border-spacing: 0; table-layout: fixed; font-size: .94rem; }
.lesson th, .lesson td { padding: .55rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
.lesson th { background: var(--wash); color: var(--navy); }
.lesson th:first-child { width: 53%; }
.lesson .meet { padding: .8rem .9rem; border-inline-start: 4px solid var(--orange); background: #fff4ec; }
.file { margin-top: .9rem; }
.file a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .75rem; color: #fff; background: var(--navy); border-radius: 7px; font-weight: 680; }
.file-meta { font-size: .86rem; font-weight: 500; }
.maps figure { margin: 1.15rem 0; }
.maps figcaption { margin-bottom: .35rem; color: var(--navy); font-weight: 700; }
.maps a, .maps img { display: block; }
.maps img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 5px; }
.quiz { display: block; width: 100%; height: clamp(550px, 78svh, 850px); border: 1px solid var(--border); border-radius: 8px; background: var(--wash); }
.quiz-direct { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-size: .94rem; }
footer { background: var(--wash); border-top: 1px solid var(--border); }
footer .shell { padding-block: 1rem; color: var(--muted); font-size: .88rem; }
.library { min-height: 48vh; padding-block: 1.45rem 2.5rem; }
.library h2 { margin: 0 0 .8rem; font-size: 1.38rem; }
.training-list { max-width: 700px; padding: 0; margin: 0; list-style: none; }
.training-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--wash); color: var(--navy); text-decoration: none; }
.training-card:hover { border-color: var(--dark-orange); }
.training-card:hover .training-title { text-decoration: underline; text-underline-offset: .19em; }
.training-title { font-weight: 740; line-height: 1.25; }
.training-description { grid-column: 1; font-size: .94rem; color: var(--muted); }
.training-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--dark-orange); font-size: 1.3rem; }
@media (max-width: 500px) {
  .shell { width: calc(100% - 28px); }
  .masthead .shell { min-height: 51px; }
  .brand { width: 145px; }
}