/* Phone and tablet refinements. Keep lesson text and diagrams at their
   natural size; short screens use a touch player instead of clipped pinning. */
.story-play, .story-player-hint { display: none; }

@media (max-width: 900px) {
  .wrap, .wrap-wide {
    width: min(calc(100% - max(var(--gutter), env(safe-area-inset-left)) - max(var(--gutter), env(safe-area-inset-right))), var(--wrap));
  }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  body.nav-open .site-header { position: fixed; inset: 0 0 auto; }
  html.js .primary-nav {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: #080808;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
  html.js .primary-nav ul a { font-size: clamp(1.5rem, 4vw, 2rem); }
  .subject-switcher a, .seg > button, .tool-btn, .btn-tag { min-height: 44px; }
  .hero-stage > *, .lab-grid > *, .sorter-grid > *, .story-stage > * { min-width: 0; }
  .story-dots > button, .story-dots > button[aria-current="step"] { width: 44px; flex: 0 0 44px; }
  .story-dots > button[aria-current="step"]::before { width: 28px; }
  .subnav-links a { min-height: 44px; }
  input[type="range"] { min-height: 44px; }
  .term-body, .code-wrap, .code-block, .trace-editor, .trace-console {
    max-width: 100%; overscroll-behavior-x: contain;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: clamp(16px, 5.6vw, 24px);
    --header-h: calc(64px + env(safe-area-inset-top));
    --fs-h2: clamp(1.875rem, 8.5vw, 2.75rem);
    --section-y: clamp(56px, 16vw, 72px);
  }
  .site-header { padding-top: env(safe-area-inset-top); }
  .header-inner { min-height: 64px; gap: 12px; }
  .brand { gap: 10px; }
  .landing-hero-inner {
    min-height: min(740px, calc(100svh - var(--header-h)));
    padding-top: clamp(40px, 7svh, 68px);
  }
  .hero-eyebrow { text-align: center; line-height: 1.5; }
  .kinetic-title { font-size: clamp(2rem, 11.5vw, 4.4rem); }
  .hero-title-line, .wordmark .kinetic-text { white-space: nowrap; }
  .hero-bottom { padding-block: 28px 20px; }
  .hero-motion { min-height: 44px; }
  .hero-footnote { line-height: 1.6; }
  .page-hero { padding-top: 36px; padding-bottom: 48px; }
  .page-hero h1 { font-size: clamp(2rem, 9.8vw, 2.75rem); }
  .wordmark { font-size: clamp(2rem, 10.3vw, 4rem); }
  .wm-english { font-size: clamp(3.75rem, 19.5vw, 7rem); }
  .wm-cs { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  .hero-stage { padding: 22px 14px; }
  .hero-stage-wrap { margin-top: 36px; }
  .contents-list a { grid-template-columns: auto minmax(8px, 1fr) minmax(0, auto); gap: 8px; font-size: .9375rem; }
  .contents-label { overflow-wrap: anywhere; }
  .subject-switcher { gap: 4px; }
  .subject-switcher a { padding-inline: 8px; line-height: 1.25; }
  .subject-portal { padding: 22px; }
  .portal-art { margin-inline: -22px; }
  .code-art { padding-inline: 24px; }
  .code-art code { font-size: clamp(.75rem, 3.6vw, .9375rem); }
  .thinking-art { padding: 24px 20px; min-height: 300px; }
  .thinking-word { font-size: clamp(1.5rem, 7.1vw, 2.75rem); }
  .tutor-evidence { flex-wrap: wrap; gap: 24px; }
  .tutor-evidence strong { font-size: 2.5rem; }
  .lab-head { padding-inline: 16px; }
  .lab-body { padding: 20px 16px 24px; }
  .lab-controls { gap: 8px; }
  .slider { grid-template-columns: 22px minmax(0, 1fr) 48px; gap: 8px; }
  .inquiry-form, .contact-card, .learner-panel { padding: 24px 18px; }
  .contact-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .contact-method-body, .contact-facts dd { overflow-wrap: anywhere; }
  .form-actions .btn { white-space: normal; }
  .utility-actions { gap: 12px; }
  .site-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}

@media screen and (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .motion-ok .story.is-overflowing .story-track,
  .motion-ok .story.is-player .story-track { height: auto; }
  .motion-ok .story.is-overflowing .story-stage,
  .motion-ok .story.is-player .story-stage { position: relative; top: auto; height: auto; }
  .motion-ok .story.is-pinned .story-stage {
    grid-template-rows: auto auto auto; align-content: center; gap: 20px;
  }
  .motion-ok .story.is-pinned .story-controls { flex-wrap: nowrap; gap: 8px; }
  .motion-ok .story.is-pinned .story-skip { min-width: 0; padding-inline: 10px; font-size: .75rem; text-align: center; }
  .motion-ok .story.is-pinned .story-steps > li:not(.is-active) { visibility: hidden; }
  .motion-ok .story.is-player .story-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "visual" "steps";
    gap: 24px; padding-block: 24px 32px;
  }
  .motion-ok .story.is-player .story-visual { grid-area: visual; max-height: none; overflow: visible; touch-action: pan-y; }
  .motion-ok .story.is-player .trace-fig { overflow: hidden; }
  .motion-ok .story.is-player .story-steps { grid-area: steps; display: grid; }
  .motion-ok .story.is-player .story-steps > li { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
  .motion-ok .story.is-player .story-steps > li.is-active { visibility: visible; opacity: 1; }
  .motion-ok .story.is-player .story-controls {
    grid-area: controls; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .motion-ok .story.is-player .story-play { display: inline-flex; justify-content: center; min-width: 112px; margin-right: auto; }
  .motion-ok .story.is-player .story-player-hint { display: block; order: 3; flex: 1 1 100%; color: var(--text-3); font-size: .8125rem; }
  .motion-ok .story.is-player .story-skip { display: none; }
  .motion-ok .story.is-player .story-rail { display: none; }
}

@media (max-width: 479px) {
  .essay-fig { --ess-lh: 24px; padding: 24px 16px 24px 40px; font-size: .875rem; }
  .essay-fig mark.tp-hl { white-space: normal; }
  .ess-insert { padding-left: .7em; }
  .work { font-size: 1.0625rem; row-gap: .1em; }
  .work .spark-note { padding: 10px 12px; font-size: .875rem; }
  .trace-grid .slip { font-size: .8125rem; padding: 10px; }
  .trace-fig .frame { font-size: .6875rem; }
  .story-steps > li { padding-left: 48px; }
  .story-steps h3 { font-size: 1.1875rem; line-height: 1.3; }
  .story-steps p { font-size: .9375rem; line-height: 1.6; }
  .hero-pledge { padding: 16px 14px; gap: 10px; font-size: .9375rem; }
  .pledge-key { white-space: normal; }
}

@media (max-height: 500px) and (max-width: 900px) {
  .landing-hero-inner { min-height: auto; padding-top: 36px; }
  .landing-hero .hero-actions { flex-direction: row; }
  .hero-bottom { margin-top: 24px; }
  html.js .primary-nav { padding-top: 12px; }
  html.js .primary-nav ul a { padding-block: 10px; font-size: 1.25rem; }
  html.js .nav-cta { margin-top: 20px; }
}

@media print { .story-play, .story-player-hint { display: none !important; } }