/* ==== pages/investigations.css ==== */
/* =====================================================================
   Investigations index (body[data-page="investigations"]) + the closing card shared with the articles (.inv-close).
   Choreography: assets/js/pages/investigations.js. The CSS bundle is global, so every class is prefixed inv-.
   Scenes: 1 opening · 2 case files · 3 concept notes (a quiet row) · 4 why it matters · 5 closing card.
   Each scene has a calm static layout first (reduced motion / no JS); html.motion adds pinning and
   scroll-linked states. Opening and "Why it matters" are always dark (copy uses .on-media) in both themes.
   ===================================================================== */

/* ---------- 1 · Opening over the coast-slick loop ---------- */
.inv-open{position:relative;background:#000;color:#f5f5f7;isolation:isolate}
.motion .inv-open{background:var(--bg)}
.inv-open-bg{position:absolute;inset:0;pointer-events:none}
.inv-open-pin{position:absolute;inset:0 0 auto;height:100vh;height:100svh;overflow:hidden}
.motion .inv-open-pin{position:sticky;top:0}
.inv-open-film{position:absolute;inset:0;overflow:hidden;background:var(--film-bg);transform-origin:50% 50%;will-change:transform}
.inv-open-media{position:absolute;inset:0;will-change:transform}
.inv-open-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.inv-open-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%),
  linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 64%)}
.inv-open-dim{position:absolute;inset:0;background:#000;opacity:0}
.inv-open-body{position:relative;z-index:1}
.inv-open-hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:100vh;min-height:100svh;
  padding:calc(var(--nav-h) + 48px) 0 clamp(36px,7vh,80px)}
.inv-open-hero .eyebrow{margin-bottom:clamp(14px,2vh,22px);color:rgba(245,245,247,.84)}
.inv-open-h{max-width:11.5em;font:600 clamp(44px,6.6vw,100px)/.98 var(--f-display);letter-spacing:-.038em;color:#fff}
.inv-open-lead{max-width:31em;margin-top:clamp(18px,2.6vh,30px);font-size:clamp(18px,1.55vw,22px);line-height:1.42;font-weight:450;letter-spacing:-.014em;color:var(--text-2)}
.inv-open-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;width:100%;margin-top:clamp(20px,3.4vh,36px)}
.inv-open-cap{font-size:13px;color:var(--text-meta);letter-spacing:-.005em}
.inv-open-statement{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding-block:var(--sec)}
.inv-open-statement p{max-width:17em;font:600 clamp(34px,4.8vw,72px)/1.06 var(--f-display);letter-spacing:-.032em;color:#fff;text-wrap:pretty}
.inv-open-ctl{position:sticky;bottom:0;z-index:4;display:flex;justify-content:flex-end;align-items:flex-end;height:68px;margin-top:-68px;padding:0 16px 16px;pointer-events:none}
.inv-open-ctl .vctl{position:relative;right:auto;bottom:auto;pointer-events:auto}
/* static: the film sits behind the headline only; the statement follows on black */
html:not(.motion) .inv-open-statement{min-height:0}
/* motion: a tail of film after the statement, while the film recedes into a frame */
.motion .inv-open-tail{height:85vh}
@media (max-width:767px){
  .inv-open-media video{object-position:62% 50%}
  /* the headline block starts higher on a phone: keep the scrim under the eyebrow too (bright coast behind it) */
  .inv-open-scrim{background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 22%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.84) 100%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 70%)}
  .inv-open-foot{flex-direction:column;align-items:flex-start}
  .inv-open-foot .link{order:2}
  .motion .inv-open-tail{height:70vh}
}

/* ---------- 2 · Case files ---------- */
.inv-files{padding-block:var(--sec) calc(var(--sec) * .7)}
.inv-files-head{margin-bottom:clamp(48px,7vw,96px)}
.inv-files-head .eyebrow{margin-bottom:14px}
.inv-files-credit{max-width:34em;margin-top:clamp(16px,2.2vw,24px);font-size:clamp(16px,1.25vw,18px);line-height:1.45;letter-spacing:-.012em;color:var(--text-2)}
.inv-files-credit a{color:var(--link);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
.inv-files-credit a:hover{text-decoration-color:currentColor}
.inv-list{display:grid;gap:clamp(72px,10vw,128px)}
.inv-case-media{position:relative;margin:0 0 clamp(22px,3vw,32px);aspect-ratio:16/10;border-radius:var(--r-xl);overflow:hidden;background:var(--media-bg);isolation:isolate}
.inv-case-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.inv-case-media video{background:var(--film-bg)}
.inv-case-media::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(to top,rgba(0,0,0,.4),transparent);pointer-events:none}
.inv-case-media figcaption{position:absolute;left:20px;bottom:16px;z-index:2;max-width:calc(100% - 88px);color:#fff;font-size:13px;font-weight:500;letter-spacing:-.005em}
.inv-case-link{display:block;color:var(--text);border-radius:var(--r-lg)}
.inv-case-link:focus-visible{outline-offset:14px}
.inv-case-link>span{display:block}
.inv-case-n{margin-bottom:clamp(14px,2vh,22px);font:600 15px/1 var(--f-text);color:var(--text-meta);font-variant-numeric:tabular-nums}
.inv-case-meta{display:flex!important;flex-wrap:wrap;gap:4px 14px;font-size:14px;font-weight:600;color:var(--text-meta)}
.inv-case-meta time{font-weight:400}
.inv-case-t{max-width:14em;margin-top:12px;font:600 clamp(34px,3.6vw,54px)/1.02 var(--f-display);letter-spacing:-.034em}
.inv-case-s{max-width:24em;margin-top:clamp(14px,2vh,20px);font-size:clamp(18px,1.45vw,21px);line-height:1.42;color:var(--text-2);text-wrap:pretty}
.inv-case-go{display:inline-flex!important;margin-top:12px}
.inv-case-link:hover .inv-case-go{text-decoration-line:underline}
.inv-case-link:hover .inv-case-go .chev{transform:translateX(3px)}
.inv-stage{display:none}
/* wide screens without motion: image beside text */
@media (min-width:1024px){
  html:not(.motion) .inv-case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,72px);align-items:center}
  html:not(.motion) .inv-case-media{margin:0}
}
/* wide screens with motion: one sticky stage, the entries pass beside it */
@media (min-width:1024px){
  .motion .inv-cases{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,5.5vw,88px)}
  .motion .inv-stage{display:block;position:sticky;top:calc(var(--nav-h) + 5vh);height:calc(100vh - var(--nav-h) - 10vh);align-self:start}
  .motion .inv-case-media{display:none}
  .motion .inv-list{gap:0}
  .motion .inv-case{display:flex;align-items:center;min-height:calc(100vh - var(--nav-h) - 10vh);opacity:.55;transition:opacity .9s var(--ease)}
  .motion .inv-case.is-on,.motion .inv-case:focus-within{opacity:1}
  .motion .inv-case:last-child{min-height:calc(100vh - var(--nav-h) - 10vh)}
}
.inv-stage-in{position:relative;height:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--film-bg);isolation:isolate}
.inv-layer{position:absolute;inset:0;overflow:hidden;opacity:0;transform:scale(1.06);
  transition:opacity .9s var(--ease) .4s,transform 1.6s var(--ease) .4s}
.inv-layer.is-on{z-index:1;opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 2.2s var(--ease)}
.inv-layer-in{position:absolute;inset:-6% 0;will-change:transform}
.inv-layer :is(img,video){width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.inv-stage-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 72%,rgba(0,0,0,.46) 100%)}
.inv-stage-idx{position:absolute;left:24px;right:24px;top:22px;z-index:3;display:flex;gap:6px}
.inv-stage-idx i{--p:0;position:relative;flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.inv-stage-idx i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--p));transform-origin:0 50%}
.inv-stage-cap{position:absolute;left:24px;right:80px;bottom:22px;z-index:3;display:grid;color:#fff;font-size:13px;font-weight:500;letter-spacing:-.005em}
.inv-stage-cap span{grid-area:1/1;opacity:0;transform:translate3d(0,8px,0);transition:opacity .5s var(--ease),transform .8s var(--ease)}
.inv-stage-cap span.is-on{opacity:1;transform:none;transition-delay:.35s}
.inv-stage-ctl{z-index:4;right:18px;bottom:16px}

/* ---------- 3 · Concept notes: one quiet row, set apart from the case files ---------- */
.inv-notes{padding-block:0 calc(var(--sec) * .5)}
.inv-notes-in{padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.inv-notes-head{max-width:36em;margin-bottom:clamp(28px,4vw,48px)}
.inv-notes-head .eyebrow{margin-bottom:12px}
.inv-notes-h{font:600 clamp(30px,3.4vw,48px)/1.06 var(--f-display);letter-spacing:-.03em}
.inv-notes-lead{margin-top:clamp(12px,1.6vw,18px);font-size:clamp(16px,1.25vw,18px);line-height:1.45;letter-spacing:-.012em;color:var(--text-2)}
.inv-notes-list{display:grid;gap:20px}
.inv-note{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);color:var(--text);
  box-shadow:0 0 0 1px var(--line-soft);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.inv-note:hover{transform:translateY(-3px);box-shadow:var(--hover-shadow)}
.inv-note-media{position:relative;margin:0;min-height:clamp(280px,28vw,380px);overflow:hidden;background:var(--film-bg);isolation:isolate}
.inv-note-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.inv-note-media::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);pointer-events:none}
.inv-note-media figcaption{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;color:#fff;font-size:13px;font-weight:500;letter-spacing:-.005em}
.inv-note-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(28px,4.2vw,64px)}
.inv-note-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px;font-weight:600;color:var(--text-meta)}
.inv-note-meta time{font-weight:400}
.inv-note-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent);letter-spacing:-.005em}
.inv-note-t{max-width:15em;margin-top:clamp(16px,2vw,22px);font:600 clamp(28px,3vw,42px)/1.06 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.inv-note-s{max-width:26em;margin-top:clamp(12px,1.6vw,18px);font-size:clamp(17px,1.35vw,20px);line-height:1.42;color:var(--text-2);text-wrap:pretty}
.inv-note-go{margin-top:clamp(10px,1.4vw,16px)}
.inv-note:hover .inv-note-go{text-decoration-line:underline}
.inv-note:hover .inv-note-go .chev{transform:translateX(3px)}
@media (max-width:860px){
  .inv-note{grid-template-columns:1fr}
  .inv-note-media{min-height:0;aspect-ratio:16/10}
}
@media (max-width:767px){
  .inv-note-body{padding:26px 24px 28px}
}

/* ---------- 4 · Why it matters ---------- */
.inv-why{position:relative;background:#000;color:#f5f5f7;padding-top:var(--sec)}
.inv-why-head{padding-bottom:clamp(48px,7vw,96px)}
.inv-why-head .eyebrow{margin-bottom:14px}
.inv-why-list{display:grid;gap:2px}
.inv-why-item{position:relative;display:flex;align-items:flex-end;min-height:min(92vh,860px);overflow:hidden;isolation:isolate}
.inv-why-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--film-bg)}
.inv-why-media-in{position:absolute;inset:0;will-change:transform}
.inv-why-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inv-why-v{object-position:40% 50%;background:var(--film-bg)}
.inv-why-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.3) 100%),
  linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 66%)}
.inv-why-copy{width:100%;padding-block:calc(var(--nav-h) + 48px) clamp(44px,9vh,104px)}
.inv-why-k{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,1.8vh,20px);font-size:15px;font-weight:600;color:var(--text-meta);letter-spacing:-.01em}
.inv-why-k span{font-variant-numeric:tabular-nums;color:var(--accent)}
.inv-why-t{max-width:11em;font:600 clamp(42px,6vw,92px)/.98 var(--f-display);letter-spacing:-.038em;color:#fff}
.inv-why-p{max-width:29em;margin-top:clamp(18px,2.8vh,30px);font-size:clamp(19px,1.7vw,24px);line-height:1.36;font-weight:500;letter-spacing:-.018em;color:#fff;text-wrap:pretty}
.inv-why-p2{max-width:36em;margin-top:clamp(10px,1.6vh,16px);font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.inv-why-cap{margin-top:clamp(14px,2.4vh,24px);font-size:12px;color:var(--text-meta)}
.inv-why-ticks{display:none}
.motion .inv-why-track{position:relative;height:420vh}
.motion .inv-why-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.motion .inv-why-list{display:block;position:absolute;inset:0}
.motion .inv-why-item{position:absolute;inset:0;min-height:0}
.motion .inv-why-item .inv-why-media,.motion .inv-why-item .inv-why-scrim{opacity:0}
.motion .inv-why-item:first-child :is(.inv-why-media,.inv-why-scrim){opacity:1}
.motion .inv-why-copy .wrap>*{opacity:0;will-change:transform,opacity}
.motion .inv-why-ticks{position:absolute;right:max(var(--gutter),calc((100% - var(--maxw))/2));bottom:clamp(44px,9vh,104px);z-index:3;display:flex;flex-direction:column;gap:8px}
.inv-why-ticks i{--p:0;position:relative;display:block;width:2px;height:36px;border-radius:2px;background:rgba(255,255,255,.24);overflow:hidden}
.inv-why-ticks i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleY(var(--p));transform-origin:50% 0}
@media (max-width:767px){
  .inv-case-media{aspect-ratio:4/5}
  .inv-why-v{object-position:58% 40%}
  .inv-why-item{min-height:88svh}
  .inv-why-t{font-size:clamp(38px,11vw,48px)}
  .inv-why-p{font-size:18px;line-height:1.38}
  .inv-why-p2{font-size:15px;line-height:1.47}
  .inv-why-copy{padding-bottom:40px}
  .motion .inv-why-ticks{right:auto;left:var(--gutter);top:calc(var(--nav-h) + 20px);bottom:auto;flex-direction:row}
  .inv-why-ticks i{width:28px;height:2px}
  .inv-why-ticks i::after{transform:scaleX(var(--p));transform-origin:0 50%}
  .inv-why-scrim{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.36) 100%)}
}

/* ---------- 5 · Closing card (also used by the articles) ---------- */
.inv-close-sec{padding-block:calc(var(--sec) * .8) var(--sec)}
.inv-close{position:relative;display:flex;align-items:flex-end;min-height:clamp(520px,78vh,760px);border-radius:var(--r-xl);overflow:hidden;background:var(--film-bg);isolation:isolate;transform-origin:50% 100%}
.inv-close-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.inv-close-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.inv-close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.12) 100%)}
.inv-close-body{max-width:820px;padding:clamp(28px,5.5vw,80px)}
.inv-close-body .h2{margin:12px 0 20px}
.inv-close-body .lead{max-width:30em}
.inv-close-body .actions{margin-top:32px}
@media (max-width:767px){ .inv-close{min-height:560px} }

/* ==== pages/related.css ==== */
/* "Related on MEPA": contextual links at the foot of a page (prefix rel-). Plain type and hairlines; always visible, no motion. */
.rel{padding:clamp(40px,6vh,72px) 0;border-top:1px solid var(--line)}
.rel-h{margin-bottom:clamp(16px,2.4vh,24px);font:600 15px/1.3 var(--f-text);letter-spacing:0;color:var(--text-meta)}
.rel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 clamp(20px,3vw,40px);margin:0;padding:0;list-style:none}
.rel-a{display:grid;gap:4px;min-height:44px;padding:14px 0;border-top:1px solid var(--line);color:var(--text)}
.rel-k{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-meta)}
.rel-t{font:600 18px/1.3 var(--f-display);letter-spacing:-.016em}
.rel-s{font-size:15px;line-height:1.45;color:var(--text-2)}
.rel-a:hover .rel-t{text-decoration:underline;text-underline-offset:3px}