/* Homepage cinematic layer. It deliberately sits after home.css so the narrative
   has one coherent visual register without changing the site's content model. */
:root {
  --cine-carbon: #090909;
  --cine-night: #050505;
  --cine-panel: #131313;
  --cine-paper: #f4f4f0;
  --cine-silver: #c9c9c3;
  --cine-smoke: #90908b;
  --cine-line: #30302d;
  --cine-blue: #5b76ff;
  --cine-red: #df2b20;
  --cine-ease: cubic-bezier(.16, 1, .3, 1);
}

.home-body { overflow-x: clip; background: var(--cine-carbon); color: var(--cine-paper); }
.home-body::before { content: ""; position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: .045; background-image: radial-gradient(circle at 1px 1px, rgba(244,244,240,.9) .45px, transparent .65px); background-size: 5px 5px; }
.cinema-chapter, .cinema-agent, .cinema-console, .cinema-lab, .cinema-community, .cinema-field-notes, .cinema-evidence, .cinema-close { position: relative; isolation: isolate; background: var(--cine-carbon); color: var(--cine-paper); }
.cinema-chapter :is(h1,h2,h3), .cinema-agent :is(h2,h3), .cinema-console :is(h2,h3), .cinema-lab :is(h2,h3), .cinema-community :is(h2,h3), .cinema-field-notes :is(h2,h3), .cinema-evidence :is(h2,h3), .cinema-close :is(h2,h3) { color: var(--cine-paper); font-family: "Switzer", "Helvetica Neue", Arial, sans-serif; }
.home-body .kicker, .home-body .cinema-kicker { color: var(--cine-silver); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.home-body a:focus-visible, .home-body button:focus-visible { outline: 3px solid var(--cine-blue); outline-offset: 4px; }

/* Introduction is generated only once a session, and is never an interaction barrier. */
.system-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: #050505; color: var(--cine-paper); pointer-events: none; }
.system-intro__status { position: absolute; top: 8vh; left: clamp(20px, 4vw, 62px); display: grid; gap: 10px; color: var(--cine-silver); font: 10px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .15em; }
.system-intro__line { position: absolute; left: 0; width: 0; height: 1px; background: var(--cine-blue); box-shadow: 0 0 20px rgba(91,118,255,.6); }
.system-intro__words { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vw, 30px); max-width: 720px; padding: 24px; color: var(--cine-paper); font: 500 clamp(20px, 4vw, 54px)/.9 "Switzer", sans-serif; letter-spacing: -.06em; }
.system-intro__words span { opacity: 0; }

/* Scene 01: the portrait is a thesis; the aperture is the connection, not decoration. */
.cinema-hero { overflow: clip; min-height: 100svh; height: 100svh; background: radial-gradient(circle at 70% 46%, #191a1c 0, #090909 42%, #050505 82%); }
.cinema-hero::after { content: "SINGAPORE / 2026"; position: absolute; right: clamp(20px, 4vw, 68px); top: 18px; z-index: 6; color: var(--cine-smoke); font: 10px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; }
.cinema-hero__stage { position: relative; z-index: 3; min-height: 100%; width: min(1500px, calc(100% - 96px)); padding: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); align-items: center; }
.cinema-hero__copy { max-width: 650px; padding-top: 0; }
.cinema-hero h1 { max-width: 640px; margin: 22px 0 0; color: var(--cine-paper); font-size: clamp(57px, 7.3vw, 115px); font-weight: 400; line-height: .87; letter-spacing: -.077em; text-wrap: balance; }
.cinema-hero h1 span { display: block; transform-origin: left center; }
.cinema-hero__copy > p:not(.cinema-kicker) { max-width: 430px; color: var(--cine-silver); }
.cinema-portrait { right: 3%; bottom: 0; width: min(44vw, 690px); height: min(83vh, 820px); border: 0; border-radius: 0; background: transparent; box-shadow: none; transform-origin: 52% 50%; }
.cinema-portrait::before { inset: 0; z-index: 2; opacity: .75; background: linear-gradient(90deg, #090909 0%, transparent 20%), linear-gradient(0deg, #090909 0%, transparent 28%); }
.cinema-portrait::after { background: linear-gradient(102deg, transparent 46%, rgba(91,118,255,.1) 58%, transparent 68%); }
.cinema-portrait img { filter: grayscale(.35) contrast(1.12) brightness(.8); object-position: 52% 11%; }
.cinema-portrait { isolation:isolate; }
.cinema-portrait::after { mix-blend-mode:screen; }
.hero-readout { position:absolute; z-index:5; right:clamp(20px,3.2vw,56px); bottom:clamp(36px,5vw,74px); display:grid; gap:12px; width:172px; margin:0; padding:13px 0 0 15px; border-top:1px solid rgba(244,244,240,.4); border-left:1px solid rgba(244,244,240,.2); color:var(--cine-smoke); font:9px/1.45 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.1em; }
.hero-readout p { margin:0; color:var(--cine-paper); font-weight:500; }.hero-readout span { display:block; }
.hero-atlas { position: absolute; inset: 0 0 0 auto; z-index: 1; width: min(57vw, 940px); min-height: 100%; opacity: .45; pointer-events: none; transform: translate3d(7vw, 0, 0); }
.hero-atlas::before { opacity: .45; background: linear-gradient(rgba(244,244,240,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244,244,240,.05) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(circle at 52% 50%, #000 5%, transparent 69%); }
.hero-atlas__node { pointer-events: auto; }
.cinema-count { opacity: .3; }
.cinema-ticker { display: none; }
.hero-aperture { position:absolute; inset:0; z-index:8; background:#050505; clip-path:circle(0 at 50% 50%); will-change:clip-path; pointer-events:none; }

/* Scene 02: the actual atlas has an art-directed geometry instead of a force graph. */
.atlas-section { min-height: 100svh; padding: clamp(80px, 10vw, 150px) max(32px, calc((100vw - 1420px)/2)); display: grid; grid-template-columns: minmax(260px, .45fr) minmax(600px, 1.3fr); gap: clamp(34px, 7vw, 130px); align-items: center; background: #050505; }
.atlas-section::after { content: "LIVING SYSTEMS ATLAS"; position: absolute; bottom: 2vw; left: 3vw; color: rgba(244,244,240,.06); font: 500 clamp(38px, 8vw, 130px)/.8 "Switzer", sans-serif; letter-spacing: -.08em; white-space: nowrap; pointer-events: none; }
.atlas-copy { transform: none; }
.atlas-copy h2 { max-width: 470px; font-size: clamp(46px, 5.2vw, 86px); line-height: .9; letter-spacing: -.065em; }
.atlas-map { min-height: min(76vw, 750px); max-height: none; transform: none; }
.atlas-map::before { opacity: .4; background: radial-gradient(circle, rgba(91,118,255,.16), transparent 65%); filter: none; }
.atlas-map::after { content:"SYSTEM RELATIONSHIP MAP / 08 ACTIVE NODES"; position:absolute; right:0; bottom:4%; color:rgba(244,244,240,.34); font:9px "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.1em; writing-mode:vertical-rl; }
.atlas-map > svg { overflow: visible; }
.atlas-lines { stroke: var(--cine-blue); stroke-width: 1.1; stroke-dasharray: 1 0; }
.atlas-orbits { stroke: rgba(244,244,240,.16); }
.atlas-core { fill: #090909; stroke: var(--cine-paper); }
.atlas-core-pulse { animation: cinema-pulse 3.2s ease-in-out infinite; }
.atlas-node { color: var(--cine-paper); }
.atlas-node::before { border-color: rgba(244,244,240,.5); }
.atlas-node::after { background: var(--cine-red); }
.atlas-readout { z-index: 3; border-left: 1px solid var(--cine-blue); background: rgba(5,5,5,.85); box-shadow: none; }
@keyframes cinema-pulse { 0%,100% { opacity:.52; transform:scale(.9); transform-origin:center; } 50% { opacity:.12; transform:scale(1.25); } }

/* Scene 03: enterprise scale is treated as typography moving through depth. */
.film-section { min-height: 175svh; padding: 0; background: #090909; }
.film-hero { position: relative; min-height: 100svh; width: min(1420px, calc(100% - 96px)); margin: 0 auto; grid-template-columns: 1fr .68fr .32fr; align-items: center; }
.film-hero h2 { max-width: 700px; font-size: clamp(58px, 7.8vw, 134px); line-height: .82; letter-spacing: -.08em; }
.film-hero figure { overflow: hidden; padding: 0; background: linear-gradient(150deg, #151515, #050505); }
.film-hero img { height: min(66vh, 650px); max-height: none; object-fit: contain; object-position:center; filter: grayscale(1) contrast(1.12); }
.film-strip { position: relative; z-index: 3; margin: 0; padding: 24px max(32px, calc((100vw - 1420px)/2)); border-top: 1px solid var(--cine-line); background: #050505; }
.film-strip a { min-height: 150px; border-color: var(--cine-line); }
.build-log { display: none; }
.film-section::after { content: "STILL CURIOUS."; position: absolute; right: 4vw; bottom: 14vh; color: rgba(244,244,240,.08); font: 400 clamp(54px, 9vw, 150px)/.8 "Switzer", sans-serif; letter-spacing: -.09em; }

/* Scene 04: an intelligible agent system. */
.cinema-agent { min-height: 165svh; padding: 0; background: #050505; }
.agent-stage { min-height: 100svh; display: grid; align-content: center; grid-template-columns: minmax(260px,.75fr) minmax(320px,1.25fr); gap: clamp(40px,8vw,150px); width: min(1260px, calc(100% - 64px)); margin: 0 auto; }
.agent-stage__copy { align-self: center; }
.agent-stage__copy h2 { margin: 12px 0 0; font-size: clamp(52px, 7vw, 116px); line-height: .84; letter-spacing: -.085em; }
.agent-stage__copy h2 span { color: var(--cine-blue); }
.agent-stage__copy p { max-width: 390px; color: var(--cine-silver); }
.agent-diagram { position: relative; min-height: 590px; }
.agent-diagram::before { content: ""; position: absolute; top: 54px; bottom: 52px; left: 50%; width: 1px; background: linear-gradient(var(--cine-blue), rgba(91,118,255,.08)); }
.agent-diagram::after { content:"HARNESS / 06 COMPONENTS"; position:absolute; right:-1.8rem; top:22px; color:rgba(244,244,240,.32); font:9px "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.12em; writing-mode:vertical-rl; }
.agent-node { position: absolute; left: 50%; width: min(280px, 66vw); min-height: 58px; padding: 17px 22px; border: 1px solid var(--cine-line); background: #0b0b0b; color: var(--cine-paper); font: 500 13px "IBM Plex Mono", monospace; letter-spacing: .08em; text-align: left; transform: translateX(-50%); }
.agent-node::before { content:""; position:absolute; top:50%; left:-5px; width:9px; height:9px; border:1px solid var(--cine-blue); border-radius:50%; background:var(--cine-night); transform:translateY(-50%); }
.agent-node b { float:right; color: var(--cine-blue); font-weight:400; }
.agent-node:nth-child(1) { top: 42px; border-color: var(--cine-paper); }
.agent-node:nth-child(2) { top: 135px; left: 39%; }
.agent-node:nth-child(3) { top: 228px; left: 61%; }
.agent-node:nth-child(4) { top: 321px; left: 39%; }
.agent-node:nth-child(5) { top: 414px; left: 61%; }
.agent-node:nth-child(6) { top: 507px; }
.agent-claim { position:absolute; right: max(32px, calc((100vw - 1260px)/2)); bottom: 7vh; margin:0; color: var(--cine-paper); font: 400 clamp(36px,5vw,78px)/.88 "Switzer",sans-serif; letter-spacing:-.07em; }
.agent-claim span { color: var(--cine-blue); }

/* Scene 06. Concise static text keeps this honest, and scroll controls when it becomes prominent. */
.cinema-console { min-height: 125svh; padding: 0; background: #090909; }
.console-stage { min-height: 100svh; display:grid; place-items:center; padding: 80px 32px; }
.build-console { width:min(950px,100%); overflow:hidden; border:1px solid var(--cine-line); background:#050505; box-shadow: 0 34px 100px rgba(0,0,0,.45); }
.build-console__bar { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--cine-line); color:var(--cine-smoke); font:10px "IBM Plex Mono",monospace; letter-spacing:.12em; }
.build-console__body { padding:clamp(24px,5vw,66px); font:clamp(13px,1.5vw,18px)/1.75 "IBM Plex Mono",monospace; }
.build-console__body p { margin:0; color:var(--cine-silver); }
.build-console__body .ok { color:#b8c4ff; } .build-console__body .cursor { color:var(--cine-blue); animation:blink 1s steps(2) infinite; }
.build-console__progress { display:block; margin-top:28px; color:var(--cine-paper); letter-spacing:.05em; }
@keyframes blink { 50% { opacity:0; } }

/* Scene 05. Existing project cards become a moving evidence sequence before returning to catalog use. */
.cinema-lab { min-height: 100svh; padding: clamp(86px,10vw,150px) 0; background:#101010; }
.cinema-lab .section-intro, .cinema-lab .filters, .cinema-lab .project-grid, .cinema-lab .filter-empty { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.cinema-lab .section-intro { padding:0 0 44px; border-color:var(--cine-line); }
.cinema-lab .section-intro h2 { max-width:750px; font-size:clamp(52px,7.5vw,120px); line-height:.82; letter-spacing:-.08em; }
.cinema-lab .section-intro p { color:var(--cine-silver); }
.cinema-lab .filters { margin-bottom:46px; border-color:var(--cine-line); }
.cinema-lab .filter { border-radius:0; color:var(--cine-silver); }
.cinema-lab .filter.is-active, .cinema-lab .filter:hover { border-color:var(--cine-blue); color:var(--cine-paper); background:transparent; }
.cinema-lab .project-grid { display:block; }
.cinema-lab .project-card { min-height:clamp(440px,60svh,680px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); align-items:center; gap:clamp(25px,5vw,90px); margin:0 0 clamp(72px,9vh,120px); padding:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.cinema-lab .project-card[hidden] { display:none; }
.cinema-lab .project-card:nth-child(even) { grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); }
.cinema-lab .project-card:nth-child(even) .project-media { order:2; }
.cinema-lab .project-media { position:relative; overflow:hidden; border:1px solid var(--cine-line); aspect-ratio: 16/10; background:#090909; }
.cinema-lab .project-media::before { content:""; position:absolute; z-index:2; inset:10px; border:1px solid rgba(244,244,240,.16); border-left-color:transparent; pointer-events:none; }
.cinema-lab .project-media::after { content:"LIVE INTERFACE / PUBLIC EVIDENCE"; position:absolute; z-index:3; right:18px; bottom:18px; padding:6px 8px; border:1px solid rgba(244,244,240,.22); background:rgba(5,5,5,.72); color:var(--cine-paper); font:9px "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.08em; pointer-events:none; }
.cinema-lab .project-media img { width:100%; height:100%; object-fit:contain; object-position:center; transition:filter .4s ease; }
.cinema-lab .project-card:hover .project-media img { filter:saturate(1.12); }
.cinema-lab .project-content { padding:0; }
.cinema-lab .project-content h3 { margin:10px 0 15px; font-size:clamp(40px,5.4vw,84px); line-height:.85; letter-spacing:-.075em; }
.cinema-lab .project-content p { color:var(--cine-silver); font-size:16px; line-height:1.55; }
.cinema-lab .card-meta, .cinema-lab .tag-list { color:var(--cine-smoke); font-family:"IBM Plex Mono",monospace; }
.cinema-lab .tag-list li { border-color:var(--cine-line); }
.cinema-lab .card-link { color:var(--cine-paper); }

/* Scene 07 uses documentary material exactly as supplied. */
.cinema-community { min-height: 180svh; padding: clamp(85px,10vw,150px) 0; overflow:clip; background:#050505; }
.cinema-community .section-intro, .cinema-community .journal-track { width:min(1360px,calc(100% - 64px)); margin-inline:auto; }
.cinema-community .section-intro h2 { max-width:860px; font-size:clamp(62px,9vw,154px); line-height:.75; letter-spacing:-.09em; }
.cinema-community .section-intro h2::after { content:"SINGAPORE"; display:block; margin-top:20px; color:rgba(244,244,240,.07); font-size:.72em; }
.cinema-community .journal-track { display:flex; gap:18px; width:max-content; min-width:100%; padding:5vh max(32px,calc((100vw - 1360px)/2)); overflow:visible; }
.cinema-community .journal-card { position:relative; flex:0 0 min(59vw,670px); min-height:460px; overflow:hidden; border:1px solid var(--cine-line); border-radius:0; background:#101010; }
.cinema-community .journal-card::before { content:""; position:absolute; z-index:2; top:13px; left:13px; width:22px; height:22px; border-top:1px solid rgba(244,244,240,.68); border-left:1px solid rgba(244,244,240,.68); pointer-events:none; }
.cinema-community .journal-card:nth-child(2n) { transform:rotate(1.2deg); }.cinema-community .journal-card:nth-child(3n) { transform:rotate(-1.4deg); }
.cinema-community .journal-card img { width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(.78) contrast(1.05); transition:filter .3s ease; }
.cinema-community .journal-card:hover img, .cinema-community .journal-card:focus-within img { filter:none; }
.cinema-community .journal-copy { position:absolute; inset:auto 0 0; padding:26px; background:linear-gradient(transparent,rgba(5,5,5,.94) 40%); color:var(--cine-paper); }
.cinema-community .journal-copy p { color:var(--cine-silver); }.cinema-community .journal-copy a { color:var(--cine-paper); }

/* The final editorial sections intentionally slow down. */
.cinema-field-notes, .cinema-evidence { padding:clamp(90px,12vw,170px) 0; background:#090909; }
.cinema-field-notes .section-intro, .cinema-field-notes .journey-list, .cinema-evidence .section-intro, .cinema-evidence .proof-grid, .cinema-evidence .credential-track { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.cinema-field-notes .section-intro h2, .cinema-evidence .section-intro h2 { max-width:850px; font-size:clamp(53px,7.2vw,118px); line-height:.82; letter-spacing:-.085em; }
.cinema-field-notes .section-intro p, .cinema-evidence .section-intro p { color:var(--cine-silver); }
.cinema-field-notes .journey-list article { border-color:var(--cine-line); }.cinema-field-notes .journey-list article p { color:var(--cine-silver); }
.cinema-evidence { background:#050505; }.cinema-evidence .proof-card, .cinema-evidence .credential { border-color:var(--cine-line); border-radius:0; background:#101010; color:var(--cine-paper); }
.cinema-evidence .proof-card p, .cinema-evidence .credential p { color:var(--cine-silver); }.cinema-evidence .credential-track { margin-top:20px; }
.cinema-close { min-height:100svh; display:grid; align-content:center; padding:60px max(32px,calc((100vw - 1280px)/2)); background:#050505; border-top:1px solid var(--cine-line); }
.cinema-close h2 { margin:16px 0 34px; font-size:clamp(90px,15vw,250px); line-height:.7; letter-spacing:-.11em; }.cinema-close p { color:var(--cine-silver); }.cinema-close nav { display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:38px; }.cinema-close a { color:var(--cine-paper); font:13px "IBM Plex Mono",monospace; text-decoration:none; }.cinema-close a:hover { color:var(--cine-blue); }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  html, .home-body { overflow-x: hidden; }
  .system-intro__status { top:5vh; left:20px; }.system-intro__words { text-align:center; }
  .cinema-hero { height:auto; min-height:100svh; }.cinema-hero::after { top:15px; right:16px; }.cinema-hero__stage { width:calc(100% - 32px); min-height:100svh; display:block; padding:94px 0 0; }.cinema-hero__copy { position:relative; z-index:3; }.cinema-hero h1 { font-size:clamp(48px,13.5vw,67px); line-height:.88; }.cinema-hero__copy > p:not(.cinema-kicker) { font-size:15px; }.cinema-portrait { position:relative; right:auto; bottom:auto; width:100%; height:52vh; margin:42px 0 0; }.hero-readout { position:relative; right:auto; bottom:auto; width:min(100%,300px); margin:20px 0 0; }.hero-atlas { width:140vw; height:53vh; min-height:0; top:auto; right:-50vw; bottom:0; opacity:.22; }.hero-atlas__node { display:none; }.hero-aperture { display:none; }
  .atlas-section { min-height:auto; padding:80px 16px; display:block; }.atlas-copy h2 { font-size:clamp(44px,12vw,58px); }.atlas-map { min-height:630px; margin-top:36px; }.atlas-map::after { right:2px; bottom:2%; }.atlas-readout { right:0; }
  .film-section { min-height:auto; }.film-hero { min-height:100svh; width:calc(100% - 32px); display:block; padding:95px 0 60px; }.film-hero h2 { font-size:clamp(52px,14vw,73px); }.film-hero figure { margin:36px 0 0; }.film-hero dl { gap:10px; }.film-hero dl div { padding:12px 0; }.film-strip { overflow-x:auto; padding:16px; scroll-snap-type:x mandatory; }.film-strip a { min-width:68vw; scroll-snap-align:start; }
  .agent-stage { min-height:auto; display:block; width:calc(100% - 32px); padding:92px 0; }.agent-stage__copy h2 { font-size:clamp(50px,14vw,70px); }.agent-diagram { min-height:510px; margin-top:60px; }.agent-diagram::after { display:none; }.agent-node { width:min(270px,78vw); }.agent-node:nth-child(2),.agent-node:nth-child(4) { left:45%; }.agent-node:nth-child(3),.agent-node:nth-child(5) { left:55%; }.agent-claim { position:relative; right:auto; bottom:auto; width:calc(100% - 32px); margin:0 auto 70px; font-size:clamp(34px,10vw,48px); }
  .console-stage { min-height:80svh; padding:66px 16px; }.build-console__body { font-size:12px; }
  .cinema-lab { padding:84px 0; }.cinema-lab .section-intro,.cinema-lab .filters,.cinema-lab .project-grid,.cinema-lab .filter-empty { width:calc(100% - 32px); }.cinema-lab .section-intro h2 { font-size:clamp(50px,14vw,70px); }.cinema-lab .filters { overflow-x:auto; flex-wrap:nowrap; }.cinema-lab .project-card,.cinema-lab .project-card:nth-child(even) { display:block; min-height:0; margin-bottom:96px; }.cinema-lab .project-card:nth-child(even) .project-media { order:initial; }.cinema-lab .project-media::before { inset:7px; }.cinema-lab .project-media::after { right:10px; bottom:10px; padding:5px 6px; font-size:8px; }.cinema-lab .project-content { padding-top:22px; }.cinema-lab .project-content h3 { font-size:clamp(43px,12vw,58px); }
  .cinema-community { min-height:auto; padding:85px 0; }.cinema-community .section-intro { width:calc(100% - 32px); }.cinema-community .section-intro h2 { font-size:clamp(54px,15vw,74px); }.cinema-community .journal-track { width:100%; display:grid; padding:25px 16px; gap:14px; overflow:visible; }.cinema-community .journal-card { min-height:420px; flex:auto; width:100%; transform:none !important; }
  .cinema-field-notes,.cinema-evidence { padding:82px 0; }.cinema-field-notes .section-intro,.cinema-field-notes .journey-list,.cinema-evidence .section-intro,.cinema-evidence .proof-grid,.cinema-evidence .credential-track { width:calc(100% - 32px); }.cinema-field-notes .section-intro h2,.cinema-evidence .section-intro h2 { font-size:clamp(49px,13vw,67px); }.cinema-close { padding:75px 16px; }.cinema-close h2 { font-size:clamp(84px,23vw,128px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .system-intro { display:none !important; }.cinema-hero { height:auto; }.hero-aperture { display:none; }.film-section,.cinema-agent,.cinema-console,.cinema-community { min-height:auto; }.agent-stage,.console-stage { min-height:auto; }.cinema-community .journal-grid { transform:none !important; }
}

/* Chapter fit pass: one opening thesis, then a continuous visual route. */
.film-section,
.cinema-agent,
.cinema-console,
.cinema-community {
  min-height: 100svh;
}

.film-hero--timeline {
  min-height: min(72svh, 760px);
  grid-template-columns: minmax(300px, .88fr) minmax(480px, 1.12fr);
  gap: clamp(42px, 8vw, 140px);
}

.film-hero--timeline h2 {
  max-width: 620px;
  font-size: clamp(54px, 6.5vw, 106px);
}

.film-hero--timeline > div > p:not(.cinema-kicker) {
  max-width: 510px;
  color: var(--cine-silver);
  font-size: 16px;
  line-height: 1.55;
}

.film-hero--timeline dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}

.film-hero--timeline dl div {
  min-height: 146px;
  padding: 18px 0;
  border-top: 1px solid var(--cine-line);
}

.cinema-portrait {
  display: block;
  left: auto;
  top: auto;
}

.cinema-hero__copy::after {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  .cinema-hero {
    min-height: max(780px, calc(100svh - 64px));
    background: radial-gradient(circle at 70% 55%, #191a1c 0, #090909 48%, #050505 88%);
  }

  .cinema-hero__stage {
    min-height: max(780px, calc(100svh - 64px));
    padding: 88px 0 0;
  }

  .cinema-hero h1 {
    max-width: 392px;
    font-size: clamp(43px, 11.8vw, 64px);
    line-height: .9;
  }

  .cinema-hero__copy > p:not(.cinema-kicker) {
    max-width: min(92vw, 400px);
  }

  .cinema-portrait {
    position: absolute;
    z-index: 3;
    left: auto;
    top: auto;
    right: -10%;
    bottom: 0;
    width: min(108vw, 620px);
    height: min(42svh, 420px);
    margin: 0;
  }

  .hero-readout,
  .cinema-count {
    display: none;
  }

  .hero-atlas {
    position: absolute;
    z-index: 4;
    top: 34%;
    right: -45vw;
    bottom: auto;
    display: block;
    width: 138vw;
    height: 46svh;
    min-height: 340px;
    opacity: .6;
    pointer-events: none;
    transform: none;
  }

  .hero-atlas::before {
    display: block;
    opacity: .5;
  }

  .hero-atlas svg {
    display: block;
    inset: 4% 0 0;
    width: 100%;
    height: 94%;
    opacity: .78;
  }

  .hero-atlas__node {
    display: block;
    width: 118px;
    min-height: 52px;
    padding-left: 47px;
    opacity: .92;
    pointer-events: none;
  }

  .hero-atlas__node::before {
    width: 38px;
    height: 38px;
  }

  .hero-atlas__node::after {
    left: 40px;
    top: 11px;
  }

  .hero-atlas__node i {
    left: 14px;
    top: 25px;
    font-size: 7px;
  }

  .hero-atlas__node svg {
    left: 10px;
    top: 8px;
    width: 17px;
    height: 17px;
  }

  .hero-atlas__node b {
    padding-top: 2px;
    font: 500 12px/1 "Switzer", "Helvetica Neue", Arial, sans-serif;
  }

  .hero-atlas__node span {
    display: none;
  }

  .hero-atlas__node--banking { left: 44%; top: 6%; }
  .hero-atlas__node--agents { left: 2%; top: 24%; }
  .hero-atlas__node--local { right: 30%; top: 29%; }
  .hero-atlas__node--community { right: 30%; top: 50%; }
  .hero-atlas__node--halal { right: 30%; bottom: 16%; }
  .hero-atlas__node--notes { left: 42%; bottom: 0; }
  .hero-atlas__node--skillz { left: 15%; bottom: 16%; }
  .hero-atlas__node--chroa { left: 1%; bottom: 30%; }

  .film-hero--timeline {
    min-height: auto;
    display: block;
    padding: 88px 0 40px;
  }

  .film-hero--timeline h2 {
    font-size: clamp(48px, 13vw, 68px);
  }

  .film-hero--timeline dl {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .film-hero--timeline dl div {
    min-height: 0;
    padding: 15px 0;
  }

  .cinema-hero__copy {
    z-index: 5;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px), (prefers-reduced-motion: no-preference) and (pointer: coarse) and (max-width: 1200px) {
  .hero-atlas {
    animation: mobile-atlas-drift 12s ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes mobile-atlas-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-10px, -8px, 0) scale(1.025); }
}