/* The long story is enabled only when its controller is ready and the viewport can hold it. */
.hero-story{height:auto}.hero-sticky{position:relative;min-height:700px}
.journey-scroll .hero-story{height:1324svh}.journey-scroll .hero-sticky{position:sticky;top:0;height:100svh;min-height:0}
.hero-sticky{grid-template-columns:.85fr 1.35fr;padding-bottom:95px;column-gap:3%;overflow:hidden}
.hero-copy{padding:20px 0}.model-panel{padding:28px 0 10px}.model-viewport{min-height:290px;margin:0 -2vw}
.hero-copy h1{font-size:clamp(4rem,6.4vw,8rem)}
.journey-start{display:flex;flex-wrap:wrap;gap:8px 20px;background:none;border:0;border-top:1px solid var(--line);text-align:left;margin-top:34px;padding:18px 0 0;font-size:.875rem;max-width:365px;line-height:1.6}
.journey-start .mono{flex-basis:100%;color:var(--green);font-size:.6875rem}.journey-start>span:last-child{margin-left:auto}
.journey-copy h2{font-size:clamp(2.9rem,4.7vw,6rem);font-weight:500;line-height:1.06;letter-spacing:-.07em;margin:28px 0 24px;max-width:620px;text-wrap:balance}
#stage-description{font-size:1rem;color:var(--muted);line-height:1.85;max-width:440px}
#stage-details{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--green);font-size:.75rem}
#stage-details li::before{content:'+';font-family:var(--mono);margin-right:7px}
#chapter-steps{border-top:1px solid var(--line);max-width:425px}
#chapter-steps button{display:flex;align-items:center;gap:19px;width:100%;min-height:46px;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;padding:10px 2px;font-size:.875rem;color:var(--muted);transition:color .2s,padding .2s}
#chapter-steps button span{font-family:var(--mono);font-size:.6875rem;color:#829077}
#chapter-steps button[aria-current]{color:var(--ink);font-weight:600;padding-left:10px;background:linear-gradient(90deg,#5775490b,transparent);border-left:2px solid var(--green)}
#chapter-steps button[aria-current] span{color:var(--green)}
.back-to-cover{background:none;border:0;padding:16px 0;font-size:.75rem;color:var(--muted)}
.model-caption{padding:8px 12px 12px;gap:12px}.model-caption .mono{font-size:.6875rem;letter-spacing:.025em}.concept-label{font-size:.6875rem;white-space:nowrap}
.anatomy-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 12px 12px;min-height:44px}
.anatomy-controls .mono{font-size:.625rem;color:var(--muted);margin-right:auto}
.anatomy-controls button{background:transparent;border:1px solid var(--line);padding:8px 11px;font-size:.75rem;border-radius:2px}
.anatomy-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.model-controls{padding:8px 12px 0}.story-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-navigation button{min-height:40px;padding:7px 0;background:none;border:0;font-size:.875rem}.story-navigation button:first-child{min-width:40px;text-align:left;font-size:1.25rem}.story-navigation button:disabled{opacity:.35}
.story-navigation label{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--muted)}
.control-bottom,.control-bottom button{font-size:.75rem;min-height:30px}.model-controls input{margin:0;height:30px}
.hero-bottom{align-items:center;bottom:20px;padding-top:0;gap:24px;font-family:Manrope,sans-serif}
.chapter-nav{display:grid;grid-template-columns:repeat(6,1fr);flex:1;gap:12px}
.chapter-nav button{display:flex;gap:9px;align-items:center;min-height:58px;border:0;border-top:2px solid transparent;background:transparent;text-align:left;padding:12px 0;font-size:.8rem;color:var(--muted)}
.chapter-nav button span{font-family:var(--mono);font-size:.625rem;color:#8b9781}.chapter-nav button[aria-current]{border-top-color:var(--green);color:var(--ink)}.chapter-nav button[aria-current] span{color:var(--green)}
.hero-bottom>a{white-space:nowrap;font-size:.75rem;margin:0}.model-tag{font-size:.625rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#model-unavailable{font-size:.75rem;line-height:1.6;color:var(--muted);padding:8px 12px}
@media(min-width:1800px){.hero-sticky{max-width:2000px}}
@media(min-width:761px) and (max-height:850px){.hero-copy h1{font-size:5.8vw}.journey-copy h2{font-size:3.8vw;margin:18px 0}.hero-intro,#stage-description{font-size:.9375rem;line-height:1.7}.journey-start{margin-top:22px}.hero-copy .eyebrow{font-size:.625rem}#stage-details{margin:18px 0}#chapter-steps button{min-height:40px}.model-panel{padding-top:20px}.model-viewport{min-height:240px}}
@media(min-width:761px) and (max-width:1100px){.hero-sticky{grid-template-columns:.9fr 1.1fr;gap:2%;padding-bottom:110px}.hero-copy h1{font-size:6.1vw}.journey-copy h2{font-size:4.6vw}.chapter-nav{gap:6px}.chapter-nav button{font-size:.6875rem;gap:6px;flex-direction:column;align-items:flex-start}.story-navigation label{display:none}.model-caption{flex-wrap:wrap;gap:4px}.anatomy-controls .mono{display:none}.anatomy-controls{justify-content:flex-start;padding-inline:0}.model-controls{padding-inline:0}.hero-bottom{gap:15px}}
@media(max-width:760px){
  .hero-sticky{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:30px var(--pad) 20px;gap:0;overflow:hidden}
  .hero-copy{padding:0}.hero-copy h1{font-size:clamp(3.3rem,11.2vw,5rem);margin:18px 0}.hero-intro{font-size:1rem}.journey-start{margin-top:22px;padding-top:14px;max-width:none;width:100%;font-size:.875rem}
  .journey-copy h2{font-size:clamp(2.7rem,9vw,4rem);margin:20px 0 17px;max-width:550px}#stage-description{font-size:1rem;line-height:1.75;max-width:560px}#stage-details{margin:20px 0;gap:9px 15px;font-size:.75rem}
  #chapter-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:8px}#chapter-steps button{display:block;min-height:78px;padding:12px 5px;font-size:.75rem;line-height:1.5;border-left:0}#chapter-steps button span{display:block;margin-bottom:4px}#chapter-steps button[aria-current]{padding:12px 5px;border-left:0;border-bottom:2px solid var(--green)}
  .back-to-cover{padding:14px 0 5px}.model-panel{height:auto;min-height:0;padding:22px 0 0}.model-topline{font-size:.625rem}.model-viewport{height:clamp(280px,83vw,520px);min-height:0;flex:none;margin:0 -18px}.model-caption{padding:5px 0 12px}.model-caption .mono,.concept-label{font-size:.625rem}.model-caption{flex-wrap:wrap;gap:6px}.model-tag{font-size:.625rem}
  .anatomy-controls{padding:0 0 12px}.anatomy-controls .mono{font-size:.5625rem}.anatomy-controls button{min-height:40px;padding:8px 10px}.model-controls{padding:5px 0 0}.story-navigation label{font-size:.5625rem}.control-bottom{font-size:.6875rem}.story-navigation button{font-size:.875rem}
  .hero-bottom{position:relative;left:auto;right:auto;bottom:auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px;padding-top:0}.chapter-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}.chapter-nav button{min-height:46px;font-size:.75rem;gap:7px}.hero-bottom>a{display:block;text-align:right;padding:8px 0;font-size:.75rem}
}
@media(max-width:360px){.anatomy-controls .mono,.story-navigation label{display:none}.anatomy-controls{justify-content:flex-start}.journey-copy h2{font-size:2.6rem}.hero-copy h1{font-size:3.1rem}}
@media(prefers-reduced-motion:reduce){.hero-sticky{height:auto;min-height:700px}.model-panel{min-height:590px}.hero-bottom{position:relative;grid-column:1/-1;left:auto;right:auto;bottom:auto}.hero-sticky{padding-bottom:20px}@media(max-width:760px){.model-panel{min-height:0}.hero-sticky{min-height:0}}}
/* Readable controls at every breakpoint; only diagram metadata uses the smaller size. */
.journey-start .mono,.hero-copy .eyebrow,.model-topline,.model-caption .mono,.concept-label,.anatomy-controls .mono,.story-navigation label,.model-tag,.chapter-nav button span,#chapter-steps button span{font-size:.75rem}
.chapter-nav button,#chapter-steps button,.back-to-cover,.anatomy-controls button,.control-bottom,.control-bottom button,.hero-bottom>a,#stage-details{font-size:.875rem}
.hero-intro,#stage-description{font-size:1rem}
.mobile-stage-picker{display:none}
@media(min-width:761px) and (max-width:1100px){.chapter-nav button{font-size:.8125rem}.chapter-nav button span{font-size:.75rem}.hero-bottom{gap:10px}}
@media(max-width:760px){.story-navigation label,.anatomy-controls .mono{display:none}.anatomy-controls{justify-content:flex-start}.chapter-nav button{font-size:.8125rem;gap:5px}.model-caption .mono{max-width:none}#chapter-steps button{font-size:.8125rem}.control-bottom{font-size:.8125rem}.model-tag{font-size:.75rem}}
@media(max-width:760px){
  .mobile-stage-picker{display:block;margin:18px 0 12px}.mobile-stage-picker label{display:block;font-size:.875rem;color:var(--green);margin-bottom:9px}.mobile-stage-picker select{width:100%;min-height:50px;padding:12px 35px 12px 13px;border:1px solid #a8b99a;border-radius:5px;background:#f9faf5;color:var(--ink);font:inherit;font-size:1rem;text-overflow:ellipsis}
  .model-panel{scroll-margin-top:calc(92px + env(safe-area-inset-top,0px))}.story-navigation button{min-height:48px}.story-navigation button:first-child{min-width:48px}.anatomy-controls button{min-height:46px}.model-controls input[type=range]{height:44px}
  .model-controls input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px}.model-controls input[type=range]::-moz-range-thumb{width:16px;height:16px}
}