/* V5: all rules are scoped to the opening story. */
#story .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%}
#story .story-visual{display:none}
#story .story-step{min-height:0;opacity:1;padding:38px 0 55px;transition:none}
#story .story-step p{max-width:560px}
#story .story-step h3{overflow-wrap:anywhere}
#story .story-scene{display:flex;flex-direction:column;position:relative;background:#151411;border:1px solid #615442;margin:0 0 28px;overflow:hidden}
#story .story-scene img{opacity:1;filter:none;width:100%;height:100%;object-fit:contain}
#story .story-photo{min-height:0;flex:1;background:#111;overflow:hidden}
#story .story-photo img{max-height:540px}
#story .story-scene figcaption{position:relative;flex-shrink:0;padding:20px 22px;background:#181510;border-top:1px solid #615442}
#story .story-visual-title{display:block;font:clamp(28px,3.1vw,46px)/1.05 Anton,Impact,sans-serif;color:#f1e9da;letter-spacing:.015em}
#story .story-caption{display:block;margin-top:12px;font-size:14px;line-height:1.8;color:#f0e7d8}
#story .story-caption small{display:block;margin-top:6px;font:12px/1.7 'Noto Sans JP',sans-serif;color:#c9bbaa;overflow-wrap:anywhere}
#story .story-six{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
#story .story-person{min-width:0;min-height:0;display:flex;flex-direction:column;background:#0d0d0c;border:1px solid #524636}
#story .story-person img{min-height:0;flex:1;aspect-ratio:2/1}
#story .story-person span{padding:4px 9px;font:13px/1.5 monospace;color:#f2dbc2;border-top:1px solid #524636}
#story .story-equation{display:block;font:clamp(45px,6vw,76px)/1 Anton,Impact,sans-serif;color:#f1e9da}
#story .story-equation i{color:#ffac64;font-style:normal}
#story .scene-bugz{background:#111;border-color:#66615a}
#story .scene-bugz figcaption{background:#161616;border-color:#66615a}
#story .scene-bugz .story-visual-title{color:#dedad2}
#story .scene-bugz .story-caption,#story .scene-bugz .story-caption small{color:#d4cec5}
#story .scene-bugz .story-photo{display:flex;align-items:center;padding:24px 0}
#story .story-promise{flex:1;min-height:0;display:grid;grid-template-columns:.8fr 22px 1.2fr;gap:12px;align-items:center;padding:28px 18px}
#story .story-before,#story .story-after{min-width:0;display:flex;flex-direction:column;gap:12px}
#story .story-promise img{height:auto}
#story .story-document-label{font:12px/1.5 monospace;letter-spacing:.08em;color:#efbc86}
#story .story-before img{border:1px solid #bba17e}
#story .story-bridge{font:26px/1 monospace;color:#ffac64;text-align:center}
#story .story-release{position:relative;min-height:0;flex:1;background:#111;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.34fr);gap:12px;align-items:center;padding:16px}
#story .story-release>img:first-child{object-fit:contain;height:auto}
#story .story-release .story-record{position:static;width:100%;height:auto;align-self:end;margin-bottom:12px;box-shadow:0 4px 20px #000b;border:1px solid #c59467}
#story .scene-release .story-visual-title{color:#ffac64}
#story .scene-release .story-caption{font:13px/1.7 monospace;letter-spacing:.025em}
#story .story-screen-top{display:flex;justify-content:space-between;gap:15px;padding:14px 18px;border-bottom:1px solid #615442;font:12px/1.5 monospace;letter-spacing:.1em;color:#e0c1a0;background:#15120f}
#story .story-counter{color:#ffbc80;white-space:nowrap}
#story .story-meter{display:flex;gap:5px;padding:14px 18px;background:#15120f;border-top:1px solid #615442}
#story .story-meter span{height:3px;flex:1;background:#645440}
#story .story-meter .is-current{background:#ffc48a}
#story .story-scenes-nav{display:flex;gap:8px;padding-top:12px}
#story .story-scenes-nav a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #77634c;background:#17130e;font:14px monospace;text-decoration:none;color:#e7c7a5}
#story .story-scenes-nav a[aria-current="step"]{background:#ec9a55;color:#15100c;border-color:#ec9a55}
#story .story-scenes-nav a:hover{border-color:#ffbc80;color:#fff}
#story .story-scenes-nav a[aria-current="step"]:hover{color:#15100c}
@media(min-width:768px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
 #story.story-ready .story-visual{display:block;position:sticky;top:100px;height:auto;align-self:start;border:0;background:none;overflow:visible}
 #story.story-ready .story-screen{height:min(660px,calc(100svh - 178px));min-height:430px;border:1px solid #615442;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#151411;overflow:hidden}
 #story.story-ready .story-panels{position:relative;min-height:0}
 #story.story-ready .story-panels>.story-scene{position:absolute;inset:0;margin:0;border:0;opacity:0;visibility:hidden;transition:opacity .5s ease;pointer-events:none}
 #story.story-ready .story-panels>.story-scene.is-current{opacity:1;visibility:visible}
 #story.story-ready .story-panels>.scene-bugz,#story.story-ready .story-panels[data-quiet="true"]>.story-scene{transition:none}
 #story.story-ready .story-step{min-height:max(650px,90svh);padding:60px 0;opacity:.7;transition:opacity .35s ease}
 #story.story-ready .story-step.active,#story.story-ready .story-step:focus-within{opacity:1}
 #story.story-ready .story-step>.story-scene{display:none}
 #story.story-ready .story-step .story-num{font-size:17px}
 #story.story-ready .story-step h3{font-size:clamp(34px,4vw,58px)}
 #story.story-ready .story-step .jp-title{font-size:clamp(23px,2.5vw,34px)}
 #story.story-ready .story-scenes-nav a{transition:background-color .2s ease}
}
@media(max-width:767px),(max-height:719px),(prefers-reduced-motion:reduce){
 #story .story{display:block}
 #story .story-visual{display:none}
 #story .story-step{min-height:0;opacity:1;display:block}
 #story .story-step h3{margin-bottom:22px}
 #story .story-scene{max-width:600px}
 #story .story-photo img{max-height:440px}
 #story .story-six{grid-template-rows:repeat(3,auto);gap:8px;padding:10px}
 #story .story-person img{flex:none;height:auto}
 #story .story-visual-title{font-size:clamp(26px,7vw,42px)}
 #story .story-promise{padding:30px 12px;gap:9px;grid-template-columns:.8fr 20px 1.2fr}
 #story .story-document-label{font-size:11px;letter-spacing:0}
 #story .story-release>img:first-child{height:auto}
 #story .story-caption{font-size:14px}
 #story .story-scene figcaption{padding:18px}
}
/* No JavaScript: each scene stays with its own readable text. */
#story:not(.story-ready) .story{display:block}
#story:not(.story-ready) .story-steps{max-width:900px;margin:auto}
#story:not(.story-ready) .story-scene{max-width:600px}
@media(prefers-reduced-motion:reduce){#story *,#story *:before,#story *:after{transition:none!important;animation:none!important}}
