/* ===== Opening brief (desktop screen + reel panel 0) ===== */
#brief{position:relative;z-index:7;min-height:100dvh;display:flex;align-items:center;
 pointer-events:auto;padding:120px clamp(20px,5vw,64px) 70px}
html.reel-on #brief{display:none!important}
html.brief-on .col{opacity:0;pointer-events:none;transition:opacity .35s}
.col{transition:opacity .35s}

.bfin{width:100%;max-width:920px;margin:0 auto}
.blab{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--acc)}
.bh{margin-top:14px;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
 font-size:clamp(32px,6vw,68px);line-height:.92;letter-spacing:-.01em}
.bh span{display:block;font-family:'Instrument Serif',serif;font-style:italic;text-transform:none;
 color:var(--acc);font-size:clamp(24px,4.2vw,48px);line-height:1.04}
.bbrief{margin-top:20px;max-width:62ch;font-size:clamp(14px,1.4vw,16px);line-height:1.8;font-weight:300;opacity:.9}
.bcards{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.bcard{flex:1 1 200px;min-width:180px;border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
 border-radius:14px;background:rgba(10,8,4,.6);padding:14px 16px}
.bcard b{display:block;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
 letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.bcard span{display:block;margin-top:6px;font-family:'Space Grotesk',sans-serif;font-size:13px;
 line-height:1.6;opacity:.85}
.bscroll{margin-top:26px;max-width:60ch;font-family:'Instrument Serif',serif;font-style:italic;
 font-size:clamp(15px,1.7vw,20px);line-height:1.5}
.bcue{margin-top:18px;font-family:'Space Grotesk',sans-serif;font-size:18px;opacity:.55;
 animation:bcue 2.2s ease-in-out infinite}
@keyframes bcue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:.9}}

/* reel panel 0 */
html.reel-on .rp-intro{align-items:flex-start}
html.reel-on .rp-intro .rpin{justify-content:center;padding-top:88px;padding-bottom:24px}
html.reel-on .rp-intro .bcards{flex-direction:column}
html.reel-on .rp-intro .bcard{flex:0 0 auto;min-width:0;width:100%}
html.reel-on .rp-intro .bh{font-size:clamp(28px,8.6vw,36px)}
html.reel-on .rp-intro .bh span{font-size:clamp(22px,7vw,30px)}
html.reel-on .rp-intro .bbrief{font-size:15px}

/* progress chip */
.apx{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.04em;
 text-transform:none;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
 border-radius:999px;padding:6px 12px;margin-right:10px;white-space:nowrap}
.bar{gap:10px}
@media(max-width:900px){.apx{font-size:10.5px;padding:5px 9px;margin-right:6px}}
html.brief-on #gl{opacity:.3;transition:opacity .35s}
#gl{transition:opacity .35s}