.visualization-note { font-size:.875rem!important; line-height:1.6; margin-top:1.5rem; }
.chapter-nav { display:flex; justify-content:center; gap:4rem; padding:1.7rem 2rem; border-bottom:1px solid #bcb7ad; background:#f7f5f0; }
.chapter-nav a { font-size:1rem; display:flex; align-items:center; gap:1rem; }
.chapter-nav a span { color:#605e57; font-size:.875rem; }
.chapter-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.chapter { padding:6rem 0 1rem; background:#f7f5f0; }
.chapter:nth-of-type(odd) { background:#e9e6df; }
.chapter-inner { width:min(1360px,calc(100% - 5rem)); margin:auto; }
.chapter-heading { margin-bottom:4rem; max-width:850px; }
.project-story { margin-bottom:6rem; }
.story-heading { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:end; margin-bottom:2rem; }
.story-heading h3 { font-size:clamp(2rem,3.8vw,3.5rem); max-width:650px; }
.story-heading p { margin:0; color:#605e57; max-width:530px; font-size:1rem; }
.stage-view,.phase-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; margin:0; display:block; background:#d8d4cb; }
.stage-view>img,.phase-thumb>img { position:absolute; width:100%; height:300%; max-width:none; object-fit:fill; display:block; left:0; }
.phase-0>img { top:0; }.phase-1>img { top:-100%; }.phase-2>img { top:-200%; }
.stage-caption { position:absolute; bottom:1.25rem; left:1.25rem; background:#f7f5f0; color:#292a28; padding:.6rem 1rem; font-size:.875rem; }
.phase-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:1.2rem; }
.phase-button { border:0; border-bottom:2px solid transparent; background:transparent; padding:0 0 .75rem; color:#292a28; cursor:pointer; text-align:left; }
.phase-button[aria-pressed=true] { border-bottom-color:#292a28; }
.phase-button[aria-pressed=true] .phase-label { font-weight:700; }
.phase-thumb { aspect-ratio:16/9; }
.phase-thumb>img { opacity:.8; transition:opacity .2s; }
.phase-button:hover img,.phase-button[aria-pressed=true] img { opacity:1; }
.phase-label { display:flex; align-items:center; gap:1rem; padding-top:.75rem; font-size:1rem; }
.phase-label>span { font-size:.875rem; font-weight:400; color:#605e57; }
.story-bottom { display:flex; align-items:center; justify-content:space-between; gap:2rem; border-top:1px solid #bcb7ad; padding-top:1.2rem; margin-top:1.25rem; }
.story-bottom p { margin:0; color:#605e57; font-size:.9rem; }
.story-bottom .text-link { color:#454640; flex-shrink:0; }
@media(max-width:760px) { .chapter-nav { gap:1rem; padding:1rem; justify-content:space-between; }.chapter-nav a { font-size:.875rem; gap:.3rem; }.chapter-nav a span { display:none; }.chapter { padding:3.5rem 0 .5rem; }.chapter-inner { width:calc(100% - 2rem); }.chapter-heading { margin-bottom:2.5rem; }.story-heading { grid-template-columns:1fr; gap:1rem; margin-bottom:1.5rem; }.project-story { margin-bottom:4rem; }.stage-caption { bottom:.6rem; left:.6rem; font-size:.8rem; padding:.4rem .6rem; }.phase-controls { gap:.5rem; margin-top:.65rem; }.phase-label { font-size:.8rem; gap:.4rem; align-items:start; }.phase-label>span { display:none; }.story-bottom { flex-direction:column; align-items:start; gap:.8rem; } }

.phase-heading { margin:1.5rem 0 .5rem; font-size:1rem; font-weight:600; color:#292a28; }

.chapter-nav { flex-wrap:wrap; }
.phase-button,.phase-label { min-width:0; overflow-wrap:anywhere; }
.phase-controls { align-items:start; }