.film-section { padding:clamp(5rem,10vw,10rem) 0; background:#222222; color:#FDFDFD; border-top:1px solid #66666666; border-bottom:1px solid #66666666; }
.film-section.film-light { background:#FDFDFD; color:#222222; border-color:#D9D9D9; }
.film-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(3rem,8vw,9rem); }
.film-overline,.film-arc,.film-state,.film-poster-top,.film-poster-bottom,.film-dialog-header,.film-dialog-placeholder,.film-dialog-arc,.film-dialog-actions,.film-position,.story-map-note,.story-map li { font-family:'IBM Plex Mono',monospace; }
.film-overline { display:block; color:#D9D9D9; font-size:.69rem; letter-spacing:.15em; }
.film-overline span { color:#75923C; padding:0 .45rem; }
.film-light .film-overline { color:#666666; }
.film-arc { color:#75923C; font-size:.72rem; letter-spacing:.11em; line-height:1.7; margin:4rem 0 1.1rem; }
.film-copy h2 { font-size:clamp(3.2rem,5.2vw,6.5rem); line-height:1.02; max-width:12ch; }
.film-copy>p:not(.film-arc) { max-width:37ch; font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.45; color:#D9D9D9; }
.film-light .film-copy>p:not(.film-arc) { color:#666666; }
.film-state { display:block; margin-top:4rem; color:#D9D9D9; font-size:.7rem; letter-spacing:.04em; }
.film-light .film-state { color:#666666; }
.film-state:before { content:''; display:inline-block; width:7px; height:7px; margin-right:.7rem; background:#75923C; border-radius:50%; }
.film-poster { display:flex; flex-direction:column; justify-content:space-between; position:relative; isolation:isolate; overflow:hidden; width:100%; min-height:390px; aspect-ratio:16/10; padding:clamp(1.5rem,3vw,3rem); border:1px solid #666666; border-radius:0; background:linear-gradient(155deg,#222222 0%,#222222 45%,#66666655 90%),#222222; color:#FDFDFD; cursor:pointer; text-align:left; transition:transform .5s ease,border-color .3s ease; }
.film-poster:hover,.film-poster:focus-visible { transform:scale(1.012); border-color:#75923C; }
.film-poster:before { content:''; position:absolute; z-index:-1; width:56%; height:1px; top:50%; right:10%; background:#D9D9D9aa; transform:rotate(-38deg); transform-origin:center; }
.film-poster:after { content:''; position:absolute; z-index:-1; width:1px; height:120%; left:63%; top:-10%; background:#75923C99; transform:rotate(22deg); }
.film-poster-top,.film-poster-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; width:100%; font-size:.68rem; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.film-poster-top span,.film-poster-bottom span:last-child { color:#D9D9D9; text-align:right; }
.film-play { align-self:center; display:grid; place-items:center; width:94px; height:94px; padding-left:5px; border:1px solid #FDFDFD; border-radius:50%; font-size:2.2rem; font-family:Arial,sans-serif; line-height:1; transition:background .3s ease,color .3s ease; }
.film-poster:hover .film-play,.film-poster:focus-visible .film-play { background:#FDFDFD; color:#222222; }
.story-map { background:#FDFDFD; color:#222222; }
.story-map h2 { max-width:16ch; font-size:clamp(3.5rem,6vw,7rem); margin:1.7rem 0; }
.story-map .lead { color:#666666; max-width:48ch; }
.story-map-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(2rem,5vw,6rem); }
.story-map-action { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding-bottom:.5rem; }
.story-map-action > span { max-width:22rem; color:#666666; font-family:'IBM Plex Mono',monospace; font-size:.66rem; line-height:1.5; }
.story-map .film-full-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; white-space:nowrap; padding:1.05rem 1.3rem; border:1px solid #75923C; background:#75923C; color:#FDFDFD; cursor:pointer; }
.story-map .film-full-cta:hover,.story-map .film-full-cta:focus-visible { background:#222222; border-color:#222222; color:#FDFDFD; }
.story-map ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:5rem 0 1.5rem; border-top:1px solid #D9D9D9; }
.story-map li { display:flex; align-items:baseline; gap:1.2rem; padding:1.5rem .8rem 1.5rem 0; border-bottom:1px solid #D9D9D9; font-size:.78rem; letter-spacing:.08em; }
.story-map li span { color:#75923C; }
.story-map-note { color:#666666; font-size:.68rem; letter-spacing:.03em; }
.film-dialog { position:fixed; inset:0; width:min(1220px,calc(100vw - 4vw)); max-height:calc(100svh - 4vw); padding:0; border:1px solid #666666; background:#222222; color:#FDFDFD; overflow-y:auto; box-shadow:0 30px 90px #000b; }
.film-dialog::backdrop { background:#000c; backdrop-filter:blur(8px); }
.film-dialog-inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); grid-template-rows:auto 1fr; }
.film-dialog-header { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:.85rem 2rem; border-bottom:1px solid #666666; color:#D9D9D9; font-size:.65rem; letter-spacing:.12em; }
.film-close { padding:0 .2rem; border:0; background:none; color:#FDFDFD; cursor:pointer; font-size:2rem; line-height:1; }
.film-dialog-stage { min-height:min(68vh,680px); position:relative; border-right:1px solid #666666; }
.film-player { width:100%; height:100%; min-height:inherit; background:#222222; }
.film-player[hidden],.film-dialog-placeholder[hidden],.film-dialog-status[hidden] { display:none; }
.film-dialog-placeholder { display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; min-height:inherit; padding:2rem; background:linear-gradient(140deg,#222222 45%,#66666655 100%); color:#D9D9D9; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.film-dialog-placeholder strong { align-self:center; font-family:'League Spartan',Arial,sans-serif; font-weight:400; line-height:1; font-size:clamp(10rem,23vw,24rem); color:#FDFDFD; letter-spacing:-.09em; }
.film-dialog-placeholder span:last-child { align-self:flex-end; }
.film-dialog-content { padding:clamp(2rem,4vw,4rem); display:flex; flex-direction:column; justify-content:center; }
.film-dialog-arc { color:#75923C; font-size:.7rem; letter-spacing:.12em; }
.film-dialog-content h2 { font-size:clamp(3rem,4vw,5rem); margin:2rem 0; }
.film-dialog-thought { font-size:1.25rem; line-height:1.45; }
.film-dialog-status { color:#D9D9D9; border-top:1px solid #666666; margin-top:2rem; padding-top:1.5rem; font-size:.9rem; line-height:1.55; }
.film-dialog-route { display:inline-flex; align-self:flex-start; gap:1.5rem; border-bottom:1px solid #75923C; padding:.7rem 0; margin-top:1rem; font-size:.9rem; }
.film-dialog-route span { color:#75923C; }
.film-dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:.8rem; margin-top:3.5rem; border-top:1px solid #666666; padding-top:1rem; font-size:.7rem; }
.waf-chain { max-width:70ch; margin:2rem 0 4rem; line-height:2; font-size:.96rem; letter-spacing:.03em; }
.waf-adjacent { border-top:1px solid #666666; }
.film-dialog-actions button { border:0; background:none; color:#FDFDFD; padding:.5rem 0; cursor:pointer; font:inherit; }
.film-dialog-actions button:disabled { color:#666666; cursor:default; }
.film-position { color:#75923C; }
.full-documentary-dialog { position:fixed; inset:0; width:min(1160px,calc(100vw - 4vw)); max-height:calc(100svh - 4vw); padding:0; border:1px solid #666666; background:#222222; color:#FDFDFD; overflow-y:auto; box-shadow:0 30px 90px #000b; }
.full-documentary-dialog::backdrop { background:#000d; backdrop-filter:blur(8px); }
.full-documentary-header { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.6rem; border-bottom:1px solid #666666; font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.13em; }
.full-documentary-close { border:0; background:transparent; color:#FDFDFD; cursor:pointer; font-size:2rem; line-height:1; }
.full-documentary-stage { position:relative; width:100%; aspect-ratio:16/9; background:#222222; }
.full-documentary-embed { display:block; width:100%; height:100%; border:0; }
.full-documentary-embed[hidden],.full-documentary-placeholder[hidden] { display:none; }
.full-documentary-placeholder { display:flex; flex-direction:column; justify-content:space-between; align-items:center; position:absolute; inset:0; padding:clamp(1.5rem,3vw,3rem); background:radial-gradient(ellipse at 70% 30%,#66666655,transparent 45%),#222222; }
.full-documentary-placeholder>span { align-self:flex-start; color:#D9D9D9; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.12em; }
.full-documentary-symbol { display:flex; align-items:center; gap:1.2rem; font-size:clamp(6rem,14vw,13rem); font-weight:600; letter-spacing:-.09em; line-height:1; }
.full-documentary-symbol span { display:block; width:3px; height:clamp(5rem,11vw,10rem); background:#75923C; }
.full-documentary-placeholder p { max-width:60ch; margin:0; color:#D9D9D9; text-align:center; font-size:clamp(.9rem,1.2vw,1.1rem); }
.full-documentary-foot { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.3rem 1.6rem; border-top:1px solid #666666; }
.full-documentary-foot h2 { margin:0; font-size:clamp(1.5rem,2.5vw,2.4rem); }
.full-documentary-foot span { color:#D9D9D9; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.06em; white-space:nowrap; }
@media(max-width:900px){.film-grid { grid-template-columns:1fr; }.film-poster { min-height:350px; }.film-arc { margin-top:2.5rem; }.film-state { margin-top:2.5rem; }.story-map-intro { grid-template-columns:1fr; }.story-map ol { grid-template-columns:repeat(3,minmax(0,1fr)); }.film-dialog-inner { grid-template-columns:1fr; }.film-dialog-stage { min-height:45vh; border-right:0; border-bottom:1px solid #666666; }.film-dialog-placeholder { min-height:45vh; }}
@media(max-width:620px){.film-section { padding:5rem 0; }.film-poster { min-height:280px; aspect-ratio:4/3; }.film-poster-top,.film-poster-bottom { font-size:.58rem; }.film-poster-bottom span:last-child { max-width:50%; }.film-play { width:74px; height:74px; }.story-map ol { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:3rem; }.story-map li { gap:.55rem; font-size:.67rem; }.film-dialog { width:100vw; max-height:100svh; height:100svh; }.film-dialog-header { padding:.8rem 1.2rem; }.film-dialog-stage,.film-dialog-placeholder { min-height:31vh; }.film-dialog-placeholder strong { font-size:8rem; }.film-dialog-content { padding:1.4rem; }.film-dialog-content h2 { font-size:clamp(2.7rem,10vw,4rem); margin:1rem 0; }.film-dialog-actions { margin-top:1.5rem; }}
@media(max-width:620px){.full-documentary-dialog { width:100vw; max-height:100svh; }.full-documentary-stage { aspect-ratio:4/5; }.full-documentary-placeholder { padding:1.5rem; }.full-documentary-symbol { font-size:7rem; }.full-documentary-foot { align-items:flex-start; flex-direction:column; gap:.6rem; padding:1rem 1.5rem; }.full-documentary-foot span { white-space:normal; }}
@media(prefers-reduced-motion:reduce){.film-poster,.film-play { transition:none; }}
