*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ── BRAND-PALETTE VARIANT ──
     Identical to index.html in content, structure, and behaviour. The
     only differences are colour tokens: the stone substrate is swapped
     for clean white, and the quadrant accents are mapped to the
     official brand kit (Primary Blue, Cyan, Gold, Sky Blue), with
     darkened text variants where the canonical fails AA on white.

     Brand kit reference:
       Primary Blue    #0053F7
       Cyan            #08E0EB
       Dark Aubergine  #2C003F
       Navy Blue       #003897
       Sky Blue        #009FFA
       Ice Blue        #ABE3FA
       Gold            #DAA700
       Brown           #6E4A32
       Medium Grey     #878A9D
       Light Grey-Blue #A5BAD5
       White           #FFFFFF                                          */
  --paper:#FFFFFF;          /* White (brand) — clean institutional substrate */
  --paper-2:#F4F6FA;        /* derived — hover / card-surface step */
  --paper-3:#E9EDF4;        /* derived — inset / pressed */
  --ink:#2C003F;            /* Dark Aubergine (brand) — primary text */
  --ink-2:#5C4A6A;          /* derived — lifted aubergine for secondary text */
  --muted:#878A9D;          /* Medium Grey (brand) — kept for reference; use the two below */
  --muted-on-white:#5E6174; /* darkened Medium Grey — AA (≈4.6:1) for small text on white */
  --muted-on-dark:#A5BAD5;  /* lifted Medium Grey — AA (≈5.1:1) on aubergine (--ink) chrome */
  --rule:rgba(44,0,63,0.14);    /* aubergine at low opacity — visible on white */
  --rule-soft:rgba(44,0,63,0.07);

  /* ── Loom brand swatches (official brand kit) ── */
  --loom-blue:#003897;          /* Navy Blue */
  --loom-blue-bright:#0053F7;   /* Primary Blue */
  --loom-gold:#DAA700;          /* Gold */
  --loom-purple:#2C003F;        /* Dark Aubergine */
  --loom-cyan:#08E0EB;          /* Cyan */
  --loom-sky:#009FFA;           /* Sky Blue */
  --loom-ice:#ABE3FA;           /* Ice Blue */
  --loom-brown:#6E4A32;         /* Brown */
  --loom-grey:#878A9D;          /* Medium Grey */
  --loom-greyblue:#A5BAD5;      /* Light Grey-Blue */
  --gold:var(--loom-gold);

  /* ── Quadrants on white (brand-mapped) ──
     Two-tone tokens, same pattern as the stone version. On white,
     canonical Cyan, Gold and Sky Blue all fail AA as text — so we
     derive darkened variants for text and reserve the canonicals for
     accent bars / chip backgrounds (where no text sits on them).

       --c-X        text-on-white variant
       --c-X-fill   canonical brand swatch, used where no text sits on top */
  --c-protect:#0053F7;       --c-protect-fill:#003897;   /* Primary Blue text / Navy Blue fill */
  --c-produce:#00697A;       --c-produce-fill:#08E0EB;   /* darkened cyan text / canonical Cyan fill */
  --c-power:#6E4A32;         --c-power-fill:#DAA700;     /* Brown text / Gold fill (canonical Gold fails as text on white) */
  --c-prepare:#006089;       --c-prepare-fill:#009FFA;   /* darkened sky text / Sky Blue fill */

  --tint-protect:rgba(0,56,151,0.08);
  --tint-produce:rgba(8,224,235,0.14);
  --tint-power:rgba(218,167,0,0.14);
  --tint-prepare:rgba(0,159,250,0.10);

  /* ── Typography (Design System §6) ──
     "Headlines: Bold sans-serif (Helvetica, Liberation Sans, or Inter).
      Sentence case. ALL CAPS only for short labels."
      Body: same family, regular weight, 1.5–1.7 line spacing.

      Inter is loaded via Google Fonts. The body uses OpenType `ss01`
      ("straight-sided" stylistic alternates for a/g/l) — a deliberate
      choice that gives Inter a more *constructed*, less-rounded register,
      better fitting "industrial noir." Documented here because it's a
      departure from default Inter; if someone inherits this file they
      should know `ss01` is intentional, not legacy.

      Mono: §6 specifies IBM Plex Mono only for video (lower thirds).
      For web labels we use JetBrains Mono — more geometric than Plex,
      same data/technical register. Swap the stack here if the screen
      mono is later locked to a different family. */
  --f:'Inter','Helvetica','Liberation Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;

  --max:1300px;
}

html{scroll-behavior:smooth}
html,body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.5;
  font-feature-settings:"liga" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body{
  min-height:100vh;
  /* v7: diagonal weave texture removed.
     The pattern existed to give the dark navy surface tactile grain; on
     stone the substrate already carries quiet warmth, and the texture
     starts to feel decorative rather than structural. Stone is the grain. */
}
::selection{background:var(--gold);color:var(--ink)}    /* v7: ink text on gold reads on stone */
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
input{font:inherit;outline:none}

.screen{display:none}
.screen.active{display:block}

/* ════════════ TOP NAV (shared) ════════════ */
html, body{ overflow-x:clip; } /* guard: 100vw full-bleed bands vs classic scrollbars */
.topnav{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topnav-inner{
  max-width:var(--max);margin:0 auto;
  padding:14px 32px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
}
/* Brand mark — anchored top-right per Design System §5.
   ".brand-100" sub-brand identifier sits beside the wordmark.
   v6: simplified pending Smog-delivered SVG lockup. The four-band
   gradient compressed to mush at 24px; reverted to a single colour
   (lifted Loom blue) until the dedicated lockup arrives. */
.brand{display:inline-flex;align-items:baseline;gap:10px;height:36px}
.brand-mark{height:32px;width:auto;display:block;align-self:center}
/* "100" wordmark hidden — the Loom mark SVG already reads as "Loom 100",
   so the adjacent numeric was redundant. Markup left in place; remove
   the `display:none` below to bring it back. */

.topnav-meta{
  display:flex;gap:30px;align-items:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-dark);
}
.topnav-meta a{}
.topnav-issue{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-dark);
  padding-left:18px;border-left:1px solid var(--rule);
}
.foot-issue{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-dark);
}

/* Visually hidden — accessible to screen readers, invisible on screen. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* v6: parent-org back-link.
   Sits leftmost on every screen — top-nav (home / new pages) and
   qlist-header (quadrant detail). Muted register so it stays a
   navigation hint, not a feature. Reuses the .qlist-back arrow svg. */
.parent-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-dark);
}
.parent-link svg{flex:0 0 auto}

/* v6: topnav left cluster — parent-link sits before the meta nav. */
.topnav-left{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.topnav-cta{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;padding:8px 14px;border:1px solid var(--ink);
  color:var(--ink);
}

/* ════════════ HERO (home) ════════════ */
.hero{
  max-width:var(--max);margin:0 auto;
  padding:96px 32px 64px;
  position:relative;
}
.hero h1{
  /* Bold sans-serif, sentence case — Design System §6. */
  font-family:var(--f);font-weight:700;
  font-size:clamp(48px, 7.6vw, 108px);
  line-height:1.02;letter-spacing:-0.022em;
  color:var(--ink);
  max-width:18ch;margin:0;
}
/* Editorial italic accent — brief §6: "Italic for secondary editorial voice." */
.hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.hero h1 .accent{display:block}
.hero p.deck{
  font-family:var(--f);font-weight:300;
  font-size:clamp(17px, 1.6vw, 21px);line-height:1.55;
  color:var(--ink-2);max-width:62ch;margin-top:30px;
}

/* Hero masthead — issue block. Reads as a publication spine, not a CTA bar. */
.hero-masthead{
  margin:36px 0 0;padding:18px 0 0;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;max-width:780px;
}
/* Column dividers give the masthead structural weight so it commands the
   space rather than reading as a footer note. */
.hero-masthead > div{
  display:flex;flex-direction:column;gap:6px;
  padding:0 24px;
  border-left:1px solid var(--rule);
}
.hero-masthead > div:first-child{border-left:0;padding-left:0}
.hero-masthead dt{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;
}
.hero-masthead dd{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.04em;
  color:var(--ink);margin:0;
}

/* Briefing-film placeholder. Marked clearly as "FORTHCOMING" so it doesn't
   read as another quadrant illustration; the underlying still is dropped
   to 18% so the placeholder text carries the meaning. */
.video-plate{
  margin-top:56px;position:relative;aspect-ratio:16/9;width:100%;max-width:980px;
  background:var(--paper-2);border:1px solid var(--rule);overflow:hidden;
}
.video-plate::before,.video-plate::after{
  content:"";position:absolute;width:10px;height:10px;border:1px solid var(--rule);z-index:2;
}
.video-plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.video-plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.video-plate .frame-art{position:absolute;inset:0;display:grid;place-items:center;opacity:0.18}
.video-plate .frame-art svg{width:60%;height:60%}
/* Forthcoming overprint — gold-rule + mono label, centred. The rule
   doubles as a structural divider per §7. */
.video-plate .forthcoming{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.32em;
  text-transform:uppercase;color:var(--ink-2);font-weight:500;
}
.video-plate .forthcoming::before,
.video-plate .forthcoming::after{
  content:"";width:88px;height:3px;background:var(--gold);  /* §7 gold rule */
}
.video-cap{
  margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-white);display:flex;justify-content:space-between;
  max-width:980px;
}
.video-cap b{color:var(--ink);font-weight:500}

/* ── v7: hero video (Loom100 teaser) ──
   Vimeo iframe embed (no self-hosted MP4). Full content width, native
   16:9 ratio, no surrounding decorative frame, no rounded corners, no
   drop shadow. Controls are Vimeo's defaults — user-initiated play, no
   autoplay. Sits between the masthead and the scroll cue. The iframe
   is wrapped in .hero-video-frame so we can lock the aspect ratio
   without relying on iframe intrinsic sizing (which Vimeo does not
   provide reliably across browsers). */
.hero-video{
  margin:56px 0 0;
  width:100%;max-width:980px;
}
.hero-video-frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:var(--paper-2);
  border:1px solid var(--rule);
}
.hero-video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.hero-video-cap{
  margin-top:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-white);
  display:flex;justify-content:space-between;max-width:980px;
}

/* scroll cue */
.scroll-cue{
  margin-top:56px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--muted-on-white);cursor:pointer;user-select:none;
}
.scroll-cue:hover{color:var(--ink)}
.scroll-cue .arrow{
  width:14px;height:14px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  /* No animation — Design System §3 ("Still, considered, deliberate"). */
}

/* ════════════ QUADRANTS GRID (home) ════════════ */
.quadrants{
  max-width:var(--max);margin:0 auto;
  padding:80px 32px 120px;border-top:1px solid var(--rule);
}
.q-section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;flex-wrap:wrap;gap:24px;
}
.q-section-head .l{max-width:540px}
.q-section-head .l .eb{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.24em;
  color:var(--gold);text-transform:uppercase;font-weight:500;margin-bottom:14px;
}
.q-section-head h2{
  font-family:var(--f);font-weight:700;
  font-size:clamp(30px,4.4vw,52px);letter-spacing:-0.018em;line-height:1.08;
  color:var(--ink);margin:0;max-width:24ch;
}
.q-section-head h2 em{font-weight:700}     /* roman, no italic — sentence case */
.q-section-head .r{
  font-family:var(--f);font-weight:300;
  font-size:17px;line-height:1.55;color:var(--muted-on-white);max-width:340px;
}

.q-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--rule);
}
.q-card{
  position:relative;background:var(--paper);
  display:flex;flex-direction:column;cursor:pointer;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;
  overflow:hidden;     /* v6: clip ghost word to its own card (was bleeding across the 2×2 grid) */
}
.q-card:nth-child(2n){border-right:0}
.q-card:nth-child(n+3){border-bottom:0}
.q-card:hover{background:var(--paper-2)}
.q-card:focus-visible{outline:2px solid var(--c, var(--gold));outline-offset:-2px}
.q-card .accent-bar{height:3px;background:var(--c)}
.q-card.protect{ --c:var(--c-protect); --t:var(--tint-protect) }
.q-card.produce{ --c:var(--c-produce); --t:var(--tint-produce) }
.q-card.power  { --c:var(--c-power);   --t:var(--tint-power)   }
.q-card.prepare{ --c:var(--c-prepare); --t:var(--tint-prepare) }

.q-art{
  position:relative;height:280px;overflow:hidden;
  border-bottom:1px solid var(--rule-soft);background:var(--paper);
}
.q-art .plate{
  position:absolute;inset:24px;
}
.q-art .plate svg{width:100%;height:100%;display:block}

/* ── Inline blueprints — shared illo class.
   `color` sets the default stroke; `--accent` sets the per-quadrant highlight.

   Deliberate departure from §11: the brief specifies illustration accents
   as technical blue #5B9FE8 primary + coral #E8524A secondary (a single
   palette across all quadrants). We instead drive `--accent` per render
   to the quadrant's own colour, so each blueprint feels visually bound
   to its quadrant card. If brand wants per-quadrant blueprints to share
   the §11 illustration palette instead, drop the `--accent` injection in
   `renderIllo()` and set `--accent: #5B9FE8` here.

   No animation — Loom Design System §7: "Loom does not use… animation." */
.illo{
  width:100%;height:100%;display:block;
  color:var(--ink-2);
  --accent:var(--gold);
}
.q-card .body{padding:28px 32px 32px;display:flex;flex-direction:column;gap:0}
.q-card h3{
  font-family:var(--f);font-weight:700;
  font-size:clamp(28px,3vw,40px);letter-spacing:-0.012em;line-height:1.05;
  color:var(--ink);                   /* heading is white; accent is the bar + count */
  margin:0;
  position:relative;z-index:2;
}

.q-card .sub{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-white);margin-top:14px;font-weight:500;
}
.q-card .blurb{
  font-family:var(--f);font-weight:300;
  font-size:17px;line-height:1.55;color:var(--ink-2);
  margin-top:18px;margin-bottom:24px;max-width:46ch;
}
.q-card .row{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
}
.q-card .row .count{color:var(--c);font-weight:500;display:flex;align-items:center;gap:10px}
.q-card .row .count svg{flex:0 0 auto}

/* ════════════ FOOTER (shared) ════════════ */
.footer{
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.footer-inner{
  max-width:var(--max);margin:0 auto;padding:36px 32px;
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;
}
/* v6: footer mark mirrors the nav mark (wordmark + simplified "100" sub-brand). */
.foot-mark{display:inline-flex;align-items:baseline;gap:8px;height:34px}
.foot-mark img{height:30px;width:auto;display:block;align-self:center}
.foot-mark 
.foot-meta{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted-on-dark);text-align:right;line-height:1.8;font-weight:500;
}
.foot-meta b{color:var(--ink);font-weight:500}
.foot-meta a{border-bottom:1px solid var(--rule)}

/* ── Standard footer copy + cols (Design System §10) ── */
.footer-inner{flex-direction:column;align-items:stretch;gap:24px}
.foot-mission{
  font-family:var(--f);font-size:14px;line-height:1.6;color:var(--ink-2);
  max-width:64ch;margin:0;
  /* v6: gold rule removed — Loom uses gold sparingly; the disclaimer rule
     above already carries the structural divider. Mission + cols read as
     one footer unit instead of two stacked panels. */
}
.foot-cols{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-cols .foot-issue{flex:0 0 auto}
.foot-cols .foot-mark{flex:0 0 auto;order:0}
.foot-cols .foot-link{flex:0 0 auto;font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-on-dark)}
.foot-cols .foot-link a{border-bottom:1px solid var(--rule)}
.footer nav li:last-child a,
.foot-cols .foot-link a:last-child{
  pointer-events:none;
  cursor:default;
  text-decoration:none;
  color:#888;
  border-bottom-color:transparent;
}

/* ── Mandatory disclaimer (Design System §11) ── */
.disclaimer{
  max-width:var(--max);margin:48px auto 0;
  padding:18px 32px 0;
  border-top:3px solid var(--gold);     /* gold accent rule, brief §7 */
  font-family:var(--f);font-size:13.5px;font-style:italic;
  line-height:1.5;color:var(--ink-2);
}
.foot-nav{
  display:flex;gap:24px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted-on-dark);
}

/* ════════════ QUADRANT DETAIL SCREEN ════════════ */
.qlist-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.qlist-header-inner{
  max-width:var(--max);margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.qlist-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted-on-dark);
}
.qlist-back svg{flex:0 0 auto}
.qlist-chip{
  display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;font-weight:600;
  padding:6px 12px;color:var(--paper);background:var(--c-protect);
}

.qlist-hero{
  max-width:var(--max);margin:0 auto;
  padding:80px 32px 64px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end;
  border-bottom:1px solid var(--rule);
}
.qlist-eb{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--c-protect);font-weight:500;margin-bottom:18px;
}
.qlist-hero h1{
  /* Sentence case (Inter bold) per Design System §6 — Loom is not all-caps. */
  font-family:var(--f);font-weight:800;
  font-size:clamp(56px,9vw,128px);line-height:1.0;letter-spacing:-0.025em;
  color:var(--ink);
  margin:0;
}
.qlist-deck{
  font-family:var(--f);font-weight:300;
  font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--ink-2);
  max-width:52ch;margin-top:24px;
}
.qlist-plate{
  width:100%;aspect-ratio:16/9;
  background:var(--paper);border:1px solid var(--rule);position:relative;
}
.qlist-plate::before,.qlist-plate::after{
  content:"";position:absolute;width:10px;height:10px;border:1px solid var(--rule);z-index:2;
}
.qlist-plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.qlist-plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.qlist-plate svg{width:100%;height:100%;display:block}
.qlist-plate .lbl{
  position:absolute;bottom:-26px;right:0;
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;
}

/* ── v7: editorial intro — longer prose framing the quadrant's structural
   question. Lives between the hero and the filter bar. Same content
   width as the hero so the prose column doesn't stretch beyond
   readable line-length. */
.qlist-intro{
  max-width:var(--max);margin:0 auto;
  padding:48px 32px 16px;
  border-bottom:1px solid var(--rule);
}
.qlist-intro p{
  font-family:var(--f);font-weight:300;
  font-size:clamp(17px, 1.5vw, 20px);line-height:1.65;
  color:var(--ink-2);max-width:64ch;margin:0;
}
@media (max-width: 680px){
  .qlist-intro{padding:36px 18px 8px}
}

/* filter bar */
.filter-bar{
  max-width:var(--max);margin:0 auto;
  padding:20px 32px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.filter-bar .filter-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-bar .lbl{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--muted-on-white);margin-right:6px;font-weight:500;
}
.filter-bar .chip{
  appearance:none;border:1px solid var(--rule);background:transparent;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 12px;cursor:pointer;
  border-radius:0;             /* Design System §7: no rounded corners. */
}
.filter-bar .chip:hover{border-color:var(--ink)}
.filter-bar .chip.active{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.filter-bar .chip{display:inline-flex;align-items:center;gap:6px}
.filter-bar .chip .chip-label{display:inline}
.filter-bar .chip .chip-close{
  display:none;font-size:13px;line-height:1;
  margin-right:-2px;opacity:0.7;
}
.filter-bar .chip.active .chip-close{opacity:1}
.filter-bar .filter-r{display:flex;align-items:center;gap:14px}
.filter-bar .search{
  position:relative;width:240px;
}
.filter-bar .search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted-on-white);
}
.filter-bar .search input{
  width:100%;padding:9px 12px 9px 34px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.04em;
  background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);
  border-radius:0;
}
.filter-bar .search input:focus{border-color:var(--ink);background:var(--paper)}
.filter-bar .search input::placeholder{color:var(--muted-on-white)}
.filter-bar .count{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;
}

/* company grid */
.company-grid{
  max-width:var(--max);margin:0 auto;
  padding:48px 32px 96px;
  display:grid;grid-template-columns:repeat(3, 1fr);gap:0;
  border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.company-card{
  position:relative;background:var(--paper);
  cursor:pointer;display:flex;flex-direction:column;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:28px 28px 24px;gap:14px;
  min-height:280px;
}
.company-card:nth-child(3n){border-right:0}
.company-card:hover{background:var(--paper-2)}

.company-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.company-card .top .lhs{display:flex;align-items:baseline;gap:10px;min-width:0}
.company-card h3{
  font-family:var(--f);font-weight:600;font-size:21px;
  letter-spacing:-0.01em;line-height:1.15;color:var(--ink);
  margin:0;
}
.company-card .country{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;flex:0 0 auto;
}
.company-card .tags{
  display:flex;gap:8px;flex-wrap:wrap;
  /* v6: tags drop from mono-caps chips to Inter regular sentence-case text.
     Three mono-caps voices per card (eyebrow + tags + cta) was overcrowded;
     tags now read as quiet inline metadata, leaving the entry number as the
     only mono-caps mark per card. */
}
.company-card .tag{
  font-family:var(--f);font-size:11px;font-weight:400;
  letter-spacing:0;text-transform:none;
  padding:0;border:0;background:transparent;color:var(--muted-on-white);
}
.company-card .tag + .tag::before{
  content:"·";margin:0 4px 0 -4px;color:var(--muted-on-white);
}
.company-card .desc{
  font-family:var(--f);font-style:normal;font-weight:300;
  font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0;
}
.company-card .cta-row{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;
}
.company-card .cta-row .why{color:var(--c);font-weight:500}
.company-card .cta-row .entry-no{
  color:var(--c);font-weight:500;font-variant-numeric:tabular-nums;
  /* Structural entry marker, not a CTA — Design System §6 / §10:
     "No calls to action in Loom's own voice." */
}
/* Card-wide affordance — invisible button overlays the article so the whole
   card is keyboard-reachable and screen-reader-named, while the article
   itself stays valid HTML. */
.company-card{position:relative}
.company-card .company-open{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  border-radius:inherit;
}
.company-card .company-open:focus-visible{
  outline:2px solid var(--c, var(--gold));outline-offset:-2px;
}
.qlist-next{
  grid-column:1/-1;
  display:flex;justify-content:flex-end;
  padding:34px 0 0;
}
.qlist-next-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:5px;
}
.qlist-next-link span:not([aria-hidden]){
  color:var(--next-c, var(--ink));font-weight:500;
}
.qlist-next-link:hover{color:var(--loom-blue-bright);border-bottom-color:currentColor}

.empty{
  grid-column:1/-1;text-align:center;padding:80px 0;
  font-family:var(--f);font-weight:300;font-size:17px;color:var(--muted-on-white);
}
/* Push the empty-state above the soft on-screen keyboard on mobile so it
   doesn't end up hidden behind the IME when the search input is focused. */
@media (max-width: 680px){
  .empty{min-height:50vh;display:flex;align-items:center;justify-content:center;padding:32px 16px}
}

/* v6: ════════════ STATIC PAGES (Methodology · Findings) ════════════
   Shared layout for the text-led screens. Reuses .topnav header and
   .footer, so the only page-specific markup is the body container below.
   (The Press block is a section at the foot of the Findings screen.) */
.page-body{
  max-width:var(--max);margin:0 auto;
  padding:96px 32px 120px;
}
.page-head{
  margin-bottom:56px;padding-bottom:40px;
  border-bottom:1px solid var(--rule);
}
.page-body h1{
  font-family:var(--f);font-weight:800;
  font-size:clamp(40px,6vw,72px);line-height:1.04;letter-spacing:-0.022em;
  color:var(--ink);margin:0;max-width:18ch;
}
.page-section{margin-bottom:56px}
.page-section h2{
  font-family:var(--f);font-weight:700;font-size:24px;line-height:1.25;
  letter-spacing:-0.018em;color:var(--ink);margin:0 0 20px;
  text-transform:none;
}
.page-section p{
  font-family:var(--f);font-weight:300;font-size:16px;line-height:1.7;
  color:var(--ink-2);margin:0 0 16px;max-width:64ch;
}
.page-section p:last-child{margin-bottom:0}
.page-section ul{
  list-style:none;padding:0;margin:0 0 16px;
}
.page-section ul li{
  font-family:var(--f);font-weight:300;font-size:16px;line-height:1.7;
  color:var(--ink-2);padding:6px 0 6px 22px;position:relative;max-width:64ch;
}
.page-section ul li::before{
  content:"";position:absolute;left:0;top:0.95em;
  width:10px;height:1px;background:var(--muted-on-white);
}

/* ══════════════════ FILMS ══════════════════
   Films sit one level above the company grid in editorial weight —
   they are commissioned editorial work, not data points. Grid is
   wider than the .page-body text column. Same stone substrate, same
   ink, same no-rounded-corners discipline. */
.films-body{
  max-width:1200px;margin:0 auto;
  padding:96px 32px 120px;
}
.films-intro{
  max-width:60ch;margin:0 0 56px;padding-bottom:40px;
  border-bottom:1px solid var(--rule);
}
.films-intro p{
  font-family:var(--f);font-weight:300;font-size:17px;line-height:1.7;
  color:var(--ink-2);margin:24px 0 0;
}
.films-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:40px 32px;
}
.film-card{
  display:flex;flex-direction:column;cursor:pointer;
  border:none;background:transparent;text-align:left;padding:0;
  color:inherit;font:inherit;
}
.film-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.film-plate{
  position:relative;aspect-ratio:16/9;background:#2A2D38;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:14px 16px;color:#FFFFFF;overflow:hidden;
}
/* Brand-palette: gradients derived from the official quadrant fills */
.film-plate.tint-protect{background:linear-gradient(180deg,#003897 0%,#001A4D 100%)}
.film-plate.tint-produce{background:linear-gradient(180deg,#00697A 0%,#00343D 100%)}
.film-plate.tint-power  {background:linear-gradient(180deg,#6E4A32 0%,#3A2818 100%)}
.film-plate.tint-prepare{background:linear-gradient(180deg,#006089 0%,#003248 100%)}
.film-plate.tint-narrative{background:linear-gradient(180deg,#2C003F 0%,#15001E 100%)}
.film-plate::before{
  /* Play glyph — geometric, not skeuomorphic. No animation. */
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;
  border-left:18px solid rgba(255,255,255,0.85);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.film-card:hover .film-plate::before{
  border-left-color:#fff;
}
.film-cat{
  display:none;
  position:relative;z-index:1;font-family:var(--f-mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;opacity:0.85;font-weight:500;
}
.film-dur{
  display:none;
  position:relative;z-index:1;font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;
  opacity:0.85;font-weight:500;
}
.film-meta{
  margin-top:16px;display:flex;flex-direction:column;gap:8px;
}
.film-title{
  font-family:var(--f);font-weight:600;font-size:19px;line-height:1.3;
  letter-spacing:-0.005em;color:var(--ink);margin:0;
}
.film-blurb{
  font-family:var(--f);font-weight:300;font-size:14px;line-height:1.55;
  color:var(--ink-2);margin:0;
}
.film-card[data-status="forthcoming"] .film-plate{
  background:repeating-linear-gradient(45deg,#2A2D38 0 8px,#22252F 8px 16px);
  cursor:default;
}
.film-card[data-status="forthcoming"] .film-plate::before{
  display:none;
}
.film-card[data-status="forthcoming"]{cursor:default}
.film-card[data-status="forthcoming"] .film-cat::after{
  content:" · forthcoming";opacity:0.7;
}
.film-plate.has-thumb,
.film-card[data-status="forthcoming"] .film-plate.has-thumb{
  background:
    linear-gradient(180deg,rgba(16,6,24,0) 0%,rgba(16,6,24,0) 54%,rgba(16,6,24,0.78) 100%),
    var(--film-thumb);
  background-size:100% 100%,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.film-plate.has-thumb .film-cat,
.film-plate.has-thumb .film-dur{
  opacity:0.96;text-shadow:0 1px 8px rgba(0,0,0,0.65);
}

/* Films teaser plate on home */
.home-films{
  max-width:1200px;margin:0 auto;padding:0 32px 96px;
}
.home-films-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:32px;padding-bottom:18px;border-bottom:1px solid var(--rule);
}
.home-films-head h2{
  font-family:var(--f);font-weight:600;font-size:20px;letter-spacing:-0.005em;
  color:var(--ink);margin:0;
}
.home-films-head .seeall{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.home-films-head .seeall:hover{color:var(--ink);border-color:var(--ink)}
.home-films-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
@media (max-width:880px){
  .home-films-grid{grid-template-columns:1fr;}
}

/* Drawer film plate — appears only when a company has a film */
.popup-film{
  margin:24px 0 0;
}
.popup-film-frame{
  aspect-ratio:16/9;background:#000;
}
.popup-film-frame iframe{width:100%;height:100%;border:0;display:block}
.popup-film-cap{
  margin-top:10px;display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted-on-white);
}

/* Film viewer — 16:9 player + meta, shown inside the centred film modal below
   (no longer the company-drawer shell). */
.film-viewer-frame{
  aspect-ratio:16/9;background:#000;margin:0 0 24px;
}
.film-viewer-frame iframe{width:100%;height:100%;border:0;display:block}
.film-viewer-meta{
  display:none;gap:14px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-on-white);
  margin-bottom:16px;
}

/* ── Centred film/video modal (lightbox) — watch-with-intent viewer ──
   Separate element from the company side-drawer; the video is the primary
   content. Existing tokens only (no new colours). */
.film-overlay{
  position:fixed; inset:0; z-index:1100;          /* above the company drawer (z 1000) */
  background:rgba(0,0,0,0.62);
  display:none; align-items:center; justify-content:center; padding:32px;
}
.film-overlay.active{ display:flex; }
.film-modal{
  position:relative; width:min(960px,100%);
  max-height:calc(100vh - 64px); overflow-y:auto;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
.film-modal:focus{ outline:none; }
.film-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; z-index:2;
  border:1px solid var(--rule); border-radius:0; background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.film-modal-close:hover{ background:var(--paper-2); border-color:var(--ink-2); }
.film-modal .film-viewer-frame{ margin:0; }
.film-modal-body{ padding:26px 32px 32px; }
.film-modal-body h2{
  font-family:var(--f); font-weight:600; font-size:clamp(22px,2.4vw,30px);
  line-height:1.15; letter-spacing:-0.01em; color:var(--ink); margin:0 0 10px;
}
.film-modal-body .desc{
  font-family:var(--f); font-weight:300; font-size:16px; line-height:1.6;
  color:var(--ink-2); margin:0;
}
@media (max-width:680px){
  .film-overlay{ padding:14px; }
  .film-modal{ max-height:calc(100vh - 28px); }
  .film-modal-body{ padding:20px 18px 24px; }
}

/* ── Share control (company drawer + film modal) — existing tokens only ── */
.share-btn{
  display:inline-flex; align-items:center; gap:7px;
  margin:0 0 20px; padding:6px 11px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:500; line-height:1;
  color:var(--ink-2); background:transparent; border:1px solid var(--rule); cursor:pointer;
}
.share-btn:hover{ border-color:var(--ink); color:var(--ink); }
.share-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.share-btn svg{ display:block; flex:0 0 auto; }
.share-btn.copied{ border-color:var(--ink); color:var(--ink); }
.tag-forthcoming{
  display:inline-block;
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;
  padding:1px 7px;border:1px solid var(--rule);margin:0 2px;
  vertical-align:1px;
}

/* ════════════ COMPANY POPUP ════════════ */
/* ── Side drawer ──
   Replaces the centered modal. Slides in from the right; the company list
   stays visible underneath so the user keeps their place in the index.
   This is the editorial pattern — pulling a file from a cabinet, not
   opening an interruption dialog. */
/* Snap cut — Design System §7 ("Loom does not use… animation") and §9
   ("No animation. Snap cuts throughout."). The drawer appears and
   disappears instantly via display:none/block, no slide, no fade. */
.popup-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.32);
  display:none;
}
.popup-overlay.active{display:block}
.popup-card{
  position:fixed;top:0;right:0;height:100vh;
  width:min(580px, 92vw);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden;
  border-left:1px solid var(--rule);
  box-shadow:-24px 0 60px rgba(0,0,0,0.45);
}
.popup-card:focus{outline:none}
.popup-bar{height:3px;background:var(--c-protect);flex:0 0 auto}
.popup-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  border:1px solid var(--rule);border-radius:0;
  display:flex;align-items:center;justify-content:center;background:var(--paper);
  z-index:2;
}
.popup-close:hover{background:var(--paper-2);border-color:var(--ink-2)}
.popup-card h2:focus{outline:none}
.popup-content{padding:40px 44px 44px;overflow-y:auto}
.popup-content::-webkit-scrollbar{width:6px}
.popup-content::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.popup-meta-top{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.popup-chip{
  display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;font-weight:600;
  padding:5px 11px;color:var(--paper);
}
.popup-meta-top .country-tags{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;
  color:var(--muted-on-white);text-transform:uppercase;
}
.popup-card h2{
  font-family:var(--f);font-weight:700;
  font-size:clamp(32px,4vw,48px);letter-spacing:-0.018em;line-height:1.08;
  color:var(--ink);margin:0 0 14px;
}
.popup-card .desc{
  font-family:var(--f);font-weight:300;
  font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 24px;
}
.popup-rule{height:1px;background:var(--rule);margin:24px 0}
.popup-eb{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;margin-bottom:12px;
}
.popup-why{
  font-family:var(--f);font-weight:300;font-size:15.5px;line-height:1.7;color:var(--ink);
  white-space:pre-line;
}
.popup-bottom{
  display:flex;gap:36px;flex-wrap:wrap;
  padding-top:22px;margin-top:28px;border-top:1px solid var(--rule);
}
.popup-bottom .cell{display:flex;flex-direction:column;gap:5px}
.popup-bottom .cell .k{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted-on-white);font-weight:500;
}
.popup-bottom .cell .v{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--ink);font-weight:500;
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 980px){
  .qlist-hero{grid-template-columns:1fr;gap:32px}
  .qlist-plate{max-width:520px}
  .q-grid{grid-template-columns:1fr}
  .q-card{border-right:0}
  .q-card:nth-child(n+1){border-bottom:1px solid var(--rule)}
  .q-card:last-child{border-bottom:0}
  .company-grid{grid-template-columns:repeat(2,1fr)}
  .company-card:nth-child(3n){border-right:1px solid var(--rule)}
  .company-card:nth-child(2n){border-right:0}
}
@media (max-width: 680px){
  .topnav-inner{
    padding:10px 18px 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    align-items:center;
  }
  .topnav-left{display:contents}
  .parent-link{
    order:1;
    min-height:36px;
    max-width:calc(100% - 96px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand{order:2;margin-left:auto}
  .topnav-meta{
    order:3;
    flex:0 0 calc(100% + 36px);
    display:flex;
    gap:24px;
    margin:0 -18px;
    padding:10px 18px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    border-top:1px solid rgba(255,255,255,0.12);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .topnav-meta::-webkit-scrollbar{display:none}
  .topnav-meta a{flex:0 0 auto}
  .topnav-cta{display:none}
  .foot-cols{
    flex-direction:column;
    align-items:flex-start;
  }
  .foot-cols .foot-link{
    flex:1 1 auto;
    max-width:100%;
    white-space:normal;
    letter-spacing:.08em;
  }
  .hero{padding:64px 18px 48px}
  .hero h1{font-size:clamp(44px, 14vw, 96px)}      /* reviewer note */
  .hero-masthead{grid-template-columns:repeat(2,1fr);gap:16px 24px}
  .video-cap{font-size:9.5px}
  .quadrants{padding:64px 18px 80px}
  .q-section-head .r{display:none}
  .q-art{height:220px}                              /* shorter art on phone */
  .q-card .body{padding:22px 22px 24px}
  .q-card h3{font-size:48px}
  .qlist-header-inner{padding:12px 18px}
  .qlist-chip{display:none}                         /* page title says where you are */
  .qlist-hero{padding:56px 18px 40px}
  .filter-bar{padding:18px 18px}
  /* Country chips scroll horizontally rather than wrap on phones */
  .filter-bar .filter-l{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .filter-bar .filter-l::-webkit-scrollbar{display:none}
  .filter-bar .chips{display:flex;gap:8px;flex-wrap:nowrap}
  .filter-bar .chip{flex:0 0 auto}
  .filter-bar .filter-r{width:100%}
  .filter-bar .search{width:100%}
  .company-grid{grid-template-columns:1fr;padding:32px 18px 64px}
  .company-card{border-right:0 !important;min-height:0}
  .qlist-next{justify-content:flex-start;padding-top:28px}
  .footer-inner{padding:28px 18px;flex-direction:column;align-items:flex-start}
  .foot-meta{text-align:left}
  .popup-card{width:100vw;border-left:0}
  .popup-content{padding:28px 24px 32px}
  .popup-card h2{font-size:32px}
}

/* No prefers-reduced-motion block needed — there is no motion to disable. */

/* ════════════ AUBERGINE CHROME (v9) ════════════
   The full-colour Loom100 lockup is designed light-on-dark, so the nav,
   the quadrant-detail header and the footer take the brand aubergine
   (--ink) and the body stays white — the colour lockup then sits in its
   native context. Self-contained block; delete to revert to white chrome. */
.topnav,
.qlist-header{ background:var(--ink); border-bottom:1px solid rgba(255,255,255,0.16); }
.footer{ background:var(--ink); border-top:1px solid rgba(255,255,255,0.16); }

/* chrome text → light */
.topnav-meta a, .parent-link, .topnav-issue, .qlist-back,
.foot-mission, .foot-meta, .foot-issue, .foot-nav, .foot-nav a,
.foot-cols .foot-link, .disclaimer{ color:rgba(255,255,255,0.74); }
.foot-meta b{ color:#FFFFFF; }
.topnav-meta a[aria-current="page"]{ color:#FFFFFF; }

.topnav-meta a:hover, .parent-link:hover, .qlist-back:hover,
.foot-nav a:hover, .foot-cols .foot-link a:hover, .foot-meta a:hover{ color:#FFFFFF; }
.foot-cols .foot-link a, .foot-meta a{ border-bottom-color:rgba(255,255,255,0.3); }
.foot-cols .foot-link a:hover, .foot-meta a:hover{ border-bottom-color:#FFFFFF; }

/* CTA (if present) inverts on dark */
.topnav-cta{ border-color:rgba(255,255,255,0.5); color:#FFFFFF; }
.topnav-cta:hover{ background:#FFFFFF; color:var(--ink); }

/* full-colour lockup, sized so the woven 100 reads on the bar */
.brand{ height:44px; }
.brand-mark{ height:40px; }
.foot-mark{ height:40px; }
.foot-mark img{ height:36px; }

/* ════════════ HERO MUTE CONTROL ════════════
   The home hero runs in Vimeo background mode (no native UI); this is the single
   custom viewer control, mute/unmute only, layered over the frame and wired to
   the Vimeo Player SDK. Existing tokens only (no new colours). */
.hero-mute{
  position:absolute; right:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(44,0,63,0.72);          /* --ink aubergine, reads over video */
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,0.3);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:500; line-height:1; cursor:pointer;
}
.hero-mute:hover{ background:var(--ink); border-color:rgba(255,255,255,0.6); }
.hero-mute:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
.hero-mute svg{ display:block; flex:0 0 auto; }
@media (max-width:680px){ .hero-mute{ right:10px; bottom:10px; padding:7px 10px; } }

/* ════════════ FINDINGS SCREEN ════════════
   Extends the page-body / page-head / page-section scaffolding with a wider
   column and a set of fnd-* component classes (bars, table, map, stat band,
   ladder, retention). Existing tokens only; no animation (Design System §7). */
.page-body.findings{ max-width:1040px; --fnd-col:760px; }
.findings .fnd-f{ margin-bottom:88px; scroll-margin-top:76px; }
#about-press{ scroll-margin-top:76px; }
.findings .fnd-eb{ font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px; }
.findings .fnd-h2{ font-family:var(--f);font-weight:700;font-size:clamp(25px,3.4vw,36px);line-height:1.12;letter-spacing:-0.018em;color:var(--ink);margin:0 0 14px;max-width:28ch; }
.findings .fnd-lead{ font-weight:400;font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:var(--fnd-col);margin:0 0 36px; }
.findings .fnd-p{ font-weight:400;font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:var(--fnd-col);margin:0 0 16px; }
.findings .fnd-p strong{ color:var(--ink);font-weight:700; }
.findings .fnd-note{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.05em;line-height:1.6;color:var(--muted-on-white);margin:0;max-width:var(--fnd-col); }

/* preface + thesis + contents */
.findings .fnd-preface{ max-width:var(--fnd-col);margin-bottom:64px; }
.findings .fnd-preface p{ font-weight:400;font-size:16.5px;line-height:1.68;color:var(--ink);margin:0 0 20px; }
.findings .fnd-preface p.def{ font-style:italic;color:var(--ink-2);margin-bottom:0; }
.findings .fnd-thesis{ margin:0 0 64px;padding-top:40px;border-top:1px solid var(--ink); }
.findings .fnd-thesis p{ font-family:var(--f);font-weight:800;font-size:clamp(28px,4.6vw,52px);line-height:1.1;letter-spacing:-0.022em;color:var(--ink);margin:0;max-width:var(--fnd-col); }
.findings .fnd-thesis em{ font-style:italic;color:var(--loom-blue); }
.findings .fnd-toc{ margin:0 0 96px;max-width:var(--fnd-col); }
.findings .fnd-toc a{ display:flex;gap:16px;align-items:baseline;color:var(--ink);padding:5px 0; }
.findings .fnd-toc a:hover{ color:var(--loom-blue-bright); }
.findings .fnd-toc .n{ font-family:var(--f-mono);font-weight:600;font-size:11px;color:var(--gold);flex:0 0 20px; }
.findings .fnd-toc .t{ font-weight:500;font-size:15px;line-height:1.45; }

/* horizontal bars (sector + round-size) */
.findings .fnd-bars{ display:flex;flex-direction:column;gap:20px;margin:0 0 20px;max-width:var(--fnd-col);position:relative; }
.findings .fnd-bar{ display:grid;grid-template-columns:1fr 52px;gap:2px 12px;align-items:start; }
.findings .fnd-bar .lab{ grid-row:1;grid-column:1; }
.findings .fnd-bar .val{ grid-row:1;grid-column:2;align-self:end; }
.findings .fnd-bar .track{ grid-row:2;grid-column:1/-1; }
.findings .fnd-bar .lab b{ display:block;font-weight:500;font-size:14px;color:var(--ink);line-height:1.35; }
.findings .fnd-bar .lab .ex{ display:none;font-family:var(--f-mono);font-size:10.5px;line-height:1.5;color:var(--muted-on-white);margin-top:2px; }
.findings .fnd-bar .track{ position:relative;height:16px;margin-top:6px;background:var(--rule-soft); }
.findings .fnd-bar .track.danger{ background-image:repeating-linear-gradient(45deg,rgba(218,167,0,0.22) 0 1px,transparent 1px 7px); }
.findings .fnd-bar .fill{ position:absolute;top:0;left:0;bottom:0;background:var(--loom-blue);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.findings .fnd-bars.drawn .fill{ transform:scaleX(1); }
.findings .fnd-bar .val{ font-family:var(--f-mono);font-weight:700;font-size:14px;color:var(--ink);text-align:right; }
.findings .fnd-bar .val.hot{ color:var(--c-power); }
.findings .fnd-annot{ position:relative;max-width:760px;margin:0 0 20px;height:26px; }
.findings .fnd-annot .line{ position:absolute;top:-14px;bottom:8px;width:0;border-left:1.5px dashed var(--c-power); }
.findings .fnd-annot .cap{ position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--c-power); }

/* validation matrix + generic two-column rows */
.findings .fnd-rows{ display:flex;flex-direction:column;gap:22px;margin:0 0 34px;max-width:var(--fnd-col); }
.findings .fnd-row2{ display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:8px 24px; }
.findings .fnd-row2 .k{ font-weight:600;font-size:15px;color:var(--ink);line-height:1.4; }
.findings .fnd-row2 .v{ font-weight:400;font-size:15px;line-height:1.55;color:var(--ink-2); }
.findings .fnd-cos{ font-family:var(--f-mono);font-size:11.5px;color:var(--loom-blue); }

/* four function cards */
.findings .fnd-fncards{ display:grid;grid-template-columns:repeat(2,1fr);gap:28px 36px;margin:0 0 36px;max-width:var(--fnd-col); }
.findings .fnd-fncard{ border-top:2px solid var(--rule);padding-top:14px; }
.findings .fnd-fncard .fn{ font-weight:700;font-size:15px;margin:0 0 8px; }
.findings .fnd-fncard p{ margin:0;font-weight:400;font-size:14.5px;line-height:1.55;color:var(--ink); }

/* dark full-bleed stat band (flagship — Finding 04) */
.findings .fnd-statband{ margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;background:var(--ink);color:#fff;padding:52px 0;margin-bottom:40px; }
.findings .fnd-statband-inner{ max-width:1040px;margin:0 auto;padding:0 clamp(18px,4vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px; }
.findings .fnd-stat .num{ font-family:var(--f-mono);font-weight:700;font-size:clamp(42px,5.4vw,60px);line-height:1;letter-spacing:-0.03em; }
.findings .fnd-stat p{ margin:12px 0 8px;font-weight:400;font-size:14px;line-height:1.5;color:rgba(255,255,255,0.9);max-width:28ch; }
.findings .fnd-stat .src{ font-family:var(--f-mono);font-size:10px;line-height:1.6;color:rgba(255,255,255,0.55); }

/* lifecycle + instrument ladder */
.findings .fnd-life{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin:0 0 12px;max-width:var(--fnd-col); }
.findings .fnd-life .stg{ font-family:var(--f-mono);font-size:12px;color:var(--ink);white-space:nowrap; }
.findings .fnd-life .stg.zone{ border-bottom:1.5px dashed var(--c-power);padding-bottom:1px; }
.findings .fnd-life .arw{ color:var(--muted-on-white); }
.findings .fnd-life .arw.zone{ color:var(--c-power); }
.findings .fnd-ladder{ max-width:var(--fnd-col);margin:0 0 44px; }
.findings .fnd-stage{ display:grid;grid-template-columns:minmax(96px,130px) 1fr;gap:6px 24px; }
.findings .fnd-stage .nm{ font-family:var(--f);font-weight:700;font-size:16px;color:var(--ink); }
.findings .fnd-stage .mech{ margin:0 0 6px;font-weight:400;font-size:14.5px;line-height:1.62;color:var(--ink); }
.findings .fnd-stage .instr{ margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.02em;color:var(--muted-on-white); }
.findings .fnd-ladder .arw{ text-align:center;padding:12px 0;font-family:var(--f-mono);font-size:13px;color:var(--c-power); }

/* map (Finding 03) */
.findings .fnd-maprow{ display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start;max-width:100%; }
.findings .fnd-mapcol{ flex:1 1 460px;min-width:300px; }
.findings .fnd-mapcol svg{ display:block;width:100%;height:auto; }
.findings .fnd-mapside{ flex:1 1 230px;min-width:220px;max-width:300px;display:flex;flex-direction:column;gap:24px;padding-top:8px; }
.findings .fnd-toggle{ display:inline-flex;border:1px solid var(--rule); }
.findings .fnd-toggle button{ font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-on-white);background:none;border:0;padding:7px 11px;cursor:pointer; }
.findings .fnd-toggle button[aria-pressed="true"]{ background:var(--ink);color:#fff; }
.findings .fnd-map-instruction{ margin:0 0 16px;font-family:var(--f);font-weight:300;font-size:14.5px;line-height:1.55;color:var(--ink-2); }
.findings .fnd-geo{ display:flex;flex-direction:column;gap:5px;min-height:86px; }
@media (max-width:768px){
  .findings .fnd-geo{ min-height:86px; }
}
.findings .fnd-geo .kick{ font-family:var(--f-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted-on-white); }
.findings .fnd-geo .name{ font-family:var(--f);font-weight:700;font-size:19px;color:var(--ink);line-height:1.2; }
.findings .fnd-geo .cnt{ font-family:var(--f-mono);font-weight:600;font-size:13px;color:var(--loom-blue); }
.findings .fnd-geo .cnt.top{ color:var(--c-power); }
.findings .fnd-geo .cnt.none{ color:var(--muted-on-white); }
.findings .fnd-geo .cos:empty{ display:none; }
.findings .fnd-ee{ font-weight:400;font-size:13.5px;line-height:1.6;color:var(--ink);margin:0; }
.findings .fnd-ee b{ font-weight:700;color:var(--c-power); }
.findings .fnd-legend{ font-family:var(--f-mono);font-size:10.5px;line-height:2;color:var(--muted-on-white); }
.findings .fnd-legend span{ display:flex;align-items:center;gap:8px; }
.findings .fnd-legend i{ width:10px;height:10px;border-radius:50%;flex:0 0 auto; }
.findings .fnd-legend .lg-size{ width:auto;height:12px;border-radius:0;background:none;display:inline-flex;align-items:center;gap:3px; }
.findings .fnd-legend .lg-size b{ display:block;border-radius:50%;background:rgba(0,56,151,0.55); }
.findings .fnd-legend .lg-size b:first-child{ width:6px;height:6px; }
.findings .fnd-legend .lg-size b:last-child{ width:12px;height:12px; }
.findings .fnd-legend .lg-ee{ background:transparent;border:1.5px dashed var(--gold);box-sizing:border-box; }

/* chart keys — visual legends that carry encoding (colour/pattern/line style)
   so the prose can stay on the finding itself */
.findings .fnd-chartkey{ display:flex;flex-wrap:wrap;gap:6px 22px;margin:2px 0 22px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.05em;color:var(--muted-on-white);max-width:var(--fnd-col); }
.findings .fnd-chartkey span{ display:flex;align-items:center;gap:8px; }
.findings .fnd-chartkey i{ display:block;width:26px;height:12px;flex:0 0 auto; }
.findings .fnd-chartkey .k-fill{ background:var(--loom-blue); }
.findings .fnd-chartkey .k-track{ background:var(--rule-soft); }
.findings .fnd-chartkey .k-danger{ position:relative;background:var(--rule-soft);background-image:repeating-linear-gradient(45deg,rgba(218,167,0,0.22) 0 1px,transparent 1px 7px); }
.findings .fnd-chartkey .k-danger::after{ content:"";position:absolute;top:0;left:0;bottom:0;width:55%;background:var(--c-power); }
.findings .fnd-chartkey .k-zone{ height:9px;border-bottom:1.5px dashed var(--c-power); }
.findings .fnd-map-g{ cursor:pointer;touch-action:manipulation; }
.findings .fnd-map-g circle.hit{ fill:transparent; }
.findings #fnd-borders .land{ fill:var(--paper-2);stroke:var(--rule);stroke-width:0.8;stroke-linejoin:round;vector-effect:non-scaling-stroke; }
.findings #fnd-borders .land.data{ fill:#E7ECF4; }
.findings .fnd-mapcol svg{ overflow:hidden; }

/* retention test (Finding 07) */
.findings .fnd-ret-pick{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 30px; }
.findings .fnd-ret-pick .lb{ font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;color:var(--muted-on-white); }
.findings .fnd-ret-pick button{ font-family:var(--f);font-weight:600;font-size:13.5px;color:var(--ink-2);background:none;border:0;border-bottom:1.5px solid transparent;padding:2px 0;cursor:pointer; }
.findings .fnd-ret-pick button:hover{ color:var(--loom-blue-bright); }
.findings .fnd-ret-pick button[aria-pressed="true"]{ color:var(--ink);border-bottom-color:var(--gold); }
.findings .fnd-ret-rows{ display:flex;flex-direction:column;margin:0 0 14px;max-width:var(--fnd-col); }
.findings .fnd-dim{ padding:20px 0;border-top:1px solid var(--rule-soft); }
.findings .fnd-dim:first-child{ border-top:0; }
.findings .fnd-dim .top{ display:flex;gap:14px;align-items:baseline;margin-bottom:5px; }
.findings .fnd-dim .n{ font-family:var(--f-mono);font-weight:700;font-size:12px; }
.findings .fnd-dim .nm{ font-family:var(--f);font-weight:700;font-size:17px;color:var(--ink); }
.findings .fnd-dim .st{ margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase; }
.findings .fnd-dim .q{ margin:0 0 4px 26px;font-weight:400;font-size:15px;line-height:1.55;color:var(--ink); }
.findings .fnd-dim .rd{ margin:0 0 0 26px;font-weight:400;font-size:13px;line-height:1.55;color:var(--ink-2); }
.findings .fnd-dim .ev{ margin:4px 0 0 26px;font-family:var(--f-mono);font-size:11px;line-height:1.6;color:var(--muted-on-white); }
.findings .fnd-ret-sum{ display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin:0 0 14px; }
.findings .fnd-ret-sum .s{ font-weight:600;font-size:14.5px;color:var(--ink); }
.findings .fnd-ret-sum button{ font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;color:var(--muted-on-white);background:none;border:0;padding:0;cursor:pointer; }
.findings .fnd-ret-sum button:hover{ color:var(--loom-blue-bright); }
.findings .fnd-pull{ font-weight:400;font-size:15.5px;line-height:1.62;color:var(--ink);max-width:var(--fnd-col);margin:0 0 14px; }
.findings .fnd-pull strong{ font-weight:700; }
.findings .fnd-rule{ font-family:var(--f);font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.32;letter-spacing:-0.012em;color:var(--ink);border-left:3px solid var(--gold);padding-left:20px;margin:0 0 36px;max-width:var(--fnd-col); }
.findings .fnd-row2 .fnd-cos{ display:block;margin-top:5px; }
.findings .fnd-stage .nm .gl{ display:block;font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:0.04em;color:var(--muted-on-white);margin-top:4px;line-height:1.5; }
.findings .fnd-h2{ text-transform:none; } /* guard against .page-section h2 uppercase */

/* round-size chart (Finding 05): full-width tracks so the 54% guide aligns */
.findings .fnd-pct{ position:relative;max-width:var(--fnd-col);margin:0 0 8px; }
.findings .fnd-pctbar{ margin:0 0 18px; }
.findings .fnd-pctbar .h{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px; }
.findings .fnd-pctbar .h b{ font-weight:500;font-size:13.5px;color:var(--ink); }
.findings .fnd-pctbar .h .v{ font-family:var(--f-mono);font-weight:700;font-size:13.5px;color:var(--ink); }
.findings .fnd-pctbar .h .v.hot{ color:var(--c-power); }
.findings .fnd-pctbar .track{ position:relative;height:18px;background:var(--rule-soft); }
.findings .fnd-pctbar .track.danger{ background-image:repeating-linear-gradient(45deg,rgba(218,167,0,0.22) 0 1px,transparent 1px 7px); }
.findings .fnd-pctbar .fill{ position:absolute;top:0;left:0;bottom:0;background:var(--loom-blue);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.findings .fnd-pctbar .fill.zone{ background:var(--c-power); }
.findings .fnd-pct.drawn .fill{ transform:scaleX(1); }
.findings .fnd-pct .guide{ position:absolute;top:0;bottom:24px;border-left:1.5px dashed var(--c-power);pointer-events:none;z-index:2; }
.findings .fnd-pct .guide span{ position:absolute;bottom:-20px;left:8px;white-space:nowrap;font-family:var(--f-mono);font-size:10px;letter-spacing:0.04em;color:var(--c-power); }

@media (max-width:680px){
  .findings .fnd-statband{ padding:38px 0; }
  .findings .fnd-fncards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .findings .fnd-bar .fill,.findings .fnd-pctbar .fill{ transform:scaleX(1)!important;transition:none!important; }
}

/* ════════════ Loom100 2026 update overrides ════════════ */

/* restrained home headline */
#screen-home .hero h1{
  max-width:15ch;
  font-size:clamp(50px,6.2vw,88px);
  line-height:.98;
  letter-spacing:-.035em;
}
#screen-home .hero h1 .accent{
  margin-top:.12em;
  color:var(--gold);
  font-style:normal;
  font-weight:500;
  font-size:.72em;
  line-height:1.04;
  letter-spacing:-.025em;
}
#screen-home .hero h1 em{font-style:normal}
#screen-home .hero p.deck{max-width:62ch}

/* priority rows on the Index */
#screen-home .q-section-head{margin-bottom:48px}
#screen-home .q-section-head .l{max-width:none}
#screen-home .q-section-head h2{max-width:none}
#screen-home .q-section-head .r:empty{display:none}
#screen-home .q-section-standfirst{
  margin:14px 0 0;
  font-family:var(--f);font-weight:300;
  font-size:17px;line-height:1.6;color:var(--ink-2);
}
#screen-home .q-grid{
  display:block;
  border:0;
  border-top:1px solid var(--ink);
}
#screen-home .q-card{
  display:block;
  min-height:0;
  border:0;
  border-bottom:1px solid var(--rule);
}
#screen-home .q-card:nth-child(2n),
#screen-home .q-card:nth-child(n+3){border-bottom:1px solid var(--rule)}
#screen-home .q-art,
#screen-home .q-card .sub{display:none}
#screen-home .q-card .body{
  padding:36px 0 34px;
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(0,1fr);
  column-gap:44px;
  align-items:start;
}
#screen-home .q-card h3{grid-column:1;font-size:clamp(34px,3.4vw,48px)}
#screen-home .q-card .blurb{grid-column:2;grid-row:1;margin:4px 0 0;max-width:60ch}
#screen-home .q-card .row{grid-column:1/-1;margin-top:28px;padding-top:0;border-top:0}
#screen-home .q-card .row .count{color:var(--ink)}

/* neutral repeated actions */
.company-card .cta-row .why{color:var(--ink);font-weight:500}
.company-card .cta-row .entry-no{display:none}
.filter-bar .chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* compact aubergine mastheads */
.section-hero{background:var(--ink);color:#fff}
.section-hero-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:76px 32px 72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,360px);
  gap:72px;
  align-items:end;
}
.section-hero h1{
  margin:0;max-width:15ch;
  font-family:var(--f);font-weight:800;
  font-size:clamp(48px,6vw,82px);line-height:.96;letter-spacing:-.045em;
  color:#fff;
}
.section-hero p{
  margin:0 0 5px;max-width:34ch;
  font-family:var(--f);font-weight:300;
  font-size:17px;line-height:1.65;
  color:rgba(255,255,255,.82);
}
#screen-methodology .section-hero-inner{grid-template-columns:1fr}
#screen-methodology .page-body{padding-top:72px}
#screen-films .films-body{padding-top:72px}

.loom100-password{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 24px;
  background:var(--ink);
  color:#fff;
  font-family:var(--f);
}
.loom100-password-inner{
  width:min(100%,520px);
}
.loom100-password-logo{
  display:block;
  width:auto;
  height:38px;
  margin:0 0 48px;
}
.loom100-password .post-password-form{
  margin:0;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  color:rgba(255,255,255,.82);
}
.loom100-password .post-password-form p{margin:0 0 18px}
.loom100-password .post-password-form label{
  display:grid;
  gap:10px;
  margin-top:26px;
  font-family:var(--f-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-on-dark);
}
.loom100-password .post-password-form input[type="password"]{
  width:100%;
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  background:#fff;
  color:var(--ink);
  padding:13px 14px;
  font-family:var(--f);
  font-size:17px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
}
.loom100-password .post-password-form input[type="submit"]{
  margin-top:14px;
  border:1px solid #fff;
  border-radius:0;
  background:#fff;
  color:var(--ink);
  padding:13px 18px;
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.loom100-password .post-password-form input[type="submit"]:hover{
  background:var(--loom-cyan);
  border-color:var(--loom-cyan);
}

/* video fallback plates */
.film-plate.tint-protect{background:#003897;color:#fff}
.film-plate.tint-produce{background:#08E0EB;color:#2C003F}
.film-plate.tint-power{background:#DAA700;color:#2C003F}
.film-plate.tint-prepare{background:#009FFA;color:#2C003F}
.film-plate.tint-narrative{background:#2C003F;color:#fff}
.film-plate::before{border-left-color:currentColor}
.film-card:hover .film-plate::before{border-left-color:currentColor}
.film-card[data-status="forthcoming"] .film-plate{
  background:#2C003F;
  color:#fff;
}
.film-card[data-status="forthcoming"] .film-plate::before{display:none}
.film-card .film-plate.has-thumb{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;
}
.film-card .film-plate.has-thumb::after{
  content:"";position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(180deg,rgba(20,0,28,0) 0%,rgba(20,0,28,.78) 100%);
  pointer-events:none;
}
.film-card .film-plate.has-thumb .film-cat,
.film-card .film-plate.has-thumb .film-dur{position:relative;z-index:1}

/* findings longread */
.findings-page{
  --f-max:var(--max);
  --f-reading:696px;
  --f-gutter:0px;
  --f-gold-text:#806300;
  font-weight:300;font-size:16px;line-height:1.7;color:var(--ink);
}
.findings-page .f-label,
.findings-page .f-num,
.findings-page .f-ctx,
.findings-page .f-source,
.findings-page .f-meta{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;
}
.findings-page .f-hero{background:var(--ink);color:#fff}
.findings-page .f-hero-inner{
  max-width:var(--f-max);margin:0 auto;padding:112px 32px 100px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:88px;align-items:end;
}
.findings-page .f-hero h1{
  margin:0;max-width:10ch;font-family:var(--f);font-weight:800;
  font-size:clamp(54px,7vw,104px);line-height:.94;letter-spacing:-.055em;color:#fff;
}
.findings-page .f-preface{
  max-width:var(--f-max);margin:0 auto;padding:64px 32px 68px;
  border-bottom:1px solid var(--rule);
}
.findings-page .f-preface-copy{max-width:var(--f-reading)}
.findings-page .f-preface p{
  margin:0 0 20px;font-weight:300;font-size:16px;line-height:1.7;color:var(--ink-2);
}
.findings-page .f-preface p:last-child{margin-bottom:0}
.findings-page .f-preface .f-lede{
  margin-top:36px;font-family:var(--f);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);
}
.findings-page .f-thesis{
  max-width:var(--f-max);margin:0 auto;padding:58px 32px 62px;
  border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);
  gap:80px;align-items:start;
}
.findings-page .f-thesis p{
  margin:0;max-width:850px;font-family:var(--f);
  font-size:clamp(27px,3vw,42px);line-height:1.2;letter-spacing:-.025em;
  font-weight:700;color:var(--ink);
}
.findings-page .f-pull-link{
  color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
}
.findings-page .f-pull-link:hover{color:var(--loom-blue-bright)}
.findings-page .f-contents ol{list-style:none;margin:0;padding:0}
.findings-page .f-label{margin:0 0 12px;color:var(--muted-on-white)}
.findings-page .f-contents li{border-top:1px solid var(--rule)}
.findings-page .f-contents li:last-child{border-bottom:1px solid var(--rule)}
.findings-page .f-contents a{
  display:grid;grid-template-columns:25px 1fr;gap:10px;padding:10px 0;
  text-decoration:none;font-size:12px;line-height:1.35;color:var(--ink);
}
.findings-page .f-contents a:hover{color:var(--loom-blue-bright)}
.findings-page .f-contents .n{font-family:var(--f-mono);color:var(--f-gold-text)}
.findings-page .f-finding{
  max-width:var(--f-max);margin:0 auto;padding:94px 32px 104px;
  border-bottom:1px solid var(--rule);scroll-margin-top:82px;
}
.findings-page .f-head{display:block;margin-bottom:28px}
.findings-page .f-num{display:block;margin:0 0 14px;color:var(--f-gold-text);font-weight:500}
.findings-page .f-finding h2{
  margin:0;font-family:var(--f);font-weight:700;
  font-size:clamp(31px,4vw,54px);line-height:1.08;letter-spacing:-.035em;
  max-width:25ch;color:var(--ink);text-transform:none;
}
.findings-page .f-copy{max-width:var(--f-reading);margin-left:var(--f-gutter)}
.findings-page .f-copy p,
.findings-page .fnd-body p,
.findings-page p.fnd-body,
.findings-page .fnd-p,
.findings-page .fnd-after-body,
.findings-page .fnd-after-body p{
  max-width:var(--f-reading);
  margin:0 0 20px;font-family:var(--f);font-weight:300;font-size:16px;line-height:1.7;color:var(--ink-2);
  text-align:left;text-wrap:pretty;
}
.findings-page .f-copy p:last-child,
.findings-page .fnd-body p:last-child,
.findings-page p.fnd-body:last-child,
.findings-page .fnd-p:last-child,
.findings-page .fnd-after-body p:last-child{margin-bottom:0}
.findings-page .f-copy p strong,
.findings-page .fnd-p strong,
.findings-page p.fnd-body strong{font-weight:700;color:var(--ink)}
.findings-page .f-copy .f-lead{
  font-weight:300;font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:24px;
}
.findings-page .f-copy h3,
.findings-page .f-finding h3{
  margin:54px 0 20px;font-family:var(--f);font-weight:700;font-size:24px;
  line-height:1.25;letter-spacing:-.018em;color:var(--ink);text-transform:none;
}
.findings-page .fnd-body{max-width:var(--f-reading);margin-top:0}
.findings-page .f-evidence{
  max-width:940px;margin:58px 0 0 var(--f-gutter);padding-top:22px;border-top:2px solid var(--ink);
}
.findings-page .f-ctx{margin:0 0 28px;color:var(--loom-blue);font-weight:500}
.findings-page .fnd-bars,
.findings-page .fnd-pct{display:grid;gap:20px;max-width:940px;margin:0}
.findings-page .fnd-bar,
.findings-page .fnd-pctbar{
  display:grid;grid-template-columns:minmax(220px,320px) minmax(130px,1fr) 60px;
  gap:20px;align-items:center;margin:0;
}
.findings-page .fnd-pctbar .h{display:contents}
.findings-page .fnd-bar .lab b,
.findings-page .fnd-pctbar .h b{font-size:14px;font-weight:600;color:var(--ink)}
.findings-page .fnd-bar .lab .ex{display:none;color:var(--muted-on-white);font-size:12px;line-height:1.45}
.findings-page .fnd-bar .track,
.findings-page .fnd-pctbar .track,
.findings-page .f-track{
  height:12px;background:var(--paper-2);position:relative;
}
.findings-page .fnd-bar .fill,
.findings-page .fnd-pctbar .fill,
.findings-page .f-track span{
  display:block;height:100%;background:var(--loom-blue);transform:none;transition:none;
}
.findings-page .fnd-bar .val,
.findings-page .fnd-pctbar .v{
  font-family:var(--f-mono);font-size:13px;text-align:right;color:var(--ink);
}
.findings-page .fnd-after-body{
  margin:42px 0 0 var(--f-gutter);
}
.findings-page .fnd-after-body strong{font-weight:700;color:var(--ink)}
.findings-page .fnd-note,
.findings-page .fnd-after-note{
  max-width:var(--f-reading);margin:20px 0 0;font-family:var(--f-mono);
  font-size:10.5px;line-height:1.55;color:var(--muted-on-white);
}
.findings-page .fnd-questions{
  list-style:none;margin:56px 0 0 var(--f-gutter);padding:0;max-width:940px;border-top:2px solid var(--ink);
}
.findings-page .fnd-questions li{
  display:grid;grid-template-columns:48px 220px 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.findings-page .fnd-questions .num{font-family:var(--f-mono);color:var(--f-gold-text);font-size:12px}
.findings-page .fnd-questions strong{font-size:15px;color:var(--ink)}
.findings-page .fnd-questions p{margin:0;font-weight:300;font-size:15px;line-height:1.6;color:var(--ink-2)}
.findings-page .fnd-maprow{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.findings-page .fnd-mapcol{flex:1 1 420px;min-width:280px}
.findings-page .fnd-mapcol svg{display:block;width:100%;height:auto;overflow:hidden}
.findings-page .fnd-mapside{
  flex:1 1 240px;min-width:220px;max-width:270px;display:flex;flex-direction:column;padding-top:2px;
}
.findings-page .fnd-map-instruction{
  margin:0 0 16px;font-family:var(--f);font-weight:300;font-size:14.5px;line-height:1.55;color:var(--ink-2);
}
.findings-page .fnd-toggle{display:flex;border-bottom:1px solid var(--ink)}
.findings-page .fnd-toggle button{
  flex:1 1 50%;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-on-white);background:none;border:0;
  padding:0 4px;min-height:44px;cursor:pointer;text-align:left;
}
.findings-page .fnd-toggle button[aria-pressed="true"]{
  color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--ink);
}
.findings-page .fnd-geo{display:flex;flex-direction:column;padding:22px 0 24px}
.findings-page .fnd-geo .kick{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-on-white);
}
.findings-page .fnd-geo .num{
  margin-top:12px;font-weight:800;font-size:clamp(44px,4.4vw,60px);
  line-height:.88;letter-spacing:-.05em;color:var(--loom-blue);
}
.findings-page .fnd-geo .num.top{color:var(--c-power)}
.findings-page .fnd-geo .lab{
  margin-top:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-white);
}
.findings-page .fnd-geo .name{font-weight:700;font-size:18px;line-height:1.25;color:var(--ink)}
.findings-page .fnd-geo .cos:empty{display:none}
.findings-page .fnd-legend{
  font-family:var(--f-mono);font-size:10.5px;line-height:1.6;color:var(--muted-on-white);
  border-top:1px solid var(--rule);padding:18px 0 0;display:flex;flex-direction:column;gap:7px;
}
.findings-page .fnd-legend span{display:flex;align-items:center;gap:9px}
.findings-page .fnd-legend i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.findings-page .fnd-legend .lg-size{
  width:auto;height:12px;border-radius:0;background:none;display:inline-flex;align-items:center;gap:3px;
}
.findings-page .fnd-legend .lg-size b{display:block;border-radius:50%;background:rgba(0,56,151,.55)}
.findings-page .fnd-legend .lg-size b:first-child{width:6px;height:6px}
.findings-page .fnd-legend .lg-size b:last-child{width:12px;height:12px}
.findings-page .fnd-legend .lg-ee{background:transparent;border:1.5px dashed var(--gold);box-sizing:border-box}
.findings-page .fnd-ee{
  margin:16px 0 0;font-family:var(--f-mono);font-size:10.5px;line-height:1.6;letter-spacing:.02em;color:var(--muted-on-white);
}
.findings-page .fnd-map-g{cursor:pointer;touch-action:manipulation}
.findings-page .fnd-map-g circle.hit{fill:transparent}
.findings-page #fnd-borders .land{
  fill:#FAFBFD;stroke:rgba(44,0,63,.10);stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.findings-page #fnd-borders .land.data{fill:#EBF0F7;stroke:rgba(44,0,63,.16)}
.findings-page .f-pressband{max-width:var(--f-max);margin:0 auto;padding:80px 32px 96px}
.findings-page #about-press{margin-bottom:0;scroll-margin-top:82px}
.foot-cols .foot-link{overflow-wrap:anywhere;line-height:1.7}

@media (max-width:900px){
  #screen-home .q-card .body{grid-template-columns:1fr}
  #screen-home .q-card .blurb{grid-column:1;grid-row:auto;margin-top:22px}
}
@media (max-width:860px){
  .findings-page .f-thesis{grid-template-columns:1fr;gap:48px}
  .findings-page .f-hero-inner{padding-top:80px}
}
@media (max-width:680px){
  #screen-home .q-card .body{display:block;padding:28px 0 30px}
  #screen-home .q-card .blurb{max-width:38ch}
  .section-hero-inner{padding:60px 20px 56px;grid-template-columns:1fr;gap:28px}
  .section-hero h1{font-size:clamp(44px,13vw,58px)}
  .page-body{padding-left:20px;padding-right:20px}
  .findings-page .f-hero-inner{padding:66px 20px 70px}
  .findings-page .f-hero h1{font-size:58px}
  .findings-page .f-preface{padding:44px 20px 48px}
  .findings-page .f-thesis{padding:42px 20px 48px}
  .findings-page .f-finding{padding:68px 20px 76px}
  .findings-page .f-copy .f-lead{font-size:16px}
  .findings-page .fnd-bar,
  .findings-page .fnd-pctbar{grid-template-columns:1fr 42px;gap:8px 12px}
  .findings-page .fnd-bar .lab,
  .findings-page .fnd-pctbar .h b{grid-column:1/-1}
  .findings-page .fnd-questions li{grid-template-columns:34px 1fr;gap:6px 12px}
  .findings-page .fnd-questions p{grid-column:2}
  .findings-page .f-pressband{padding:56px 20px 72px}
}

/* Finding 7 — simplify map controls */
body.loom100-template .fnd-toggle { display: none !important; }

body.loom100-template .fnd-map-g[data-id="ee"] .dot {
  stroke: none !important;
  stroke-dasharray: none !important;
}

body.loom100-template .fnd-legend i { display: none !important; }
body.loom100-template .fnd-legend span { display: block; }
body.loom100-template .fnd-legend span:first-child {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

body.loom100-template .fnd-ee {
  margin-top: 28px !important;
}