/* ==========================================================================
   project-protective-life.css · work/case-protective-life.html

   Scoped entirely under body.pl. 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.
   Protective's purple, photography and type live inside the artwork and the
   films and nowhere else on the page.

   Built on the creative-first rhythm of project-naked-nutrition.css v2.0
   (19 September 2026): a compact opening with the first film beside the
   title on wide screens and beneath the short introduction on a phone;
   films at useful scale; the observed brand beside the campaign work; A/B
   pairs side by side where they fit and switched on a phone; captions,
   hypotheses and project notes in quiet disclosures.

   Load order: tokens, system, lightbox, typography, exhibition, site-nav,
   then this sheet.
   ========================================================================== */

body.pl{
  --pl-carbon:#171717;
  --pl-bone:#F2EFE9;
  --pl-bone-2:#E8E3DA;
  --pl-paper:#FAF8F4;
  --pl-ink:#171717;
  --pl-ink-soft:#3F474B;
  --pl-ink-faint:#5C6367;
  --pl-rule:rgba(23,23,23,.16);
  --pl-rule-2:rgba(23,23,23,.30);
  --pl-night-soft:rgba(242,239,233,.80);
  --pl-night-faint:rgba(242,239,233,.60);
  --pl-night-rule:rgba(242,239,233,.22);
  --pl-acid:#DFFF00;
  --pl-edge:clamp(16px,4.4vw,84px);
  --pl-face:var(--font-brand);
  background:var(--pl-carbon);
}
body.pl main{background:var(--pl-bone);color:var(--pl-ink);overflow-x:clip;font-family:var(--pl-face)}
body.pl ::selection{background:var(--pl-carbon);color:var(--pl-acid)}
.pl .vwrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--pl-edge);box-sizing:border-box}
.pl main img{max-width:100%;height:auto;display:block}
:where(.pl main) :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote){margin:0}
:where(.pl main) p{color:inherit}
.pl main :focus-visible{outline:2px solid var(--pl-ink);outline-offset:3px}
.pl main .pl-night :focus-visible,.pl main .pl-hero :focus-visible{outline-color:var(--pl-acid)}
.pl .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pl .pl-sprite{position:absolute;width:0;height:0;overflow:hidden}
.pl .pl-q{width:1em;height:1em;flex:none;fill:currentColor}
/* a closed disclosure holds nothing that can be seen or reached, whatever the engine */
.pl details:not([open]) > :not(summary){display:none}
/* a direct visit lands under the real header; a section link lands on its heading */
.pl main [id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 14px)}
.pl main .pl-sec[id]{scroll-margin-top:calc(var(--jw-head-h,64px) + 18px - clamp(48px,6.4vw,104px))}

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

/* ------------------------------------------------------------ sections --- */
.pl-sec{padding:clamp(48px,6.4vw,104px) 0}
.pl-day{background:var(--pl-bone);color:var(--pl-ink)}
.pl-paper{background:var(--pl-paper);color:var(--pl-ink)}
.pl-night{background:var(--pl-carbon);color:var(--pl-bone)}
.pl-night .pl-h2,.pl-night .pl-h3{color:var(--pl-bone)}
.pl-night .pl-line{color:var(--pl-night-soft)}
.pl-kick{display:flex;align-items:center;gap:12px;font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pl-ink-faint);margin-bottom:clamp(12px,1.4vw,18px)!important}
.pl-kick::before{content:'';width:26px;height:2px;background:var(--pl-ink)}
.pl-night .pl-kick{color:var(--pl-night-faint)}
.pl-night .pl-kick::before{background:var(--pl-acid)}
.pl-h2{font-weight:700;font-size:clamp(30px,4vw,62px);line-height:1;letter-spacing:-.028em;color:var(--pl-ink);text-wrap:balance;max-width:18ch}
.pl-h3{font-weight:700;font-size:clamp(19px,1.9vw,28px);line-height:1.08;letter-spacing:-.014em;color:var(--pl-ink);text-wrap:balance}
.pl-h4{font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--pl-ink-faint);margin-bottom:10px!important}
.pl-line{margin-top:clamp(10px,1.2vw,16px)!important;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--pl-ink-soft);max-width:60ch}
.pl-line--lead{font-size:clamp(16px,1.3vw,20px)}
.pl-subhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:clamp(28px,3.4vw,56px)}
.pl-subhead .pl-h3{max-width:30ch}
/* a tools row with no heading (the captions toggle alone) keeps the control at the right, where it sat beside the heading (v1.1, economy pass) */
.pl-subhead--tools{justify-content:flex-end}

/* -------------------------------------------------------------- figures --- */
.pl-fig{margin:0;cursor:zoom-in}
.pl-fig img{width:100%;height:auto;background:var(--pl-bone-2)}
.pl-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(--pl-ink-faint)}
.pl-fig figcaption b{font-weight:500;color:var(--pl-ink);letter-spacing:.01em}
.pl-fig figcaption .v{font-weight:500;color:var(--pl-ink);letter-spacing:.08em}
.pl-night .pl-fig figcaption{color:var(--pl-night-faint)}
.pl-night .pl-fig figcaption b{color:var(--pl-bone)}

/* --------------------------------------------------------------- films --- */
.pl-film{margin:0}
.pl-player{position:relative;background:#000;margin:0;aspect-ratio:16/9}
.pl-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* the control keeps to one corner, without a scrim, so the poster is the artwork */
.pl-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;color:var(--pl-bone);width:100%}
.pl-play span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--pl-carbon);color:var(--pl-bone);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 14px rgba(0,0,0,.28)}
.pl-play:hover span,.pl-play:focus-visible span{background:var(--pl-acid);color:var(--pl-carbon)}
.pl-player.is-started .pl-play{display:none}
.pl-filmbar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-top:10px;min-height:24px}
.pl-filmbar__t{font-size:13px;line-height:1.45;color:var(--pl-ink-faint)}
.pl-filmbar__t b{font-weight:500;color:var(--pl-ink)}
.pl-night .pl-filmbar__t,.pl-hero .pl-filmbar__t{color:var(--pl-night-faint)}
.pl-night .pl-filmbar__t b,.pl-hero .pl-filmbar__t b{color:var(--pl-bone)}
.pl-filmbar__file{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pl-ink-faint);text-decoration:none;border-bottom:1px solid var(--pl-rule-2)}
.pl-filmbar__file:hover{color:var(--pl-ink);border-color:var(--pl-ink)}
.pl-night .pl-filmbar__file,.pl-hero .pl-filmbar__file{color:var(--pl-night-faint);border-color:var(--pl-night-rule)}
.pl-night .pl-filmbar__file:hover,.pl-hero .pl-filmbar__file:hover{color:var(--pl-bone);border-color:var(--pl-bone)}
.pl-film__line{margin-top:8px!important;font-size:14px;line-height:1.5;color:var(--pl-ink-soft);max-width:52ch}
.pl-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,56px) clamp(20px,2.6vw,48px);margin-top:clamp(20px,2.4vw,36px)}
.pl-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--pl-ink);background:transparent;border:1px solid var(--pl-rule-2);cursor:pointer;font-family:inherit}
.pl-chip:hover{background:var(--pl-ink);border-color:var(--pl-ink);color:var(--pl-bone)}
.pl-chip--quiet{border-color:transparent;color:var(--pl-ink-faint);padding:0 8px}
.pl-chip--quiet[aria-pressed="true"]{color:var(--pl-ink);border-color:var(--pl-rule-2)}

/* --------------------------------------------------- the disclosures --- */
.pl-more{margin-top:clamp(22px,2.6vw,36px);border-top:1px solid var(--pl-rule)}
.pl-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(--pl-ink-soft);user-select:none}
.pl-more>summary::-webkit-details-marker{display:none}
.pl-more>summary::marker{content:''}
.pl-more>summary::after{content:'+';font-size:15px;line-height:1;color:var(--pl-ink-faint)}
.pl-more[open]>summary::after{content:'\2013'}
.pl-more>summary:hover{color:var(--pl-ink)}
.pl-more--night{border-top-color:var(--pl-night-rule)}
.pl-more--night>summary{color:var(--pl-night-soft)}
.pl-more--night>summary:hover{color:var(--pl-bone)}
.pl-more--tight{margin-top:12px}
.pl-more__prose{display:grid;gap:.9em;padding:4px 0 8px;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--pl-ink-soft)}
.pl-more--night .pl-more__prose{color:var(--pl-night-soft)}
.pl-more__prose b{font-weight:500;color:var(--pl-ink)}
.pl-more--night .pl-more__prose b{color:var(--pl-bone)}
.pl-script{padding:8px 0 10px;border-left:3px solid var(--pl-acid);padding-left:clamp(14px,2vw,26px);max-width:52ch;display:grid;gap:8px}
.pl-script p{font-size:clamp(15px,1.2vw,18px);line-height:1.4;color:var(--pl-bone)}
.pl-script small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-night-faint)}

/* ---------------------------------------------- the observed reference --- */
.pl-ref{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3vw,64px);align-items:start;margin-top:clamp(22px,2.8vw,44px)}
.pl-ref__col{display:grid;gap:6px;align-content:start}
.pl-ref__fig{margin:0;cursor:zoom-in;max-width:520px}
.pl-ref__fig img{width:100%;height:auto;border:1px solid var(--pl-rule)}
.pl-ref__fig figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--pl-ink-faint)}
.pl-ref__fig figcaption b{font-weight:500;color:var(--pl-ink);display:block;letter-spacing:.06em;text-transform:uppercase;font-size:11px;margin-bottom:2px}
.pl-ref__src{margin-top:6px!important;font-size:12.5px;line-height:1.5;color:var(--pl-ink-faint)}
.pl-ref__src a{color:inherit}
.pl-ref__text{display:grid;gap:clamp(16px,2vw,28px);align-content:start}
.pl-ref__text .pl-h3{max-width:24ch}
.pl-ref__text p{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--pl-ink-soft);max-width:52ch}
.pl-ref__text p+p{margin-top:8px!important}
.pl-tag{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-ink-faint)}
.pl-tag::before{content:'';width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%}
.pl-tag--spec::before{background:currentColor}

/* -------------------------------------------------------- the ad pairs --- */
.pl-pairs{display:grid;gap:clamp(36px,4.6vw,80px);margin-top:clamp(28px,3.4vw,56px)}
.pl-pair{display:grid;gap:12px;padding-top:clamp(18px,2.2vw,30px);border-top:1px solid var(--pl-rule-2)}
.pl-pair__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px}
.pl-pair__t{font-weight:700;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.012em;color:var(--pl-ink)}
.pl-pair__k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-ink-faint)}
.pl-pair__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,28px)}
.pl-pair__grid .pl-fig figcaption{margin-top:8px}

/* the phone A/B switch: built by the script, shown only where the pair no
   longer fits side by side */
.pl-abswitch{display:none;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.pl-abswitch__k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--pl-ink-faint);margin-right:6px}
.pl-abswitch button{min-width:44px;min-height:40px;padding:0 12px;border:1px solid var(--pl-rule-2);background:transparent;color:var(--pl-ink-soft);font:inherit;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pl-abswitch button[aria-pressed="true"]{background:var(--pl-ink);border-color:var(--pl-ink);color:var(--pl-bone)}

/* ------------------------------------------------------- the two battles --- */
.pl-battles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,48px);margin-top:clamp(22px,2.8vw,44px);max-width:1100px}
.pl-battle{display:grid;gap:8px;padding-top:14px;border-top:2px solid var(--pl-ink)}
.pl-battle__t{font-weight:700;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.014em;color:var(--pl-ink)}
.pl-battle p{font-size:clamp(14.5px,1.1vw,17px);line-height:1.5;color:var(--pl-ink-soft);max-width:40ch}

/* ---------------------------------------------------- the social pairs --- */
.pl-socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.8vw,64px) clamp(24px,3vw,56px);margin-top:clamp(24px,3vw,48px)}
.pl-social{display:grid;gap:10px;align-content:start;padding-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--pl-rule-2)}
.pl-social__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.pl-social__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.pl-social__grid .pl-fig img{aspect-ratio:4/5;object-fit:contain}
.pl-social .pl-more{margin-top:4px;border-top-color:var(--pl-rule)}
.pl-social .pl-more>summary{min-height:40px;font-size:11.5px}
.pl-social .pl-more__prose{max-width:60ch;font-size:13px}

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

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

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1100px){
  .pl-socials{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pl-films{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .pl-ref{grid-template-columns:1fr;gap:22px}
  .pl-ref__fig{max-width:420px}
  .pl-battles{grid-template-columns:1fr;gap:22px}
}
@media (max-width:640px){
  body.pl{--pl-edge:16px}
  .pl-hero{padding-top:22px}
  .pl-hero__title{font-size:clamp(34px,10.4vw,48px)}
  .pl-hero__deck{font-size:16px}
  /* one strong variant at a time; the switch reveals the other */
  .pl-pair__grid,.pl-social__grid{grid-template-columns:1fr}
  [data-ab] figure[data-ab-hidden]{display:none}
  /* the switch names the visible variant, so the side-by-side labels rest */
  [data-ab] .pl-fig figcaption{display:none}
  .pl-abswitch{display:flex}
  .pl-scopeline{gap:6px 10px}
}
@media (max-width:360px){
  .pl-hero__title{font-size:32px}
  .pl-h2{font-size:28px}
}