/* ============================================================
   DEFENDO · the four identities — one attribute on <html>:
     data-variety="street" | "redline" | "film" | "poster"
   Each one changes: tokens · display type (weight / scale / case) · how the crimson
   behaves · the photograph treatment · its own pictures in places · how sections are staged.
   Content and markup are identical in all four.
   This file is assembled by tools/build.py from tools/css/*.css — edit those, not this.
   (Street and Red line are tools/css/1-street-redline.css, untouched since the first build.)
   ============================================================ */

/* brand lock-up pieces: the variety picks */
.brand .badge.b-colour{ display:none; }
/* an identity's own picture for a place sits beside the default one, hidden, until that identity shows it */
.ph img.vx, .hero.inner .hero-media.vx, .cta-media, .qbg{ display:none; }

/* the picture strip can be scrolled from the keyboard; its focus ring sits inside the strip */
.strip ul:focus-visible{ outline-offset:-3px; }

/* ============================================================
   1 · STREET — the city at night. Blue-black asphalt, cold LED, one sodium lamp.
   Motif: the road's broken centre line. Annotation: a small sign plate.
   ============================================================ */
:root[data-variety="street"]{
  --ink-900:#0A0C10; --ink-850:#0E1116; --ink-800:#12151B;
  --ink-700:#191D25; --ink-600:#262C36; --ink-500:#353C48;
  --ink-400:#525B69; --ink-200:#97A1AF; --ink-100:#CBD2DC;
  --bone:#F1F2F0; --deep:#07090C; --scrim:10,12,16;
  --d-weight:600; --d-track:.014em; --d-case:uppercase; --d-lh:1;
  --ph-filter:grayscale(1) sepia(.34) hue-rotate(176deg) saturate(1.05) contrast(1.14) brightness(.8);
  --band-filter:grayscale(1) sepia(.4) hue-rotate(176deg) saturate(1.1) contrast(1.12) brightness(.72);
  --grain:.085;
  --portrait-filter:grayscale(1) sepia(.3) hue-rotate(176deg) contrast(1.08) brightness(1.02);
}
:root[data-variety="street"][data-theme="light"]{
  --ink-900:#DCDDDA; --ink-850:#D5D6D3; --ink-800:#CFD0CD; --ink-700:#C6C8C5; --ink-600:#B1B4B2; --ink-500:#8F9494;
  --ink-400:#626868; --ink-200:#40464A; --ink-100:#24282C; --bone:#101317; --deep:#D2D3D0;
}
/* the sodium lamp: one warm pool of light, never a colour in the UI */
:root[data-variety="street"] .hero::after,
:root[data-variety="street"] .band::after{
  content:""; position:absolute; z-index:2; pointer-events:none; right:-12%; top:-30%; width:70%; height:120%;
  background:radial-gradient(closest-side, rgba(255,166,72,.2) 0%, rgba(255,150,60,.07) 46%, rgba(255,150,60,0) 72%);
  mix-blend-mode:screen;
}
/* the centre line between sections */
:root[data-variety="street"] .section + .section::before,
:root[data-variety="street"] .strip + .section::before,
:root[data-variety="street"] .cta::before{
  content:""; position:absolute; top:-1px; left:var(--pad); right:var(--pad); height:2px; max-width:calc(var(--maxw) - 2 * var(--pad)); margin-inline:auto;
  background:repeating-linear-gradient(90deg, var(--ink-200) 0 38px, transparent 38px 68px); opacity:.42;
}
:root[data-variety="street"] .section.tone{ border-block-color:transparent; }
:root[data-variety="street"] .eyebrow .tick{ display:none; }
:root[data-variety="street"] .eyebrow .idx{ color:var(--bone); border:1px solid var(--ink-400); padding:.42em .7em .38em; letter-spacing:.16em; border-radius:2px; }
:root[data-variety="street"] .hero .eyebrow .idx{ border-color:rgba(241,242,240,.5); }
/* wet-asphalt sheen under the closing call */
:root[data-variety="street"] .cta{ background:linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%); }
:root[data-variety="street"] .cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,160,70,0) 0%, rgba(255,160,70,.05) 100%);
}
:root[data-variety="street"] .hero-media.v-street{ display:block; }

/* ============================================================
   2 · RED LINE — Defendo RED as the identity. Neutral black, whiter bone, a brighter
   red that runs the height of the page. Motif: the red rule + level nodes.
   Annotation: roman level numerals on the rule. Heaviest type, most contrast.
   ============================================================ */
:root[data-variety="redline"]{
  --ink-900:#09090A; --ink-850:#0D0D0F; --ink-800:#121214;
  --ink-700:#1B1B1E; --ink-600:#29292D; --ink-500:#3A3A3F;
  --ink-400:#5A5A60; --ink-200:#A3A3A8; --ink-100:#D6D6D8;
  --bone:#FAFAF7; --crimson:#E5142E; --crimson-hi:#ff2a45; --deep:#050506; --scrim:9,9,10;
  --fam-red:#E5142E;
  --d-weight:700; --d-track:-.022em; --d-case:uppercase; --d-lh:.9;
  --xl:clamp(3.6rem, 1.5rem + 10.4vw, 10.6rem);
  --lg:clamp(2.3rem, 1.4rem + 4.3vw, 5.1rem);
  --md:clamp(1.65rem, 1.2rem + 2.1vw, 2.9rem);
  --ph-filter:saturate(.92) contrast(1.16) brightness(.84);
  --band-filter:saturate(.95) contrast(1.16) brightness(.7);
  --grain:.04; --radius:0px;
  --rl:calc(var(--pad) * .44);
}
:root[data-variety="redline"][data-theme="light"]{
  --ink-900:#F1EFEA; --ink-850:#E9E7E1; --ink-800:#E2E0DA; --ink-700:#D6D4CE; --ink-600:#BDBBB6; --ink-500:#96958F;
  --ink-400:#66655F; --ink-200:#3C3B38; --ink-100:#1E1E1C; --bone:#0A0A0B; --crimson:#D00F28; --deep:#E6E4DE;
}
:root[data-variety="redline"] body::before{
  content:""; position:fixed; z-index:7000; top:0; bottom:0; left:var(--rl); width:2px; background:var(--crimson); pointer-events:none;
}
:root[data-variety="redline"] .section::after,
:root[data-variety="redline"] .band::before{
  content:""; position:absolute; z-index:7001; left:calc(var(--rl) - 4px); top:clamp(80px, 12vh, 168px); width:10px; height:10px; background:var(--crimson);
  margin-top:.1em;
}
:root[data-variety="redline"] .section.tight::after{ top:clamp(56px, 8vh, 104px); }
:root[data-variety="redline"] .band::before{ top:clamp(88px, 12vh, 150px); }
:root[data-variety="redline"] .eyebrow .idx::before{ content:counter(sec, upper-roman); }
:root[data-variety="redline"] .eyebrow .idx{ font-weight:600; font-size:.8rem; letter-spacing:.2em; }
:root[data-variety="redline"] .eyebrow .tick{ width:44px; height:2px; }
:root[data-variety="redline"] .head .display::after{ content:""; display:block; width:72px; height:4px; background:var(--crimson); margin-top:.42em; }
:root[data-variety="redline"] .hero .slogan b{ color:var(--crimson); }
:root[data-variety="redline"] .btn{ font-weight:600; letter-spacing:.02em; }
:root[data-variety="redline"] .pillar{ border-top-width:4px; }
:root[data-variety="redline"] .qstrip figure{ border-left-width:3px; }
:root[data-variety="redline"] .lvl{ border-bottom-color:var(--ink-600); }
:root[data-variety="redline"] .ladder{ border-top:2px solid var(--crimson); }
:root[data-variety="redline"] .brand .badge{ display:none; }
:root[data-variety="redline"] .brand .wm{ font-size:1.6rem; letter-spacing:.14em; padding-bottom:6px; border-bottom:3px solid var(--crimson); }
:root[data-variety="redline"] .site-footer .brand .badge.b-colour{ display:block; width:54px; height:54px; }
:root[data-variety="redline"] .cta{ border-top:2px solid var(--crimson); }
@media (max-width:700px){ :root[data-variety="redline"]{ --rl:7px; } }

/* ============================================================
   3 · FILM — Defendo as a film. The Academy's cold-cinematic house, taken to the screen:
   letterboxed frames, a title card, pictures that run to the edge of the screen, the
   philosophy set as subtitles over four full-screen stills, benefits as a credit roll.
   Pictures lead, type whispers: small, wide-tracked capitals; one crimson hairline.
   Photographs: bleach-bypass (a third of their colour, hard contrast), heavy grain.
   Motion (only when the reader allows it): the frame opens once on load, pictures drift
   a few percent against the scroll, the stills cut over one another.
   ============================================================ */
:root[data-variety="film"]{
  --ink-900:#070707; --ink-850:#0B0B0B; --ink-800:#111110;
  --ink-700:#1B1A19; --ink-600:#2A2927; --ink-500:#3C3A37;
  --ink-400:#66625C; --ink-200:#ABA69D; --ink-100:#D8D3C9;
  --bone:#F0EBE1; --crimson:#C8102E; --crimson-hi:#e2213f; --deep:#000; --scrim:7,7,7;
  --fam-red:#C8102E;
  --d-weight:300; --d-track:.4em; --d-case:uppercase; --d-lh:1.3;
  --xl:clamp(1.5rem, .9rem + 2.6vw, 3.3rem);
  --lg:clamp(1.15rem, .9rem + 1.05vw, 1.85rem);
  --md:clamp(1.4rem, 1.1rem + 1.2vw, 2.05rem);
  --ph-filter:saturate(.34) contrast(1.16) brightness(.9);
  --band-filter:saturate(.3) contrast(1.14) brightness(.76);
  --portrait-filter:saturate(.3) contrast(1.08) brightness(1.04);
  --grain:.1; --radius:0px;
  --bar:72px;
  --fit:calc(min(100vw, var(--maxw)) - 2 * var(--pad));   /* the width of the text column */
  --bleed:calc(var(--pad) + max(0px, (100vw - var(--maxw)) / 2));
}
:root[data-variety="film"][data-theme="light"]{
  --ink-900:#E9E5DC; --ink-850:#E2DED4; --ink-800:#DBD7CD; --ink-700:#CFCAC0; --ink-600:#B8B3A8; --ink-500:#969186;
  --ink-400:#66625A; --ink-200:#423F39; --ink-100:#252320; --bone:#121211; --crimson:#B20E28; --deep:#DDD9CF;
}
/* the screen stays dark in the light theme: everything photographic keeps the film's own black */
:root[data-variety="film"][data-theme="light"] :is(.site-header, .mobile-menu, .hero, .band, .strip, .pillar, .qstrip, .cta){
  --ink-900:#070707; --ink-850:#0B0B0B; --ink-800:#111110; --ink-700:#1B1A19; --ink-600:#2A2927; --ink-500:#3C3A37;
  --ink-400:#66625C; --ink-200:#ABA69D; --ink-100:#D8D3C9; --bone:#F0EBE1; --crimson:#C8102E; --deep:#000;
  color:var(--bone);
}
:root[data-variety="film"][data-theme="light"] .section.tone{ background:var(--ink-850); }
:root[data-variety="film"][data-theme="light"] :is(#pillars, #philosophy){ background:#000; --ink-200:#ABA69D; --ink-100:#D8D3C9; --bone:#F0EBE1; --ink-500:#3C3A37; --crimson:#C8102E; color:#F0EBE1; }
:root[data-variety="film"] .hero-media.v-film{ display:block; }
:root[data-variety="film"] .ph.has-film > img:not(.vx),
:root[data-variety="film"] .hero.inner.has-film .hero-media:not(.vx){ display:none; }
:root[data-variety="film"] .ph.has-film > img.v-film,
:root[data-variety="film"] .hero.inner.has-film .hero-media.v-film{ display:block; }

/* chrome */
:root[data-variety="film"] .eyebrow:not(:has(.lbl)){ display:none; }
:root[data-variety="film"] .eyebrow .idx{ display:none; }
:root[data-variety="film"] .eyebrow{ letter-spacing:.3em; }
:root[data-variety="film"] .brand .wm{ font-weight:600; font-size:1.12rem; letter-spacing:.36em; }
:root[data-variety="film"] .brand .badge{ width:34px; height:34px; }
:root[data-variety="film"] .section.tone{ border-block-color:transparent; background:#000; }
:root[data-variety="film"] .display{ font-family:var(--sans); }
:root[data-variety="film"] .display.h-md{ font-family:var(--cond); font-weight:600; text-transform:none; letter-spacing:-.006em; line-height:1.08; }
:root[data-variety="film"] .btn{ letter-spacing:.02em; }
@media (max-width:1080px){
  :root[data-variety="film"] .mobile-menu a{ letter-spacing:.1em; font-size:clamp(1.2rem,5.6vw,1.9rem); padding:.42em 0; }
}

/* ---- the title card (home) */
:root[data-variety="film"] .hero{ display:block; min-height:0; background:#000; padding:var(--bar) 0 clamp(40px,7vh,76px); }
:root[data-variety="film"] .hero .scrim{ display:none; }
:root[data-variety="film"] .hero .hero-media{ position:relative; inset:auto; width:100%; overflow:hidden;
  height:min(calc(100vw / 2.39), calc(100svh - var(--bar) - 268px)); min-height:240px; background-position:center 36%; }
:root[data-variety="film"] .hero .hero-media::before{ content:""; position:absolute; inset:-5% 0; background:inherit; background-attachment:scroll; }
:root[data-variety="film"] .hero .wrap{ padding-block:0; text-align:center; z-index:3; }
:root[data-variety="film"] .hero:not(.inner) .h-xl{
  font-family:var(--sans); font-weight:300; font-size:9vw; font-size:calc(var(--fit) / 8.5);
  letter-spacing:.68em; padding-left:.68em; line-height:1; margin:-.52em -1em 0; max-width:none; white-space:nowrap;
}
:root[data-variety="film"] .hero .slogan{ font-family:var(--sans); font-weight:400; font-size:clamp(1.05rem, .96rem + .5vw, 1.32rem);
  letter-spacing:.01em; text-transform:none; color:var(--ink-100); margin:clamp(22px,3.4vh,34px) 0 0; }
:root[data-variety="film"] .hero .slogan b{ font-weight:400; }
:root[data-variety="film"] .hero .actions{ justify-content:center; margin-top:clamp(20px,3vh,30px); }
:root[data-variety="film"].js .hero .reveal{ opacity:1; transform:none; transition:none; }
@media (max-width:700px){
  :root[data-variety="film"]{ --bar:64px; }
  :root[data-variety="film"] .hero:not(.inner) .hero-media{ height:min(96vw, calc(100svh - var(--bar) - 290px)); background-position:50% 30%; }
}
@media (prefers-reduced-motion:no-preference){
  :root[data-variety="film"] .hero:not(.inner) .hero-media{ animation:f-open 1.9s var(--ease) both; }
  :root[data-variety="film"] .hero:not(.inner) .hero-media::before{ animation:f-push 3.4s cubic-bezier(.2,.6,.2,1) both; }
  :root[data-variety="film"] .hero:not(.inner) .h-xl{ animation:f-title 1.8s var(--ease) .55s both; }
  :root[data-variety="film"] .hero:not(.inner) .slogan{ animation:f-fade 1.2s ease 1.5s both; }
  :root[data-variety="film"] .hero:not(.inner) .actions{ animation:f-fade 1.2s ease 1.9s both; }
  @supports (animation-timeline: view()){
    :root[data-variety="film"] .hero .hero-media::before{ animation:f-push 3.4s cubic-bezier(.2,.6,.2,1) both, f-drift linear both; animation-timeline:auto, view(); }
    :root[data-variety="film"] .hero.inner .hero-media::before{ animation:f-drift linear both; animation-timeline:view(); }
    :root[data-variety="film"] .row .ph img{ scale:1.09; animation:f-drift linear both; animation-timeline:view(); }
    :root[data-variety="film"] .qstrip .qbg{ inset:-5% 0; animation:f-drift linear both; animation-timeline:view(); }
  }
}
@keyframes f-open{ from{ clip-path:inset(47% 0 47% 0); opacity:.3; } to{ clip-path:inset(0); opacity:1; } }
@keyframes f-push{ from{ scale:1.08; } to{ scale:1; } }
@keyframes f-title{ from{ opacity:0; letter-spacing:.86em; } to{ opacity:1; letter-spacing:.68em; } }
@keyframes f-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes f-drift{ from{ translate:0 -3.4%; } to{ translate:0 3.4%; } }

/* ---- inner pages open on a shorter frame; the title sits across its lower edge */
:root[data-variety="film"] .hero.inner .hero-media{ height:min(calc(100vw / 2.9), 50svh); min-height:210px; }
:root[data-variety="film"] .hero.inner::after{ content:""; position:absolute; left:0; right:0; top:var(--bar); height:min(calc(100vw / 2.9), 50svh); min-height:210px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 46%, rgba(0,0,0,.72) 82%, #000 100%); }
:root[data-variety="film"] .hero.inner .wrap{ margin-top:calc(var(--xl) * -.62); }
:root[data-variety="film"] .hero.inner .h-xl{ font-size:var(--xl); max-width:20ch; margin-inline:auto; padding-left:.4em; }
:root[data-variety="film"] .hero.inner .eyebrow{ justify-content:center; margin:-1.2rem 0 1.1rem; font-size:.72rem; color:var(--ink-100); }
:root[data-variety="film"] .hero.inner .lead{ margin-inline:auto; max-width:64ch; font-size:clamp(1rem,.96rem + .3vw,1.14rem); }

/* ---- the reel: the source's picture strip as widescreen frames */
:root[data-variety="film"] .strip{ background:#000; border-block:0; }
:root[data-variety="film"] .strip ul{ gap:3px; }
:root[data-variety="film"] .strip li{ flex:0 0 clamp(210px, 23.9vw, 372px); }
:root[data-variety="film"] .strip .ph{ aspect-ratio:2.39/1; }
:root[data-variety="film"] .strip .ph img{ opacity:.9; }

/* ---- title cards: section headings sit in the middle, small and wide, over one hairline that draws in */
:root[data-variety="film"] .section > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder) > .head{ text-align:center; margin-bottom:clamp(44px,7vh,84px); }
:root[data-variety="film"] .section > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder) > .head .lead{ margin-inline:auto; }
:root[data-variety="film"] .section > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder) > .head .display{ padding-left:.4em; }
:root[data-variety="film"] .head .display::after{ content:""; display:block; width:54px; height:1px; background:var(--crimson); margin:1.25em 0 0; transform-origin:left; transition:transform 1.3s var(--ease) .35s; }
:root[data-variety="film"] .section > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder) > .head .display::after{ margin-inline:auto; transform-origin:center; position:relative; left:-.2em; }
:root[data-variety="film"].js .head .display.reveal:not(.in)::after{ transform:scaleX(0); }
:root[data-variety="film"] #what-is-defendo .head .lead{ font-size:clamp(1.3rem, 1rem + 1.5vw, 2.15rem); line-height:1.3; max-width:27ch; color:var(--bone); margin-top:2.2rem; letter-spacing:-.008em; }

/* ---- scenes: the picture runs off the edge of the screen, alternating sides */
:root[data-variety="film"] .rows{ gap:clamp(64px, 11vh, 150px); }
:root[data-variety="film"] .row{ grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:clamp(30px, 5.2vw, 96px); }
:root[data-variety="film"] .row .ph{ aspect-ratio:1.85/1; margin-left:calc(-1 * var(--bleed)); }
:root[data-variety="film"] .row:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.32fr); }
:root[data-variety="film"] .row:nth-child(even) .ph{ margin-left:0; margin-right:calc(-1 * var(--bleed)); }
@media (max-width:860px){
  :root[data-variety="film"] .row, :root[data-variety="film"] .row:nth-child(even){ grid-template-columns:1fr; }
  :root[data-variety="film"] .row .ph, :root[data-variety="film"] .row:nth-child(even) .ph{ margin-inline:calc(-1 * var(--pad)); aspect-ratio:1.85/1; }
}

/* ---- the four pillars: four tall frames edge to edge; the colour is one line and one tick, and it comes up on hover */
:root[data-variety="film"] .pillars{ margin-inline:calc(-1 * var(--bleed)); gap:1px; background:#1B1A19; }
:root[data-variety="film"] .pillar{ background:#000; border-top:2px solid var(--pc); position:relative; }
:root[data-variety="film"] .pillar:hover{ background:#000; }
:root[data-variety="film"] .pillar .ph{ aspect-ratio:3/4.1; }
:root[data-variety="film"] .pillar .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 44%, rgba(0,0,0,.62) 78%, #000 100%); pointer-events:none; }
:root[data-variety="film"] .pillar .ph img{ transition:transform 1.4s var(--ease), filter .7s var(--ease); }
:root[data-variety="film"] .pillars:hover .pillar:not(:hover) .ph img,
:root[data-variety="film"] .pillars:focus-within .pillar:not(:focus-within) .ph img{ filter:saturate(.1) contrast(1.1) brightness(.5); }
:root[data-variety="film"] .pillar:hover .ph img,
:root[data-variety="film"] .pillar:focus-within .ph img{ filter:saturate(.9) contrast(1.1) brightness(1); transform:scale(1.035); }
:root[data-variety="film"] .pillar .pb{ position:relative; z-index:1; margin-top:-4.6rem; padding:0 clamp(20px,2.3vw,40px) clamp(28px,3.2vw,48px); gap:.8rem; }
:root[data-variety="film"] .pillar .pn{ align-items:center; gap:1em; margin-bottom:1.1rem; }
:root[data-variety="film"] .pillar h3{ font-family:var(--sans); font-weight:300; letter-spacing:.42em; font-size:clamp(1.35rem, 1rem + 1.2vw, 2.1rem); }
:root[data-variety="film"] .pillar .tagl{ color:var(--bone); }
:root[data-variety="film"] .pillar .who dd{ border-top-color:var(--ink-600); }
:root[data-variety="film"] #pillars > .wrap > .actions{ justify-content:center; margin-top:clamp(40px,6vh,64px); }
@media (max-width:560px){ :root[data-variety="film"] .pillar .ph{ aspect-ratio:1.5/1; } :root[data-variety="film"] .pillar .pb{ margin-top:-3.2rem; } }

/* ---- the philosophy as subtitles: four full-screen stills, each cutting over the last */
:root[data-variety="film"] #philosophy{ padding-bottom:0; background:#000; }
:root[data-variety="film"] #philosophy .head .display{ color:#F0EBE1; }
:root[data-variety="film"] .qstrip{ display:block; margin-inline:calc(-1 * var(--bleed)); }
:root[data-variety="film"] .qstrip figure{ position:sticky; top:0; height:100vh; height:100svh; min-height:540px; margin:0; border:0; overflow:hidden; isolation:isolate;
  display:grid; align-content:end; justify-items:center; text-align:center; padding:0 var(--pad) clamp(70px, 13vh, 132px); background:#000; }
:root[data-variety="film"].js .qstrip figure.reveal{ opacity:1; transform:none; transition:none; }
:root[data-variety="film"] .qstrip .qbg{ display:block; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 38%; filter:var(--band-filter); }
:root[data-variety="film"] .qstrip figure::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.2) 16%, rgba(0,0,0,.08) 44%, rgba(0,0,0,.74) 76%, #000 100%); }
:root[data-variety="film"] .qstrip figcaption{ color:#F0EBE1; letter-spacing:.34em; font-size:.76rem; margin-bottom:1.3rem; display:flex; align-items:center; gap:1.1em; }
:root[data-variety="film"] .qstrip figcaption::before, :root[data-variety="film"] .qstrip figcaption::after{ content:""; width:22px; height:1px; background:var(--crimson); }
:root[data-variety="film"] .qstrip blockquote p{ font-family:var(--sans); font-weight:400; letter-spacing:0; line-height:1.46; font-size:clamp(1.06rem, .94rem + .72vw, 1.56rem);
  max-width:47ch; color:#F4F0E8; text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.55); text-wrap:balance; }
@media (max-width:700px){
  :root[data-variety="film"] .qstrip figure:nth-child(1) .qbg{ background-position:66% 38%; }
  :root[data-variety="film"] .qstrip figure:nth-child(2) .qbg{ background-position:48% 38%; }
  :root[data-variety="film"] .qstrip figure:nth-child(3) .qbg{ background-position:40% 38%; }
  :root[data-variety="film"] .qstrip figure:nth-child(4) .qbg{ background-position:46% 38%; }
}
@media (prefers-reduced-motion:reduce){ :root[data-variety="film"] .qstrip figure{ position:relative; } }

/* ---- the credits: what the system gives, set as a roll on one axis */
:root[data-variety="film"] .cells{ grid-template-columns:1fr; border-top:0; max-width:1040px; margin-inline:auto; }
:root[data-variety="film"] .cell{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 clamp(22px,3.6vw,56px); align-items:baseline; padding:clamp(13px,1.9vh,20px) 0; border-bottom:0; }
:root[data-variety="film"] .cell .cn{ display:none; }
:root[data-variety="film"] .cell h3{ text-align:right; text-transform:uppercase; font-weight:600; letter-spacing:.2em; font-size:clamp(.82rem,.78rem + .2vw,.96rem); line-height:1.5; color:var(--ink-200); margin:0; }
:root[data-variety="film"] .cell p{ max-width:40ch; color:var(--bone); font-weight:300; font-size:clamp(1rem,.96rem + .3vw,1.14rem); }
@media (max-width:640px){
  :root[data-variety="film"] .cell{ grid-template-columns:1fr; text-align:center; padding:1.1rem 0; }
  :root[data-variety="film"] .cell h3{ text-align:center; margin-bottom:.45rem; }
  :root[data-variety="film"] .cell p{ margin-inline:auto; }
}

/* ---- the end card */
:root[data-variety="film"] .cta{ background:#000; border-top:0; min-height:min(88svh, 860px); display:grid; align-items:center; padding-block:clamp(110px,18vh,200px); }
:root[data-variety="film"] .cta .cta-media.v-film{ display:block; position:absolute; inset:0; background-size:cover; background-position:62% 30%; filter:saturate(.3) contrast(1.08) brightness(1.5); }
:root[data-variety="film"] .cta::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 36%, rgba(0,0,0,0) 58%); }
:root[data-variety="film"] .cta .wrap{ position:relative; z-index:2; }
:root[data-variety="film"] .cta .display{ font-size:clamp(1.35rem, .9rem + 1.9vw, 2.6rem); letter-spacing:.44em; line-height:1.3; color:#F0EBE1; }
:root[data-variety="film"] .cta .lead{ color:#D8D3C9; max-width:32ch; }
@media (max-width:700px){
  :root[data-variety="film"] .cta{ align-items:end; min-height:92svh; padding-bottom:72px; }
  :root[data-variety="film"] .cta .cta-media.v-film{ background-position:60% 20%; }
  :root[data-variety="film"] .cta::after{ background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,.1) 46%, rgba(0,0,0,.86) 72%, #000 100%); }
}

/* ---- the rest of the furniture */
:root[data-variety="film"] .band{ min-height:clamp(420px, 62vh, 680px); }
:root[data-variety="film"] .band .display{ max-width:none; }
:root[data-variety="film"] .band .col{ max-width:min(100%, 46rem); }
:root[data-variety="film"] .faq summary h3, :root[data-variety="film"] .ev h3{ font-weight:600; letter-spacing:0; }
:root[data-variety="film"] .lvl h3, :root[data-variety="film"] .person h3{ font-weight:600; letter-spacing:.12em; font-size:clamp(1.1rem, .98rem + .5vw, 1.4rem); line-height:1.2; }
:root[data-variety="film"] .countries .cn{ letter-spacing:.2em; font-weight:600; font-size:clamp(1.1rem, .95rem + .7vw, 1.6rem); }
:root[data-variety="film"] .duo .h-sm{ letter-spacing:.14em; font-weight:600; font-size:1.05rem; }
:root[data-variety="film"] .founder .h-lg, :root[data-variety="film"] .prog .h-lg{ font-size:clamp(1.3rem, 1rem + 1.5vw, 2.3rem); }
:root[data-variety="film"] .channels .v{ font-weight:600; }
/* the level ladder counts: each level's rule fills one sixth further as it comes into view */
:root[data-variety="film"] .lvl::before, :root[data-variety="poster"] .lvl::before{ content:""; position:absolute; left:0; top:-1px; width:100%; height:1px; background:var(--crimson);
  transform-origin:left; transform:scaleX(calc(var(--i, 6) / 6)); transition:transform 1.3s var(--ease) .15s; }
:root:is([data-variety="film"],[data-variety="poster"]).js .lvl.reveal:not(.in)::before{ transform:scaleX(0); }
:root:is([data-variety="film"],[data-variety="poster"]) .lvl:nth-child(1){ --i:1; } :root:is([data-variety="film"],[data-variety="poster"]) .lvl:nth-child(2){ --i:2; }
:root:is([data-variety="film"],[data-variety="poster"]) .lvl:nth-child(3){ --i:3; } :root:is([data-variety="film"],[data-variety="poster"]) .lvl:nth-child(4){ --i:4; }
:root:is([data-variety="film"],[data-variety="poster"]) .lvl:nth-child(5){ --i:5; } :root:is([data-variety="film"],[data-variety="poster"]) .lvl:nth-child(6){ --i:6; }
:root:is([data-variety="film"],[data-variety="poster"]) .ladder{ border-top-color:transparent; }
/* ============================================================
   4 · POSTER — "Keep it simple", taken literally. Defendo has a poster wall; this is one.
   Ink and paper in alternating fields, the regular-width Plex Sans instead of the
   condensed (two weights only: light for reading-size headlines, bold for the giant
   words), photographs cut hard in pure black and white, one red button per field.
   The wordmark is set as wide as the page and printed across the picture's edge, so it
   turns from ink to paper where it crosses the dark. Section titles hang in a left rail
   and stay while their content passes; the four pillars are an index of four giant words.
   Motion: the wordmark rises once; the level ladder counts. Nothing else moves.
   ============================================================ */
:root[data-variety="poster"]{
  --cond:'IBM Plex Sans', system-ui, -apple-system, sans-serif;   /* the display face here is the regular width */
  --d-weight:300; --d-track:-.035em; --d-case:none; --d-lh:1;
  --xl:clamp(2.6rem, 1.1rem + 6.3vw, 6.5rem);
  --lg:clamp(2.2rem, 1.1rem + 2.5vw, 3.5rem);
  --md:clamp(1.3rem, 1.1rem + .9vw, 1.8rem);
  --ph-filter:grayscale(1) contrast(1.22) brightness(1.02);
  --band-filter:grayscale(1) contrast(1.2) brightness(.78);
  --portrait-filter:grayscale(1) contrast(1.14) brightness(1.12);
  --grain:.035; --radius:0px; --scrim:10,10,10;
  --hh:64px;
  --fit:calc(min(100vw, var(--maxw)) - 2 * var(--pad));   /* the width of the text column, for words set to the full measure */
  --bleed:calc(var(--pad) + max(0px, (100vw - var(--maxw)) / 2));
  --fam-red:#D8142C;
}
/* ink fields */
:root[data-variety="poster"],
:root[data-variety="poster"][data-theme="light"] :is(.section.tone, .cta, .band){
  --ink-900:#0A0A0A; --ink-850:#101010; --ink-800:#161616; --ink-700:#232322; --ink-600:#353534; --ink-500:#4B4B49;
  --ink-400:#7A7976; --ink-200:#B6B5B0; --ink-100:#DFDED9; --bone:#F4F2ED; --crimson:#E01B31; --crimson-hi:#f22e44; --deep:#050505;
  color:var(--bone);
}
/* paper fields */
:root[data-variety="poster"] :is(.hero, .section.tone, .cta),
:root[data-variety="poster"][data-theme="light"],
:root[data-variety="poster"][data-theme="light"] :is(.hero, .site-header, .mobile-menu){
  --ink-900:#F1EFEA; --ink-850:#E9E7E1; --ink-800:#E2E0DA; --ink-700:#CDCBC4; --ink-600:#B3B1AB; --ink-500:#93918B;
  --ink-400:#65645F; --ink-200:#3A3A37; --ink-100:#1D1D1B; --bone:#0A0A0A; --crimson:#D0102A; --crimson-hi:#e21b36; --deep:#E6E4DE;
  color:var(--bone);
}
:root[data-variety="poster"] :is(.section.tone, .cta){ background:var(--ink-900); border-block:0; }
:root[data-variety="poster"] :is(.hero, .section.tone, .cta) :is(input, textarea){ color-scheme:light; }
:root[data-variety="poster"][data-theme="light"] :is(.section.tone, .cta) :is(input, textarea){ color-scheme:dark; }
:root[data-variety="poster"][data-theme="light"] .mobile-menu{ background:rgba(241,239,234,.985); }

:root[data-variety="poster"] .hero-media.v-poster{ display:block; }
:root[data-variety="poster"] .ph.has-poster > img:not(.vx),
:root[data-variety="poster"] .hero.inner.has-poster .hero-media:not(.vx){ display:none; }
:root[data-variety="poster"] .ph.has-poster > img.v-poster,
:root[data-variety="poster"] .hero.inner.has-poster .hero-media.v-poster{ display:block; }

/* chrome: a solid masthead in the colour of the ground */
:root[data-variety="poster"] .site-header{ background:var(--ink-900); border-bottom-color:var(--ink-700); padding-block:13px; }
:root[data-variety="poster"] .site-header::before{ display:none; }
:root[data-variety="poster"] .site-header.scrolled{ background:var(--ink-900); backdrop-filter:none; -webkit-backdrop-filter:none; }
:root[data-variety="poster"] .theme-toggle{ color:var(--bone); }
:root[data-variety="poster"] .brand .wm{ font-family:var(--sans); font-weight:700; font-size:1.36rem; letter-spacing:-.035em; text-transform:lowercase; }
:root[data-variety="poster"] .brand{ gap:10px; }
:root[data-variety="poster"] .brand .badge{ width:32px; height:32px; }
:root[data-variety="poster"][data-theme="light"] .brand .badge.b-white img{ filter:invert(1); }
:root[data-variety="poster"] .nav a.navlink{ font-weight:500; color:var(--ink-200); }
:root[data-variety="poster"] .nav a.navlink::after{ height:2px; bottom:-4px; }
:root[data-variety="poster"] .nav .nav-cta{ border-color:var(--bone); font-weight:600; }
:root[data-variety="poster"] .nav .nav-cta:hover{ background:var(--bone); color:var(--ink-900); }
:root[data-variety="poster"] .eyebrow:not(:has(.lbl)){ display:none; }
:root[data-variety="poster"] .eyebrow .idx{ display:none; }
:root[data-variety="poster"] .eyebrow .tick{ width:9px; height:9px; }
:root[data-variety="poster"] .body, :root[data-variety="poster"] .lead, :root[data-variety="poster"] .pillar .desc,
:root[data-variety="poster"] .faq details p, :root[data-variety="poster"] .cell p, :root[data-variety="poster"] .person p,
:root[data-variety="poster"] .lvl .theme, :root[data-variety="poster"] .checks li, :root[data-variety="poster"] .plain li,
:root[data-variety="poster"] .evbody .desc{ font-weight:400; }
:root[data-variety="poster"] .display.h-md{ font-weight:600; letter-spacing:-.022em; line-height:1.06; }
:root[data-variety="poster"] .btn{ font-weight:600; padding:1.05em 1.6em; }
:root[data-variety="poster"] .btn-ghost{ border-color:var(--bone); }
:root[data-variety="poster"] .btn-ghost:hover{ background:var(--bone); color:var(--ink-900); }
:root[data-variety="poster"] .link{ border-bottom:2px solid var(--bone); font-weight:600; }
:root[data-variety="poster"] .link:hover{ border-color:var(--crimson); }
:root[data-variety="poster"] .checks{ border-top-color:var(--bone); }
:root[data-variety="poster"] .checks li::before{ transform:none; width:8px; height:8px; }
:root[data-variety="poster"] .ctick{ transform:none; top:0; }
@media (max-width:1080px){
  :root[data-variety="poster"] .mobile-menu a{ font-weight:600; letter-spacing:-.03em; }
}

/* ---- the poster (home): the wordmark as wide as the page, printed across the picture's lower edge */
:root[data-variety="poster"] .hero{ display:block; min-height:0; background:var(--ink-900); isolation:isolate;
  --phh:clamp(250px, 37vw, calc(100svh - 318px)); }
:root[data-variety="poster"] .hero .scrim{ display:none; }
:root[data-variety="poster"] .hero .hero-media{ position:absolute; inset:var(--hh) 0 auto 0; height:var(--phh); background-size:cover; background-position:center top;
  filter:grayscale(1) contrast(1.3) brightness(1.1); mix-blend-mode:multiply; }
:root[data-variety="poster"] .hero .wrap{ z-index:auto; padding-top:calc(var(--hh) + var(--phh)); padding-bottom:clamp(30px,5vh,56px); }
:root[data-variety="poster"] .hero:not(.inner) .h-xl{ font-family:var(--sans); font-weight:700; text-transform:lowercase; letter-spacing:-.055em; line-height:.8;
  font-size:26vw; font-size:calc(var(--fit) / 3.52); color:#fff; mix-blend-mode:difference; margin:-.375em 0 0 -.014em; max-width:none; white-space:nowrap; }
:root[data-variety="poster"] .hero:not(.inner) .slogan{ position:absolute; right:var(--pad); top:calc(var(--hh) + clamp(22px,4vh,44px)); margin:0; text-align:right; width:5.2em;
  font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.98; text-transform:none; font-size:clamp(1.5rem, 1rem + 1.7vw, 2.5rem); color:var(--bone); }
:root[data-variety="poster"] .hero .slogan b{ font-weight:700; }
:root[data-variety="poster"] .hero:not(.inner) .actions{ margin-top:clamp(22px,3.4vh,36px); }
@media (max-width:700px){
  :root[data-variety="poster"] .hero{ --phh:clamp(250px, 84vw, calc(100svh - 300px)); }
  :root[data-variety="poster"] .hero:not(.inner) .hero-media{ background-size:auto 150%; background-position:64% top; }
  :root[data-variety="poster"] .hero:not(.inner) .slogan{ position:static; width:auto; text-align:left; margin-top:1.1rem; font-size:1.6rem; }
  :root[data-variety="poster"] .hero:not(.inner) .actions{ margin-top:1.2rem; }
}
/* the one movement: the word rises into place (once, on load; not tied to scrolling) */
:root[data-variety="poster"].js .hero:not(.inner) .h-xl.reveal{ opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion:no-preference){
  :root[data-variety="poster"] .hero:not(.inner) .h-xl{ animation:p-rise 1.3s var(--ease) .12s both; }
}
@keyframes p-rise{ from{ translate:0 .22em; clip-path:inset(-20% -5% 100% -5%); } to{ translate:0 0; clip-path:inset(-20% -5% -30% -5%); } }

/* ---- inner pages: picture band, then the title in bold beside its lead */
:root[data-variety="poster"] .hero.inner .hero-media{ position:relative; inset:auto; margin-top:var(--hh); height:clamp(210px, 30vw, 44svh); mix-blend-mode:normal; filter:var(--ph-filter); }
:root[data-variety="poster"] .hero.inner .wrap{ padding-top:clamp(26px,4.4vh,52px); padding-bottom:clamp(40px,7vh,84px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(28px,4vw,72px); align-items:end; }
:root[data-variety="poster"] .hero.inner .eyebrow{ grid-column:1 / -1; margin-bottom:1.1rem; color:var(--bone); }
:root[data-variety="poster"] .hero.inner .h-xl{ grid-column:1; font-weight:700; letter-spacing:-.052em; line-height:.9; max-width:11ch; }
:root[data-variety="poster"] .hero.inner .lead{ grid-column:2; color:var(--ink-200); font-size:clamp(1rem,.96rem + .3vw,1.14rem); }
:root[data-variety="poster"] .hero.inner .actions{ grid-column:2; margin-top:1rem; }
@media (max-width:860px){
  :root[data-variety="poster"] .hero.inner .wrap{ grid-template-columns:1fr; }
  :root[data-variety="poster"] .hero.inner .h-xl, :root[data-variety="poster"] .hero.inner .lead, :root[data-variety="poster"] .hero.inner .actions{ grid-column:1; }
}

/* ---- the picture strip: a contact row */
:root[data-variety="poster"] .strip{ background:var(--ink-900); border-block:0; padding-block:0 2px; }
:root[data-variety="poster"] .strip ul{ gap:2px; }
:root[data-variety="poster"] .strip li{ flex:0 0 clamp(150px, 16.6vw, 250px); }
:root[data-variety="poster"] .strip .ph img{ opacity:1; }

/* ---- the rail: a section's title hangs on the left and stays while its content passes */
:root[data-variety="poster"] .section .head .display{ overflow-wrap:break-word; }
:root[data-variety="poster"] .section .head .lead{ font-size:clamp(1rem,.96rem + .3vw,1.14rem); max-width:38ch; color:var(--ink-200); }
@media (min-width:1000px){
  :root[data-variety="poster"] .section:not(#pillars):not(#structure):not(#team) > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder):has(> .head){
    display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:clamp(28px,4.4vw,80px); align-items:start; }
  :root[data-variety="poster"] .section:not(#pillars):not(#structure):not(#team) > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder):has(> .head) > .head{
    grid-column:1; grid-row:1 / span 12; position:sticky; top:calc(var(--hh) + 40px); margin:0; }
  :root[data-variety="poster"] .section:not(#pillars):not(#structure):not(#team) > .wrap:not(.faqgrid):not(.mapgrid):not(.contactgrid):not(.founder):has(> .head) > :not(.head){ grid-column:2; }
  :root[data-variety="poster"] .faqgrid > .head{ position:sticky; top:calc(var(--hh) + 40px); }
  /* scenes in the rail: one wide picture that runs off the right edge, then two side by side */
  :root[data-variety="poster"] .wrap:has(> .head) > .rows{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(56px,8vh,96px) clamp(22px,2.6vw,44px); align-items:start; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row{ display:block; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row .ph{ aspect-ratio:4/5; margin-bottom:1.5rem; order:0; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row:nth-child(3n+1){ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 clamp(22px,2.6vw,44px); align-items:start; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row:nth-child(3n+1) .ph{ grid-column:1 / -1; aspect-ratio:2/1; margin-right:calc(-1 * var(--bleed)); }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row:nth-child(3n+1) > div{ display:contents; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row:nth-child(3n+1) > div > *{ grid-column:2; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row:nth-child(3n+1) > div > .h-md{ grid-column:1; grid-row:2 / span 6; margin:0; }
  :root[data-variety="poster"] .wrap:has(> .head) > .rows > .row:nth-child(3n) { margin-top:clamp(40px,8vh,110px); }
  /* sections that need the whole width: the title on the left, its text on the right */
  :root[data-variety="poster"] :is(#pillars, #structure, #team) .head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(28px,4.4vw,80px); align-items:end; }
  :root[data-variety="poster"] :is(#pillars, #structure, #team) .head .display{ grid-column:1; grid-row:1 / span 3; align-self:start; }
  :root[data-variety="poster"] :is(#pillars, #structure, #team) .head .lead{ grid-column:2; margin-top:0; max-width:52ch; }
  :root[data-variety="poster"] :is(#pillars, #structure, #team) .head .lead + .lead{ margin-top:.9rem; }
}
:root[data-variety="poster"] :is(#pillars, #structure, #team) .head .display{ font-size:clamp(2.4rem, 1.1rem + 4.2vw, 5rem); letter-spacing:-.045em; line-height:.96; }
:root[data-variety="poster"] .row .h-md{ margin-bottom:.9rem; }

/* ---- the four pillars: an index of four giant words. The colour is one square beside each. */
:root[data-variety="poster"] .pillars{ display:block; border-top:6px solid var(--bone); }
:root[data-variety="poster"] .pillar{ display:grid; grid-template-columns:minmax(0,3.6fr) minmax(0,4.1fr) minmax(0,2.2fr) minmax(0,2.1fr); column-gap:clamp(20px,2.8vw,48px);
  align-items:start; padding:clamp(22px,3.2vh,38px) 0 clamp(26px,3.6vh,44px); border-top:0; border-bottom:1px solid var(--bone); background:transparent; position:relative; }
:root[data-variety="poster"] .pillar:hover{ background:transparent; }
:root[data-variety="poster"] .pillar::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:5px; background:var(--pc); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); }
:root[data-variety="poster"] .pillar.p-white::after{ background:var(--bone); }
:root[data-variety="poster"] .pillar:hover::after, :root[data-variety="poster"] .pillar:focus-within::after{ transform:scaleX(1); }
:root[data-variety="poster"] .pillar .pb{ display:contents; }
:root[data-variety="poster"] .pillar .pn{ grid-column:1; grid-row:1 / span 3; flex-direction:column; align-items:flex-start; gap:clamp(12px,1.6vh,20px); }
:root[data-variety="poster"] .pillar .ctick{ width:15px; height:15px; }
:root[data-variety="poster"] .pillar h3{ font-weight:700; text-transform:none; letter-spacing:-.06em; line-height:.82; font-size:clamp(3.2rem, 1.2rem + 5.6vw, 6.4rem); transition:transform .7s var(--ease); }
:root[data-variety="poster"] .pillar:hover h3{ transform:translateX(.08em); }
:root[data-variety="poster"] .pillar .tagl{ grid-column:2; grid-row:1; font-weight:600; font-size:clamp(1.05rem,1rem + .4vw,1.3rem); letter-spacing:-.015em; line-height:1.25; color:var(--bone); margin-top:1.75rem; }
:root[data-variety="poster"] .pillar .desc{ grid-column:2; grid-row:2; margin-top:.7rem; max-width:46ch; }
:root[data-variety="poster"] .pillar .pb > .link{ grid-column:2; grid-row:3; margin-top:1.2rem; justify-self:start; }
:root[data-variety="poster"] .pillar .who{ grid-column:3; grid-row:1 / span 3; margin-top:1.75rem; }
:root[data-variety="poster"] .pillar .who dd{ border-top-color:var(--ink-600); }
:root[data-variety="poster"] .pillar .ph{ grid-column:4; grid-row:1 / span 3; aspect-ratio:4/5; }
:root[data-variety="poster"] .pillar .ph img{ filter:grayscale(1) contrast(1.12) brightness(1.3); }
@media (max-width:1120px){
  :root[data-variety="poster"] .pillar{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  :root[data-variety="poster"] .pillar .pn{ grid-column:1; grid-row:1; }
  :root[data-variety="poster"] .pillar .ph{ grid-column:2; grid-row:1 / span 5; aspect-ratio:4/5; }
  :root[data-variety="poster"] .pillar .tagl{ grid-column:1; grid-row:2; margin-top:1.2rem; }
  :root[data-variety="poster"] .pillar .desc{ grid-column:1; grid-row:3; }
  :root[data-variety="poster"] .pillar .who{ grid-column:1; grid-row:4; margin-top:1rem; }
  :root[data-variety="poster"] .pillar .pb > .link{ grid-column:1; grid-row:5; }
}
@media (max-width:600px){
  :root[data-variety="poster"] .pillar{ grid-template-columns:1fr; }
  :root[data-variety="poster"] .pillar .ph{ grid-column:1; grid-row:2; aspect-ratio:16/10; margin-top:1.1rem; }
  :root[data-variety="poster"] .pillar .tagl{ grid-row:3; } :root[data-variety="poster"] .pillar .desc{ grid-row:4; }
  :root[data-variety="poster"] .pillar .who{ grid-row:5; } :root[data-variety="poster"] .pillar .pb > .link{ grid-row:6; }
}

/* ---- the philosophy, set to be read: light, large, the opening mark hung in the margin */
:root[data-variety="poster"] .qstrip{ display:block; }
:root[data-variety="poster"] .qstrip figure{ border-left:0; padding:clamp(18px,2.6vh,28px) 0 clamp(40px,7vh,76px); border-top:1px solid var(--bone); }
:root[data-variety="poster"] .qstrip figure:first-child{ border-top-width:6px; }
:root[data-variety="poster"] .qstrip figure:last-child{ padding-bottom:0; }
:root[data-variety="poster"] .qstrip figcaption{ font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:-.01em; text-transform:none; color:var(--bone); display:flex; align-items:center; gap:.7em; margin-bottom:clamp(18px,3vh,34px); }
:root[data-variety="poster"] .qstrip figcaption::before{ content:""; width:9px; height:9px; background:var(--crimson); }
:root[data-variety="poster"] .qstrip blockquote p{ font-family:var(--sans); font-weight:300; letter-spacing:-.028em; line-height:1.14; font-size:clamp(1.5rem, 1.05rem + 1.7vw, 2.6rem); text-indent:-.44em; text-wrap:pretty; }
@media (max-width:700px){ :root[data-variety="poster"] .qstrip blockquote p{ text-indent:0; } }

/* ---- benefits, questions, lists */
:root[data-variety="poster"] .cells{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(22px,2.6vw,44px); border-top:0; }
:root[data-variety="poster"] .cell{ border-bottom:0; border-top:1px solid var(--bone); padding:clamp(16px,2vh,22px) 0 clamp(30px,5vh,56px); }
:root[data-variety="poster"] .cell:nth-child(-n+2){ border-top-width:6px; }
:root[data-variety="poster"] .cell .cn{ display:none; }
:root[data-variety="poster"] .cell h3{ font-weight:600; letter-spacing:-.025em; font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); line-height:1.08; margin-bottom:.7rem; }
@media (max-width:520px){ :root[data-variety="poster"] .cells{ grid-template-columns:1fr; } :root[data-variety="poster"] .cell:nth-child(2){ border-top-width:1px; } }
:root[data-variety="poster"] .faq details{ border-bottom-color:var(--bone); }
:root[data-variety="poster"] .faq details:first-of-type{ border-top:6px solid var(--bone); }
:root[data-variety="poster"] .faq summary h3{ font-weight:600; letter-spacing:-.025em; font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem); }
:root[data-variety="poster"] .faq summary .pm{ font-family:var(--sans); font-weight:300; font-size:1.7rem; line-height:.6; color:var(--bone); }
:root[data-variety="poster"] .ev h3{ font-weight:600; letter-spacing:-.022em; }
:root[data-variety="poster"] .evlist{ border-top:6px solid var(--bone); }
:root[data-variety="poster"] .person h3, :root[data-variety="poster"] .lvl h3{ text-transform:none; font-weight:700; letter-spacing:-.03em; }
:root[data-variety="poster"] .team{ border-top:6px solid var(--bone); }
:root[data-variety="poster"] .countries{ border-top:6px solid var(--bone); }
:root[data-variety="poster"] .countries .cn{ font-weight:700; letter-spacing:-.04em; font-size:clamp(1.7rem,1.2rem + 1.8vw,3rem); }
:root[data-variety="poster"] .channels{ border-top:6px solid var(--bone); }
:root[data-variety="poster"] .channels .v{ font-weight:700; letter-spacing:-.04em; }
:root[data-variety="poster"] .duo > div{ border-top:6px solid var(--bone); }
:root[data-variety="poster"] .duo .h-sm, :root[data-variety="poster"] .h-sm{ font-weight:600; letter-spacing:-.02em; }
:root[data-variety="poster"] .founder .h-lg, :root[data-variety="poster"] .prog .h-lg{ font-weight:700; letter-spacing:-.05em; font-size:clamp(2.4rem, 1.2rem + 4vw, 4.8rem); line-height:.92; }
:root[data-variety="poster"] .prog{ border-top-color:var(--bone); }
:root[data-variety="poster"] .prog .lvls{ border-left:6px solid var(--bone); }
:root[data-variety="poster"] .band .display{ font-weight:700; letter-spacing:-.05em; font-size:clamp(2.4rem, 1.2rem + 4.4vw, 5.2rem); line-height:.92; max-width:12ch; color:#F4F2ED; }
:root[data-variety="poster"] .band .lead{ color:#DFDED9; }
:root[data-variety="poster"] .foot-brand p{ font-weight:600; letter-spacing:-.01em; text-transform:none; }
:root[data-variety="poster"] .field label{ font-weight:600; }
:root[data-variety="poster"] .field input, :root[data-variety="poster"] .field textarea{ border-color:var(--ink-400); background:transparent; }
/* the ladder: big light numerals; each level's rule fills one sixth further (rule shared with Film above) */
:root[data-variety="poster"] .lvl{ border-bottom-color:var(--ink-600); }
:root[data-variety="poster"] .lvl::before{ height:5px; top:-3px; }
:root[data-variety="poster"] .lvl .n{ font-family:var(--sans); font-weight:300; font-size:clamp(2.2rem,1.5rem + 2vw,3.6rem); letter-spacing:-.04em; line-height:.9; color:var(--bone); padding-top:0; flex-direction:column; align-items:flex-start; gap:12px; }

/* ---- the last word, as wide as the page */
:root[data-variety="poster"] .cta{ padding-block:clamp(72px,11vh,150px) clamp(64px,10vh,130px); }
:root[data-variety="poster"] .cta .display{ font-family:var(--sans); font-weight:700; text-transform:lowercase; letter-spacing:-.055em; line-height:.84; white-space:nowrap;
  font-size:17vw; font-size:calc(var(--fit) / 4.86); margin-left:-.04em; }
:root[data-variety="poster"] .cta .lead{ margin-top:clamp(40px,7vh,72px); color:var(--bone); font-weight:400; }

/* hero picture: each variety leads with a different photograph */
.hero-media{ display:none; }
.hero.inner .hero-media{ display:block; }
.hero.inner .hero-media.vx{ display:none; }
:root[data-variety="street"] .hero-media.v-street,
:root[data-variety="redline"] .hero-media.v-redline,
:root[data-variety="film"] .hero-media.v-film,
:root[data-variety="poster"] .hero-media.v-poster{ display:block; }
:root[data-variety="film"] .hero.inner.has-film .hero-media:not(.vx),
:root[data-variety="poster"] .hero.inner.has-poster .hero-media:not(.vx){ display:none; }
:root[data-variety="film"] .hero.inner.has-film .hero-media.v-film,
:root[data-variety="poster"] .hero.inner.has-poster .hero-media.v-poster{ display:block; }
:root[data-variety="redline"] .hero-media.v-redline{ background-position:center 22%; }
/* footer brand on a light footer */
:root[data-theme="light"] .site-footer .brand .badge.b-white img{ filter:invert(1); }