/* ==========================================================================
   project-coram.css · work/case-coram.html

   Scoped entirely under body.co. The shell (Carbon strip, universal closing,
   Radikal) stays the Walker system; the page around the work uses the site's
   own four colours: Carbon, Bone, Matte Silver and Acid on Carbon only.
   Coram's green, charcoal, TT Commons stack and photography live inside the
   embedded `.coram` modules and the screenshots, and nowhere else.

   Built on the creative-first rhythm of project-protective-life.css v1.0
   (20 September 2026): a compact opening with the key visual beside the
   title on wide screens and beneath the short introduction on a phone; the
   campaign at useful scale; the system beside the creative it governs; the
   school page, the product story, the buyer materials; the construction
   notes and project notes in quiet disclosures.

   Load order: tokens, system, lightbox, typography, exhibition, site-nav,
   then work/coram/coram.css, coram-drill.css and directions.css, then this
   sheet.
   v1.0 · 20 September 2026 · first draft
   v2.0 · 20 September 2026 · six chapters, the four-approach comparison,
          the category atlas, the system chapter, the application groups,
          the judgment close; route pages share the route navigation
   v2.1 · 20 September 2026 · economy pass: application pieces run full
          width with a short note where one is needed (the caption column
          is gone); the hero uses the role line already defined here
   v3.0 · 21 September 2026 · film first: the D4 commercial leads the page
          under a compact identifier with one credit line beneath it; the
          campaign compositions follow at scale; the four approaches are a
          compact grid of doors to their direction pages (the tablist and
          its panels are retired); strategy lives in two labelled
          disclosures (Why this direction, Why this system); the hero,
          category-chapter and tab rules below are kept for the route
          pages and for provenance, and are unused on the main page
   v3.1 · 21 September 2026 · three more films: a gallery of the three
          further commercials on the Carbon ground directly beneath the
          lead (the human film still as the browsing frame, one play
          control, direction, runtime, the film's line, the file links);
          three across on a desktop, one across on a phone
   ========================================================================== */

body.co{
  --co-carbon:#171717;
  --co-bone:#F2EFE9;
  --co-bone-2:#E8E3DA;
  --co-paper:#FAF8F4;
  --co-ink:#171717;
  --co-ink-soft:#3F474B;
  --co-ink-faint:#5C6367;
  --co-rule:rgba(23,23,23,.16);
  --co-rule-2:rgba(23,23,23,.30);
  --co-night-soft:rgba(242,239,233,.80);
  --co-night-faint:rgba(242,239,233,.60);
  --co-night-rule:rgba(242,239,233,.22);
  --co-acid:#DFFF00;
  --co-edge:clamp(16px,4.4vw,84px);
  --co-face:var(--font-brand);
  background:var(--co-carbon);
}
body.co main{background:var(--co-bone);color:var(--co-ink);overflow-x:clip;font-family:var(--co-face)}
body.co ::selection{background:var(--co-carbon);color:var(--co-acid)}
.co .vwrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--co-edge);box-sizing:border-box}
.co main img:not(.coram img){max-width:100%;height:auto;display:block}
.co main .coram img{max-width:100%;display:block}
:where(.co main) :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote){margin:0}
:where(.co main) p{color:inherit}
.co main :focus-visible{outline:2px solid var(--co-ink);outline-offset:3px}
.co main .co-night :focus-visible,.co main .co-hero :focus-visible{outline-color:var(--co-acid)}
.co .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co details:not([open]) > :not(summary){display:none}
.co main [id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 14px)}
.co main .co-sec[id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 18px - clamp(48px,6.4vw,104px))}

/* the embedded Coram modules keep their own face and colour, inside a frame
   the Walker page draws around them */
.co .coram{font-family:var(--c-face);color:var(--c-ink)}
.co .co-embed{border:1px solid var(--co-rule-2);background:#fff}
.co .co-embed--bare{border:0;background:transparent}

/* ---------------------------------------------------------------- hero --- */
.co-hero{background:var(--co-carbon);color:var(--co-bone);padding:clamp(28px,4.2vw,64px) 0 clamp(40px,5vw,80px)}
.co-coord{display:flex;align-items:center;gap:12px;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--co-night-faint)}
.co-coord::before{content:'';width:26px;height:2px;background:var(--co-acid);flex:none}
.co-hero__title{margin-top:clamp(12px,1.4vw,20px)!important;font-weight:700;font-size:clamp(36px,5.6vw,84px);line-height:.94;letter-spacing:-.03em;color:var(--co-bone);text-wrap:balance;max-width:14ch}
.co-hero__deck{margin-top:clamp(12px,1.4vw,18px)!important;font-size:clamp(16px,1.35vw,21px);line-height:1.45;color:var(--co-night-soft);max-width:44ch}
.co-hero__role{margin-top:10px!important;font-size:12.5px;line-height:1.55;color:var(--co-night-faint);letter-spacing:.02em;max-width:60ch}
.co-hero__status{color:var(--co-night-soft)}
.co-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,40px)}
.co-hero__key{min-width:0}
.co-hero__key .c-ad{border:1px solid var(--co-night-rule)}
@media (min-width:1100px){
  .co-hero{padding-top:clamp(40px,5vw,72px)}
  .co-hero__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,4vw,72px);align-items:end}
  .co-hero__title{font-size:clamp(44px,4.6vw,72px)}
  .co-hero__text{padding-bottom:28px}
}
.co-cap{margin-top:12px!important;font-size:13.5px;line-height:1.5;color:var(--co-night-faint);max-width:70ch}
.co-cap b{font-weight:500;color:var(--co-bone)}

/* ------------------------------------------------------------ sections --- */
.co-sec{padding:clamp(48px,6.4vw,104px) 0}
.co-day{background:var(--co-bone);color:var(--co-ink)}
.co-paper{background:var(--co-paper);color:var(--co-ink)}
.co-night{background:var(--co-carbon);color:var(--co-bone)}
.co-night .co-h2,.co-night .co-h3{color:var(--co-bone)}
.co-night .co-line{color:var(--co-night-soft)}
.co-kick{display:flex;align-items:center;gap:12px;font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--co-ink-faint);margin-bottom:clamp(12px,1.4vw,18px)!important}
.co-kick::before{content:'';width:26px;height:2px;background:var(--co-ink)}
.co-night .co-kick{color:var(--co-night-faint)}
.co-night .co-kick::before{background:var(--co-acid)}
.co-h2{font-weight:700;font-size:clamp(30px,4vw,62px);line-height:1;letter-spacing:-.028em;color:var(--co-ink);text-wrap:balance;max-width:18ch}
.co-h3{font-weight:700;font-size:clamp(19px,1.9vw,28px);line-height:1.08;letter-spacing:-.014em;color:var(--co-ink);text-wrap:balance}
.co-h4{font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--co-ink-faint);margin-bottom:10px!important}
.co-line{margin-top:clamp(10px,1.2vw,16px)!important;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--co-ink-soft);max-width:60ch}
.co-line--lead{font-size:clamp(16px,1.3vw,20px)}
.co-line b{font-weight:500;color:var(--co-ink)}
.co-night .co-line b{color:var(--co-bone)}
.co-subhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:clamp(28px,3.4vw,56px)}
.co-subhead .co-h3{max-width:30ch}
.co-prop{margin-top:clamp(22px,2.8vw,40px);padding:clamp(18px,2.2vw,30px) clamp(18px,2.4vw,32px);border-left:3px solid var(--co-ink);background:var(--co-paper);max-width:760px}
.co-prop p{font-size:clamp(17px,1.5vw,23px);line-height:1.35;letter-spacing:-.01em;color:var(--co-ink)}
.co-prop small{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint)}
.co-night .co-prop{background:transparent;border-left-color:var(--co-acid)}
.co-night .co-prop p{color:var(--co-bone)}

/* -------------------------------------------------------------- figures --- */
.co-fig{margin:0;cursor:zoom-in}
.co-fig img{width:100%;height:auto;background:var(--co-bone-2)}
.co-fig figcaption{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--co-ink-faint)}
.co-fig figcaption b{font-weight:500;color:var(--co-ink);letter-spacing:.01em}
.co-night .co-fig figcaption{color:var(--co-night-faint)}
.co-night .co-fig figcaption b{color:var(--co-bone)}
.co-fig--framed img{border:1px solid var(--co-rule)}

/* -------------------------------------------------------------- campaign --- */
.co-ads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);margin-top:clamp(22px,2.8vw,44px)}
.co-ad{display:grid;gap:10px;align-content:start}
.co-ad__cap{font-size:13px;line-height:1.5;color:var(--co-ink-soft);max-width:44ch}
.co-ad__cap b{font-weight:500;color:var(--co-ink)}
.co-film{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(28px,3.4vw,56px);align-items:start}
@media (min-width:900px){.co-film{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.co-film__slot{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--co-rule-2)}
.co-film__slot img{width:100%;height:100%;object-fit:cover;opacity:.94}
.co-film__tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(23,23,23,.86);color:var(--co-bone);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.co-film__tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--co-acid)}
.co-film__text{display:grid;gap:10px}
.co-film__text p{font-size:14.5px;line-height:1.5;color:var(--co-ink-soft);max-width:44ch}
.co-film__text b{font-weight:500;color:var(--co-ink)}
.co-endcard{display:grid;place-items:center;gap:14px;aspect-ratio:16/9;background:#fff;border:1px solid var(--co-rule-2);padding:8%;text-align:center;container-type:inline-size}
.co-endcard .co-endcard__line{font-family:var(--c-face);font-size:8cqw;font-weight:500;letter-spacing:-.025em;line-height:1;color:#1F1F1D}
.co-endcard img{height:5.2cqw;width:auto}
.co-endcard small{font-family:var(--c-face);font-size:2.4cqw;letter-spacing:.06em;color:#4A4A46}
.co-scripts{display:grid;gap:12px}
.co-script{padding:10px 0 10px clamp(14px,2vw,26px);border-left:3px solid var(--co-ink);max-width:56ch;display:grid;gap:6px}
.co-script p{font-size:clamp(15px,1.2vw,18px);line-height:1.4;color:var(--co-ink)}
.co-script small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint)}

/* ------------------------------------------------------- the two battles --- */
.co-battles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,48px);margin-top:clamp(22px,2.8vw,44px);max-width:1100px}
.co-battle{display:grid;gap:8px;padding-top:14px;border-top:2px solid var(--co-ink)}
.co-battle__t{font-weight:700;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.014em;color:var(--co-ink)}
.co-battle p{font-size:clamp(14.5px,1.1vw,17px);line-height:1.5;color:var(--co-ink-soft);max-width:40ch}
.co-battle p b{font-weight:500;color:var(--co-ink)}
.co-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(22px,2.8vw,44px)}
.co-trio__i{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--co-rule-2)}
.co-trio__i b{font-weight:700;font-size:clamp(16px,1.4vw,21px);letter-spacing:-.012em;color:var(--co-ink)}
.co-trio__i p{font-size:14.5px;line-height:1.5;color:var(--co-ink-soft)}
.co-trio__i p i{font-style:normal;color:var(--co-ink-faint)}

/* ----------------------------------------------------------- the system --- */
.co-system{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(22px,2.8vw,44px)}
@media (min-width:1000px){.co-system{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.co-rules{display:grid;gap:0;border-top:1px solid var(--co-rule-2)}
.co-rule{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 20px;padding:14px 0;border-bottom:1px solid var(--co-rule);font-size:14.5px;line-height:1.5;color:var(--co-ink-soft)}
.co-rule b{font-weight:500;color:var(--co-ink)}
@media (max-width:640px){.co-rule{grid-template-columns:1fr}}
.co-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.co-sw{display:grid;gap:6px;font-size:12px;color:var(--co-ink-faint)}
.co-sw i{display:block;height:44px;border:1px solid var(--co-rule)}
.co-sw b{font-weight:500;color:var(--co-ink);font-size:12.5px}

/* the colour tone comparison: one composition, switched by governed colour */
.co-tone{margin-top:clamp(22px,2.8vw,44px);display:grid;gap:14px}
.co-tone__ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.co-tone__ctl .co-h4{margin:0 10px 0 0!important}
.co-tone__btn{font-family:inherit;min-height:40px;padding:0 14px;border:1px solid var(--co-rule-2);background:transparent;color:var(--co-ink-soft);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.co-tone__btn[aria-pressed="true"]{background:var(--co-ink);border-color:var(--co-ink);color:var(--co-bone)}
.co-tone__btn:hover{border-color:var(--co-ink)}
.co-tone__stage{border:1px solid var(--co-rule-2);background:#fff}
.co-tone__read{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 24px;font-size:13.5px;line-height:1.5;color:var(--co-ink-soft);max-width:1100px}
@media (min-width:760px){.co-tone__read{grid-template-columns:1fr 1fr}}
.co-tone__read b{font-weight:500;color:var(--co-ink)}
/* the composition itself lives in the Coram identity; its colour relationship is
   governed by data-scheme on the stage */
.co-tone__comp{--t-bg:#FFFFFF;--t-ink:#1F1F1D;--t-ink2:#4A4A46;--t-accent:#039179;--t-accent-ink:#037A66;--t-field:#F6F5F1;--t-btn:#037A66;--t-btn-ink:#FFFFFF;--t-rule:rgba(31,31,29,.16);--t-tag:#ECEAE4;--t-tag-ink:#4A4A46;--t-photo:none;
  display:grid;grid-template-columns:minmax(0,1fr);background:var(--t-bg);color:var(--t-ink);font-family:var(--c-face);container-type:inline-size}
@media (min-width:760px){.co-tone__comp{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.co-tone__text{padding:clamp(22px,4cqw,56px);display:grid;gap:14px;align-content:center}
.co-tone__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t-accent-ink)}
.co-tone__eyebrow::before{content:'';width:20px;height:2px;background:var(--t-accent)}
.co-tone__h{font-size:clamp(28px,4.6cqw,56px);font-weight:500;line-height:1;letter-spacing:-.022em;color:var(--t-ink);max-width:14ch;text-wrap:balance}
.co-tone__p{font-size:clamp(14.5px,1.6cqw,18px);line-height:1.5;color:var(--t-ink2);max-width:40ch}
.co-tone__tagrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.co-tone__tag{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:0 10px;background:var(--t-tag);color:var(--t-tag-ink);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-radius:2px;border:1px solid transparent}
.co-tone__tag--state{background:transparent;border-color:currentColor}
.co-tone__cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;background:var(--t-btn);color:var(--t-btn-ink);font-size:15px;font-weight:500;border-radius:3px;text-decoration:none;justify-self:start;border:1.5px solid var(--t-btn)}
.co-tone__cta--ghost{background:transparent;color:var(--t-ink);border-color:var(--t-ink)}
.co-tone__photo{position:relative;background:var(--t-field);min-height:260px}
.co-tone__photo img{width:100%;height:100%;object-fit:cover;filter:var(--t-photo)}
.co-tone__photo .co-tone__bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;padding:8px 12px;background:rgba(31,31,29,.8);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.co-tone__events{display:grid;gap:0;border-top:1px solid var(--t-rule);margin-top:4px}
.co-tone__ev{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--t-rule);font-size:13px;color:var(--t-ink2)}
.co-tone__ev b{font-weight:500;color:var(--t-ink);font-variant-numeric:tabular-nums}
.co-tone__ev i{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-accent-ink)}
/* the four governed relationships */
.co-tone__comp[data-scheme="story"]{--t-bg:#FFFFFF;--t-ink:#1F1F1D;--t-ink2:#4A4A46;--t-accent:#039179;--t-accent-ink:#037A66;--t-field:#F6F5F1;--t-btn:#037A66;--t-btn-ink:#fff;--t-tag:#ECEAE4;--t-tag-ink:#4A4A46;--t-photo:none}
.co-tone__comp[data-scheme="product"]{--t-bg:#F6F5F1;--t-ink:#1F1F1D;--t-ink2:#4A4A46;--t-accent:#1F1F1D;--t-accent-ink:#1F1F1D;--t-field:#ECEAE4;--t-btn:#1F1F1D;--t-btn-ink:#fff;--t-tag:#E4E2DC;--t-tag-ink:#1F1F1D;--t-photo:saturate(.55)}
.co-tone__comp[data-scheme="invite"]{--t-bg:#1F1F1D;--t-ink:#FFFFFF;--t-ink2:rgba(255,255,255,.82);--t-accent:#039179;--t-accent-ink:#5FCBB3;--t-field:#2A2A27;--t-btn:#039179;--t-btn-ink:#fff;--t-tag:rgba(255,255,255,.12);--t-tag-ink:#fff;--t-rule:rgba(255,255,255,.18);--t-photo:none}
.co-tone__comp[data-scheme="urgent"]{--t-bg:#FFFFFF;--t-ink:#1F1F1D;--t-ink2:#4A4A46;--t-accent:#B42318;--t-accent-ink:#B42318;--t-field:#F6F5F1;--t-btn:#1F1F1D;--t-btn-ink:#fff;--t-tag:#FDECEA;--t-tag-ink:#8A1A12;--t-photo:none}
.co-tone__comp[data-scheme="urgent"] .co-tone__tag--state{color:#B42318}

/* ---------------------------------------------------------- school page --- */
.co-shots{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(22px,2.8vw,44px);align-items:start}
@media (min-width:900px){.co-shots{grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr)}}
.co-shots__phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.co-shots .co-fig img{border:1px solid var(--co-rule-2)}
.co-shots__desk .co-fig img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.co-shots__phones .co-fig img{aspect-ratio:390/844;object-fit:cover;object-position:top}
.co-links{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:clamp(16px,2vw,28px)}
.co-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--co-ink);background:transparent;border:1px solid var(--co-rule-2);cursor:pointer;font-family:inherit}
.co-chip:hover{background:var(--co-ink);border-color:var(--co-ink);color:var(--co-bone)}
.co-night .co-chip{color:var(--co-bone);border-color:var(--co-night-rule)}
.co-night .co-chip:hover{background:var(--co-acid);border-color:var(--co-acid);color:var(--co-carbon)}
.co-chip--acid{background:var(--co-acid);border-color:var(--co-acid);color:var(--co-carbon)}
.co-chip--acid:hover{background:var(--co-bone);border-color:var(--co-bone);color:var(--co-carbon)}
.co-argument{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);margin-top:clamp(22px,2.8vw,44px);counter-reset:arg}
.co-argument div{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--co-rule-2);font-size:14px;line-height:1.5;color:var(--co-ink-soft)}
.co-argument div::before{counter-increment:arg;content:counter(arg,decimal-leading-zero);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--co-ink-faint)}
.co-argument b{font-weight:500;color:var(--co-ink);font-size:15px}

/* ------------------------------------------------------- product story --- */
.co-story{margin-top:clamp(22px,2.8vw,44px)}
.co-decisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,32px);margin-top:clamp(22px,2.8vw,44px)}
.co-decisions div{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--co-rule-2);font-size:14px;line-height:1.5;color:var(--co-ink-soft)}
.co-decisions b{font-weight:500;color:var(--co-ink);font-size:15px}

/* --------------------------------------------------------- buyer materials --- */
.co-buyer{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,56px);margin-top:clamp(22px,2.8vw,44px);align-items:start}
@media (min-width:1000px){.co-buyer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.co-buyer__i{display:grid;gap:12px}
.co-buyer__i .co-h4{margin-bottom:0!important}
.co-sheet{background:#fff;border:1px solid var(--co-rule-2);padding:clamp(18px,2.6vw,36px)}
.co-sheet .c-check li{font-size:15px}
.co-reserved{margin-top:clamp(22px,2.8vw,44px);padding:clamp(16px,2vw,26px);border:1px dashed var(--co-rule-2);font-size:13.5px;line-height:1.55;color:var(--co-ink-soft);max-width:78ch}
.co-reserved b{font-weight:500;color:var(--co-ink)}

/* --------------------------------------------------------- construction --- */
.co-legacy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(22px,2.8vw,44px)}
.co-legacy .co-fig img{border:1px solid var(--co-night-rule)}
.co-inventory{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 24px;margin-top:clamp(18px,2.2vw,32px);font-size:14px;line-height:1.5;color:var(--co-night-soft);list-style:none;padding:0}
.co-inventory li{padding:8px 0;border-top:1px solid var(--co-night-rule)}
.co-inventory li b{font-weight:500;color:var(--co-bone);display:block}
.co-inventory li i{font-style:normal;font-size:12px;color:var(--co-night-faint)}

/* --------------------------------------------------- the disclosures --- */
.co-more{margin-top:clamp(22px,2.6vw,36px);border-top:1px solid var(--co-rule)}
.co-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--co-ink-soft);user-select:none}
.co-more>summary::-webkit-details-marker{display:none}
.co-more>summary::marker{content:''}
.co-more>summary::after{content:'+';font-size:15px;line-height:1;color:var(--co-ink-faint)}
.co-more[open]>summary::after{content:'\2013'}
.co-more>summary:hover{color:var(--co-ink)}
.co-more--night{border-top-color:var(--co-night-rule)}
.co-more--night>summary{color:var(--co-night-soft)}
.co-more--night>summary:hover{color:var(--co-bone)}
.co-more--tight{margin-top:12px}
.co-more__prose{display:grid;gap:.9em;padding:4px 0 8px;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--co-ink-soft)}
.co-more--night .co-more__prose{color:var(--co-night-soft)}
.co-more__prose b{font-weight:500;color:var(--co-ink)}
.co-more--night .co-more__prose b{color:var(--co-bone)}
.co-more__prose a{color:inherit}
.co-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.5;color:var(--co-ink-soft)}
.co-table th,.co-table td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--co-rule)}
.co-table th{font-weight:500;color:var(--co-ink);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.co-more--night .co-table th{color:var(--co-bone)}
.co-more--night .co-table th,.co-more--night .co-table td{border-bottom-color:var(--co-night-rule)}

/* --------------------------------------------------------------- close --- */
.co-scopeline{margin-top:clamp(24px,3vw,44px)!important;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:14px;color:var(--co-night-soft)}
.co-scopeline b{font-weight:700;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;color:var(--co-bone);line-height:1}
.co-scopeline span{color:var(--co-night-faint)}
.co-credit{margin-top:clamp(16px,2vw,28px)!important;font-size:13.5px;line-height:1.6;color:var(--co-night-soft);max-width:64ch}
.co-credit b{font-weight:500;color:var(--co-bone)}
body.co .closing--exhibit{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(36px,5vw,72px)}

@media print{.co details{display:block}.co details>*{display:block}}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1100px){
  .co-ads{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .co-argument{grid-template-columns:1fr 1fr}
  .co-battles{grid-template-columns:1fr;gap:22px}
  .co-trio{grid-template-columns:1fr;gap:18px}
  .co-legacy{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body.co{--co-edge:16px}
  .co-hero{padding-top:22px}
  .co-hero__title{font-size:clamp(34px,10.4vw,48px)}
  .co-hero__deck{font-size:16px}
  .co-ads{grid-template-columns:1fr}
  .co-argument{grid-template-columns:1fr}
  .co-legacy{grid-template-columns:1fr}
  .co-scopeline{gap:6px 10px}
}
@media (max-width:360px){
  .co-hero__title{font-size:32px}
  .co-h2{font-size:28px}
}


/* ==========================================================================
   v2.0 additions
   ========================================================================== */

/* ---------------------------------------------------- chapter navigator --- */
/* A restrained sticky bar beneath the site header. On a phone the links
   scroll horizontally; the current chapter is underlined. It never covers a
   heading: every chapter carries a scroll margin for header plus bar. */
.co-chapters{position:sticky;top:var(--jw-head-h,64px);z-index:30;background:rgba(242,239,233,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--co-rule)}
.co-chapters__in{display:flex;align-items:center;gap:4px;max-width:1560px;margin:0 auto;padding:0 var(--co-edge);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.co-chapters__in::-webkit-scrollbar{display:none}
.co-chapters__k{flex:none;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint);padding-right:14px;white-space:nowrap}
.co-chapters a{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--co-ink-soft);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.co-chapters a:hover{color:var(--co-ink)}
.co-chapters a[aria-current="true"]{color:var(--co-ink);border-bottom-color:var(--co-ink)}
.co-chapters a:focus-visible{outline:2px solid var(--co-ink);outline-offset:-4px}
.co main .co-sec[id],.co main .co-hero[id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 50px)}
.co main [id]:not(.co-sec):not(.co-hero){scroll-margin-top:calc(var(--jw-head-h,64px) + 62px)}

/* ------------------------------------------------------------ overview --- */
.co-ledger{display:grid;gap:0;margin-top:clamp(16px,2vw,26px);border-top:1px solid var(--co-night-rule);max-width:560px}
.co-ledger div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--co-night-rule);font-size:13px;line-height:1.5;color:var(--co-night-soft)}
.co-ledger dt{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-night-faint);padding-top:.25em}
.co-ledger dd{margin:0;color:var(--co-night-soft)}
.co-hero .co-links{margin-top:clamp(18px,2.2vw,28px)}
.co-hero .co-chip{color:var(--co-bone);border-color:var(--co-night-rule)}
.co-hero .co-chip:hover{background:var(--co-bone);border-color:var(--co-bone);color:var(--co-carbon)}
.co-hero .co-chip--acid{background:var(--co-acid);border-color:var(--co-acid);color:var(--co-carbon)}
.co-hero .co-chip--acid:hover{background:var(--co-bone);border-color:var(--co-bone)}
.co-hero__key .co-fig{cursor:default}
.co-hero__key .co-fig img{border:1px solid var(--co-night-rule);background:transparent}
.co-chip--dark{background:var(--co-ink);border-color:var(--co-ink);color:var(--co-bone)}
.co-chip--dark:hover{background:var(--co-carbon)}

/* ------------------------------------------------------------ category --- */
.co-map{margin:clamp(22px,2.8vw,44px) 0 0}
.co-map img{width:100%;height:auto;border:1px solid var(--co-rule-2);background:#0F2E22}
.co-map figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--co-ink-faint);max-width:80ch}
.co-centres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(22px,2.8vw,44px)}
.co-centres div{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--co-rule-2);font-size:14.5px;line-height:1.5;color:var(--co-ink-soft)}
.co-centres b{font-weight:700;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.012em;color:var(--co-ink)}
.co-centres i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint)}
.co-records{display:grid;gap:0;border-top:1px solid var(--co-rule-2);margin-top:14px}
.co-record{border-bottom:1px solid var(--co-rule)}
.co-record>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-height:52px;padding:12px 0;font-size:15px;color:var(--co-ink)}
.co-record>summary::-webkit-details-marker{display:none}
.co-record>summary b{font-weight:700}
.co-record>summary span{color:var(--co-ink-faint);font-size:13.5px}
.co-record>summary::after{content:'+';margin-left:auto;font-size:16px;color:var(--co-ink-faint)}
.co-record[open]>summary::after{content:'\2013'}
.co-record__body{padding:4px 0 18px;display:grid;gap:12px}
.co-record__claim{font-size:14px;color:var(--co-ink-soft)}
.co-record__claim b{font-weight:500;color:var(--co-ink)}
.co-record dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:13.5px;line-height:1.45}
.co-record dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 12px;padding:6px 0;border-bottom:1px solid var(--co-rule)}
.co-record dt{font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--co-ink-faint);padding-top:.3em}
.co-record dd{margin:0;color:var(--co-ink-soft)}
.co-record__src{font-size:12.5px;color:var(--co-ink-faint)}
.co-record__src a{color:inherit}
.co-swatchrow{display:inline-flex;gap:4px;vertical-align:middle}
.co-swatchrow i{width:14px;height:14px;border:1px solid var(--co-rule-2);display:inline-block}
@media (max-width:900px){.co-centres{grid-template-columns:1fr}.co-record dl{grid-template-columns:1fr}}
@media (max-width:560px){.co-record dl div{grid-template-columns:1fr}}

/* ---------------------------------------------------- four approaches --- */
.co-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(22px,2.8vw,44px);list-style:none;padding:0}
.co-tab{display:grid;gap:8px;padding:0 0 10px;text-decoration:none;color:var(--co-ink);border:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer;border-bottom:2px solid transparent}
.co-tab img{width:100%;height:auto;aspect-ratio:1944/1110;object-fit:cover;border:1px solid var(--co-rule-2);background:var(--co-bone-2)}
.co-tab__n{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint)}
.co-tab__t{font-weight:700;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.012em;line-height:1.15}
.co-tab__s{font-size:12.5px;color:var(--co-ink-soft)}
.co-tab[aria-selected="true"]{border-bottom-color:var(--co-ink)}
.co-tab[aria-selected="true"] img{outline:2px solid var(--co-ink);outline-offset:-1px}
.co-tab:hover img{outline:2px solid var(--co-rule-2);outline-offset:-1px}
.co-tab:focus-visible{outline:2px solid var(--co-ink);outline-offset:4px}
.co-panel{margin-top:clamp(22px,2.8vw,44px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,40px);padding-top:clamp(18px,2.2vw,32px);border-top:1px solid var(--co-rule-2)}
.co-panel[hidden]{display:none}
@media (min-width:1000px){.co-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.co-panel__art{margin:0}
.co-panel__art img{width:100%;height:auto;border:1px solid var(--co-rule-2);background:var(--co-bone-2)}
.co-panel__art figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--co-ink-faint);max-width:70ch}
.co-panel__t{font-weight:700;font-size:clamp(24px,2.4vw,36px);line-height:1.05;letter-spacing:-.02em;color:var(--co-ink);text-wrap:balance}
.co-panel__k{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint);margin-bottom:8px!important}
.co-fields{display:grid;gap:0;border-top:1px solid var(--co-rule-2);margin-top:14px}
.co-fields div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--co-rule);font-size:14px;line-height:1.5;color:var(--co-ink-soft)}
.co-fields dt{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--co-ink-faint);padding-top:.3em}
.co-fields dd{margin:0}
.co-fields dd.co-sig{font-weight:700;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.012em;color:var(--co-ink);line-height:1.2}
.co-fields ul{margin:0;padding-left:16px;display:grid;gap:3px}
.co-panel .co-links{margin-top:clamp(14px,1.8vw,24px)}
.co-selnote{margin-top:clamp(14px,1.8vw,24px)!important;font-size:12.5px;color:var(--co-ink-faint);max-width:80ch}
@media (max-width:760px){.co-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.co-fields div{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- system --- */
.co-motifrows{display:grid;gap:clamp(18px,2.4vw,36px);margin-top:clamp(22px,2.8vw,44px)}
.co-motifrow{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,28px);padding-top:clamp(16px,2vw,28px);border-top:1px solid var(--co-rule-2)}
@media (min-width:900px){.co-motifrow{grid-template-columns:150px minmax(0,1fr) minmax(0,1.3fr);align-items:start}}
.co-motifrow__mark{margin:0;background:#fff;border:1px solid var(--co-rule);padding:14px;max-width:180px}
.co-motifrow__mark img{width:100%;height:auto;aspect-ratio:1}
.co-motifrow__t{font-weight:700;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.012em;color:var(--co-ink)}
.co-motifrow__t small{display:block;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint);margin-bottom:4px}
.co-motifrow>div:not(.co-embed-route)>p{font-size:14px;line-height:1.5;color:var(--co-ink-soft);max-width:44ch}
.co-motifrow .co-links{margin-top:12px}
.co-embed-route{border:1px solid var(--co-rule-2)}
.co-embed-route .cr{padding:clamp(18px,2.4vw,36px)}
.co-embed-route .cr-wrap{padding:0;max-width:none}
.co-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);margin-top:clamp(22px,2.8vw,44px)}
.co-video{position:relative;background:#fff;border:1px solid var(--co-rule-2)}
.co-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#f5f0e5}
.co-video__tag{position:absolute;left:12px;top:12px;z-index:1;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;background:var(--co-carbon);color:var(--co-bone);pointer-events:none}
.co-video__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--co-ink-faint);max-width:none}
.co-video__bar b{font-weight:500;color:var(--co-ink)}
.co-video__bar a{color:var(--co-ink-soft)}
@media (max-width:900px){.co-videos{grid-template-columns:1fr}}

/* ---------------------------------------------------------- applications --- */
.co-group{margin-top:clamp(32px,4vw,64px);padding-top:clamp(22px,2.8vw,40px);border-top:2px solid var(--co-ink)}
.co-group__h{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px;align-items:end}
@media (min-width:900px){.co-group__h{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.co-group__h .co-line{margin-top:0!important}
.co-gallery{display:grid;gap:clamp(12px,1.6vw,24px);margin-top:clamp(18px,2.2vw,32px)}
.co-gallery--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.co-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.co-gallery--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.co-gallery--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.co-gallery .co-fig img{border:1px solid var(--co-rule)}
.co-gallery .co-fig figcaption b{letter-spacing:.06em}
@media (max-width:1100px){.co-gallery--6{grid-template-columns:repeat(3,minmax(0,1fr))}.co-gallery--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.co-gallery--3{grid-template-columns:1fr}.co-gallery--6{grid-template-columns:repeat(2,minmax(0,1fr))}.co-gallery--5{grid-template-columns:repeat(2,minmax(0,1fr))}.co-gallery--2{grid-template-columns:1fr}}
/* v2.1: the pieces run full width; the caption column they once shared the row with is gone */
.co-piece{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,32px);margin-top:clamp(22px,2.8vw,44px);align-items:start}
.co-note{margin-top:10px!important;font-size:13.5px;line-height:1.5;color:var(--co-ink-faint);max-width:70ch}
.co-note a{color:var(--co-ink-soft);text-decoration:underline;text-underline-offset:2px}
.co-caption{display:grid;gap:8px;font-size:14px;line-height:1.5;color:var(--co-ink-soft)}
.co-caption b{font-weight:500;color:var(--co-ink)}
.co-caption .co-h4{margin-bottom:0!important}
.co-caption p+p{margin-top:0!important}
.co-filmstatus{font-size:12.5px;line-height:1.5;color:var(--co-ink-faint);padding:10px 0 0;border-top:1px dashed var(--co-rule-2)}
.co-player{position:relative;background:#000;border:1px solid var(--co-rule-2)}
.co-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.co-player__tag{position:absolute;left:12px;top:12px;z-index:1;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;background:rgba(23,23,23,.86);color:var(--co-bone);pointer-events:none}
.co-emails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(18px,2.2vw,32px);align-items:start}
.co-emails .c-email{max-width:none}
@media (max-width:1100px){.co-emails{grid-template-columns:1fr}.co-emails .c-email{max-width:600px}}
.co-dl{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13px}
.co-dl a{color:var(--co-ink-soft);display:inline-flex;align-items:center;min-height:44px}
.co-video__bar a{display:inline-flex;align-items:center;min-height:44px}
.co-dl span{color:var(--co-ink-faint)}

/* ------------------------------------------------------------- judgment --- */
.co-decisions--night div{border-top-color:var(--co-night-rule);color:var(--co-night-soft)}
.co-decisions--night b{color:var(--co-bone)}
.co-decisions--night a{color:var(--co-bone)}
.co-plan{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,40px);margin-top:14px}
@media (min-width:900px){.co-plan{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.co-plan .co-fig img{border:1px solid var(--co-night-rule)}
.co-related{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:clamp(16px,2vw,28px)}

/* ------------------------------------------------------------ route pages --- */
body.co.co-route main{background:var(--co-bone)}
.co-sec--head{padding-top:clamp(20px,2.6vw,36px)}
.co-routenav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 0 18px;margin-bottom:clamp(22px,3vw,44px);border-bottom:1px solid var(--co-rule-2);font-size:13px}
.co-routenav__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--co-ink);text-decoration:none}
.co-routenav__back:hover{text-decoration:underline}
.co-routenav__routes{display:flex;gap:4px;list-style:none;padding:0;margin:0}
.co-routenav__routes a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;text-decoration:none;font-weight:500;letter-spacing:.06em;color:var(--co-ink);border:1px solid transparent;border-radius:3px}
.co-routenav__routes a[aria-current="page"]{border-color:var(--co-ink)}
.co-routenav__routes a:hover{border-color:var(--co-rule-2)}
.co-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(28px,3.4vw,56px);padding-top:20px;border-top:1px solid var(--co-ink);font-size:13.5px}
.co-foot a{font-weight:500;color:var(--co-ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.co-foot a:hover{text-decoration:underline}


/* ==========================================================================
   v3.0 · film first
   ========================================================================== */

/* -------------------------------------------------------------- the lead --- */
/* The commercial is the first substantial thing on the page. The identifier
   above it is one compact row; the player is sized so its poster and play
   control sit inside the first viewport on a desktop (the width is derived
   from the viewport height less the header, chapter bar, identifier and
   credit) and it runs full width on a phone, where 16:9 always fits. */
.co-lead{background:var(--co-carbon);color:var(--co-bone);padding:clamp(16px,2.2vw,32px) 0 clamp(26px,3.4vw,52px)}
.co-lead__id{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;margin-bottom:clamp(12px,1.6vw,22px)}
.co-lead__title{font-weight:700;font-size:clamp(19px,2vw,28px);line-height:1.1;letter-spacing:-.02em;color:var(--co-bone);text-wrap:balance}
.co-lead__in{margin:0 auto;max-width:min(100%,calc((100vh - 312px) * 16 / 9));min-width:min(100%,640px)}
@supports (height:100svh){.co-lead__in{max-width:min(100%,calc((100svh - 312px) * 16 / 9))}}
.co-lead__film{margin:0}
@media (max-width:640px){.co-lead .co-coord{font-size:10px;letter-spacing:.11em}.co-lead .co-coord::before{display:none}}
.co-player--lead{border:1px solid var(--co-night-rule)}
.co-player--lead video{background:#0F2E22}
.co-player--lead video[poster]{object-fit:cover}
/* one control, one corner, no scrim: the poster is the artwork. Shown only
   once the script has taken the native controls back; without the script the
   browser's own controls are already visible. */
.co-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(12px,1.8vw,24px);background:transparent;border:0;cursor:pointer;width:100%;color:var(--co-bone);font-family:inherit}
.co-play[hidden]{display:none}
.co-play>span:first-child{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;background:var(--co-carbon);color:var(--co-bone);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 14px rgba(0,0,0,.28)}
.co-play__q{width:14px;height:14px;fill:currentColor}
.co-play:hover>span:first-child,.co-play:focus-visible>span:first-child{background:var(--co-acid);color:var(--co-carbon)}
.co-play:focus-visible{outline:2px solid var(--co-acid);outline-offset:-4px}
.co-player.is-started .co-play{display:none}
@media (max-width:640px){.co-play{padding:10px}.co-play>span:first-child{min-height:44px;padding:0 16px;font-size:12px}}
.co-lead__credit{margin-top:clamp(12px,1.4vw,18px);font-size:clamp(14.5px,1.15vw,17px);line-height:1.45;color:var(--co-night-soft);max-width:70ch}
.co-lead__credit b{font-weight:500;color:var(--co-bone)}
.co-lead__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 14px;margin-top:2px!important;font-size:12.5px;color:var(--co-night-faint)}
.co-lead__bar b{font-weight:500;color:var(--co-night-soft)}
.co-lead__files{display:inline-flex;flex-wrap:wrap;gap:0 18px}
.co-lead__files a{display:inline-flex;align-items:center;min-height:44px;color:var(--co-night-soft);text-decoration:none;border-bottom:1px solid var(--co-night-rule);line-height:1}
.co-lead__files a:hover{color:var(--co-bone);border-color:var(--co-bone)}
.co main .co-lead[id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 50px)}

/* ------------------------------------------------------------- campaign --- */
.co-board{margin-top:clamp(22px,2.8vw,44px)}
.co-board img{border:1px solid var(--co-rule-2)}
.co-gallery--3x2{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.co-gallery--3x2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------- the four approaches --- */
/* Four doors, each the whole card: board, number and name, the premise, the
   three identity decisions in one line, and the route. Two across on a
   phone so all four stay in view together. */
.co-approaches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(22px,2.8vw,44px)}
.co-appr{display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--co-ink);padding-bottom:12px;border-bottom:1px solid var(--co-rule)}
.co-appr img{width:100%;height:auto;aspect-ratio:1944/1110;object-fit:cover;border:1px solid var(--co-rule-2);background:var(--co-bone-2)}
.co-appr:hover img,.co-appr:focus-visible img{outline:2px solid var(--co-ink);outline-offset:-1px}
.co-appr:focus-visible{outline:2px solid var(--co-ink);outline-offset:4px}
.co-appr__k{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink-faint);margin-top:4px}
.co-appr__t{font-weight:700;font-size:clamp(15px,1.25vw,18px);line-height:1.2;letter-spacing:-.012em;color:var(--co-ink);text-wrap:balance}
.co-appr__s{font-size:13px;line-height:1.45;color:var(--co-ink-soft)}
.co-appr__go{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--co-ink);margin-top:4px}
.co-appr:hover .co-appr__go{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.co-approaches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.co-appr__s{display:none}}

/* --------------------------------------------------- the why disclosures --- */
/* Strategy is one obvious optional action beside the work it explains. The
   summary reads as a labelled control; the body sets the frameworks as the
   creative decisions they produced, with the framework named small. */
.co-why{margin-top:clamp(28px,3.4vw,56px);border-top:2px solid var(--co-ink)}
.co-why>summary{font-size:13px;min-height:56px;gap:14px;flex-wrap:wrap}
.co-why>summary::after{font-size:18px}
.co-why__sub{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--co-ink-faint)}
.co-why__body{display:grid;gap:clamp(20px,2.6vw,40px);padding:6px 0 14px}
.co-why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,36px)}
.co-why__grid>div{display:grid;gap:8px;align-content:start;padding-top:12px;border-top:1px solid var(--co-rule-2)}
.co-why h4{font-weight:700;font-size:clamp(16px,1.35vw,20px);line-height:1.2;letter-spacing:-.012em;color:var(--co-ink);text-wrap:balance}
.co-why h4 small{display:block;margin-top:5px;font-weight:500;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--co-ink-faint)}
.co-why__grid p{font-size:14.5px;line-height:1.55;color:var(--co-ink-soft);max-width:48ch}
.co-why .co-map{margin-top:0}
.co-why .co-more--tight{margin-top:0}
.co-why__links{font-size:13px;line-height:1.6;color:var(--co-ink-faint)}
.co-why__links a{color:var(--co-ink-soft)}
@media (max-width:1000px){.co-why__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.co-why__grid{grid-template-columns:1fr}.co-why>summary{min-height:52px}}

/* ==========================================================================
   v3.1 · three more films
   ========================================================================== */

/* ---------------------------------------------------------- the gallery --- */
/* The three further commercials continue the lead's Carbon ground. Each
   card is the film still as artwork with the same single play control as
   the lead; the native controls return on the first press. Nothing plays
   until the visitor asks; only metadata is fetched up front. */
.co-films{background:var(--co-carbon);color:var(--co-bone);padding:0 0 clamp(30px,3.8vw,60px)}
.co-films__in{border-top:1px solid var(--co-night-rule);padding-top:clamp(18px,2.4vw,34px)}
.co-films__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-bone)}
.co-films__h span{font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--co-night-faint)}
.co-filmgrid{list-style:none;margin:clamp(14px,1.8vw,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,36px) clamp(14px,1.8vw,28px)}
.co-filmcard{display:grid;gap:6px;align-content:start}
.co-player--card{border:1px solid var(--co-night-rule);background:#0F2E22}
.co-player--card video{background:#0F2E22}
.co-player--card video[poster]{object-fit:cover}
.co-player--card .co-play{padding:clamp(10px,1.2vw,16px)}
.co-player--card .co-play>span:first-child{min-height:44px;padding:0 16px;font-size:12px}
.co-filmcard__k{margin-top:8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--co-night-faint)}
.co-filmcard__t{font-weight:700;font-size:clamp(17px,1.35vw,21px);line-height:1.15;letter-spacing:-.015em;color:var(--co-bone);text-wrap:balance}
.co-filmcard__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 14px;font-size:12.5px;color:var(--co-night-faint)}
.co main .co-films[id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 50px)}
@media (max-width:900px){.co-filmgrid{grid-template-columns:1fr;max-width:min(100%,640px)}}