/* ============================================================================
   project-frontline21-2.css · FRONTLINE21 2.0 CASE STUDY · v2.0 · 29 September 2026
   ----------------------------------------------------------------------------
   Scope: body.f21v2 only. Loaded by work/case-frontline21-2.html and nothing
   else. The Frontline21 faces come from project-frontline21.css, which
   switches them on inside main.project-content[data-project="frontline21"];
   the navigation and the universal closing keep Radikal.

   v2.0 recomposes the page as an exhibition in the 2025 study's rhythm: the
   Manifesto as the opening spectacle, the mark at scale, four films at
   varied scale, photography in paired and full-bleed compositions, the site,
   the app, the system and the Field Manual. Components kept from v1.2 (the
   printed ink, the registration break, the site viewer, the device, the app
   component library) keep their v2- names; the new layout is f2-.

   Values are the Frontline21 site's own tokens and the R4 library tokens
   (assets/brand-systems/dcl/frontline21/tokens.json): red #DC2227, ink
   #121616, charcoal #1F2424, paper #F4F5F4. The films' own ground is #050D18,
   used only where a section meets a film frame so the frame reads edge to edge.
   ========================================================================== */

body.f21v2{
  --r21:#DC2227; --r21-dk:#B91B20;
  --film:#050D18;
  --ink:#121616; --ink-deep:#0C0F0F; --ink-raised:#1F2424; --ink-line:#2F3636;
  --paper:#F4F5F4; --paper-dim:#B8BEBE; --paper-faint:#8A9292;
  --gallery:#ffffff; --txt:#141616; --txt-soft:#4a4f52; --rule:#dfe2e0;
  --edge:clamp(16px,4.4vw,84px);
  --gap:clamp(12px,1.6vw,26px);
  --ease:cubic-bezier(.16,1,.3,1);
  --tex:url('../images/work/frontline21-2/texture/f21-wall-ground-2048.jpg');
  --print-tile:url('../images/work/frontline21-2/texture/f21-ink-print-50-512.png');
  background:var(--ink);
}
body.f21v2 main{background:var(--ink);color:var(--paper);overflow-x:clip}
body.f21v2 ::selection{background:var(--r21);color:#fff}
.f21v2 [hidden]{display:none!important}
.f21v2 .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f21v2 .vwrap{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--edge);box-sizing:border-box}
.f21v2 main img{max-width:100%;height:auto;display:block}
.f21v2 main :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd){margin:0}
.v2-sprite{position:absolute;width:0;height:0;overflow:hidden}
.v2-q{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.14em}
.f21v2 main :focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.f21v2 .f2-web :focus-visible,.f21v2 .f2-set :focus-visible{outline-color:var(--txt)}
.v2-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- type roles ----------------------------------------------------------- */
.f2-kick{font-family:var(--fl-explain);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--r21);display:flex;align-items:center;gap:12px}
.f2-kick::before{content:'';width:24px;height:2px;background:currentColor}
.f2-kick--light{color:var(--paper-dim)}
.f2-kick--light::before{background:var(--r21)}
.f21v2 .f2-h2{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5.2vw,92px);line-height:.88;letter-spacing:-.02em;color:var(--r21);text-wrap:balance;max-width:15ch}
.f21v2 .f2-h3{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,42px);line-height:.94;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.f2-dek{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--txt-soft);max-width:46ch;text-wrap:pretty}
.f2-dek--light{color:var(--paper-dim)}
.f2-head{display:grid;gap:clamp(14px,1.6vw,22px);margin-bottom:clamp(32px,4vw,64px)}
.f2-head--split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end;column-gap:clamp(24px,5vw,96px)}
@media (max-width:900px){.f2-head--split{grid-template-columns:1fr}}

/* ---- buttons ---------------------------------------------------------------
   Square, like the brand. The red block is the one primary action. */
.f2-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;font-family:var(--fl-declare);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.f2-btn .v2-q{font-size:14px}
.f2-btn--red{background:var(--r21);color:#fff}
.f2-btn--red:hover{background:var(--r21-dk)}
.f2-ambient{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:transparent;color:var(--paper);border:1px solid rgba(244,245,244,.4);font:500 13px/1 var(--fl-explain);letter-spacing:.02em;cursor:pointer;border-radius:0}
.f2-ambient:hover{background:rgba(244,245,244,.1)}
.f2-ambient .v2-q{font-size:13px}
.f2-arrow{display:inline-grid;place-items:center;width:48px;height:48px;background:transparent;color:var(--paper);border:1px solid rgba(244,245,244,.35);cursor:pointer;border-radius:0}
.f2-arrow:hover{background:var(--paper);color:var(--ink)}
.f2-arrow:disabled{opacity:.3;cursor:default;background:transparent;color:var(--paper)}
.f2-arrow .v2-q{font-size:18px}

/* ---- printed ink (rebuilt from the site's ink.css) -------------------------
   The density tile only multiplies, so it darkens the red the way a worn print
   does and never punches a hole. Under 24 px (28 px on a phone) type stays clean. */
.v2-print{color:var(--r21)}
.v2-print .v2-ink{display:inline}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.v2-printed .v2-print .v2-ink{
    color:var(--r21);-webkit-text-fill-color:transparent;
    background-image:var(--print-tile),linear-gradient(var(--r21),var(--r21));
    background-size:var(--ink-mask,512px) var(--ink-mask,512px),100% 100%;
    background-repeat:repeat,no-repeat;
    background-position:var(--wear-u,0%) var(--wear-v,0%),0 0;
    background-blend-mode:multiply,normal;
    -webkit-background-clip:text;background-clip:text;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  html.v2-printed .v2-print[data-tier="25"]{--print-tile:url('../images/work/frontline21-2/texture/f21-ink-print-25-512.png')}
  html.v2-printed .v2-print[data-tier="100"]{--print-tile:url('../images/work/frontline21-2/texture/f21-ink-print-100-512.png')}
}
@media (forced-colors:active){html.v2-printed .v2-print .v2-ink{-webkit-text-fill-color:CanvasText;background:none}}
/* the registration break: opaque red slices that stand in for the statement */
.v2-ghost{position:absolute;inset:0;pointer-events:none;color:var(--r21);-webkit-text-fill-color:var(--r21)}
[data-glitch]{position:relative}
[data-glitch].is-glitching>.v2-ink{visibility:hidden}

/* ---- the Wall: centred, tight, broken by hand ------------------------------
   Tracking closes and leading tightens as the size grows. A closing point
   hangs outside the letter block (.hp, measured by the script), so the words,
   not the punctuation, are centred. */
.f21v2 .f2-wall{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;text-align:center;
  font-size:clamp(44px,8.4vw,156px);line-height:.84;letter-spacing:-.028em;color:var(--r21);
  font-kerning:normal;text-rendering:optimizeLegibility;margin:0 auto;max-width:none}
.f2-wall .hp{display:inline;margin-right:-.3em}
/* a hung point sits outside its parent's painted box, so it carries the print itself */
html.v2-printed .v2-print .v2-ink .hp{background-image:inherit;background-size:inherit;background-repeat:inherit;background-position:inherit;background-blend-mode:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.f2-wall .cm{margin-right:.06em}

/* ============================================================ 00 · THE HERO
   The film is never cropped. On a wide screen the frame is sized to the
   height left under the navigation and the bar; on a narrow one it takes the
   full width and the section lends it height instead. The section's ground is
   the film's own navy black, so the frame reads edge to edge. */
.f2-hero{background:var(--film);color:var(--paper);position:relative;--bar:76px;--navh:var(--jw-head-h,65px)}
.f2-hero__stage{position:relative;margin:0 auto;aspect-ratio:16/9;
  width:min(100%,calc((100svh - var(--navh) - var(--bar)) * 16 / 9));background:var(--film);overflow:hidden}
.f2-hero__poster,.f2-hero__poster img{position:absolute;inset:0;width:100%;height:100%}
.f21v2 main .f2-hero__poster img{object-fit:contain;height:100%}
.f21v2 main .f2-hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;opacity:0;transition:opacity .5s}
.f2-hero__stage.is-playing .f2-hero__v{opacity:1}
.f2-hero__bar{min-height:var(--bar);box-sizing:border-box;margin:0 auto;width:min(100%,calc((100svh - var(--navh) - var(--bar)) * 16 / 9));
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:12px clamp(16px,2vw,28px);flex-wrap:wrap}
.f2-hero__id{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap}
.f21v2 .f2-hero__title{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:15px;line-height:1;letter-spacing:.14em;color:var(--paper)}
.f2-hero__film{font-size:13px;color:var(--paper-dim)}
.f2-hero__acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:1100px) and (min-aspect-ratio:1/1){.f2-hero{--bar:84px}}
/* a phone or a tall window: full width, the bar beneath, the section gives height */
@media (max-aspect-ratio:1/1),(max-width:699.98px){
  .f2-hero{min-height:calc(72svh - var(--navh));display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,7vh,72px) 0}
  .f2-hero__stage,.f2-hero__bar{width:100%}
  .f2-hero__bar{padding:18px var(--edge) 0;flex-direction:column;align-items:stretch;gap:16px}
  .f2-hero__acts{gap:10px}
  .f2-hero__acts .f2-btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================ 01 · THE STATEMENT */
.f2-open{background:var(--gallery);color:var(--txt);padding:clamp(64px,9vw,150px) 0}
.f2-open__in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:clamp(28px,6vw,120px);align-items:end}
.f2-open__lead{font-size:clamp(22px,2.3vw,38px);line-height:1.28;letter-spacing:-.01em;max-width:30ch;text-wrap:pretty;color:var(--txt)}
.f2-open__facts{display:grid;gap:16px;border-top:2px solid var(--txt);padding-top:18px}
.f2-open__facts dt{font-weight:500;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--txt-soft);margin-bottom:4px}
.f2-open__facts dd{font-size:15px;line-height:1.4;font-weight:500;color:var(--txt)}
.f2-open__facts a{color:var(--r21);text-underline-offset:3px}
@media (max-width:900px){.f2-open__in{grid-template-columns:1fr}.f2-open__facts{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:28px}}
@media (max-width:480px){.f2-open__facts{grid-template-columns:1fr 1fr}.f2-open__facts div:first-child{grid-column:1/-1}}

/* ============================================================ 02 · THE MARK */
.f2-mark{background:var(--ink) var(--tex) center/cover;padding:clamp(88px,13vw,230px) var(--edge);display:grid;place-items:center}
.f2-mark__fig{display:grid;justify-items:center;gap:clamp(28px,3.4vw,52px);width:100%}
.f2-mark__ph{width:min(100%,1240px);height:auto;display:block;overflow:visible}
.f2-mark__ink{mix-blend-mode:multiply}
.f2-mark__fig figcaption{font-size:clamp(14px,1.15vw,17px);color:var(--paper-dim);text-align:center;max-width:44ch}

/* ============================================================ 03 · THE FILMS */
.f2-films{background:var(--film);padding:clamp(72px,9vw,150px) 0 clamp(72px,9vw,150px)}
.f2-films__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:18px clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(36px,4.5vw,72px)}
.f2-films__dek{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--paper-dim);max-width:40ch}
.f2-back{display:grid;grid-template-columns:120px auto;gap:14px;align-items:center;color:var(--paper);text-decoration:none;font-size:13px;line-height:1.35}
.f2-back img{width:120px;aspect-ratio:16/9;object-fit:cover;outline:1px solid rgba(244,245,244,.18)}
.f2-back b{display:block;font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px}
.f2-back span{color:var(--paper-dim)}
.f2-back:hover b{color:var(--r21)}
@media (max-width:1000px){.f2-films__head{grid-template-columns:1fr 1fr}.f2-back{grid-column:1/-1}}
@media (max-width:640px){.f2-films__head{grid-template-columns:1fr}}
.f2-reel{list-style:none;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:clamp(56px,7vw,120px);column-gap:var(--gap)}
.f2-reel__item{min-width:0;display:grid;gap:14px;align-content:start}
.f2-reel__item--bleed{grid-column:1/-1}
.f2-reel__item--bleed .f2-film__cap{padding:0 var(--edge)}
/* a bleed frame never outgrows the window: past that it is centred on the film's own ground */
.f2-reel__item--bleed .f2-film{width:min(100%,calc((100svh - var(--jw-head-h,65px)) * 16 / 9));margin:0 auto}
.f2-reel__item--pair{grid-column:span 6}
.f2-reel__item--pair:nth-child(2){padding-left:var(--edge)}
.f2-reel__item--pair:nth-child(3){padding-right:var(--edge)}
/* the counterpoint: the second of the pair sits lower, so the two read as a pair and not a grid */
@media (min-width:900px){.f2-reel__item--drop{margin-top:clamp(56px,8vw,140px)}}
@media (max-width:899.98px){.f2-reel__item--pair{grid-column:1/-1;padding:0!important}.f2-reel__item--pair .f2-film__cap{padding:0 var(--edge)}}
.f2-film{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden;color:#fff;text-decoration:none}
.f21v2 main .f2-film img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .4s}
.f2-film:hover img{transform:scale(1.012)}
.f2-film__play{position:absolute;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:var(--r21);font-family:var(--fl-declare);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.f2-film__play .v2-q{font-size:13px}
.f2-film:hover .f2-film__play{background:var(--r21-dk)}
.f2-film__cap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.f2-film__n{font-family:var(--fl-declare);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--paper-faint)}
.f21v2 .f2-film__t{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,40px);line-height:.95;letter-spacing:-.01em;color:var(--r21)}
.f2-film__len{font-size:13px;color:var(--paper-dim);font-variant-numeric:tabular-nums}

/* ============================================================ 04 · THE WORLD */
.f2-world{background:var(--gallery);color:var(--txt)}
.f2-bleed{background:#000}
.f21v2 main .f2-bleed img{width:100%;height:auto;max-height:92svh;object-fit:cover;object-position:50% 40%}
.f2-wallband{background:var(--ink) var(--tex) center/cover;padding:clamp(80px,12vw,210px) var(--edge) clamp(40px,5vw,80px);display:grid;gap:clamp(48px,7vw,120px)}
.f2-wallband>.f2-wall{width:100%}
.f2-wallband__note{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;font-size:12.5px;color:var(--paper-faint);text-align:center}
.f2-set{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:clamp(72px,9vw,150px);padding-bottom:clamp(72px,9vw,150px);align-items:start}
.f2-set figure{display:grid;gap:10px;min-width:0}
.f2-set figcaption{font-weight:500;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--txt-soft)}
.f2-set__tall{grid-column:1/span 5;grid-row:1/span 2}
.f2-set__a{grid-column:6/-1}
.f2-set__b{grid-column:6/span 6}
@media (max-width:899.98px){
  .f2-set{grid-template-columns:1fr 1fr}
  .f2-set__tall{grid-column:1/span 1;grid-row:1/span 2}
  .f2-set__a,.f2-set__b{grid-column:2}
}
@media (max-width:560px){
  .f2-set{grid-template-columns:1fr;row-gap:28px}
  .f2-set__tall{grid-row:auto;grid-column:1;width:78%;justify-self:start}
  .f2-set__a,.f2-set__b{grid-column:1}
  .f2-set__b{width:86%;justify-self:end}
}

/* ---- the vertical films -------------------------------------------------- */
.f2-social{background:var(--ink);padding:clamp(72px,9vw,150px) 0 clamp(64px,8vw,130px)}
.f2-social__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,80px)}
.f2-social__copy{display:grid;gap:14px;align-content:end}
.f2-social__copy p{font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:var(--paper-dim);max-width:42ch}
.f2-detail{max-width:500px;justify-self:end;display:grid;gap:10px}
.f2-detail figcaption{font-size:12px;color:var(--paper-faint)}
.f21v2 main .f2-detail img{width:100%}
.f2-strip__nav{display:flex;gap:8px;margin-top:6px}
@media (max-width:900px){.f2-social__head{grid-template-columns:1fr}.f2-detail{justify-self:start}}
.f2-strip{list-style:none;margin:0;padding:0 var(--edge) 12px;display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--edge);scrollbar-width:thin;scrollbar-color:var(--ink-line) transparent;overscroll-behavior-x:contain}
.f2-strip li{flex:0 0 clamp(168px,15.6vw,262px);scroll-snap-align:start}
.f2-vert{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden;color:#fff}
.f21v2 main .f2-vert img,.f2-vert video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f2-vert video{opacity:0;transition:opacity .25s}
.f2-vert.is-on video{opacity:1}
.f2-vert__icon{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;background:rgba(18,22,22,.78);border:1px solid rgba(244,245,244,.35)}
.f2-vert__icon .v2-q{font-size:13px}
.f2-vert:hover .f2-vert__icon{background:var(--r21);border-color:var(--r21)}
@media (max-width:640px){.f2-strip li{flex-basis:62vw}}

/* ============================================================ 05 · THE WEBSITE */
.f2-web{background:var(--gallery);color:var(--txt);padding:clamp(80px,10vw,170px) 0}
.f2-h2--ink{color:var(--txt)}
.v2-browser{background:#0b0d0d;border:1px solid #2a2f2f;box-shadow:0 50px 110px -50px rgba(0,0,0,.6)}
.v2-browser__bar{display:flex;align-items:center;gap:14px;padding:10px 12px;background:#1a1e1e;color:var(--paper-dim);border-bottom:1px solid #2a2f2f;flex-wrap:wrap}
.v2-browser__dots{display:flex;gap:6px}
.v2-browser__dots i{width:10px;height:10px;border-radius:50%;background:#3a4040}
.v2-browser__url{flex:1 1 220px;display:flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;background:#0f1212;font-size:13px;color:var(--paper);min-width:0}
.v2-browser__url .v2-q{font-size:11px;color:var(--paper-faint)}
.v2-browser__url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-browser__state{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:1px solid #3a4040;color:var(--paper-faint)}
.v2-browser__state.is-live{border-color:var(--r21);color:#ff6b6f}
.v2-browser__acts{display:flex;gap:6px;flex-wrap:wrap}
.v2-bbtn{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;background:transparent;color:var(--paper);border:1px solid #3a4040;font:500 12.5px/1 var(--fl-explain);text-decoration:none;cursor:pointer;border-radius:0}
.v2-bbtn:hover{background:#262b2b}
.v2-bbtn[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.v2-bbtn--live{background:var(--r21);border-color:var(--r21);color:#fff}
.v2-bbtn--live:hover{background:var(--r21-dk)}
.v2-bbtn .v2-q{font-size:13px}
.v2-browser__view{position:relative;height:min(82vh,900px);min-height:460px;background:#121616;overflow:hidden}
.v2-browser__view.is-phone iframe{width:390px;margin:0 auto;display:block;border-left:1px solid #2a2f2f;border-right:1px solid #2a2f2f}
.v2-browser__view iframe{width:100%;height:100%;border:0;display:block;background:#121616}
.v2-browser__cover{position:absolute;inset:0}
.f21v2 main .v2-browser__cover img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:brightness(.72)}
.v2-browser__cover picture{position:absolute;inset:0}
.v2-browser__call{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px;color:var(--paper)}
.v2-browser__call p{font-size:13.5px;max-width:40ch;color:rgba(244,245,244,.9)}
.v2-browser__fallback{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.f21v2 main .v2-browser__fallback img{width:100%}
.v2-browser__view.is-phone .v2-browser__fallback img{max-width:390px;margin:0 auto}
.v2-browser__foot{padding:10px 14px;font-size:12.5px;color:var(--paper-faint);background:#1a1e1e;border-top:1px solid #2a2f2f}
.v2-browser__foot .v2-link{color:var(--paper)}
.v2-browser__foot .v2-link+.v2-link{margin-left:14px}
@media (max-width:700px){.v2-browser__view{height:72vh;min-height:420px}.v2-browser__dots{display:none}}
@media (min-width:641px) and (max-width:1100px){.v2-browser__view{height:min(66vh,600px)}.f21v2 main .v2-browser__cover img{object-position:left top}}
.f2-pages{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:clamp(16px,2vw,26px)}
.f2-pages button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--rule);background:transparent;color:var(--txt);font:500 13px/1 var(--fl-explain);cursor:pointer;border-radius:0}
.f2-pages button:hover{background:var(--txt);color:var(--gallery);border-color:var(--txt)}
.f2-pages button[aria-current="true"]{background:var(--r21);border-color:var(--r21);color:#fff}
.v2-modal{padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;background:#0b0d0d;color:var(--paper)}
.v2-modal::backdrop{background:rgba(0,0,0,.7)}
.v2-modal[open]{display:flex;flex-direction:column}
.v2-modal__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:#1a1e1e;border-bottom:1px solid #2a2f2f;font-size:13px}
.v2-modal__bar>div{display:flex;gap:6px}
.v2-modal__bar span{color:var(--paper-faint);margin-left:6px}
.v2-modal__view{flex:1;min-height:0;position:relative}
.v2-modal__view iframe{width:100%;height:100%;border:0;display:block}
.v2-modal__view .v2-browser__fallback{position:absolute;inset:0}

/* ============================================================ 06 · THE APP */
.f2-app{background:var(--ink);padding:clamp(80px,10vw,170px) 0}
.f2-app__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,7vw,140px);align-items:center}
.f2-app__copy{display:grid;gap:clamp(16px,1.8vw,24px);align-content:center}
.v2-device{margin:0;display:grid;justify-items:center}
.v2-device__frame{width:min(100%,440px);padding:12px;background:#0b0d0d;border-radius:52px;box-shadow:0 0 0 2px #2b3131,0 60px 110px -40px rgba(0,0,0,.7)}
.v2-device__screen{position:relative;aspect-ratio:780/1688;border-radius:41px;overflow:hidden;background:#121616}
.f21v2 main .v2-device__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.v2-device__screen video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.v2-device__screen:not(.is-started) video{opacity:0}
.v2-play{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:clamp(12px,2vw,26px);background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);border:0;cursor:pointer;color:#fff;width:100%}
.v2-play span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;margin-bottom:18px;background:var(--r21);font-family:var(--fl-declare);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.v2-play span .v2-q{font-size:13px}
.v2-play:hover span{background:var(--r21-dk)}
.v2-device__screen.is-started .v2-play{display:none}
.v2-journey{list-style:none;padding:0;border-top:1px solid var(--ink-line);counter-reset:j;margin-top:8px!important}
.v2-journey li{counter-increment:j;border-bottom:1px solid var(--ink-line)}
.v2-journey li>button,.v2-journey li{display:grid;grid-template-columns:34px minmax(128px,.8fr) 1.4fr;gap:12px;align-items:baseline}
.v2-journey li>button{grid-column:1/-1;padding:13px 0;background:none;border:0;color:inherit;text-align:left;font:inherit;cursor:pointer;width:100%}
.v2-journey li::before{content:counter(j,decimal-leading-zero);font-family:var(--fl-declare);font-weight:700;font-size:12px;color:var(--r21);padding:13px 0}
.v2-journey li:has(>button)::before{display:none}
.v2-journey li:has(>button)>button::before{content:counter(j,decimal-leading-zero);font-family:var(--fl-declare);font-weight:700;font-size:12px;color:var(--r21)}
.f21v2 .v2-journey b{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:15px;color:var(--paper)}
.v2-journey span{font-size:14px;color:var(--paper-dim);line-height:1.45}
.v2-journey li.is-now b,.v2-journey li:hover b{color:var(--r21)}
@media (max-width:520px){.v2-journey li>button,.v2-journey li{grid-template-columns:30px 1fr}.v2-journey span{grid-column:2}}
@media (max-width:900px){.f2-app__grid{grid-template-columns:1fr}.v2-device__frame{width:min(100%,380px)}}
.f21v2 .f2-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(64px,8vw,130px);max-width:1180px}
.f2-shots figure{display:grid;gap:10px}
.f21v2 main .f2-shots img{width:100%;border-radius:20px;border:1px solid var(--ink-line);background:#121616}
.f2-shots figcaption{font-size:12px;color:var(--paper-faint);text-align:center}
.f2-shots figure:nth-child(even){margin-top:clamp(24px,4vw,72px)}
@media (max-width:1000px){.f21v2 .f2-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.f21v2 .f2-shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px}.f2-shots figure{flex:0 0 64%;scroll-snap-align:start;margin-top:0!important}}

/* ---- the fold-away details ----------------------------------------------- */
.v2-more{margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.v2-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:60px;padding:6px 0;flex-wrap:wrap}
.v2-more summary::-webkit-details-marker{display:none}
.v2-more summary span{font-family:var(--fl-declare);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.v2-more summary em{font-style:normal;font-size:13.5px;color:var(--paper-faint)}
.v2-more summary::after{content:'';margin-left:auto;width:12px;height:12px;border-right:2px solid var(--r21);border-bottom:2px solid var(--r21);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.v2-more[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.v2-more__body{padding:8px 0 clamp(26px,3vw,44px)}

/* ---- the app's own component library (captured DOM, v0.7) ------------------ */
.v2-kit__tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--ink-line);margin-bottom:var(--gap)}
.v2-kit__tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--paper-dim);padding:12px 14px;min-height:48px;font:500 14px/1 var(--fl-explain);cursor:pointer;margin-bottom:-1px}
.v2-kit__tabs button[aria-selected="true"]{color:var(--paper);border-bottom-color:var(--r21)}
.v2-kit__tabs button:hover{color:var(--paper)}
.v2-kit__loading{font-size:13px;color:var(--paper-faint);padding:20px 0}
.v2-kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.v2-kgrid--phones{grid-template-columns:repeat(3,minmax(0,1fr))}
.v2-kcard{background:var(--ink-deep);border:1px solid var(--ink-line);padding:18px;display:grid;gap:14px;align-content:start;min-width:0;color:var(--paper-dim)}
.v2-kcard--wide{grid-column:span 2}
.f21v2 .v2-kcard h3{font-family:var(--fl-explain);font-weight:500;text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--paper-dim)}
.v2-kcard__n{font-size:12.5px;line-height:1.5;color:var(--paper-faint)}
.v2-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;background:transparent;color:var(--paper);border:1px solid currentColor;font:500 12.5px/1 var(--fl-explain);letter-spacing:.04em;cursor:pointer;border-radius:0;justify-self:start}
.v2-chip:hover{background:rgba(127,127,127,.12)}
.v2-chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media (max-width:1100px){.v2-kgrid,.v2-kgrid--phones{grid-template-columns:1fr 1fr}.v2-kcard--wide{grid-column:1/-1}}
@media (max-width:700px){.v2-kgrid,.v2-kgrid--phones{grid-template-columns:1fr}}
.v2-kmount{display:block;min-width:0;background:#121616;container-type:inline-size;container-name:appkit;transform:translateZ(0);position:relative}
.v2-kscale{width:100%;max-width:390px;justify-self:center;position:relative}
.v2-kmount--phone{width:390px;border:1px solid var(--ink-line);border-radius:28px;overflow:hidden;transform-origin:0 0}
.v2-surfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.v2-surfaces span{background:var(--c);min-height:110px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;font:500 11px/1.3 ui-monospace,Menlo,monospace;color:var(--paper-dim);border:1px solid rgba(255,255,255,.06)}
.v2-surfaces b{font:500 13px/1.3 var(--fl-explain);color:var(--paper)}
@media (max-width:520px){.v2-surfaces{grid-template-columns:1fr 1fr}}
.v2-appfonts{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:baseline}
.v2-appfonts .a2{font-size:11px;color:var(--paper-faint)}
.f21v2 .v2-appfonts .a1{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:30px;line-height:1;color:var(--paper)}
.v2-appfonts .a3{display:flex;align-items:center;gap:8px;font-family:var(--fl-declare);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.v2-appfonts .a3 span{width:18px;height:2px;background:var(--r21)}
.v2-appfonts .a4{font-weight:500;font-size:16px;color:var(--paper)}
.v2-appfonts .a5{font-size:13px;color:#8f9797}
.v2-redjobs{list-style:none;padding:0;display:grid;gap:12px;font-size:13px;color:var(--paper-dim)}
.v2-redjobs li{display:flex;align-items:center;gap:12px}
.v2-redjobs li>span{flex:none;display:grid;place-items:center;width:44px;height:30px}
.v2-redjobs .j1{background:var(--r21)}
.v2-redjobs .j2{border-top:3px solid var(--r21);background:transparent;height:30px;width:30px!important;margin:0 7px}
.v2-redjobs .j3{width:22px!important;height:22px!important;margin:0 11px;background:var(--r21);position:relative}
.v2-redjobs .j3::after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.f21v2 .v2-redjobs .j4{font-family:var(--fl-declare);font-weight:700;color:var(--r21);font-size:22px}
.v2-spacing{display:flex;align-items:flex-end;gap:6px;height:56px}
.v2-spacing i{display:block;height:100%;background:rgba(220,34,39,.75)}
.v2-list{list-style:none;padding:0;display:grid;gap:6px;font-size:13.5px;line-height:1.5;color:var(--paper-dim)}
.v2-list li{position:relative;padding-left:18px}
.v2-list li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--r21)}

/* ============================================================ 07 · THE SYSTEM */
.f2-sys{background:var(--ink);padding:clamp(80px,10vw,170px) 0 clamp(72px,9vw,150px);border-top:1px solid var(--ink-line)}
/* type: one word at full wear, the reading face beside it */
.f2-type{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:center;padding-bottom:clamp(40px,5vw,88px)}
.f21v2 .f2-type__q{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(110px,21vw,380px);line-height:.76;letter-spacing:-.04em;color:var(--r21)}
.f2-type__p{display:grid;gap:18px;align-content:center}
.f21v2 .f2-type__name{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);letter-spacing:.02em;color:var(--paper);display:grid;gap:4px}
.f21v2 .f2-type__name:nth-child(2){font-family:var(--fl-explain);font-weight:500;text-transform:none;letter-spacing:0}
.f2-type__name span{font-family:var(--fl-explain);font-weight:400;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--paper-faint)}
.f2-type__sample{font-size:clamp(20px,2vw,30px);line-height:1.35;color:var(--paper-dim);border-top:1px solid var(--ink-line);padding-top:18px;max-width:24ch}
@media (max-width:900px){.f2-type{grid-template-columns:1fr}}
/* colour: the palette in the proportion the brand uses it */
.f2-color{display:grid;gap:12px;padding-bottom:clamp(40px,5vw,88px)}
.f2-color__band{display:flex;min-height:clamp(150px,17vw,260px);box-shadow:inset 0 0 0 1px var(--ink-line)}
.f2-color__band span{background:var(--c);color:var(--f);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:clamp(10px,1.4vw,18px);min-width:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.f21v2 .f2-color__band b{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(13px,1.3vw,18px);letter-spacing:.04em}
.f2-color__band code{font:500 11.5px/1.2 ui-monospace,Menlo,monospace}
.f2-color figcaption{font-size:13px;color:var(--paper-faint)}
@media (max-width:560px){.f2-color__band{flex-direction:column;min-height:0}.f2-color__band span{min-height:64px;flex:none!important;flex-direction:row;justify-content:space-between;align-items:flex-end}}
/* the code: the five value icons in the site's formation, Moral Courage at the centre */
.f2-code{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center;padding:clamp(40px,4.5vw,72px) 0;border-top:1px solid var(--ink-line)}
.f2-code__marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:clamp(8px,1.2vw,16px);max-width:620px;width:100%;justify-self:center}
.f2-code__marks button{display:grid;justify-items:center;gap:10px;padding:clamp(12px,1.6vw,22px) 6px;background:transparent;border:1px solid transparent;color:var(--paper-faint);cursor:pointer;font:500 12px/1.2 var(--fl-explain);letter-spacing:.02em;border-radius:0}
.f2-code__marks svg{width:clamp(56px,6vw,96px);height:clamp(56px,6vw,96px);fill:currentColor;transition:color .2s}
.f2-code__marks button:hover{color:var(--paper)}
.f2-code__marks button[aria-selected="true"]{color:var(--r21)}
.f2-code__marks button span{padding-bottom:6px;border-bottom:2px solid transparent}
.f2-code__marks button[aria-selected="true"] span{border-bottom-color:var(--r21)}
.f2-code__marks button[aria-selected="true"] span{color:var(--paper)}
.f2-code__nw{grid-area:1/1}.f2-code__ne{grid-area:1/3}.f2-code__c{grid-area:2/2}.f2-code__sw{grid-area:3/1}.f2-code__se{grid-area:3/3}
.f2-code__c svg{width:clamp(76px,8.4vw,136px);height:clamp(76px,8.4vw,136px)}
.f2-code__panel{display:grid;gap:10px;min-height:190px;align-content:center}
.f2-code__k{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint)}
.f21v2 .f2-code__name{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;font-size:clamp(32px,4.2vw,70px);line-height:.9;letter-spacing:-.015em;color:var(--r21)}
.f2-code__def{font-size:clamp(18px,1.6vw,24px);line-height:1.35;color:var(--paper)}
.f2-code__ref{font-size:13px;color:var(--paper-faint)}
@media (max-width:900px){.f2-code{grid-template-columns:1fr}.f2-code__panel{text-align:center;justify-items:center;min-height:0}}
/* icons: one construction drawing, the set in use, the whole library on request */
.f2-icons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px);align-items:center;padding:clamp(40px,4.5vw,72px) 0 0;border-top:1px solid var(--ink-line)}
.f2-build{display:grid;gap:14px}
.f2-build__svg{width:100%;max-width:440px;height:auto;display:block;background:var(--ink-deep);border:1px solid var(--ink-line)}
.f2-build__grid path{stroke:rgba(244,245,244,.16)}
.f2-build__ref{fill:none;stroke:rgba(244,245,244,.75);stroke-width:5;stroke-dasharray:14 10}
.f2-build__fill{fill:var(--r21)}
.f2-build figcaption{font-size:13px;line-height:1.5;color:var(--paper-faint);max-width:52ch}
.f2-icons__row{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--ink-line);border:1px solid var(--ink-line)}
.f2-icons__row li{background:var(--ink);display:grid;place-items:center;aspect-ratio:1;color:var(--paper)}
.f2-icons__row li.is-red{background:var(--r21);color:#fff}
.f2-icons__row .v2-q{font-size:clamp(34px,4vw,64px)}
.f2-icons__all{margin-top:var(--gap)}
@media (max-width:900px){.f2-icons{grid-template-columns:1fr}.f2-icons__row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v2-icogrid{display:grid;gap:26px}
.v2-icogroup h4{font-family:var(--fl-explain);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:10px!important}
.v2-icogroup ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.v2-icogroup li{background:var(--ink-deep);border:1px solid var(--ink-line);display:grid;justify-items:center;gap:10px;padding:18px 6px 12px;text-align:center}
.v2-icogroup li .v2-q{font-size:30px;color:var(--paper)}
.v2-icogroup li span{font-size:10.5px;line-height:1.3;color:var(--paper-faint)}
.v2-icogroup li b{font-weight:500;color:var(--paper-dim);display:block}
/* the Wall of Truth and its registration break */
.f2-truth{display:grid;gap:12px;padding-top:clamp(48px,6vw,100px);border-top:1px solid var(--ink-line)}
.f2-truth__wall{background:var(--ink) var(--tex) center/cover;min-height:clamp(380px,42vw,700px);display:grid;align-content:center;justify-items:center;gap:clamp(14px,2vw,26px);padding:clamp(28px,4vw,64px) clamp(16px,3vw,48px);text-align:center;overflow:hidden}
.f21v2 .f2-truth__eyebrow{font-family:var(--fl-declare);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.f21v2 .f2-wall--truth{font-size:clamp(46px,7.6vw,138px)}
.f2-truth__ref{font-weight:500;font-size:15px;color:var(--paper)}
.f2-truth figcaption{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:13px;color:var(--paper-faint)}
/* the generated interface section keeps its own sheet; only its headline takes Quantico Bold here */
.f21v2 .aie-h2{font-weight:700;letter-spacing:-.015em;line-height:.92}

/* ============================================================ 08 · THE FIELD MANUAL */
.f2-manual{background:var(--ink-raised);padding:clamp(80px,10vw,170px) 0}
.f2-pagesx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.f2-pagesx figure{grid-column:span 4;min-width:0}
.f21v2 main .f2-pagesx img{width:100%;box-shadow:0 30px 70px -36px rgba(0,0,0,.8)}
.f2-pagesx__lead{grid-column:1/span 8!important;grid-row:span 2}
.f2-pagesx__side{grid-column:9/span 4!important;align-self:end}
.f2-pagesx figure:nth-child(3){grid-column:1/span 4}
@media (min-width:900px){.f2-pagesx figure:nth-child(n+3){margin-top:clamp(12px,2vw,32px)}}
@media (max-width:899.98px){.f2-pagesx{grid-template-columns:1fr 1fr}.f2-pagesx figure,.f2-pagesx__lead,.f2-pagesx__side,.f2-pagesx figure:nth-child(3){grid-column:span 1!important;grid-row:auto}.f2-pagesx__lead{grid-column:1/-1!important}}
@media (max-width:560px){.f2-pagesx{grid-template-columns:1fr}.f2-pagesx figure{grid-column:1/-1!important}}

/* ---- the Daily Stand ------------------------------------------------------ */
.f2-stand{background:var(--ink);padding:clamp(72px,9vw,150px) 0}
.f2-stand__walls{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.f2-stand__walls li{background:var(--ink-deep) var(--tex) center/cover;min-height:clamp(340px,30vw,520px);display:grid;grid-template-rows:auto 1fr auto;justify-items:center;text-align:center;padding:clamp(20px,2.4vw,36px) clamp(14px,1.6vw,24px);gap:16px;min-width:0}
.f2-stand__d{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim)}
.f21v2 .f2-wall--sm{font-size:clamp(26px,2.6vw,48px);line-height:.86;align-self:center}
.f2-stand__r{font-weight:500;font-size:14px;color:var(--paper)}
.f2-wall .hp-in{display:inline}
@media (max-width:900px){.f2-stand__walls{grid-template-columns:1fr}.f2-stand__walls li{min-height:300px}.f21v2 .f2-wall--sm{font-size:clamp(34px,9.4vw,56px)}}

/* ============================================================ CLOSE */
.f2-close{background:var(--ink) var(--tex) center/cover;padding:clamp(100px,14vw,240px) var(--edge) clamp(72px,9vw,140px);display:grid;justify-items:center;gap:clamp(36px,4vw,64px)}
.f21v2 .f2-wall--close{font-size:clamp(64px,13vw,240px)}
.f2-close__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.f2-close__links a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--paper);text-decoration:none;font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;border-bottom:1px solid rgba(244,245,244,.35)}
.f2-close__links a:hover{color:var(--r21);border-bottom-color:var(--r21)}
.f2-close__links .v2-q{font-size:12px}

/* ============================================================ THE CINEMA
   The portfolio's film player (the pattern of onebrief-player.js): a full-window
   dialog, the whole 16:9 frame contained, never cropped, the captions in a band
   under the picture so they never sit on the film's own type. */
.f2-cinema{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#000;color:var(--paper);overflow:hidden}
.f2-cinema::backdrop{background:#000}
.f2-cinema[open]{display:block}
.f2-cinema__frame{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);background:#000}
.f2-cinema__frame>*{min-width:0}
.f2-cinema__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px clamp(12px,2vw,24px)}
.f21v2 .f2-cinema__title{font-family:var(--fl-declare);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;margin:0;color:var(--paper)}
.f2-cinema__close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:transparent;border:1px solid rgba(244,245,244,.35);color:var(--paper);font:500 13px/1 var(--fl-explain);cursor:pointer;border-radius:0}
.f2-cinema__close:hover{background:var(--paper);color:#000}
.f2-cinema__stage{position:relative;min-height:0;overflow:hidden;cursor:pointer}
.f2-cinema__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.f2-cinema__cc,.f2-cinema__bar{position:relative;z-index:1;background:#000}
.f2-cinema__cc{min-height:3.1em;margin:0;padding:8px clamp(12px,4vw,48px) 0;text-align:center;font:500 clamp(14px,1.35vw,19px)/1.45 var(--fl-explain);color:#fff;white-space:pre-line}
.f2-cinema.cc-off .f2-cinema__cc{visibility:hidden}
.f2-cinema__msg{position:absolute;inset:auto 0 16px;text-align:center;font-size:14px;color:var(--paper)}
.f2-cinema__msg a{color:#fff}
.f2-cinema__bar{display:flex;align-items:center;gap:10px;padding:10px clamp(12px,2vw,24px) max(12px,env(safe-area-inset-bottom))}
.f2-cinema__bar button{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;background:transparent;border:1px solid rgba(244,245,244,.28);color:var(--paper);cursor:pointer;font:500 12px/1 var(--fl-explain);letter-spacing:.06em;border-radius:0}
.f2-cinema__bar button:hover{background:rgba(244,245,244,.12)}
.f2-cinema__bar button[aria-pressed="true"][data-act="cc"]{background:var(--paper);color:#000}
.f2-cinema__bar button[data-act="play"]{background:var(--r21);border-color:var(--r21)}
.f2-cinema__bar svg{width:15px;height:15px;fill:currentColor}
.f2-cinema__bar .i-pause,.f2-cinema__bar .is-playing .i-play{display:none}
.f2-cinema__bar .is-playing .i-pause{display:block}
.f2-cinema__bar .i-off,.f2-cinema__bar .is-muted .i-on{display:none}
.f2-cinema__bar .is-muted .i-off{display:block}
.f2-t{font:500 12px/1 var(--fl-explain);font-variant-numeric:tabular-nums;color:var(--paper-dim);min-width:3.2em;text-align:center}
.f2-range{-webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer;--p:0%;margin:0}
.f2-range[data-act="seek"]{flex:1;min-width:60px}
.f2-range[data-act="vol"]{width:88px}
.f2-range::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--r21) var(--p),rgba(244,245,244,.28) var(--p))}
.f2-range::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--r21) var(--p),rgba(244,245,244,.28) var(--p))}
.f2-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;background:var(--paper);border:0;border-radius:0}
.f2-range::-moz-range-thumb{width:14px;height:14px;background:var(--paper);border:0;border-radius:0}
.f2-range:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.f2-cinema :focus-visible{outline:2px solid var(--paper);outline-offset:2px}
@media (max-width:640px){.f2-range[data-act="vol"],.f2-cinema__bar [data-act="mute"]{display:none}.f2-cinema__bar{gap:6px}}
/* an upright screen: the whole 16:9 frame across the full width, its captions under it, the pair centred */
@media (max-aspect-ratio:1/1){
  .f2-cinema__frame{grid-template-rows:auto 1fr auto auto 1fr auto;grid-template-areas:"top" "." "stage" "cc" "." "bar"}
  .f2-cinema__top{grid-area:top}.f2-cinema__stage{grid-area:stage;aspect-ratio:16/9}.f2-cinema__cc{grid-area:cc;padding-top:12px}.f2-cinema__bar{grid-area:bar}
}
html.f2-lock,html.f2-lock body{overflow:hidden}

/* ============================================================ MOTION
   One axis only: a short rise as a composition enters. Content is visible
   without the script; reduced motion keeps every composition still. */
body.f21v2.f2-motion [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.f21v2.f2-motion [data-rise].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.f21v2 [data-rise]{opacity:1!important;transform:none!important}
  .f2-film img,.f2-hero__v,.f2-vert video{transition:none!important}
}
html:has(body.f21v2){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(body.f21v2){scroll-behavior:auto}}

/* phones: the hand-set breaks must hold, so the Walls size to the width */
@media (max-width:560px){.f21v2 .f2-wall{font-size:9.6vw}.f21v2 .f2-wall--truth{font-size:8.4vw}.f21v2 .f2-wall--close{font-size:16vw}.f21v2 .f2-wall--sm{font-size:9.4vw}}