/* Plain HTML remains readable when the scroll presentation is unavailable. */
.scroll-story { --story-gutter:clamp(24px,6vw,88px); --story-gap:clamp(32px,6vw,88px); position:relative; background:#fff; }
.story-stage { position:relative; }
.story-beat { position:relative; max-width:1200px; margin:auto; padding:96px var(--story-gutter); }
.story-big { font-size:clamp(32px,4.7vw,68px); line-height:1.65; font-weight:700; letter-spacing:.025em; }
.story-medium { font-size:clamp(26px,3.4vw,50px); line-height:1.8; font-weight:600; letter-spacing:.025em; }
.story-huge { font-size:clamp(42px,6vw,88px); line-height:1.55; font-weight:800; }
.story-aside { font-size:16px; line-height:1.9; letter-spacing:.04em; }
.story-small { font-size:14px; line-height:1.9; color:var(--muted); }
.phone-break { display:none; }
.thinking-line { width:210px; height:70px; margin:24px 0 0 12%; fill:none; stroke:#595959; stroke-width:1.2; }
.story-ordinary { position:relative; display:inline-block; }
.story-ordinary svg { position:absolute; width:114%; max-width:none; height:130%; left:-7%; top:-9%; fill:none; stroke:var(--orange); stroke-width:1.4; }
.story-emphasis { text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:.22em; }
.story-speaker { font:700 14px/1.6 Arial,sans-serif; letter-spacing:.12em; margin-bottom:24px; color:var(--orange); }
.semantic-words,.semantic-relations { list-style:none; padding:0; margin:30px 0; line-height:2.6; }
.semantic-caption { margin-top:26px; }
.semantic-web { border-top:1px solid var(--ink); padding:30px 0; margin:30px 0; }
.finale-title { font-weight:700; font-size:clamp(30px,3.5vw,52px); line-height:1.6; letter-spacing:.02em; }
.finale-brand { font:900 clamp(28px,3.1vw,44px)/1.3 Arial,sans-serif; letter-spacing:-.055em; margin:22px 0; white-space:nowrap; }
.finale-note { font-size:16px; line-height:1.9; }
.story-destination { margin-top:28px; }
.story-destination a { display:inline-flex; align-items:center; min-height:48px; padding:8px 0; border-bottom:1px solid var(--ink); text-decoration:none; font-size:16px; }
.story-destination p { margin-top:10px; font-size:14px; line-height:1.8; color:var(--muted); }

.story-active { height:1925vh; height:var(--story-height,1925svh); }
.story-active .story-stage { position:sticky; top:0; height:100vh; height:100svh; isolation:isolate; }
.story-active .story-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.story-visual { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.story-visual .story-beat { position:absolute; inset:0; max-width:none; margin:0; padding:64px var(--story-gutter) 80px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; opacity:0; transition:opacity .12s linear; }
.story-visual .story-beat>p { max-width:100%; }
.story-visual :is(.beat-hesitate,.beat-invite,.beat-talk) { padding-inline:max(var(--story-gutter),calc((100% - 860px)/2)); align-items:flex-start; text-align:left; }
.story-visual .beat-doubt { color:var(--muted); }
.story-visual .story-aside { position:absolute; top:10%; left:var(--story-gutter); right:var(--story-gutter); }
.story-visual .story-small { position:absolute; bottom:10%; left:var(--story-gutter); right:var(--story-gutter); }
.story-visual :is(.semantic-words,.semantic-relations,.semantic-caption,.semantic-web) { display:none; }

/* Each diagram has its own layout area; text never uses scale transforms. */
.story-composition { position:absolute; inset:22% var(--story-gutter) 20%; display:grid; align-items:center; opacity:0; pointer-events:none; transition:opacity .12s linear; }
.story-atom { position:relative; min-width:0; max-width:100%; font-size:18px; line-height:1.8; letter-spacing:.02em; text-align:center; }
.story-atom.atom-1 { font-weight:600; }
.story-composition[data-layout="scattered"] { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:20px 50px; }
.story-composition[data-layout="scattered"] .atom-1 { grid-column:2; grid-row:1; }
.story-composition[data-layout="scattered"] .atom-2 { grid-column:1; grid-row:2; }
.story-composition[data-layout="scattered"] .atom-3 { grid-column:2; grid-row:2; }
.story-composition[data-layout="scattered"] .atom-4 { grid-column:1; grid-row:3; }
.story-composition[data-layout="scattered"] .atom-5 { grid-column:2; grid-row:3; }
.story-composition[data-layout="relations"] { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); gap:20px 8%; }
.story-composition[data-layout="relations"] .story-atom { grid-column:1; text-align:left; }
.story-composition[data-layout="relations"] .atom-0,.meaning-0 { grid-row:1; }
.story-composition[data-layout="relations"] .atom-1,.meaning-1 { grid-row:2; }
.story-composition[data-layout="relations"] .atom-2,.meaning-2 { grid-row:3; }
.relation-meaning { position:relative; grid-column:2; min-width:0; font-size:clamp(22px,2.5vw,34px); line-height:1.7; text-align:left; }
.relation-meaning span { border-bottom:2px solid var(--orange); }
.story-composition[data-layout="arranged"] { align-content:center; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 30px; }
.story-composition[data-layout="arranged"] .atom-1 { grid-column:1/-1; grid-row:1; font-size:clamp(28px,3.2vw,46px); }
.story-composition[data-layout="arranged"] .atom-0 { grid-column:1; grid-row:2; }
.story-composition[data-layout="arranged"] .atom-2 { grid-column:2; grid-row:2; }
.story-composition:is([data-layout="web"],[data-layout="finale"]) { grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:30px; padding:72px 6% 66px; }
.story-composition:is([data-layout="web"],[data-layout="finale"]) .story-atom { z-index:1; text-align:left; }
.story-composition:is([data-layout="web"],[data-layout="finale"]) .atom-1 { grid-column:1/-1; grid-row:1; font-size:clamp(26px,3.2vw,46px); line-height:1.7; }
.story-composition:is([data-layout="web"],[data-layout="finale"]) .atom-0 { grid-column:1; grid-row:2; }
.story-composition:is([data-layout="web"],[data-layout="finale"]) .atom-2 { grid-column:2; grid-row:2; }
.story-composition:is([data-layout="web"],[data-layout="finale"]) :is(.atom-0,.atom-2) { padding-top:12px; border-top:1px solid var(--orange); }
.web-paper { position:absolute; inset:0; background:#fff; border:1px solid var(--ink); }
.web-topline { position:absolute; top:20px; left:6%; right:6%; font-size:14px; line-height:1.6; padding-bottom:10px; border-bottom:1px solid var(--line); }
.web-bottomline { position:absolute; bottom:20px; left:6%; right:6%; font-size:12px; line-height:1.6; }
.web-stroke,.web-side-note,.web-rule { display:none; }

/* The finale's headline, copy and link share one normal flow. */
.story-exit { position:absolute; inset:0; z-index:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--story-gap); align-items:center; padding:48px var(--story-gutter) 88px; opacity:0; pointer-events:none; }
.story-exit .finale-copy { grid-column:2; width:100%; min-width:0; }
.story-exit .story-destination a { pointer-events:auto; }
.story-exit[inert] .story-destination a { pointer-events:none; }
.story-composition[data-layout="finale"] { left:var(--story-gutter); right:calc(50% + var(--story-gap)/2); top:25%; bottom:25%; padding:60px 26px 50px; gap:24px 22px; }
.story-composition[data-layout="finale"] .atom-1 { font-size:clamp(22px,2.5vw,34px); }
.story-composition[data-layout="finale"] :is(.atom-0,.atom-2) { font-size:14px; }
.story-composition[data-layout="finale"] .web-topline { font-size:12px; }
.story-composition[data-layout="finale"] .web-bottomline { font-size:11px; }

.flag-menu { position:fixed; z-index:30; bottom:max(18px,env(safe-area-inset-bottom)); right:max(18px,env(safe-area-inset-right)); }
.flag-menu>summary { width:52px; height:52px; padding:12px 14px; display:flex; align-items:center; justify-content:center; cursor:pointer; list-style:none; background:#fff; color:var(--orange); border-radius:50%; }
.flag-menu>summary::-webkit-details-marker { display:none; }
.flag-menu>summary::marker { content:''; }
.flag-menu>summary .brand-flag { width:23px; height:28px; margin:0; }
.flag-menu>summary:hover { background:#f4f4f4; }
.flag-menu[open]>summary { outline:1px solid var(--line); }
.flag-menu>nav { position:absolute; right:0; bottom:68px; width:min(340px,calc(100vw - 36px)); max-height:calc(100svh - 110px); overflow:auto; overscroll-behavior:contain; padding:26px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 40px #1717170d; }
.flag-menu nav>p { margin-bottom:14px; font-size:14px; color:var(--muted); }
.flag-menu nav>a { display:flex; align-items:center; min-height:48px; padding:8px 0; text-decoration:none; font-size:16px; }
.flag-menu nav a:hover { text-decoration:underline; }
.flag-menu-foot { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:2px; }
.flag-menu-foot a { display:flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; }
.scroll-story [hidden] { display:none!important; }

/* The ordinary information page keeps its existing content and rhythm. */
.story-bridge { padding:100px var(--gutter) 130px; max-width:1500px; margin:auto; }
.story-bridge>p:first-child { font-size:14px; letter-spacing:.08em; margin-bottom:30px; }
.story-bridge :is(h1,h2) { font-size:clamp(32px,4vw,60px); margin-bottom:40px; }
.story-bridge .bridge-copy { max-width:650px; margin-left:auto; line-height:2.25; }

@media(max-width:800px) {
  .scroll-story { --story-gutter:clamp(24px,7vw,48px); --finale-preview-height:clamp(130px,24svh,200px); --finale-top:clamp(16px,4svh,36px); }
  .phone-break { display:block; }
  .desktop-break { display:none; }
  .story-beat { padding:72px var(--story-gutter); }
  .story-big { font-size:clamp(28px,7.7vw,44px); line-height:1.8; letter-spacing:.01em; }
  .story-medium { font-size:clamp(23px,6.2vw,36px); line-height:1.85; letter-spacing:.01em; }
  .story-huge { font-size:clamp(38px,10.5vw,62px); line-height:1.6; }
  .story-visual .story-beat { padding:56px var(--story-gutter) 80px; }
  .story-visual :is(.beat-hesitate,.beat-invite,.beat-talk) { padding-inline:var(--story-gutter); }
  .story-visual .story-aside { top:9%; font-size:14px; }
  .story-visual .story-small { bottom:12%; font-size:14px; }
  .story-visual :is(.beat-hesitate,.talk-third) .story-medium { font-size:clamp(22px,5.9vw,34px); }
  .thinking-line { width:170px; height:65px; }
  .story-composition { inset:20% var(--story-gutter) 23%; }
  .story-atom { font-size:16px; line-height:1.7; letter-spacing:0; }
  .story-composition[data-layout="scattered"] { grid-template-columns:1fr; grid-template-rows:repeat(6,minmax(0,1fr)); gap:12px; }
  .story-composition[data-layout="scattered"] .story-atom { grid-column:1; grid-row:auto; }
  .story-composition[data-layout="relations"] { grid-template-columns:1fr; grid-template-rows:repeat(3,auto auto); align-content:space-between; gap:6px; }
  .story-composition[data-layout="relations"] .story-atom { grid-column:1; text-align:center; }
  .story-composition[data-layout="relations"] .relation-meaning { grid-column:1; font-size:22px; text-align:center; }
  .story-composition[data-layout="relations"] .atom-0 { grid-row:1; }
  .story-composition[data-layout="relations"] .meaning-0 { grid-row:2; }
  .story-composition[data-layout="relations"] .atom-1 { grid-row:3; }
  .story-composition[data-layout="relations"] .meaning-1 { grid-row:4; }
  .story-composition[data-layout="relations"] .atom-2 { grid-row:5; }
  .story-composition[data-layout="relations"] .meaning-2 { grid-row:6; }
  .story-composition[data-layout="arranged"] { gap:30px 18px; }
  .story-composition[data-layout="arranged"] .atom-1 { font-size:clamp(25px,6.5vw,34px); }
  .story-composition[data-layout="web"] { padding:56px 20px 52px; gap:26px 20px; }
  .story-composition[data-layout="web"] .atom-1 { font-size:clamp(24px,6.3vw,32px); }
  .story-composition[data-layout="web"] :is(.atom-0,.atom-2) { font-size:14px; }
  .web-topline { top:14px; font-size:12px; padding-bottom:8px; }
  .web-bottomline { bottom:14px; font-size:11px; }
  .story-composition[data-layout="finale"] { top:var(--finale-top); bottom:auto; left:20%; right:20%; height:var(--finale-preview-height); padding:14px 18px; gap:8px 14px; }
  .story-composition[data-layout="finale"] .atom-1 { font-size:18px; line-height:1.6; }
  .story-composition[data-layout="finale"] :is(.atom-0,.atom-2) { font-size:11px; line-height:1.5; padding-top:6px; }
  .story-composition[data-layout="finale"] :is(.web-topline,.web-bottomline) { display:none; }
  .story-exit { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:calc(var(--finale-top) + var(--finale-preview-height) + 20px) var(--story-gutter) 80px; }
  .story-exit .finale-copy { max-width:470px; }
  .finale-title { font-size:clamp(28px,7.4vw,40px); line-height:1.6; }
  .finale-brand { font-size:clamp(27px,7.2vw,36px); margin:16px 0; }
  .finale-note { font-size:14px; line-height:1.85; }
  .story-destination { margin-top:22px; }
  .story-destination p { max-width:100%; }
  .story-bridge { padding:65px var(--gutter) 85px; }
  .story-bridge :is(h1,h2) { font-size:clamp(25px,6.6vw,40px); }
}
@media(max-height:650px) and (min-height:481px) {
  .story-big { font-size:clamp(28px,4.8vw,44px); }
  .story-medium { font-size:clamp(23px,3.8vw,36px); }
  .story-huge { font-size:clamp(36px,6vw,54px); }
  .story-composition[data-layout="web"] { padding-top:48px; padding-bottom:44px; gap:18px; }
  .story-composition[data-layout="finale"] { top:18%; bottom:18%; }
  .finale-title { font-size:30px; }
  .finale-brand { font-size:28px; margin:12px 0; }
  .finale-note { font-size:14px; }
  .story-destination { margin-top:16px; }
  .story-destination p { margin-top:6px; }
}
@media(max-width:800px) and (max-height:650px) and (min-height:481px) {
  .scroll-story { --finale-preview-height:130px; --finale-top:16px; }
  .story-composition[data-layout="finale"] { top:var(--finale-top); bottom:auto; left:18%; right:18%; }
  .story-composition[data-layout="finale"] .atom-1 { font-size:17px; }
  .story-exit { padding-top:158px; padding-bottom:76px; }
  .finale-title { font-size:25px; line-height:1.6; }
  .finale-brand { font-size:25px; margin:10px 0; line-height:1.25; }
  .finale-note { font-size:14px; line-height:1.75; }
  .story-destination a { min-height:44px; padding:6px 0; }
  .story-destination p { line-height:1.6; }
}
@media(prefers-reduced-motion:reduce) {
  .story-active { height:auto; }
  .story-active .story-stage { display:none; }
  .story-active .story-text { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal; }
}
@media print {
  .flag-menu,.story-stage { display:none!important; }
  .story-active { height:auto!important; }
  .story-active .story-text { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal; }
  .story-beat { padding:30px 0; break-inside:avoid; }
}