/* Tokens — inherited from packs/general-brief/_base.css dark variant, forced. See DESIGN.md: the film does not switch light/dark, it is always dark. */ :root{ --bg:#101619; --panel:#171f24; --ink:#e6edf1; --muted:#9db0bc; --rule:#2a363e; --accent:#5fb1e3; --accent-ink:#0b1419; --soft:#1b2a34; --warn:#e0a35a; --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif; --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* System CJK stacks, same as general-brief/build.mjs: native on every platform, nothing to download on a phone. Latin stays IBM Plex; the CJK face only fills in the glyphs it has. */ html[lang="zh"]{ --sans:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif; --serif:"IBM Plex Serif","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",serif} html[lang="zh-hant"]{ --sans:"IBM Plex Sans","PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Noto Sans CJK TC","Source Han Sans TC",sans-serif; --serif:"IBM Plex Serif","PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Noto Sans CJK TC",serif} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.55} a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px} a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} [hidden]{display:none!important} ::selection{background:var(--soft);color:var(--ink)} /* ── stage: the tall spacer that gives the film its scroll length ── */ #stage{position:relative} #viewport{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate} /* z0 cinema — placeholder until Phase 3 footage lands. A graded gradient panel stands in for the leg's clip so pacing and legibility can be judged now; ".placeholder-tag" makes the substitution impossible to mistake for finished art. */ #cinema{position:absolute;inset:0;z-index:0} #cinema .grade{position:absolute;inset:0;opacity:0;transition:opacity .6s ease} #cinema .grade.active{opacity:1} #cinema .grade .sweep{position:absolute;inset:-20%;background:radial-gradient( ellipse at 30% 20%, color-mix(in srgb, var(--grade-a) 70%, transparent) 0%, var(--grade-b) 55%, var(--bg) 100%); animation:driftSweep 18s ease-in-out infinite alternate} @keyframes driftSweep{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-2%,-1%,0) scale(1.12)}} .placeholder-tag{position:absolute;left:16px;bottom:46px;z-index:1;font:12px/1.3 var(--sans); color:var(--muted);background:rgba(16,22,25,.55);border:1px solid var(--rule); border-radius:999px;padding:5px 11px;letter-spacing:.02em} /* real cinema — sits above the gradient (z-index 1 vs its implicit 0) only once it has something to show; transparent otherwise, so a leg with no clip, a clip still fetching, or a 404 all just let the .grade beneath show through. No fallback branching needed anywhere JS-side. */ #cinema .cine{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;z-index:1} #cinema .cine.active{opacity:1} .cine-poster,.cine-video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .cine-video{opacity:0;transition:opacity .5s ease} .cine.has-video .cine-video{opacity:1} .cine.has-video .cine-poster{opacity:0} /* z1 scrim — darkness envelope so overlay text stays legible. A flat wash failed on real footage: measured contrast behind the kicker line against the bright sunrise/sunset legs (open, close) was ~2:1 at opacity .42, against a WCAG AA need of 4.5:1 for text that size. Getting there with a flat wash needs ~.75 opacity, which flattens the whole frame — not a fair trade for two legs' worth of legibility. The first fix (a left-heavy gradient) assumed the card sat on the left. It doesn't — .beat-card is centered (margin:0 auto, max 640px) — so its right half ran into the fade, and a headless re-measure (23 Sep 2026, 95th-percentile background under the card, every leg) still found the kicker at 2.0:1 on markets. So the dark band now follows the card: .82 across the middle 720px (card + gutter), fading only outside it. Below ~720px wide that band covers the whole screen, which is right — on a phone the text IS the whole screen. Measured at .82: ink ≥9:1, accent and muted ≥4.6:1 on all seven legs. The footage gets its moment in the breathers, which have no text and keep a light wash. */ #scrim{position:absolute;inset:0;z-index:1;transition:background .5s ease; background:linear-gradient(90deg, rgba(16,22,25,.5) 0, rgba(16,22,25,.82) calc(50% - 360px), rgba(16,22,25,.82) calc(50% + 360px), rgba(16,22,25,.5) 100%)} #scrim.is-breather{background:rgba(16,22,25,.28)} /* z2 overlay — the product */ /* Top padding clears the HUD row, bottom clears the ribbon AND the placeholder-cinema tag (which can wrap to two lines on a narrow screen). fit-who measured an 8px overlap at 375px before this was widened — the densest beats have near-zero margin here, so err generous. */ #overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center; padding:64px 24px 68px;overflow:hidden} .beat-card{max-width:640px;margin:0 auto;max-height:100%; display:flex;flex-direction:column;min-height:0} /* The graphic is the only part allowed to give up space on a short viewport — copy and citation never shrink. */ .beat-card .graphic{min-height:0;flex:0 1 auto;overflow:hidden} .beat-card .graphic:empty{display:none} .beat-card .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);font-weight:600;margin:0 0 10px} .beat-card .kicker{font-family:var(--sans);font-size:14px;font-weight:600; color:var(--accent);margin:0 0 8px} [data-leg="pays"] .beat-card .kicker,[data-leg="pays"] .beat-card .pill b{color:var(--warn)} .beat-card h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.22;text-wrap:balance;margin:0 0 16px} .beat-card p.body{font-size:1.05rem;line-height:1.6;max-width:52ch;color:var(--ink); margin:0 0 18px} .beat-card .foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap; font-size:13px;color:var(--muted)} .beat-card .foot a{white-space:nowrap} /* per-word cascade — added once per beat on entry, not continuous */ .word{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.35em); animation:wordIn .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--wi) * 28ms)} h2 .word{animation-delay:calc(var(--wi) * 38ms)} @keyframes wordIn{to{opacity:1;filter:blur(0);transform:translateY(0)}} @media (prefers-reduced-motion:reduce){ .word{animation:none;opacity:1;filter:none;transform:none} } /* pills — scroll-driven count-ups */ .pills{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px} .pill{background:var(--soft);border-radius:2px;padding:9px 14px;min-width:120px} .pill .label{display:block;font-size:11px;color:var(--muted);letter-spacing:.02em;margin-bottom:2px} .pill b{font-family:var(--serif);font-size:1.15rem;color:var(--accent)} /* Staged sub-elements. `.in` is toggled from p every frame, and the easing is a TRANSITION rather than an animation precisely so that removing the class on scrub-back plays the reversal instead of snapping. */ .stage-el{opacity:0;filter:blur(4px);transform:translateY(6px); transition:opacity .35s ease,filter .35s ease,transform .35s ease} .stage-el.in{opacity:1;filter:blur(0);transform:none} @media (prefers-reduced-motion:reduce){ .stage-el{transition:none;opacity:1;filter:none;transform:none} } /* fork graphic — six doors, "open" leg only */ .doors{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px} .doors li{font-size:.95rem;color:var(--muted);padding-left:18px;position:relative} .doors li::before{content:"→";position:absolute;left:0;color:var(--accent)} /* ratio-dial — the arc encodes the cited proportion, nothing more */ .dial{margin:0 0 14px;max-width:210px} .dial svg{width:100%;height:auto;overflow:visible} .dial-track{fill:none;stroke:var(--rule);stroke-width:10;stroke-linecap:round} .dial-fill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round; transition:stroke-dashoffset .12s linear} .dial-readout{margin-top:-28px;text-align:center} .dial-readout b{display:block;font-family:var(--serif);font-size:2rem;color:var(--accent);line-height:1} .dial-readout span{display:block;font-size:12px;color:var(--muted);max-width:22ch;margin:2px auto 0} .dial-readout span:empty{display:none} .dial-target{margin:12px 0 0;text-align:center;font-size:12px;color:var(--ink); background:var(--soft);border-radius:999px;padding:5px 12px;display:inline-block} /* chip-list — rank-rungs and chip-grid share this: small pills, lit in sequence, out again on the way back */ .chip-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px} .chip-list li{font-size:11px;color:var(--muted);background:var(--soft); border:1px solid var(--rule);border-radius:999px;padding:4px 10px} [data-leg="pays"] .chip-list li{border-color:color-mix(in srgb,var(--warn) 35%,var(--rule))} /* staged-list — a vertical list, one item at a time */ .staged-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;max-width:46ch} .staged-list li{font-size:.95rem;color:var(--ink);padding-left:16px;position:relative} .staged-list li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--muted);font-size:.85em} .staged-list a{color:var(--accent)} [data-leg="pays"] .staged-list li::before{color:var(--warn)} /* bar-chart */ .bars{display:grid;gap:8px;margin:0 0 18px;max-width:420px} .bar-row{display:grid;grid-template-columns:minmax(72px,108px) 1fr auto;align-items:center; gap:8px;font-size:.85rem} .bar-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem} .bar-track{height:8px;background:var(--rule);border-radius:999px;overflow:hidden} .bar-fill{display:block;height:100%;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:left;border-radius:999px} [data-leg="pays"] .bar-fill{background:var(--warn)} .bar-value{font-family:var(--serif);color:var(--ink);text-align:right;white-space:nowrap; font-variant-numeric:tabular-nums} /* stepped-sequence — a dated rail */ .sequence{list-style:none;margin:0 0 18px;padding:0 0 0 16px;border-left:1px solid var(--rule); display:grid;gap:14px;max-width:40ch} .sequence li{position:relative} .sequence li::before{content:"";position:absolute;left:-20px;top:5px;width:7px;height:7px; border-radius:50%;background:var(--accent)} [data-leg="pays"] .sequence li::before{background:var(--warn)} .sequence b{display:block;font-family:var(--serif);font-size:1rem;color:var(--ink)} .sequence span{display:block;font-size:.85rem;color:var(--muted)} /* compare-table */ table.compare{border-collapse:collapse;margin:0 0 18px;font-size:.85rem;width:100%;max-width:420px} table.compare th{text-align:left;font-size:11px;letter-spacing:.02em;color:var(--muted); font-weight:600;padding:0 10px 6px 0;border-bottom:1px solid var(--rule)} table.compare td{padding:7px 10px 7px 0;color:var(--ink);border-bottom:1px solid var(--rule)} table.compare tbody tr:last-child td{border-bottom:0} /* two-lists — the brief's own fit / doesn't-fit, side by side */ .two-lists{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 18px;max-width:540px} .two-lists h4{margin:0 0 8px;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .two-lists .is-yes h4{color:var(--accent)} .two-lists ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .two-lists li{font-size:.85rem;color:var(--ink);line-height:1.4} @media (max-width:520px){.two-lists{grid-template-columns:1fr}} /* malaysia-card */ .my-card{margin:0 0 18px;display:grid;gap:10px;background:var(--soft);border-radius:2px; padding:14px 16px;max-width:340px} .my-card>div{display:flex;justify-content:space-between;gap:16px;font-size:.85rem} .my-card dt{color:var(--muted);margin:0} .my-card dd{margin:0;color:var(--ink);text-align:right} /* Phone scale. The graphic is the part that gives up height on a short screen (see .beat-card .graphic), and at 375×740 the desktop scale left it no room: measured in a headless sweep, fit-who lost its whole "doesn't fit" column in Malay and 60px of it in English; history lost half its timeline. Everything here trades a little size for that room — type one step down, tighter rhythm, pills side by side rather than stacked, and each timeline step on one line. */ @media (max-width:640px){ #overlay{padding:58px 18px 60px} .beat-card .eyebrow{margin-bottom:6px} .beat-card .kicker{font-size:13px;margin-bottom:6px} .beat-card h2{font-size:1.32rem;line-height:1.2;margin-bottom:10px} .beat-card p.body{font-size:.94rem;line-height:1.5;margin-bottom:12px} .beat-card .foot{font-size:12px} .pills{flex-wrap:nowrap;gap:8px;margin-bottom:12px} .pill{flex:1 1 0;min-width:0;padding:7px 10px} .pill .label{font-size:10.5px} .pill b{font-size:1.05rem} .doors,.chip-list,.staged-list,.bars,.sequence,table.compare,.two-lists,.my-card,.dial{margin-bottom:12px} .doors{gap:5px} .doors li{font-size:.88rem} .staged-list{gap:4px} .staged-list li{font-size:.86rem;line-height:1.4} .sequence{gap:6px} .sequence b,.sequence span{display:inline} .sequence b{font-size:.9rem;margin-right:6px} .sequence li::before{top:6px} .two-lists{gap:10px} .two-lists h4{margin-bottom:4px} .two-lists ul{gap:2px} .two-lists li{font-size:.8rem;line-height:1.28} table.compare td{padding:5px 8px 5px 0} } /* Short phones — iPhone SE, or any phone inside WhatsApp's in-app browser with its toolbars showing. One more step down; Malay fit-who, the densest beat in the densest language, still lost its last list item at 667px. */ @media (max-width:640px) and (max-height:700px){ #overlay{padding-top:54px} .beat-card h2{font-size:1.24rem} .beat-card p.body{font-size:.9rem} } /* return-cta — a quiet close, not another line of text */ .close-rule{width:44px;height:2px;background:var(--accent);margin:2px 0 20px; transform-origin:left;transform:scaleX(0);transition:transform .5s ease} .close-rule.in{transform:scaleX(1)} /* ── HUD chrome ── */ #hud{position:absolute;inset:0;z-index:3;pointer-events:none} #hud>*{pointer-events:auto} .progress{position:absolute;left:0;right:0;top:0;height:3px;background:var(--rule)} .progress i{display:block;height:100%;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .05s linear} /* The counter is the beat menu's button — same drawn chevron as the language select, so both read as "tap to choose". */ .counter{position:absolute;top:20px;right:20px;font:13px/1 var(--sans);color:var(--muted); background:rgba(16,22,25,.5);border:1px solid var(--rule);border-radius:999px; padding:6px 26px 6px 12px;cursor:pointer;font-variant-numeric:tabular-nums; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%; background-size:4px 4px;background-repeat:no-repeat} .counter:hover{color:var(--ink);border-color:var(--accent)} /* beat menu */ #beat-menu{width:min(440px,calc(100vw - 32px));max-height:min(80svh,720px);padding:0; background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:2px; overflow:hidden;display:none;flex-direction:column} #beat-menu[open]{display:flex} #beat-menu::backdrop{background:rgba(16,22,25,.7)} .menu-head{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 16px;border-bottom:1px solid var(--rule)} .menu-head h2{margin:0;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .menu-list{overflow-y:auto;padding:6px 8px 14px;overscroll-behavior:contain} .menu-list h3{margin:14px 8px 4px;font:600 11px/1.3 var(--sans);letter-spacing:.06em; text-transform:uppercase;color:var(--accent)} .menu-list ol{list-style:none;margin:0;padding:0} .menu-list button{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0; border-radius:2px;padding:8px;color:var(--ink);font:14px/1.35 var(--sans);cursor:pointer} .menu-list button:hover{background:var(--soft)} .menu-list button[aria-current]{background:var(--soft)} .menu-list button[aria-current] .n{color:var(--accent)} .menu-list .n{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums} .menu-list .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* scroll hint — first frame only, gone once the reader scrolls */ .scroll-hint{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);margin:0; font:12px/1 var(--sans);letter-spacing:.06em;color:var(--muted);pointer-events:none; transition:opacity .4s ease} .scroll-hint::after{content:"";display:block;width:1px;height:18px;margin:8px auto 0; background:var(--muted);transform-origin:top;animation:hintLine 1.8s ease-in-out infinite} @keyframes hintLine{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}} .scroll-hint.gone{opacity:0} @media (prefers-reduced-motion:reduce){.scroll-hint::after{animation:none}} #dots{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex; flex-direction:column;gap:9px} /* --muted, not --rule: a --rule ring on the darkened footage vanished — half the rail was invisible in the 23 Sep screenshots. */ #dots button{width:8px;height:8px;border-radius:50%;border:1px solid color-mix(in srgb,var(--muted) 60%,transparent); background:transparent;padding:0;cursor:pointer;transition:background .2s,border-color .2s} #dots button:hover{border-color:var(--accent)} #dots button.active{background:var(--accent);border-color:var(--accent)} @media (max-width:640px){#dots{display:none}} .chrome-row{position:absolute;top:20px;left:20px;display:flex;gap:8px;align-items:center} .chrome-btn{font:12px/1 var(--sans);color:var(--muted); background:rgba(16,22,25,.5);border:1px solid var(--rule);border-radius:999px; padding:7px 12px;cursor:pointer} .chrome-btn:hover{color:var(--ink);border-color:var(--accent)} /* Native