/* ─────────────────────────────────────────────────────────────────────────────
   Shared case-study stylesheet.

   Every case study is assembled from the same parts, so they live here rather
   than in each page: header, results strip, brief, meta, phases, findings,
   decisions, list blocks, quotes, video, lightbox, pager.

   Committed design: Figtree, neutral palette, colour reserved for state.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --canvas:#FFFFFF; --ink:#15151A; --muted:#6E6E78; --faint:#9A96A2;
  --accent:#15151A; --line:#E7E7EB; --grey:#EFEFF2;
  --mint:#D6F0E0; --yellow:#FCF0C4; --blue:#CFE6F8; --chipink:#2A2A31;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,sans-serif;
  --measure:66ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
/* A <picture> is inline by default; as a grid or flex item that changes the box it
   creates. Every image here is wrapped in one to offer WebP, so make it transparent. */
picture{display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,56px);}
.col{max-width:var(--measure);}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.barin{max-width:1120px;margin:0 auto;padding:12px clamp(18px,4vw,56px);
       display:flex;align-items:center;gap:14px;font-size:13.5px;}
.barin a{color:var(--muted);text-decoration:none;}
.barin a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.barin a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
.barin .sep{color:var(--faint);}
/* the last crumb is where you are, so it does not behave like a link */
.barin strong{font-weight:600;color:var(--ink);}
@media (max-width:600px){
  /* on a narrow screen the middle of a three-level trail is the first thing to go */
  .barin{gap:8px;font-size:12.5px;}
  .barin a:not(:first-of-type):not(.cta){display:none;}
  .barin .sep:last-of-type{display:none;}
}
.barin .cta{margin-left:auto;font-weight:600;color:var(--ink);
            border-bottom:1.5px solid var(--ink);}

/* ── header ──────────────────────────────────────────────────────────────── */
header.head{padding:clamp(38px,6vw,72px) 0 clamp(22px,3vw,34px);}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;
         color:var(--muted);margin:0 0 14px;}
h1{margin:0;font-size:clamp(34px,5.4vw,60px);font-weight:700;line-height:1.04;
   letter-spacing:-.035em;text-wrap:balance;}
.premise{margin:16px 0 0;font-size:clamp(18px,2.1vw,24px);line-height:1.4;
         letter-spacing:-.015em;color:var(--muted);max-width:36ch;}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 0;align-items:center;}
.tag{font-size:11.5px;padding:3px 9px;border-radius:4px;background:var(--grey);
     color:var(--chipink);}
.tag.mint{background:var(--mint);} .tag.yellow{background:var(--yellow);}
.tag.blue{background:var(--blue);}
.tagrow .yr{margin-left:auto;font-size:13px;color:var(--muted);
            font-variant-numeric:tabular-nums;}

figure{margin:0;}
figure.hero{margin:clamp(24px,3vw,38px) 0 0;border-radius:14px;overflow:hidden;
            border:1px solid var(--line);}
figcaption{font-size:12.5px;color:var(--faint);padding:10px 2px 0;}

/* ── split hero ──────────────────────────────────────────────────────────────
   Text left, product artwork right, floating on a soft glow rather than sitting
   in a frame. Used where the artwork has a transparent background: it reads as
   the product itself rather than a screenshot of it. */
.head.split{position:relative;display:grid;
            grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
            gap:clamp(20px,4vw,56px);align-items:end;
            padding:clamp(30px,5vw,54px) 0 clamp(18px,2.5vw,30px);}
@media (max-width:860px){
  .head.split{grid-template-columns:1fr;gap:14px;}
  .head.split .stage{order:-1;}
}
.head.split .saytext{min-width:0;padding-bottom:clamp(4px,2vw,22px);}
.stage{position:relative;}
.stage::before{content:"";position:absolute;inset:6% -6% -2% -10%;border-radius:50%;
               background:radial-gradient(60% 60% at 50% 45%,#EEF3FA 0%,
                          rgba(238,243,250,0) 70%);z-index:0;}
.stage picture{display:block;}
.stage img{position:relative;z-index:1;width:100%;height:auto;
           filter:drop-shadow(0 26px 46px rgba(20,19,26,.16));
           animation:stagerise 1s var(--ease) both, stagefloat 7s ease-in-out 1s infinite;}
@keyframes stagerise{from{opacity:0;transform:translateY(26px) scale(.985);}
                     to{opacity:1;transform:none;}}
@keyframes stagefloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

.head.split .eyebrow,.head.split h1,.head.split .premise,.head.split .tagrow{
  animation:headup .75s var(--ease) both;}
.head.split .eyebrow{animation-delay:.02s}
.head.split h1{animation-delay:.10s}
.head.split .premise{animation-delay:.18s}
.head.split .tagrow{animation-delay:.26s}
@keyframes headup{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ── benchmark logos ─────────────────────────────────────────────────────────
   Products reviewed, shown as marks rather than a list — recognisable at a glance
   and quicker to read than names alone. */
.logos{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);margin:22px 0 0;
       padding:22px 24px;background:var(--grey);border-radius:12px;list-style:none;}
.logos li{display:flex;flex-direction:column;align-items:center;gap:9px;width:78px;}
.logos img{width:46px;height:46px;object-fit:contain;}
.logos span{font-size:12px;color:var(--muted);text-align:center;line-height:1.3;}

@media (prefers-reduced-motion:reduce){
  .stage img,.head.split .eyebrow,.head.split h1,.head.split .premise,
  .head.split .tagrow{animation:none;}
}

/* ── results ─────────────────────────────────────────────────────────────── */
.results{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap;
         padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line);}
.fig{min-width:150px;}
.fig b{display:block;font-size:clamp(36px,4.2vw,52px);font-weight:700;line-height:.98;
       letter-spacing:-.042em;font-variant-numeric:tabular-nums;}
/* Direct child only: the label is a child of .fig, while the number lives inside
   <b>. A descendant selector here would style the number as if it were the
   label, which is exactly what it was doing. */
.fig > span{display:block;font-size:13.5px;color:var(--muted);margin-top:8px;}
.fig b span{font:inherit;letter-spacing:inherit;color:inherit;display:inline;}
.results .src{align-self:flex-end;font-size:12px;color:var(--faint);margin-left:auto;}
/* Figures reported inside a phase are the finding itself, so they run well above the
   summary strip in the header — and each needs enough width that its label sits on
   one line instead of wrapping under the number. */
.finding .results{gap:clamp(36px,5vw,72px);padding:22px 0 0;}
.finding .results .fig{min-width:180px;}
/* Larger than the header strip, since these are the finding itself — but sized to sit
   with the surrounding type rather than dominate it. */
.finding .results .fig b{font-size:clamp(50px,5.6vw,72px);letter-spacing:-.036em;
                         line-height:.94;}
.finding .results .fig > span{font-size:14.5px;margin-top:11px;color:var(--muted);}

/* ── brief + meta ────────────────────────────────────────────────────────── */
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
       gap:clamp(24px,4vw,52px);padding:clamp(30px,4vw,48px) 0;}
.brief h2{margin:0 0 10px;font-size:13px;text-transform:uppercase;
          letter-spacing:.14em;color:var(--muted);font-weight:600;}
.brief p{margin:0;font-size:17px;line-height:1.6;}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:22px 26px;padding:26px 0 34px;border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);}
.meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.14em;
         color:var(--muted);margin-bottom:5px;}
.meta dd{margin:0;font-size:14.5px;line-height:1.45;}
.meta a{color:var(--ink);border-bottom:1.5px solid var(--ink);text-decoration:none;}

/* ── phases ──────────────────────────────────────────────────────────────── */
.phase{padding:clamp(44px,6vw,84px) 0 0;}
.phasehead{display:flex;align-items:baseline;gap:14px;
           border-bottom:1.5px solid var(--ink);padding-bottom:12px;}
.phasehead h2{margin:0;font-size:clamp(24px,3.2vw,34px);font-weight:700;
              letter-spacing:-.03em;}
.phasehead span{margin-left:auto;font-size:12.5px;color:var(--muted);
                font-variant-numeric:tabular-nums;}

/* A finding: how it was learned, what it showed, the evidence, the attribution.
   The method line stays quiet and the insight carries, so a reader skimming only
   the headlines still follows the argument. */
.finding{padding:clamp(28px,3.6vw,46px) 0;border-bottom:1px solid var(--line);}
.finding:last-child{border-bottom:0;}
.method{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;
        color:var(--muted);margin:0 0 12px;font-variant-numeric:tabular-nums;}
.insight{margin:0;font-size:clamp(19px,2.3vw,26px);font-weight:600;line-height:1.3;
         letter-spacing:-.022em;max-width:32ch;text-wrap:balance;}
.finding p.txt{margin:16px 0 0;color:var(--muted);max-width:var(--measure);}
.finding p.txt b{color:var(--ink);}
.src{margin:14px 0 0;font-size:12.5px;color:var(--faint);}
.src::before{content:"";display:inline-block;width:14px;height:1px;
             background:var(--faint);vertical-align:middle;margin-right:8px;}
.shots{display:grid;gap:14px;margin:22px 0 0;}
.shots.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.shots.narrow{max-width:340px;}
/* For artwork that is genuinely small at source: bigger than a thumbnail, but not
   stretched across the full column where the upscale would show. */
.shots.mid{max-width:720px;}
/* Two more steps down, so a small crop can fill its container instead of being blown up
   past what its pixels support. An upscaled screenshot is unreadable in a way a smaller
   sharp one never is. */
.shots.sm{max-width:520px;}
.shots.xs{max-width:280px;}
/* Evidence worth showing but not worth space: obscured client data, kept at
   thumbnail scale with the full version one click away. */
.shots.thumb-evidence{grid-template-columns:auto 1fr;align-items:center;gap:16px;
                      max-width:520px;}
.shots.thumb-evidence img{width:96px;height:96px;object-fit:cover;object-position:top left;
                          border-radius:8px;}
.evnote{margin:0;font-size:12.5px;color:var(--faint);line-height:1.45;}
.evnote span{display:block;color:var(--muted);margin-top:3px;}
/* Fill the container rather than rendering at whatever width the file happened to be
   exported at. Without this an 1595px sheet and a 418px crop sit in identical containers
   at wildly different widths, and the right-hand edges go ragged down the page. Size is
   chosen by the container class below, picked from the image's own resolution. */
.shots img{border:1px solid var(--line);border-radius:10px;background:var(--grey);
           width:100%;}

/* ── verbatim quotes ─────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:14px;margin:20px 0 0;}
blockquote.q{margin:0;padding:18px 20px;background:var(--grey);border-radius:10px;
             font-size:15.5px;line-height:1.5;}
blockquote.q p{margin:0;}
blockquote.q cite{display:block;margin-top:10px;font-size:12px;color:var(--faint);
                  font-style:normal;}

/* ── named references (competitors, tools reviewed) ──────────────────────── */
.names{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none;}
.names li{background:var(--canvas);border:1px solid var(--line);border-radius:5px;
          padding:5px 11px;font-size:13.5px;}
.names li.unknown{color:var(--faint);border-style:dashed;}

/* ── list blocks ─────────────────────────────────────────────────────────── */
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
       gap:clamp(22px,4vw,48px);padding:clamp(28px,3.6vw,44px) 0;}
.lists h3{margin:0 0 14px;font-size:13px;text-transform:uppercase;
          letter-spacing:.14em;color:var(--muted);font-weight:600;}
.lists ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.lists li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.5;}
.lists li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
                  border-radius:50%;background:var(--ink);}
.lists.soft li::before{background:var(--faint);}

/* ── decisions ───────────────────────────────────────────────────────────────
   These carry the most important images, so artwork takes the full column width
   and the reasoning sits above it at reading measure. A side-by-side split made
   annotated screenshots unreadable. */
.subhead{font-size:13px;text-transform:uppercase;letter-spacing:.14em;
         color:var(--muted);margin:34px 0 0;font-weight:600;}
.decision{padding:clamp(30px,3.6vw,46px) 0;border-bottom:1px solid var(--line);}
.decision:last-of-type{border-bottom:0;}
.decision .say{max-width:var(--measure);}
.step{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;
      color:var(--muted);margin:0 0 10px;font-variant-numeric:tabular-nums;}
.decision h3{margin:0;font-size:clamp(17px,1.9vw,21px);font-weight:600;
             letter-spacing:-.018em;line-height:1.3;}
.decision h3 em{font-style:normal;color:var(--muted);font-weight:500;}
.decision p{margin:12px 0 0;font-size:16.5px;color:var(--muted);line-height:1.55;}
.decision figure,.decision .shots{margin-top:20px;}
.decision img{border:1px solid var(--line);border-radius:10px;background:var(--grey);
              width:100%;}

/* ── video ───────────────────────────────────────────────────────────────────
   The embed is only fetched on click: nothing loads from YouTube, and no cookies
   are set, until the visitor asks for it. */
.video{position:relative;margin:22px 0 0;border-radius:12px;overflow:hidden;
       border:1px solid var(--line);background:#000;aspect-ratio:16/9;}
.video img{width:100%;height:100%;object-fit:cover;opacity:.92;
           transition:opacity .3s var(--ease),transform .5s var(--ease);}
.video:hover img{opacity:1;transform:scale(1.015);}
.video button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
              background:transparent;cursor:pointer;display:grid;place-items:center;}
.play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);
      display:grid;place-items:center;
      box-shadow:0 8px 30px -8px rgba(0,0,0,.5);
      transition:transform .28s var(--ease),background .28s;}
.video:hover .play{transform:scale(1.08);background:#fff;}
.play::after{content:"";width:0;height:0;margin-left:4px;
             border-left:19px solid var(--ink);
             border-top:12px solid transparent;border-bottom:12px solid transparent;}
.video .hint{position:absolute;left:14px;bottom:12px;font-size:12.5px;color:#fff;
             background:rgba(16,15,20,.6);padding:5px 11px;border-radius:100px;
             backdrop-filter:blur(6px);pointer-events:none;}
.video iframe{width:100%;height:100%;border:0;display:block;}

/* ── impact ──────────────────────────────────────────────────────────────────
   For case studies whose payoff arrived later — a concept that shipped, a product
   that outlived its own deck. Given its own ground so it doesn't read as one more
   finding. */
.impact{margin:clamp(40px,5vw,72px) 0 0;padding:clamp(28px,4vw,46px) clamp(22px,3vw,40px);
        background:var(--grey);border-radius:14px;}
.impact .method{margin-bottom:10px;}
.impact .insight{max-width:26ch;}
.impact p.txt{color:var(--ink);}
.impact blockquote{margin:22px 0 0;padding:0 0 0 18px;border-left:2px solid var(--accent);
                   font-size:16px;line-height:1.55;color:var(--ink);}
.impact blockquote cite{display:block;margin-top:9px;font-size:12.5px;color:var(--muted);
                        font-style:normal;}
/* ── dating the hero ────────────────────────────────────────────────────────
   The screenshot is the thing that reads as old, so the year goes on the screenshot.
   A chip in the tag row is too far down and too quiet: by the time it is read the
   reader has already formed a view of the visuals. Reusable — NICE is 2017,
   Talea 2018. */
.stage .stamp{position:absolute;z-index:2;top:12px;left:12px;display:flex;
              align-items:baseline;gap:7px;padding:7px 13px;border-radius:100px;
              background:rgba(20,19,26,.9);color:#fff;backdrop-filter:blur(8px);
              font-variant-numeric:tabular-nums;}
.stage .stamp b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.stage .stamp span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
                   opacity:.72;}
.stagenote{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);}
.stagenote a{color:var(--ink);border-bottom:1.5px solid var(--line);
             text-decoration:none;}
.stagenote a:hover{border-color:var(--ink);}
@media (max-width:860px){ .stagenote{margin-bottom:10px;} }

/* ── dating the artefact ─────────────────────────────────────────────────────
   Old work is not a problem, but old work presented as though it were current is. This
   sits immediately before the screenshots of a dated project and says what the year
   meant: the tools, the constraints, and what the designer would do differently now.
   Being able to date your own work is a signal; leaving a reader to guess is not.
   Reusable — NICE is 2017 and Talea 2018. */
.era{margin:26px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:12px;
     border-left:3px solid var(--ink);background:linear-gradient(180deg,#FAFAFB,#FFF);}
.era h4{margin:0 0 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;
        color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;}
.era p{margin:0;font-size:16px;line-height:1.6;color:var(--ink);max-width:var(--measure);}
.era p + p{margin-top:12px;}
.era ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px;
        max-width:var(--measure);}
.era li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.5;
        color:var(--muted);}
.era li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
                border-radius:50%;background:var(--line);}
.era b{color:var(--ink);font-weight:600;}

.thenow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:clamp(16px,2.4vw,28px);margin:24px 0 0;}
.thenow figure{margin:0;}
.thenow img{border:1px solid var(--line);border-radius:10px;background:#fff;}
.thenow figcaption{padding-top:9px;}

/* Product footage: a poster until asked for, then the animation. The source is a
   few megabytes, so it is never fetched on page load. */
.video.footage{max-width:900px;background:var(--grey);}
.video.footage img{opacity:1;}

/* ── persona ────────────────────────────────────────────────────────────────
   A single target user: goal, pain points, tools and needs in a 2x2 block beside a
   portrait. Built as real text rather than an exported slide, so it stays selectable,
   searchable, translatable and legible on a phone. */
.persona{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,290px);
         gap:clamp(22px,3vw,44px);align-items:start;margin:22px 0 0;
         background:var(--grey);border-radius:14px;
         padding:clamp(22px,2.8vw,34px);}
@media (max-width:820px){
  .persona{grid-template-columns:1fr;}
  .persona .pshot{order:-1;max-width:220px;}
}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
       gap:clamp(18px,2.4vw,30px);}
@media (max-width:560px){.pgrid{grid-template-columns:1fr;}}
.pgrid h4{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.15em;
          color:var(--faint);font-weight:600;}
.pgrid p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);}
.pgrid p b{color:var(--ink);font-weight:600;}
.ptools{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.ptools li{background:var(--canvas);border:1px solid var(--line);border-radius:100px;
           padding:4px 11px;font-size:12.5px;color:var(--chipink);}
.pshot{margin:0;}
.pshot img{width:100%;border-radius:12px;display:block;background:var(--canvas);}
.pshot blockquote{margin:14px 0 0;padding:0;font-size:14.5px;line-height:1.5;
                  font-style:italic;color:var(--ink);}

/* ── product clips ───────────────────────────────────────────────────────────
   A native video element with preload="none": the poster is all that loads, and the
   file is only fetched when someone presses play. No player library, no autoplay. */
.clipvid{margin:22px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
         background:var(--grey);}
.clipvid video{display:block;width:100%;height:auto;background:#000;}
.clipvid.portrait{max-width:360px;}
.cliphint{margin:9px 0 0;font-size:12.5px;color:var(--faint);}

/* ── close + pager ───────────────────────────────────────────────────────── */
.close{padding:clamp(40px,5vw,68px) 0;border-top:1.5px solid var(--ink);
       margin-top:clamp(36px,5vw,64px);}
.close h2{margin:0 0 16px;font-size:clamp(22px,2.8vw,30px);font-weight:700;
          letter-spacing:-.028em;}
.close p{margin:0;font-size:17.5px;line-height:1.6;max-width:62ch;}
.close p b{font-weight:600;}
.nextsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
           gap:clamp(18px,2.6vw,32px);margin:30px 0 0;}
.nextsteps h3{margin:0 0 6px;font-size:15.5px;font-weight:600;letter-spacing:-.012em;}
.nextsteps p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5;}
.nextsteps .num{font-size:11.5px;color:var(--faint);
                font-variant-numeric:tabular-nums;margin:0 0 8px;}
nav.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
          border-top:1px solid var(--line);padding:26px 0 70px;font-size:14px;}
nav.pager a{color:var(--ink);text-decoration:none;font-weight:600;}
nav.pager a:hover{color:var(--muted);}
nav.pager a[aria-disabled="true"]{color:var(--faint);pointer-events:none;}
nav.pager span{color:var(--faint);font-weight:400;display:block;font-size:12px;
               margin-bottom:3px;}
.note{background:var(--grey);border-radius:10px;padding:16px 20px;font-size:13.5px;
      color:var(--muted);margin:0 0 30px;}
.note b{color:var(--ink);}

/* ── zoom ────────────────────────────────────────────────────────────────── */
.shots img,.decision img,figure.hero img{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(14,13,17,.92);
          display:none;place-items:center;padding:clamp(14px,3vw,40px);
          backdrop-filter:blur(4px);}
.lightbox.open{display:grid;}
/* One fixed stage for every image, so moving through a gallery doesn't make the
   frame jump between a wide screenshot and a small crop. Images are contained
   within it, which means smaller sources are scaled up to the same footprint
   rather than appearing tiny. */
.lightbox .stagebox{width:min(1180px,92vw);height:min(80vh,760px);
                    display:grid;place-items:center;}
.lightbox img{width:100%;height:100%;object-fit:contain;border-radius:8px;
              background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
              cursor:zoom-out;}
.lightbox p{position:absolute;bottom:16px;left:0;right:0;text-align:center;
            color:#CFC9D2;font-size:12.5px;margin:0;padding:0 74px;}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
               border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);
               color:#fff;font-size:20px;line-height:1;display:none;place-items:center;
               backdrop-filter:blur(6px);transition:background .2s;}
.lightbox .nav:hover{background:rgba(255,255,255,.28);}
.lightbox.grouped .nav{display:grid;}
.lightbox .prev{left:clamp(10px,2vw,26px);}
.lightbox .next{right:clamp(10px,2vw,26px);}
.lightbox .counter{position:absolute;top:16px;left:0;right:0;text-align:center;
                   color:#9C96A4;font-size:12px;font-variant-numeric:tabular-nums;}
.lightbox .counter b{color:#EFEBF1;font-weight:600;}

/* ── reveal on scroll ────────────────────────────────────────────────────────
   Each finding arrives as it comes into view. Subtle and once only — the page is
   long, and repeated motion on a long read becomes irritating rather than alive. */
.reveal{opacity:0;transform:translateY(14px);
        transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  .reveal{opacity:1;transform:none;}
}