/* ==========================================================================
   QED HOME FILM · [qed_home_film] · prefixed .hf- so the theme cannot collide with it.
   STATIC (default, no JS, reduced motion, ?static): each part = still + its lines, stacked.
   LIVE (html.hf-live): sticky full-screen stage, four clips scrubbed by scroll, pointer-driven tilt / light / depth.
   Glass only where a card sits on the film and only ever describes; buttons are the site's own.
   ========================================================================== */
.hf{position:relative;color:var(--ui-ink,#1A3E68)}
/* keyboard-only: invisible until focused (a transform-based hide was overridden by the theme and sat on the header logo) */
.hf .hf-skip{position:absolute;left:16px;top:16px;z-index:40;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border-radius:999px;background:#1A3E68;color:#F2F2F2;font-weight:600;text-decoration:none}
.hf .hf-skip:focus{width:auto;height:auto;padding:.6rem 1.1rem;clip:auto;clip-path:none}
.hf-stage{position:relative}
.hf-ch{max-width:var(--g-max,1360px);margin-inline:auto;padding:clamp(40px,7vw,88px) var(--g-margin,24px) 0;box-sizing:border-box}
.hf-still{display:block;width:100%;height:auto;border-radius:var(--r-5,24px);background:var(--ui-bg,#E6E7E8)}
.hf-b{margin:1.4rem 0 0;max-width:46rem}
.hf-b h2{margin:.2em 0 .3em}
.hf-b p{margin:0 0 .6em}
.hf-h1{margin:.1em 0 .3em;font-weight:var(--ui-display-w,300);line-height:.95}
.hf-big{display:block;font-size:clamp(2rem,3.9vw,4.2rem);line-height:1.05}
.hf-big .qed-script{display:block;white-space:nowrap;margin:.12em 0 .22em}   /* theme scales script ×1.32: one phrase per line, never per word */
.hf-sm{display:block;margin-top:1.1em;line-height:1.4;font-size:clamp(.82rem,1.1vw,1rem);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ui-ink-2,#3B5375)}
.hf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.1rem!important}
.hf-tag{max-width:var(--g-max,1360px);margin:1.2rem auto 0;padding:0 var(--g-margin,24px);box-sizing:border-box;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ui-ink-2,#3B5375)}
.hf-hint,.hf-strip{display:none}
html:not(.hf-live) .hf .qed-liquid{padding:clamp(20px,2.4vw,32px)}
.hf-sheen{display:none}
html.hf-live .hf-sheen{display:block}

/* full-bleed + sticky guard: content wrappers only (the story page's broader guard also widened the header, moving the logo) */
body.qed-has-film :is(#page,#content,.site-content,.content-area,.site-main,.inside-article,.entry-content,article.type-page){overflow:visible!important;transform:none!important;contain:none!important}
body.qed-has-film #page.grid-container{max-width:none!important}
body.qed-has-film .site-content{display:block!important}
body.qed-has-film .inside-article{padding:0!important;max-width:none!important;background:transparent!important}
body.qed-has-film .entry-content{margin:0!important}
body.qed-has-film .entry-header{display:none!important}

/* ---------------------------------- LIVE ---------------------------------- */
html.hf-live .hf{height:calc(var(--hf-len,33) * 16.5vh + 100vh)}   /* 16.5vh of scroll per second of film */
html.hf-live .hf-stage{--hf-off:0px;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ui-smoke,#F2F2F2);}
html.hf-live .hf-ch{display:contents}
html.hf-live .hf-still{display:none}

/* the film plane: locked, no pointer motion */
.hf-plane{position:absolute;inset:0;z-index:1;transform-origin:50% 50%;backface-visibility:hidden;background:var(--ui-smoke,#F2F2F2)}
/* frame cache: the last good frame, under the video, so a dropped video picture (tab / Space switch) never shows blank */
.hf-cache{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hf-v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;background:transparent}
/* a clip that failed to load: its still stands in */
html.hf-live .hf-ch.hf-novid.is-on .hf-still{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:0}
.hf-opening .hf-plane{transition:none}

/* ---------- GLASS PANES on the film ----------
   Built from the site's v3 clear glass, tuned for a mostly-white film: a brighter body (white, not grey), a crisp specular lip and rim,
   a soft lift shadow so the slab separates from a white frame, and a lens edge on Chromium (home-film.js).
   Tilt with the pointer, sheen follows the film's light, liquid-drop entrance. Type: sentence case, left-aligned, three levels only. */
@property --hf-s{syntax:"<number>";inherits:false;initial-value:1}
@property --hf-r{syntax:"<length>";inherits:false;initial-value:28px}
html.hf-live .hf-b{position:absolute;z-index:5;margin:0;box-sizing:border-box;left:var(--g-margin,24px);bottom:calc(clamp(64px,12vh,130px) + var(--hf-off,0px));
  width:auto;max-width:min(30rem,calc(100% - 2 * var(--g-margin,24px)));padding:clamp(22px,2.2vw,30px) clamp(24px,2.4vw,34px) clamp(24px,2.4vw,32px);text-align:left;
  --hf-s:.92;--hf-r:56px;border-radius:var(--hf-r);opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(var(--hf-s));transform-origin:20% 80%;
  transition:opacity .45s var(--ui-ease,ease),--hf-s .5s var(--ui-ease,ease),--hf-r .5s ease,visibility 0s .5s}
.hf .hf-b.qed-liquid.qed-liquid{
  background-color:transparent!important;
  background-image:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.30) 45%,rgba(255,255,255,.42) 100%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.7) brightness(1.06)!important;backdrop-filter:blur(14px) saturate(1.7) brightness(1.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(26,62,104,.10),inset 0 0 32px rgba(255,255,255,.35),
    0 2px 4px rgba(11,36,64,.06),0 34px 70px -34px rgba(11,36,64,.45)!important}
.hf .hf-b.qed-liquid.qed-liquid::before{display:none!important}
/* frost: for a pane that sits on a dark frame (the cell close-ups), where clear glass turns grey */
.hf .hf-b--frost.qed-liquid.qed-liquid{background-image:linear-gradient(150deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.76) 50%,rgba(255,255,255,.84) 100%)!important}
html.hf-live .hf-b.is-on{opacity:1;visibility:visible;--hf-s:1;--hf-r:28px;
  transition:opacity .5s var(--ui-ease,ease),--hf-s .9s cubic-bezier(.2,1.45,.35,1),--hf-r 1.1s cubic-bezier(.2,1.35,.3,1),visibility 0s}
html.hf-live .hf-b.is-on .qed-btn{pointer-events:auto}
/* the inside comes into focus a beat after the pane lands */
html.hf-live .hf-b>:not(.hf-sheen){opacity:0;filter:blur(5px);transform:translateY(10px);transition:opacity .4s,filter .5s,transform .7s var(--ui-ease,ease)}
html.hf-live .hf-b.is-on>:not(.hf-sheen){opacity:1;filter:none;transform:none;transition-delay:.16s}
html.hf-live .hf-b.is-on>:nth-child(2){transition-delay:.26s}
html.hf-live .hf-b.is-on>:nth-child(3){transition-delay:.36s}
/* moving specular sheen: the same light that crosses the film */
.qed-liquid>.hf-sheen{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 120% at 18% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%)}
/* sheen sits UNDER the type (it was washing the text out wherever the light passed) */
.hf .hf-b.qed-liquid>:not(.hf-sheen){position:relative;z-index:2}
/* type: label · heading · one sentence */
.hf .hf-b .qed-idx.qed-idx{display:flex;align-items:center;gap:10px;margin:0 0 .7rem;color:#0566BD!important;font-size:.72rem!important;letter-spacing:.2em!important;font-weight:600;text-transform:uppercase;text-shadow:none!important}
.hf .hf-b .qed-idx.qed-idx::before{content:"";width:22px;height:1.5px;border-radius:2px;background:currentColor;flex:none}
.hf .hf-b h2{margin:0;font-size:clamp(1.9rem,2.9vw,2.9rem)!important;line-height:1.02!important;font-weight:300!important;letter-spacing:-.015em!important;color:#1A3E68!important;text-transform:none!important;text-shadow:none!important}
.hf .hf-b h2 b{font-weight:600!important}
.hf .hf-b p:not(.qed-idx):not(.hf-actions){margin:.75rem 0 0;max-width:26rem;font-size:clamp(.95rem,1.05vw,1.05rem)!important;line-height:1.5!important;letter-spacing:0!important;text-transform:none!important;font-weight:400!important;color:#3B5375!important;text-shadow:none!important}
.hf .hf-b .hf-actions{margin:1.2rem 0 0!important}
html.hf-live .hf-b--title{top:clamp(96px,16vh,170px);bottom:auto;max-width:min(40rem,calc(100% - 2 * var(--g-margin,24px)))}
html.hf-live .hf-b--end{max-width:min(32rem,calc(100% - 2 * var(--g-margin,24px)))}   /* same zone as every card (critique D3) */
/* the theme's glass type rule shrinks every span to .82rem caps: the headline opts out */
.hf .qed-liquid .hf-big,.hf .qed-liquid .hf-big .qed-script{text-transform:none!important;letter-spacing:0!important;line-height:1.05!important;text-shadow:none!important}
.hf .qed-liquid .hf-big{font-size:clamp(2rem,3.7vw,4rem)!important}
.hf .qed-liquid .hf-big .qed-script{font-size:1.32em!important;color:#1A3E68!important}
.hf .qed-liquid .hf-sm{display:block;margin-top:1rem;font-size:.74rem!important;letter-spacing:.18em!important;text-transform:uppercase;font-weight:600!important;color:#3B5375!important;text-shadow:none!important}


/* ---------- PROOF BAR (opening seconds): one fact per audience, qualifier in the same unit (DOs & DON'Ts "proof bar") ---------- */
.hf-proof{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;margin:1.6rem 0 0}
.hf-proof__i{margin:0;display:flex;flex-direction:column;gap:.3rem;color:#1A3E68}
.hf-proof__i b{font-weight:300;font-size:clamp(1.3rem,2.1vw,2.1rem);line-height:1.05;letter-spacing:-.01em}
.hf-proof__i span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#3B5375}
html.hf-live .hf-b.hf-proof{left:var(--g-margin,24px);right:calc(var(--g-margin,24px) + 150px);bottom:calc(clamp(40px,7vh,72px) + var(--hf-off,0px));max-width:none;padding:1.1rem 0 0;margin:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(26,62,104,.28);transform:none;border-radius:0}
html.hf-live .hf-proof__i{padding:0 1.6rem 0 0}
html.hf-live .hf-proof__i+.hf-proof__i{padding-left:1.6rem;border-left:1px solid rgba(26,62,104,.18)}
/* soft smoke floor under the bar so it reads on any frame */
html.hf-live .hf-b.hf-proof::before{content:"";position:absolute;left:calc(-1 * var(--g-margin,24px));right:-200px;bottom:clamp(-72px,-7vh,-40px);height:calc(100% + 120px);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(242,242,242,.92),rgba(242,242,242,.6) 55%,rgba(242,242,242,0))}
html.hf-live .hf-b.hf-proof.is-on>:nth-child(1){transition-delay:.35s}
html.hf-live .hf-b.hf-proof.is-on>:nth-child(2){transition-delay:.5s}
html.hf-live .hf-b.hf-proof.is-on>:nth-child(3){transition-delay:.65s}

/* ---------- BIG TYPE: solid blue words on white smoke (canvas, drawn by home-film.js) ---------- */
.hf-type{display:none}
html.hf-live .hf-type{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.hf-x__sr{display:block;font-size:clamp(2.4rem,7vw,5rem);font-weight:300;line-height:1;margin:1.4rem 0 .4rem;color:#1A3E68}
html.hf-live .hf-x__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
html.hf-live .hf-x{display:contents}
/* caption under the word: plain blue type on the smoke, no card */
.hf-x__cap{margin-top:.4rem;color:#1A3E68}
.hf-x__cap .qed-idx{max-width:none;color:#0566BD;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;margin:0 0 .5rem}
.hf-x__cap h2{margin:0 auto;max-width:none;font-weight:300;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.1;color:#1A3E68}
.hf-x__cap h2 b{font-weight:600}
.hf-x__cap p:not(.qed-idx){margin:.55rem auto 0;max-width:none;font-size:clamp(.82rem,.95vw,.95rem);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#3B5375}
html.hf-live .hf-x__cap{position:absolute;z-index:5;left:50%;bottom:clamp(56px,12vh,130px);width:min(46rem,calc(100% - 2 * var(--g-margin,24px)));margin:0 0 0 calc(min(46rem,100% - 2 * var(--g-margin,24px)) / -2);text-align:center;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
html.hf-live .hf-x.is-on .hf-x__cap{opacity:1;visibility:visible;transition:opacity .5s .25s,visibility 0s}
html.hf-live .hf-x__cap>*{opacity:0;transform:translateY(14px);transition:opacity .45s,transform .8s var(--ui-ease,ease)}
html.hf-live .hf-x.is-on .hf-x__cap>*{opacity:1;transform:none;transition-delay:.35s}
html.hf-live .hf-x.is-on .hf-x__cap>:nth-child(2){transition-delay:.45s}
html.hf-live .hf-x.is-on .hf-x__cap>:nth-child(3){transition-delay:.55s}
/* the film steps back to white smoke while big type is up (amount set per frame) */
html.hf-live .hf-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--hf-wash,0);
  background:radial-gradient(ellipse 75% 70% at 50% 46%,rgba(242,242,242,.94),rgba(242,242,242,.80))}

/* chrome: concept tag, rail, scroll hint */
html.hf-live .hf-tag{position:absolute;z-index:6;left:var(--g-margin,24px);bottom:calc(18px + var(--hf-off,0px));margin:0;padding:0;max-width:none;font-size:.66rem;color:var(--ui-ink-2,#3B5375);opacity:.85}
/* chapter filmstrip (right edge): thumbnail + label + progress line per clip */
html.hf-live .hf-strip{display:flex;flex-direction:column;gap:10px;position:absolute;z-index:7;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%)}
.hf-strip__i{position:relative;display:block;width:112px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#E6E7E8;
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 10px 24px -14px rgba(11,36,64,.45);opacity:.62;transform:scale(.94);transform-origin:100% 50%;transition:opacity .35s,transform .35s var(--ui-ease,ease),box-shadow .35s}
.hf-strip__i img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.hf-strip__l{position:absolute;left:8px;bottom:9px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#1A3E68;
  background:rgba(242,242,242,.86);padding:3px 7px;border-radius:999px;line-height:1.2}
.hf-strip__l b{font-weight:700;margin-right:2px}
.hf-strip__p{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(26,62,104,.16)}
.hf-strip__p i{position:absolute;inset:0;background:#0566BD;transform:scaleX(0);transform-origin:0 50%}
.hf-strip__i:hover,.hf-strip__i:focus-visible{opacity:.9}
.hf-strip__i.is-on{opacity:1;transform:none;box-shadow:0 0 0 1.5px #1A3E68,0 14px 30px -14px rgba(11,36,64,.55)}
html.hf-live .hf-hint{display:block;position:absolute;z-index:6;right:clamp(14px,2vw,30px);width:112px;text-align:center;top:calc(50% + 150px);margin:0;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--ui-ink-2,#3B5375);transition:opacity .4s}
html.hf-live .hf-hint::after{content:"";display:block;width:1px;height:28px;margin:8px auto 0;background:currentColor;animation:hf-drop 1.6s ease-in-out infinite}
@keyframes hf-drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* phones: cards sit low and full width, rail becomes a dot row, smaller type */
@media (max-width:820px){
  html.hf-live .hf-b,html.hf-live .hf-b--right{left:16px;right:16px;width:auto;max-width:none;bottom:clamp(48px,9vh,90px)}
  html.hf-live .hf-x__cap{left:16px;right:16px;width:auto;margin-left:0;bottom:clamp(48px,9vh,90px)}
  html.hf-live .hf-b--title{top:auto;bottom:clamp(48px,9vh,90px)}
  html.hf-live .hf-b.hf-proof{top:28px;bottom:auto;left:16px;right:16px;grid-template-columns:1fr 1fr 1fr;padding:.7rem 0 0}
  html.hf-live .hf-proof__i,html.hf-live .hf-proof__i+.hf-proof__i{padding:0 .5rem}
  html.hf-live .hf-proof__i:first-child{padding-left:0}
  .hf-proof__i b{font-size:1rem}
  .hf-proof__i span{font-size:.56rem;letter-spacing:.1em}
  html.hf-live .hf-b.hf-proof::before{left:-16px;right:-16px;top:-40px;bottom:auto;height:calc(100% + 70px);background:linear-gradient(to bottom,rgba(242,242,242,.94),rgba(242,242,242,.7) 60%,rgba(242,242,242,0))}
  html.hf-live .hf-strip{flex-direction:row;gap:4px;top:10px;left:16px;right:16px;transform:none}
  .hf-strip__i{flex:1;width:auto;height:3px;border-radius:2px;box-shadow:none;background:transparent;opacity:1;transform:none}
  .hf-strip__i img,.hf-strip__l{display:none}
  .hf-strip__p{height:3px;border-radius:2px}
  .hf-strip__i.is-on{box-shadow:none}
  html.hf-live .hf-hint{display:none}
}