/* Scroll-driven exercise story. All shared typography/navigation lives in site.css. */
.motion-story { background: var(--night); color: var(--white); position: relative; }
.story-sticky { padding: 22px var(--gutter) 20px; }
.story-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: 1.5px; color: #99999f; }
.story-main { display: grid; grid-template-columns: .83fr 1.3fr; align-items: center; gap: 20px; max-width: 1500px; margin: auto; }
.story-copy { padding: 40px 0; }
.story-chapter { padding-bottom: 30px; }
.story-chapter .eyebrow { font-size: 10px; color: #a4a4aa; letter-spacing: 1.5px; margin-bottom: 28px; }
.story-chapter h1, .story-chapter h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.025em; font-weight: 400; margin: 0 0 27px; }
.story-chapter em { font-style: normal; color: #96969e; font-weight: 300; }
.chapter-description { max-width: 370px; font-size: 17px; line-height: 1.6; color: #dedee1; margin-bottom: 20px; }
.chapter-detail { max-width: 370px; font-size: 14px; line-height: 1.7; color: #9b9ba4; }
.chapter-equipment { display: flex; align-items: center; gap: 15px; max-width: 370px; padding-top: 22px; margin-top: 27px; border-top: 1px solid #ffffff25; font-size: 13px; }
.equipment-thumb { display: flex; width: 47px; height: 47px; padding: 5px; background: #eeeeeb; flex: 0 0 auto; align-items: center; justify-content: center; }
.equipment-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); }
.chapter-equipment small { display: block; text-transform: uppercase; letter-spacing: 1px; color: #aaaab1; font-size: 10px; margin-bottom: 4px; }
.chapter-equipment > span:last-child { margin-left: auto; font-size: 17px; }
.chapter-equipment:hover { border-top-color: #fff; }
.motion-story.is-enhanced { height: 650svh; }
.is-enhanced .story-sticky { position: sticky; top: var(--story-top, var(--header-height)); min-height: max(530px, calc(100svh - var(--header-height))); display: flex; flex-direction: column; }
.is-enhanced .story-main { flex: 1; width: 100%; }
.is-enhanced .story-copy { display: grid; min-width: 0; padding: 25px 0; }
.is-enhanced .story-chapter { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .32s, transform .32s, visibility .32s; padding: 0; }
.is-enhanced .story-chapter.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.motion-study { min-width: 0; width: 100%; max-width: 800px; justify-self: end; }
.motion-study-label { display: flex; align-items: center; gap: 9px; color: #a4a4ad; font-size: 10px; letter-spacing: 1.4px; }
.motion-cross { font-size: 17px; font-weight: 300; color: #e5e5eb; line-height: 1; }
.motion-edition { margin-left: auto; color: #888891; font-size: 10px; letter-spacing: 1px; }
.motion-stage { position: relative; width: 100%; aspect-ratio: 1.28; max-height: calc(100svh - 245px); min-height: 310px; }
.motion-canvas, .motion-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion-canvas { display: none; }
.motion-fallback { color: #d5d5de; }
.is-ready .motion-canvas { display: block; }
.is-ready .motion-fallback { display: none; }
.signal-panels { position: absolute; left: 72%; right: 0; top: 18%; bottom: 14%; display: flex; flex-direction: column; justify-content: space-between; }
.signal-panel { --signal-color: #f29a8d; border-top: 1px solid #ffffff30; border-left: 1px solid #ffffff14; padding: 10px 0 5px 10px; }
.signal-panel:nth-child(2) { --signal-color: #83baff; }
.signal-panel:nth-child(3) { --signal-color: #e8bd78; }
.signal-header { display: flex; align-items: center; gap: 8px; font-size: clamp(9px, .8vw, 12px); color: #dedee2; }
.signal-index { font: 7px monospace; color: var(--signal-color); }
.signal-panel svg { display: block; width: 100%; max-height: 53px; margin: 9px 0; }
.signal-grid { stroke: #ffffff0c; stroke-width: 1; fill: none; }
.signal-trace { stroke: var(--signal-color); stroke-width: 1.6; fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.signal-panel:nth-child(2) .signal-trace { stroke-dasharray: 3 2; }
.signal-axis-label { fill: #a4a4ad; font: 9px Arial, sans-serif; white-space: pre; }
.signal-caption { display: block; font-size: 10px; letter-spacing: 1.1px; color: #b1b1ba; }
.motion-axis { position: absolute; bottom: 1%; left: 6%; font-size: 10px; color: #84848e; letter-spacing: 1.3px; }
.story-bottomline { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 20px; margin-top: 20px; border-top: 1px solid #ffffff20; }
.story-scroll-hint { font-size: 10px; letter-spacing: 1.3px; color: #9a9aa3; }
.story-scroll-hint > span { font-size: 15px; margin-left: 20px; }
.story-steps { display: flex; align-items: center; gap: 29px; }
.story-steps a { font-size: 12px; color: #777780; padding: 7px 0; }
.story-steps a span { font: 8px monospace; margin-right: 7px; }
.story-steps a[aria-current] { color: #83baff; box-shadow: inset 0 -1px #83baff; }
.story-steps a:hover { color: #d4d4db; }
.story-progress { position: absolute; top: -1px; left: 0; width: 100%; height: 1px; pointer-events: none; }
.story-progress > span { display: block; width: 0; height: 100%; background: #dddde5; }
.home-intro, .home-updates { max-width: 1380px; margin: auto; padding: 48px var(--gutter); }
.home-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.home-intro-heading .home-eyebrow { color: var(--muted); margin-bottom: 26px; }
.home-intro h2 { font-size: 28px; font-weight: 400; }
.home-intro-body p { color: var(--muted); font-size: 16px; line-height: 1.8; }
.home-intro-body p:first-child { font-size: 16px; color: var(--ink); line-height: 1.55; }
.home-topics { grid-column: 1 / -1; }
.home-topics > a { display: grid; grid-template-columns: 40px 1fr 1.2fr 18px; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.home-topics > a:last-child { border-bottom: 1px solid var(--line); }
.home-topic-number { font: 10px monospace; color: var(--muted); }
.home-topics h3 { font-size: 18px; font-weight: 400; letter-spacing: -.5px; }
.home-topics p { font-size: 14px; color: var(--muted); margin: 0; }
.home-topics > a:hover h3 { text-decoration: underline; }
.home-updates { padding-top: 0; }
.home-updates-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 30px; }
.home-updates h2 { font-size: 24px; font-weight: 400; }
.home-update { display: grid; grid-template-columns: 110px 1fr 20px; gap: 30px; align-items: baseline; padding: 23px 0; border-top: 1px solid var(--line); }
.home-update time { color: var(--muted); font: 11px monospace; }
.home-update > span { font-size: 15px; }
.home-update:hover > span { text-decoration: underline; }
@media (max-width: 1100px) {
  .story-chapter h1, .story-chapter h2 { font-size: 34px; }
  .chapter-description { font-size: 17px; }
  .chapter-detail { font-size: 14px; }
  .chapter-equipment { margin-top: 22px; }
  .signal-panels { left: 71%; }
  .signal-panel { padding-left: 7px; }
  .signal-panel svg { margin: 5px 0; }
  .story-main { grid-template-columns: .9fr 1.2fr; }
}
@media (max-width: 760px) {
  .story-sticky { padding: 18px 22px; }
  .story-topline { font-size: 10px; letter-spacing: .8px; }
  .story-topline > span:last-child { display: none; }
  .story-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .is-enhanced .story-sticky { min-height: max(615px, calc(100svh - var(--header-height))); }
  .is-enhanced .story-copy { padding: 24px 0 13px; }
  .story-chapter h1, .story-chapter h2 { font-size: clamp(28px, 7vw, 34px); line-height: 1.04; margin-bottom: 12px; }
  .story-chapter h1 br, .story-chapter h2 br { display: none; }
  .story-chapter .eyebrow { font-size: 10px; letter-spacing: 1.1px; margin-bottom: 12px; }
  .chapter-description { max-width: 520px; font-size: 15px; line-height: 1.55; margin-bottom: 9px; }
  .chapter-detail { display: none; }
  .chapter-equipment { max-width: 100%; margin-top: 12px; padding-top: 11px; font-size: 13px; gap: 11px; }
  .equipment-thumb { width: 32px; height: 32px; padding: 3px; }
  .chapter-equipment small { display: none; }
  .motion-study { max-width: 530px; margin: auto; }
  .motion-stage { aspect-ratio: 1.48; min-height: 255px; max-height: calc(100svh - 430px); }
  .motion-study-label { font-size: 10px; letter-spacing: .8px; }
  .motion-edition { font-size: 10px; }
  .signal-panels { left: 70%; top: 12%; bottom: 15%; }
  .signal-header { font-size: 10px; gap: 4px; }
  .signal-index { font-size: 10px; }
  .signal-panel { padding: 5px 0 4px 6px; }
  .signal-panel svg { max-height: 35px; margin: 5px 0; }
  .signal-caption { font-size: 10px; letter-spacing: .6px; }
  .motion-axis { font-size: 10px; letter-spacing: .7px; bottom: 2%; }
  .story-bottomline { margin-top: 13px; padding-top: 10px; }
  .story-scroll-hint { display: none; }
  .story-steps { justify-content: space-between; width: 100%; gap: 8px; }
  .story-steps a { font-size: 12px; padding: 10px 0; }
  .story-steps a span { font-size: 10px; margin-right: 3px; }
  .home-intro { grid-template-columns: 1fr; gap: 30px; padding-top: 36px; padding-bottom: 36px; }
  .home-intro h2 { font-size: 26px; }
  .home-intro-body p:first-child { font-size: 16px; }
  .home-intro-body p { font-size: 15px; }
  .home-topics > a { grid-template-columns: 24px 1fr 15px; gap: 8px 12px; padding: 22px 0; }
  .home-topics h3 { font-size: 18px; }
  .home-topics p { grid-column: 2; grid-row: 2; }
  .home-topics > a > span:last-child { grid-column: 3; grid-row: 1; }
  .home-updates { padding-bottom: 40px; }
  .home-updates h2 { font-size: 24px; }
  .home-update { grid-template-columns: 1fr 18px; gap: 10px; }
  .home-update time { grid-column: 1 / -1; }
  .home-update > span { font-size: 14px; }
}
@media (max-height: 740px) and (min-width: 761px) {
  .story-chapter h1, .story-chapter h2 { font-size: 40px; margin-bottom: 19px; }
  .story-chapter .eyebrow { margin-bottom: 18px; }
  .chapter-description { font-size: 16px; margin-bottom: 12px; }
  .chapter-detail { font-size: 14px; }
  .chapter-equipment { margin-top: 18px; padding-top: 15px; }
}
/* Keep the scroll-driven stage available in short windows and landscape screens. */
@media (max-height: 700px) and (max-width: 760px), (max-height: 650px) {
  .story-chapter h1, .story-chapter h2 { font-size: 34px; }
}
@media print { .motion-story.is-enhanced { height: auto; } .is-enhanced .story-sticky { position: relative; height: auto; } .is-enhanced .story-copy { display: block; } .is-enhanced .story-chapter { opacity: 1; visibility: visible; } .motion-study, .story-bottomline { display: none; } }