/* ==========================================================================
   QED STORY ("Armour, removed") v2 · 12 chapters, one edited film clip each, frozen on holds while you read.
   Single stylesheet used BOTH by the standalone file and by the WordPress shortcode [qed_story].
   Everything is prefixed .im- so GeneratePress / the child theme cannot collide with it; the live layout is opt-in (html.im-live).
   UI rules: real site tokens · flat colours · glass only where a card sits on an image and only ever DESCRIBES (label + one line) ·
   buttons are the three UI buttons, never glass.
   ========================================================================== */
:root{--im-vh:100svh;--im-steps:40;--im-top:0px}   /* --im-steps is set by story.js from the timeline */

/* ---------- STATIC (default; also ?static / reduced motion): each chapter = heading + its hold stills + note ---------- */
.im-scrolly{position:relative}
.im-stage{position:relative}
.im-v{display:none}
.im-note{grid-column:1/-1;margin:0;max-width:52em;font-size:.85rem;line-height:1.6;color:var(--ui-ink-2,#3B5375)}
.im-ch{padding:clamp(48px,8vw,96px) var(--g-margin,24px);max-width:var(--g-max,1360px);margin-inline:auto;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4,24px)}
.im-era__hd{grid-column:1/-1;margin:0 0 var(--s-3,16px);color:var(--ui-ink,#1A3E68)}
.im-era__hd .qed-idx{color:var(--ui-ink-2,#3B5375)}
.im-era__hd .im-h-sm{display:block;color:var(--ui-ink-2,#3B5375);text-transform:uppercase;letter-spacing:.2em;font-size:.9rem;font-weight:600;margin:0 0 .3em}
.im-era__hd .im-h-big{display:block;color:var(--ui-ink,#1A3E68);font-size:clamp(3rem,7vw,6rem);font-weight:100;line-height:.95;letter-spacing:-.02em}
.im-h{margin:0;position:relative}
.im-h img{display:block;width:100%;height:auto;border-radius:var(--r-5,24px);box-shadow:var(--clay-sm);background:var(--ui-bg,#E6E7E8)}
.im-static-cap{margin:.7rem 0 0;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ui-ink-2,#3B5375)}
.im-hs,.im-desc,.im-count,.im-year,.im-hint,.im-cta,.im-rail,.im-toast{display:none}
@media (max-width:820px){.im-ch{grid-template-columns:1fr}}
.im-fin{margin:0 auto;max-width:var(--g-max,1360px);padding:0 var(--g-margin,24px) clamp(48px,8vw,96px);box-sizing:border-box}
.im-fin img{width:100%;height:auto;display:block;border-radius:var(--r-5,24px)}

/* ---------- LIVE (scroll-driven): html.im-live ---------- */
html.im-live .im-scrolly{height:calc(var(--im-steps) * 55vh + 100vh)}
html.im-live .im-stage{position:sticky;top:0;height:var(--im-vh);overflow:hidden;background:var(--ui-smoke,#F2F2F2)}
html.im-live .im-ch{display:contents}
html.im-live .im-note{display:none}
/* the film: one <video> per chapter, only the active one shows */
html.im-live .im-v{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;background:transparent;pointer-events:none}
/* safety net under the film: the nearest hold still (set by story.js). Only ever seen if the browser drops the video's picture (Safari after a Space switch). */
.im-back{display:none}
html.im-live .im-back{display:block;position:absolute;inset:0;z-index:0;background:var(--ui-smoke,#F2F2F2) no-repeat 50% 50%/cover;pointer-events:none}
html.im-live .im-ch.is-on .im-v{opacity:1}
/* holds: transparent layers over the film that carry the hotspots; their still only shows if the video fails to load */
html.im-live .im-h{position:absolute;inset:0;z-index:2;pointer-events:none}
html.im-live .im-h.is-front{pointer-events:auto}
html.im-live .im-h>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;max-width:none;opacity:0}
html.im-live .im-ch.im-novid.is-on .im-h.is-still>img{opacity:1}
html.im-live .im-static-cap{display:none}

/* era title: plain hairline type on the stage (no glass) */
html.im-live .im-era__hd{position:absolute;right:clamp(16px,4vw,64px);bottom:clamp(96px,14vh,150px);z-index:10;width:calc(100% - 2*clamp(16px,4vw,64px));margin:0;text-align:right;pointer-events:none;opacity:0;will-change:opacity;
  text-shadow:0 1px 1px rgba(242,242,242,.45),0 0 8px rgba(242,242,242,.28)}
html.im-live .im-era__hd .qed-idx{color:var(--ui-ink-2,#3B5375)}
html.im-live .im-era__hd .im-h-sm{color:var(--ui-ink,#1A3E68);font-size:clamp(.8rem,1vw,.95rem)}
html.im-live .im-era__hd .im-h-big{font-size:calc(clamp(4.6rem,13.5vw,17.5rem) * var(--ts,.34));line-height:.86;letter-spacing:-.035em;color:inherit;margin-top:.04em}

/* description card: the ONLY glass — it describes the still. Label + one line + 3 beat ticks. */
html.im-live .im-desc{display:block;position:absolute;left:clamp(16px,4vw,64px);bottom:clamp(96px,14vh,150px);z-index:10;width:min(400px,calc(100% - 32px));box-sizing:border-box;padding:clamp(22px,2.4vw,34px);pointer-events:none;will-change:opacity}
html.im-live .im-desc .qed-idx{margin:0;color:#FFC112;text-shadow:0 0 3px rgba(16,20,26,.75),0 1px 12px rgba(16,20,26,.7)}
html.im-live .im-desc__t{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#F2F2F2;text-shadow:0 1px 10px rgba(16,20,26,.6);min-height:3em}
html.im-live .im-desc__ticks{display:flex;gap:6px;margin:1rem 0 0}
html.im-live .im-desc__ticks i{display:block;height:2px;flex:1;background:rgba(242,242,242,.35);transition:background .3s}
html.im-live .im-desc__ticks i.is-on{background:#FFC112}

html.im-live .im-year{display:block;position:absolute;right:clamp(16px,4vw,64px);top:calc(var(--im-top) + clamp(40px,8vh,90px));z-index:7;font-size:clamp(6rem,19vw,17rem);line-height:.8;text-align:right;pointer-events:none;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;color:rgba(26,62,104,.10);text-shadow:0 -2px 3px rgba(26,62,104,.16),0 2px 2px rgba(242,242,242,.9)}
html.im-live .im-year small{font-size:.28em;letter-spacing:.06em;margin-left:.15em}
html.im-live .im-count{display:block;position:absolute;left:clamp(16px,4vw,64px);top:calc(var(--im-top) + 20px);z-index:9;font-weight:100;font-size:1.7rem;letter-spacing:.04em;color:var(--ui-ink,#1A3E68);font-variant-numeric:tabular-nums}
html.im-live .im-count small{font-size:.7rem;letter-spacing:.2em;font-weight:600;margin-left:.4rem;opacity:.7}
html.im-live .im-hint{display:block;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:9;font-size:.7rem;letter-spacing:.3em;font-weight:600;text-transform:uppercase;color:var(--ui-ink-2,#3B5375);transition:opacity .4s}
html.im-live .im-cta{display:flex;gap:12px;flex-wrap:wrap;position:absolute;right:clamp(16px,4vw,64px);bottom:clamp(96px,14vh,150px);z-index:11;margin:0;opacity:0;pointer-events:none}
html.im-live .im-cta.is-on{opacity:1;pointer-events:auto}

/* final hero: a point in the void that zooms to the product, then tilts with the pointer */
html.im-live .im-fin{position:absolute;inset:0;z-index:5;margin:0;padding:0;max-width:none;opacity:0;pointer-events:none;background:var(--ui-smoke,#F2F2F2);perspective:1600px}
html.im-live .is-fin .im-fin{pointer-events:auto}
html.im-live .im-hbox{position:absolute;left:50%;top:50%;width:min(76vw,1180px);aspect-ratio:16/9;transform-origin:50% 50%;transform-style:preserve-3d;cursor:grab;touch-action:pan-y}
html.im-live .im-hbox.is-drag{cursor:grabbing}
html.im-live .im-hbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-6,32px);box-shadow:0 40px 70px -30px rgba(13,39,80,.45),0 8px 18px -8px rgba(13,39,80,.2);-webkit-user-drag:none;user-select:none}
html.im-live .im-hbox .im-hs{z-index:8}
/* turntable (make-turntable.py): frames sit on #EDEDED, so the finale takes that ground and the product floats, no card */
html.im-live .im-fin:has(.im-hbox[data-tt]){background:#EDEDED}
html.im-live .im-hbox[data-tt]{width:min(84vw,1080px,calc(var(--im-vh,100vh)*.8*1.5));aspect-ratio:3/2}
html.im-live .im-hbox[data-tt] img{border-radius:0;box-shadow:none;-webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 72%,transparent 100%)}
html.im-live .im-hbox[data-tt] .im-hs{transition:opacity .35s}
html.im-live .im-hbox.is-turned .im-hs{opacity:0;pointer-events:none}

/* edit mode (?edit): click a still to read its hotspot coordinates */
html.im-live .im-toast{display:block;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:12px;background:#1A3E68;color:#F2F2F2;font:600 .8rem/1.2 var(--qed-font-head,sans-serif);letter-spacing:.12em;opacity:0;pointer-events:none;transition:opacity .2s}
html.im-live .im-toast.is-on{opacity:1}
html.im-edit.im-live .im-h.is-front{cursor:crosshair}

/* rail */
@media (min-width:1100px){
  html.im-live .im-rail{display:block;position:fixed;left:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);z-index:25;transition:opacity .3s}
  .im-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .im-rail li{margin:0;padding:0}
  .im-rail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--ui-ink,#1A3E68);font-size:.72rem;letter-spacing:.18em;font-weight:600;opacity:.5;transition:opacity .3s;text-shadow:0 0 10px rgba(242,242,242,.95),0 0 3px rgba(242,242,242,.9)}
  .im-rail button b{font-weight:100;font-size:1.25rem;letter-spacing:.02em;min-width:2ch}
  .im-rail button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s;text-transform:uppercase}
  .im-rail button:hover span,.im-rail button:focus-visible span,.im-rail button.is-on span{max-width:10em}
  .im-rail button.is-on,.im-rail button:hover,.im-rail button:focus-visible{opacity:1}
  .im-rail button:focus-visible{outline:2px solid var(--ui-lazuli,#0566BD);outline-offset:4px;border-radius:6px}
  html.im-live .im-desc{left:clamp(120px,9vw,150px)}
}
@media (max-width:820px){
  html.im-live .im-desc{left:16px;right:16px;width:auto;bottom:72px}
  html.im-live .im-era__hd{left:16px;right:16px;width:auto;bottom:auto;top:calc(var(--im-top) + 66px);text-align:left}
  html.im-live .im-era__hd .im-h-big{font-size:calc(clamp(3.4rem,17vw,6rem) * (var(--ts,.34) * .6 + .4))}
  html.im-live .im-cta{left:16px;right:auto;bottom:16px}
  html.im-live .im-year{font-size:5.5rem;top:calc(var(--im-top) + 20px)}
  html.im-live .im-count{display:none}
  html.im-live .im-v,html.im-live .im-h>img{object-fit:contain;object-position:50% 36%}
  html.im-live .im-back{background-size:contain;background-position:50% 36%}   /* portrait phones: show the whole frame on the paper stage */
  html.im-live .im-hs__card.qed-liquid{width:190px}
}
/* ---------- after the story ---------- */
.im-sss{padding-block:var(--ui-section-y,96px)}
.im-sss .qed-pillar{min-height:0}


/* ==========================================================================
   v3 — IMMERSIVE LAYER (2026-09-24)
   ========================================================================== */

/* ---------- SPLASH: the Q, blind-embossed into white smoke (same colour as the ground; only light and shade draw it) ---------- */
.im-splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:var(--ui-smoke,#F2F2F2);transition:opacity .55s ease}
.im-splash__q{filter:drop-shadow(-3px -3px 3px rgba(255,255,255,.98)) drop-shadow(5px 6px 7px rgba(26,62,104,.22)) drop-shadow(1px 1px 1px rgba(26,62,104,.18));opacity:0;transform:scale(.965);transition:opacity 1.1s ease .15s,transform 2.6s cubic-bezier(.2,.7,.1,1) .15s}
.im-splash__q i{display:block;width:min(30vw,260px);aspect-ratio:779/596;background:linear-gradient(135deg,#F7F7F7,#EDEEEF);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.im-splash.is-in .im-splash__q{opacity:1;transform:none}
.im-splash__flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff 0,rgba(255,255,255,.96) 18%,rgba(255,255,255,0) 62%);transform:scale(.2)}
.im-splash.is-flash .im-splash__flash{animation:imFlash .75s cubic-bezier(.3,0,.1,1) forwards}
.im-splash.is-flash{animation:imSplashOut .9s ease .28s forwards}
.im-splash.is-flash .im-splash__q{transition:transform .5s cubic-bezier(.5,0,.8,.2),opacity .35s ease .15s;transform:scale(1.18);opacity:0}
.im-splash.is-skip{opacity:0;pointer-events:none}
@keyframes imFlash{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:1;transform:scale(3.2)}}
@keyframes imSplashOut{to{opacity:0;visibility:hidden}}
html.im-splashing,html.im-splashing body{overflow:hidden}

/* ---------- HYPER-BIG CHAPTER TITLES: letters sweep in; size is driven by scroll (--ts, 1 = full-bleed, .34 = corner) ---------- */
html.im-live .im-era__hd .im-l{display:inline-block;white-space:pre;opacity:0;transform:translate3d(0,.32em,0) scaleY(1.12);filter:blur(12px);transition:opacity .7s ease,transform 1.1s cubic-bezier(.16,.84,.14,1),filter .9s ease;transition-delay:calc(var(--i) * 34ms)}
html.im-live .im-era__hd.is-in .im-l{opacity:1;transform:none;filter:none}
html.im-live .im-era__hd .im-h-sm,html.im-live .im-era__hd .qed-idx{transition:opacity .6s ease .25s;opacity:0}
html.im-live .im-era__hd.is-in .im-h-sm,html.im-live .im-era__hd.is-in .qed-idx{opacity:1}
html.im-live .im-era__hd{color:var(--ui-ink,#1A3E68)}
html.im-live .im-era__hd.is-light{color:#F2F2F2;text-shadow:0 1px 2px rgba(11,20,34,.28),0 0 10px rgba(11,20,34,.16)}
html.im-live .im-era__hd.is-light .im-h-sm,html.im-live .im-era__hd.is-light .qed-idx{color:#F2F2F2}
.im-script{font-style:normal}

/* ---------- LIVING FRAMES: slow push-in while you read + pointer parallax (story.js sets --ls/--lx/--ly; none on phones) ---------- */
html.im-live .im-ch.is-on .im-v,html.im-live .im-back,html.im-live .im-ch.is-on .im-h{transform:translate3d(var(--lx,0px),var(--ly,0px),0) scale(var(--ls,1));transform-origin:50% 50%;will-change:transform}

/* ---------- HUD CARDS: dot → hairline → card swooshes out → text types in ---------- */
html.im-live .im-hs{display:block;position:absolute;z-index:8;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;font:inherit;opacity:0;transform:scale(.3);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--di,0) * 120ms)}
html.im-live .im-hs.is-dot{opacity:1;transform:none}
html.im-live .im-hs::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FFC112;box-shadow:0 0 0 3px rgba(242,242,242,.92),0 0 18px 2px rgba(255,193,18,.55),0 4px 10px rgba(16,20,26,.35)}
html.im-live .im-hs::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(255,193,18,.9);animation:imPulse 2.4s ease-out infinite}
@keyframes imPulse{0%{transform:scale(.55);opacity:.95}80%,100%{transform:scale(1.5);opacity:0}}
html.im-live .im-hs:focus-visible{outline:2px solid var(--ui-lazuli,#0566BD);outline-offset:3px}
html.im-live .im-hs__a{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
html.im-live .im-hs__ln{position:absolute;left:0;top:0;height:1px;width:var(--len,80px);transform-origin:0 50%;transform:rotate(var(--ang,0deg)) scaleX(0);background:linear-gradient(90deg,rgba(255,193,18,1),rgba(242,242,242,.95));box-shadow:0 0 6px rgba(255,193,18,.6);transition:transform .34s cubic-bezier(.7,0,.2,1)}
html.im-live .im-hs.is-live .im-hs__ln{transform:rotate(var(--ang,0deg)) scaleX(1)}
html.im-live .im-hs__card.qed-liquid{position:absolute;left:var(--dx,80px);top:var(--dy,-56px);width:min(268px,64vw);box-sizing:border-box;padding:15px 18px 16px;text-align:left;border-radius:14px;
  --tx:0%;--ty:0%;--ox:0%;--oy:0%;transform:translate(var(--tx),var(--ty)) scale(.18);transform-origin:var(--ox) var(--oy);opacity:0;clip-path:inset(0 100% 0 0 round 14px);
  transition:opacity .2s ease,transform .2s ease,clip-path .2s ease}
html.im-live .im-hs.is-left .im-hs__card{--tx:-100%;--ox:100%}
html.im-live .im-hs.is-up .im-hs__card{--ty:-100%;--oy:100%}
html.im-live .im-hs.is-left .im-hs__card.qed-liquid{clip-path:inset(0 0 0 100% round 14px)}
html.im-live .im-hs.is-live .im-hs__card.qed-liquid{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1);clip-path:inset(0 0 0 0 round 14px);
  transition:opacity .25s ease .28s,transform .55s cubic-bezier(.16,.9,.2,1) .28s,clip-path .5s cubic-bezier(.6,0,.2,1) .3s}
html.im-live .im-hs__t{display:block;min-height:1.2em;color:#FFC112;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-shadow:0 0 3px rgba(16,20,26,.7)}
html.im-live .im-hs__d{display:block;margin-top:.45rem;color:#F2F2F2;font-size:.72rem;line-height:1.55;letter-spacing:.12em;text-transform:uppercase;font-weight:400;text-shadow:0 1px 8px rgba(16,20,26,.55)}
html.im-live .im-hs__d:empty{margin:0}
html.im-live .is-typing::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:#FFC112;animation:imCaret .6s steps(1) infinite}
@keyframes imCaret{50%{opacity:0}}
html.im-live .im-h.is-front .im-hs,html.im-live .im-fin.is-front .im-hs{pointer-events:auto}
html.im-live .im-h:not(.is-front) .im-hs,html.im-live .im-fin:not(.is-front) .im-hs{pointer-events:none}

/* ---------- GLASS (approved liquid glass): a clear, frosted pane — the picture stays visible through it. The backdrop is only dimmed
   UNDER the pane for legibility; no dark slab. ---------- */
html.im-live .im-desc.qed-liquid,html.im-live .im-hs__card.qed-liquid{background-color:rgba(16,20,26,.10);-webkit-backdrop-filter:blur(22px) saturate(1.2) brightness(.8);backdrop-filter:blur(22px) saturate(1.2) brightness(.8)}

/* ---------- TIMELINE BAR ---------- */
.im-tl{display:none}
html.im-live .im-tl{display:block;position:absolute;left:clamp(16px,4vw,64px);right:clamp(16px,4vw,64px);bottom:14px;height:22px;z-index:12;cursor:pointer;touch-action:none;transition:opacity .3s}
html.im-live .im-tl::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(242,242,242,.7);box-shadow:0 0 0 .5px rgba(26,62,104,.25)}
html.im-live .im-tl__fill{position:absolute;left:0;right:0;top:calc(50% - 1px);height:3px;background:#FFC112;transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 8px rgba(255,193,18,.5)}
html.im-live .im-tl b{position:absolute;top:50%;width:1px;height:9px;margin-top:-4.5px;background:rgba(242,242,242,.95);box-shadow:0 0 0 .5px rgba(26,62,104,.35)}
html.im-live .im-tl b span{position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ui-ink,#1A3E68);background:rgba(242,242,242,.92);padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
html.im-live .im-tl b:hover span{opacity:1;transform:translateX(-50%)}
html.im-live .im-hint{bottom:46px}

/* ---------- SAFE. SECURE. SUSTAINABLE. — one giant word per scroll ---------- */
.im-sss.im-sss--live{height:340vh;padding:0;position:relative}
.im-sss--live .im-sss__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.im-sss--live .qed-g12{position:relative;width:100%;height:100%}
.im-sss--live .qed-g12>.c-1-4:first-child{position:absolute;left:var(--g-margin,24px);top:clamp(80px,12vh,120px);z-index:2}
.im-sss--live .qed-g12>.c-1-4:first-child h2{font-size:clamp(.9rem,1.2vw,1.1rem);letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.im-sss--live .qed-g12>.qed-lede{grid-column:1/-1!important;position:absolute;left:0;right:0;bottom:clamp(40px,9vh,90px);margin:0 auto!important;padding:0 var(--g-margin,24px);box-sizing:border-box;width:min(100%,46em);text-align:center;opacity:.8}   /* full-width + centred: an absolute child of a grid is placed in its grid-column area, which pushed it right/off-screen */
.im-sss--live .qed-pillar{grid-column:auto!important;grid-row:auto!important;position:absolute;left:50%;top:48%;width:min(1100px,92vw);margin:0;transform:translate(-50%,-50%);text-align:center;background:none;box-shadow:none;border:0;opacity:0;pointer-events:none;transition:opacity .6s ease}
.im-sss--live .qed-pillar::before,.im-sss--live .qed-pillar::after{display:none}
.im-sss--live .qed-pillar.is-on{opacity:1;pointer-events:auto}
.im-sss--live .qed-pillar .qed-numeral,.im-sss--live .qed-pillar>.qed-idx{display:none}
.im-sss__w{display:inline-block;white-space:nowrap;font-size:clamp(4.6rem,17vw,19rem);font-weight:100;line-height:.84;letter-spacing:-.04em;color:var(--ui-ink,#1A3E68);margin:0 0 .12em}
.im-sss__w .im-l{display:inline-block;white-space:pre;opacity:0;transform:translate3d(0,.3em,0);filter:blur(12px);transition:opacity .6s ease,transform 1s cubic-bezier(.16,.84,.14,1),filter .8s ease;transition-delay:calc(var(--i) * 45ms)}
.im-sss--live .qed-pillar.is-on .im-sss__w .im-l{opacity:1;transform:none;filter:none}
.im-sss--live .qed-pillar h3{font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin:0 0 .5em;opacity:0;transition:opacity .6s ease .45s}
.im-sss--live .qed-pillar p{margin:0 auto;max-width:36em;opacity:0;transition:opacity .6s ease .6s}
.im-sss--live .qed-pillar.is-on h3,.im-sss--live .qed-pillar.is-on p{opacity:1}
@media (max-width:820px){
  html.im-live .im-hs__card.qed-liquid{width:min(220px,58vw);padding:12px 14px}
  html.im-live .im-tl{bottom:8px}
  html.im-live .im-tl b span{display:none}
}

/* the frozen frame's HUD sits above the year numeral */
html.im-live .im-h.is-front{z-index:9}
/* near-white frames (quilt, lab, bright interiors): the same clear glass, but ink text so it stays legible */
html.im-live .is-bright .im-hs__card.qed-liquid,html.im-live .is-bright .im-desc.qed-liquid{background-color:rgba(242,242,242,.14);-webkit-backdrop-filter:blur(24px) saturate(1.3) brightness(1.05);backdrop-filter:blur(24px) saturate(1.3) brightness(1.05);text-shadow:none}
html.im-live .is-bright .im-hs__t,html.im-live .is-bright .im-desc .qed-idx{color:#1A3E68;text-shadow:none;font-weight:700}
html.im-live .is-bright .im-hs__d,html.im-live .is-bright .im-desc__t{color:#1A3E68;text-shadow:0 0 6px rgba(242,242,242,.55);font-weight:600}
html.im-live .is-bright .im-desc__ticks i{background:rgba(26,62,104,.2)}
html.im-live .is-bright .im-desc__ticks i.is-on,html.im-live .is-bright .is-typing::after{background:#1A3E68}
html.im-live .is-bright .im-hs__ln{background:linear-gradient(90deg,#FFC112,rgba(26,62,104,.7));box-shadow:none}

/* the ONE Battistina moment: written in, left to right, as a single stroke (splitting a script font breaks its joins) */
html.im-live .im-era__hd .im-script{display:inline-block;padding:0 .12em .08em 0;margin-left:.06em;font-size:.92em;letter-spacing:0;line-height:1;vertical-align:-.04em;clip-path:inset(-10% 100% -20% 0);transition:clip-path 1.6s cubic-bezier(.5,.1,.2,1);transition-delay:calc(var(--i) * 34ms + .25s)}
html.im-live .im-era__hd.is-in .im-script{clip-path:inset(-10% -5% -20% 0)}

/* caption card lives top-left (the bottom belongs to the title and the HUD cards) */
@media (min-width:821px){
  html.im-live .im-desc{bottom:auto;top:calc(var(--im-top) + clamp(70px,10vh,96px))}
  html.im-live .im-count{top:calc(var(--im-top) + 20px)}
}

/* YEAR NUMERAL — raised glass emboss (the guidelines' blind emboss, made to work over footage): a frosted translucent fill with a glass sheen,
   lit on its upper edge, shaded below. Reads on light and dark frames; no flat grey. */
html.im-live .im-year{color:transparent;text-shadow:none;
  background:linear-gradient(168deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.2) 34%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.3) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.75)) drop-shadow(0 1.5px 1.5px rgba(11,36,64,.38)) drop-shadow(0 10px 22px rgba(11,36,64,.14))}
html.im-live .im-year small{color:transparent}
html.im-live .im-era__hd h2{color:inherit}

/* ==========================================================================
   PHONES & ORIENTATION (2026-09-28)
   The film is 16:9. Upright phones get a "turn sideways" prompt (Android can switch for them).
   Sideways phones get the whole screen: the site header slides away while the film is on,
   the frame is shown whole (never cropped — slim paper bars at the sides on tall-ratio phones),
   and every overlay is compacted to fit a ~390px-tall screen.
   ========================================================================== */
.im-rotate{display:none}
html.im-live.im-portrait:not(.im-rot-ok) .im-rotate{display:grid;place-items:center;position:absolute;inset:0;z-index:40;padding:24px;
  background:rgba(242,242,242,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.im-rotate__in{max-width:300px;text-align:center}
.im-rotate__in .qed-idx{margin:18px 0 6px;color:var(--ui-lazuli,#0566BD)}
.im-rotate__t{margin:0 0 20px;font-size:1.35rem;line-height:1.25;font-weight:300;color:var(--ui-ink,#1A3E68)}
.im-rotate__b{display:grid;gap:10px;justify-items:center;margin:0}
.im-rotate__ph{display:inline-block;width:46px;height:78px;border:2.5px solid var(--ui-ink,#1A3E68);border-radius:10px;position:relative;animation:im-rot 2.6s cubic-bezier(.6,0,.2,1) infinite}
.im-rotate__ph i{position:absolute;left:50%;bottom:6px;width:10px;height:2.5px;margin-left:-5px;border-radius:2px;background:var(--ui-ink,#1A3E68)}
@keyframes im-rot{0%,18%{transform:rotate(0)}48%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.im-rotate__ph{animation:none;transform:rotate(-90deg)}}

/* sideways phone: film fills the screen */
html.im-land .site-header,html.im-land .im-top{transition:transform .35s ease}
html.im-land.im-infilm .site-header,html.im-land.im-infilm .im-top{transform:translateY(-110%)}
html.im-land{--im-top:0px}
html.im-live.im-land .im-stage{background:var(--ui-smoke,#F2F2F2)}
html.im-live.im-land .im-v,html.im-live.im-land .im-h>img{object-fit:contain;object-position:50% 50%}
html.im-live.im-land .im-back{background-size:contain;background-position:50% 50%}
html.im-live.im-land .im-count{display:none}
html.im-live.im-land .im-year{font-size:min(10vw,22vh);top:10px;right:18px}
html.im-live.im-land .im-era__hd{right:14px;left:14px;width:auto;max-width:none;top:auto;bottom:34px;text-align:right}
html.im-live.im-land .im-era__hd .im-h-big{white-space:nowrap}
html.im-live.im-land .im-era__hd .im-h-sm{font-size:.62rem}
html.im-live.im-land .im-era__hd .im-h-big{font-size:calc(min(9vw,19vh) * var(--ts,.34))}
html.im-live.im-land .im-desc{left:14px;right:auto;top:auto;bottom:34px;width:min(250px,34vw);padding:12px 14px}
html.im-live.im-land .im-desc .qed-idx{font-size:.62rem}
html.im-live.im-land .im-desc__t{font-size:.64rem;margin-top:.4rem;min-height:0;letter-spacing:.1em}
html.im-live.im-land .im-desc__ticks{margin-top:.5rem}
html.im-live.im-land .im-cta{right:14px;left:auto;bottom:34px}
html.im-live.im-land .im-cta .qed-btn{min-height:36px;padding:.3rem 1rem;font-size:.78rem}
html.im-live.im-land .im-tl{left:14px;right:14px;bottom:6px}
html.im-live.im-land .im-tl b span{display:none}
html.im-live.im-land .im-hs__card.qed-liquid{width:180px}
html.im-live.im-land .im-hint{display:none}
html.im-land.im-infilm .qed-ask__fab{opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s}   /* Ask QED steps aside while the film fills a sideways phone */
html.im-live.im-land .im-era__hd h2{width:max-content;max-width:100%;margin-left:auto;margin-right:0;text-align:right}

/* Story captions sit over moving footage that can turn dark, so they keep a denser frost than the site's clear glass
   (heroes are pale photos; the film is not). Same glass edge and lift, more body behind the text. */
html.im-live .im-desc.qed-liquid,html.im-live .im-hs__card.qed-liquid{
  background-color:rgba(242,242,242,.66)!important;
  background-image:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 55%,rgba(255,255,255,.16))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3) brightness(1.04)!important;backdrop-filter:blur(16px) saturate(1.3) brightness(1.04)!important}

/* "Our promise" (2026-09-29): one centre axis. The heading block is centred like everything below it, and the
   promise line sits directly under the pillar instead of pinned to the bottom of the screen. The pillars share one
   grid cell (they cross-fade in place), so the line keeps the same distance whichever pillar is showing. */
.im-sss--live .qed-g12{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:1fr auto auto 1fr;justify-items:center;align-items:center;column-gap:0}
.im-sss--live .qed-g12>.c-1-4:first-child{left:0;right:0;width:auto;text-align:center}
.im-sss--live .qed-pillar{position:relative!important;left:auto!important;top:auto!important;transform:none!important;grid-area:2/1!important;align-self:end}
.im-sss--live .qed-g12>.qed-lede{position:relative!important;left:auto;right:auto;bottom:auto!important;grid-area:3/1!important;align-self:start;margin:clamp(28px,5vh,56px) auto 0!important}
.im-sss--live .qed-g12{padding-top:clamp(150px,21vh,210px);padding-bottom:clamp(20px,4vh,48px);box-sizing:border-box}   /* centre below the heading block, not behind it */
.im-sss--live .qed-pillar{padding:0!important}
.im-sss--live .qed-pillar p{margin-bottom:0}
.im-sss--live .qed-g12>.c-1-4:first-child{grid-area:auto!important;left:0;right:0}   /* span the padding box on both sides so its centre is the page centre */