/* Case page (OnTrack) inside the site. Opens from the gallery: the card grows to the full screen and becomes the cover.
   Everything is scoped to .case so it never touches the gallery / About. Grid = the site's: 1920 artboard × --u (width), columns 324 / 724 / 1122 / 1521.
   Tunable values (tuner → Case): --cs-r radius, --cs-plate header plate, --cs-fly-t grow time; page map is read from P in case.js. */
.case {
  --u: calc(100vw / 1920);
  --c1: calc(324 * var(--u));
  --ease: cubic-bezier(.65, 0, .25, 1);
  --body-fs: var(--fs-s); --body-lh: var(--lh-s);
  --line: rgba(255, 255, 255, .4);
  --r: calc(var(--cs-r, 20) * var(--u));
  position: fixed; inset: 0; z-index: 300; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--bg); color: var(--fg); font-size: var(--fs-xs); line-height: var(--lh-xs);
}
.case::-webkit-scrollbar { display: none; }
.case[hidden] { display: none; }
.case.pre { opacity: 0; pointer-events: none; }
.case.cs-mm-host { inset: auto; width: 0; height: 0; overflow: visible; background: none; pointer-events: none; z-index: 301; }
.case.cs-mm-host > * { pointer-events: auto; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) { .case { --u: calc(100vw / 760); } }
.case *, .case *::before, .case *::after { box-sizing: border-box; }
.case ol, .case ul { list-style: none; }
.case h1, .case h2, .case h3 { font-weight: 400; }
.case img { display: block; }
.case ::selection { background: #fff; color: var(--bg); }

/* header copy (outside .case, above the growing photo): the e-mail turns into "close" once the case is open */
.cs-top { z-index: 420; }
.cs-top[hidden] { display: none; }
.cs-top::before { content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(var(--bg) 0, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent); transition: opacity .35s ease; }
body.case-open:not(.cs-on-cover) .cs-top::before { opacity: var(--cs-plate, .55); }
.cs-close { display: none; right: calc(20 * var(--u)); top: calc(30 * var(--u)); align-items: center; gap: .5em; font-size: var(--fs-xs); line-height: var(--lh-xs); }
.cs-close svg { width: 1.1em; height: 1.1em; flex: none; }
.cs-close:hover { opacity: .7; }
.cs-close::after { content: ""; position: absolute; inset: -18px -20px -18px -28px; }   /* bigger hit area, the look stays the same */
body.case-open .cs-top .mail { display: none; }
body.case-open .cs-top .cs-close { display: flex; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  /* phones: no "close" or "Back" button; the burger is at the right edge (the menu panel stays closed until the burger is tapped) */
  body.case-open .cs-top .cs-close { display: none; }
  html body header.cs-top .nav { left: 0; right: 0; top: 0; height: auto; flex-direction: column; align-items: center; gap: 2px; padding: calc(84px + env(safe-area-inset-top)) 20px 28px; background: var(--bg, #222); box-shadow: 0 14px 36px rgba(0, 0, 0, .28); z-index: 1; font-size: var(--fs-m); line-height: var(--lh-m); transform: translateY(-105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  html body header.cs-top .nav a { padding: 12px 24px; text-align: center; filter: none !important; }
  html body.menu-open header.cs-top .nav { transform: none; visibility: inherit; transition: transform .45s var(--ease); }
  .cs-top .burger { display: block; position: absolute; right: 10px; top: calc(16px + env(safe-area-inset-top)); width: 44px; height: 40px; z-index: 3; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
}

/* gallery steps aside while a case opens / closes */
body.case-opening .stage .info, body.case-opening .stage .meta, body.case-opening .counter, body.case-opening .listbtn, body.case-opening .card {
  opacity: 0 !important; filter: blur(10px) !important; transition: opacity .5s ease, filter .5s ease !important; }
body.case-opening .card.cs-keep { opacity: 1 !important; filter: none !important; transition: none !important; }
body.case-open .world { visibility: hidden; }

/* reveal: plain fade (no blur) */
.case .cr { opacity: 0; transition: opacity .5s ease var(--d, 0s); }
.case .cr.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .case .cr { transition: none; opacity: 1; filter: none; } }

/* type atoms (tokens only) */
.case .k { font-size: var(--fs-xs); line-height: var(--lh-xs); opacity: .7; }
.case .xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.case .m { font-weight: 400; font-size: var(--fs-m); line-height: var(--lh-m); }
.case .l { font-weight: 400; font-size: var(--fs-l); line-height: var(--lh-l); }
.case .xl { font-weight: 400; font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: -.01em; }
.case .p { font-size: var(--body-fs); line-height: var(--body-lh); }
.case .p p + p { margin-top: var(--pg, var(--body-lh)); }
.case .lb { display: block; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); opacity: .6; }
.case .lb--4 { opacity: .4; }
.case .end { margin-top: calc(30 * var(--u)); max-width: calc(560 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); }
.case .r2__b .p.p--narrow, .case .p--narrow { max-width: calc(190 * var(--u)); }
.case .num { font-weight: 400; font-size: calc(var(--fs-l) * 1.5); line-height: calc(var(--lh-l) * 1.72); font-variant-numeric: tabular-nums; letter-spacing: -.005em; white-space: nowrap; }   /* 48/62 = 1.5 × the l token */
.case .ln { display: block; }

/* cover */
.case .cover, .case .nx { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.case .cover__m, .case .nx__m { position: absolute; inset: 0; overflow: hidden; }
.case .cover__m img { position: absolute; left: 0; top: calc(var(--cs-par, 0) * -100%); width: 100%; height: calc(100% * (1 + var(--cs-par, 0))); object-fit: cover; will-change: translate; }
.case .cover::before, .case .nx::before, .case .cover::after, .case .nx::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.case .cover::before, .case .nx::before { top: 0; height: 32%; background: linear-gradient(rgba(0, 0, 0, .4), transparent); }
.case .cover::after, .case .nx::after { bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
.case .cover__b { position: absolute; z-index: 2; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(27 * var(--u)); display: flex; justify-content: space-between; }
.case .cover__cap { position: absolute; z-index: 2; left: var(--c1); bottom: calc(110 * var(--u)); }
.case .cover__cap .p { max-width: calc(381 * var(--u)); margin-top: calc(20 * var(--u)); }

/* sections: content column 324 → 1596, 60 above and below each block (120 between sections) */
.case .ch { padding: calc(60 * var(--u)) var(--c1); }
.case .cover + .ch { padding-top: calc(120 * var(--u)); }
.case .ch:last-of-type { padding-bottom: calc(120 * var(--u)); }
.case .r2 { display: grid; grid-template-columns: calc(400 * var(--u)) minmax(0, 1fr); align-items: start; }
.case .r2 > .r2__b { grid-column: 2; min-width: 0; }
.case .hd .k { margin-bottom: calc(8 * var(--u)); }
.case .hd .l { padding: calc(3 * var(--u)) 0; }
.case .r2__b .p { max-width: calc(620 * var(--u)); }
.case .r2__b .l { max-width: calc(620 * var(--u)); }
.case .r2__b .l.wide { max-width: calc(872 * var(--u)); }
.case .gap60 { margin-top: calc(60 * var(--u)); }
.case .gap40 { margin-top: calc(40 * var(--u)); }
.case .gap30 { margin-top: calc(30 * var(--u)); }
.case .blk + .blk { margin-top: calc(90 * var(--u)); }

.case .facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: calc(60 * var(--u)); margin-top: calc(60 * var(--u)); font-size: var(--body-fs); line-height: var(--body-lh); }
.case .facts dt { opacity: .7; font-size: var(--fs-xs); line-height: var(--lh-xs); }
.case .facts dd { margin-top: calc(4 * var(--u)); }
.case .facts dt + dd + dt { margin-top: calc(15 * var(--u)); }

/* images: full column width, rounded (tuner: Case → image radius) */
.case .im { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); }
.case .im video { display: block; width: 100%; height: auto; user-select: none; }
.case .im img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.case .im2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.case .im2.g16 { gap: calc(16 * var(--u)); }
.case .im3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.case .im-row { display: flex; gap: calc(10 * var(--u)); align-items: stretch; }
.case .im-row .im { min-width: 0; }
.case .im-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); align-items: start; }
.case .im-cols > div { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; }
.case .im-cols--g { align-items: stretch; }
.case .im-seq { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.case .im-seq > .gap60 { margin-top: 0; }
.case .im-stage { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.case .im-stage__c { aspect-ratio: 631 / 833; }
.case .im .im-stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case .im .im-stage__v { position: absolute; inset: 0; margin: auto; height: 76%; width: auto; border-radius: calc(26 * var(--u)); box-shadow: rgba(24, 34, 66, .38) 0 calc(22 * var(--u)) calc(56 * var(--u)) 0; background: #000; }
.case .im-cols--1 { grid-template-columns: 1fr; }
.case .cmp { display: grid; border-bottom: 1px solid var(--line); }
.case .cmp__r { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr 1fr; gap: calc(20 * var(--u)); padding: calc(14 * var(--u)) 0; border-top: 1px solid var(--line); font-size: var(--body-fs); line-height: var(--body-lh); }
.case .cmp__r.h { font-size: var(--fs-xs); line-height: var(--lh-xs); opacity: .7; border-top: 0; }
.case .cmp--kv .cmp__r { grid-template-columns: calc(200 * var(--u)) 1fr; }
.case .stack { display: grid; gap: calc(20 * var(--u)); }

.case .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 calc(60.5 * var(--u)); margin-top: calc(60 * var(--u)); }
.case .steps p, .case .mt p { margin-top: calc(20 * var(--u)); font-size: var(--body-fs); line-height: var(--body-lh); }
.case .sols { display: grid; grid-template-columns: repeat(2, calc(436 * var(--u))); }
.case .sols--one { grid-template-columns: 1fr; }
.case .sols--lines { grid-template-columns: 1fr 1fr; column-gap: calc(20 * var(--u)); max-width: calc(872 * var(--u)); }
.case .sols--lines .sol { border-top: 1px solid var(--line); padding: calc(20 * var(--u)) 0; }
.case .sols--lines .sol h3 { max-width: none; margin-top: 0; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
.case .sols--lines .sol p { margin-top: calc(8 * var(--u)); max-width: none; }
.case .sol .k { display: block; }
.case .sol h3 { max-width: calc(211 * var(--u)); margin-top: calc(12 * var(--u)); }
.case .sol p { margin-top: calc(12 * var(--u)); max-width: calc(423 * var(--u)); font-size: var(--body-fs); line-height: var(--body-lh); }
.case .sols--one .sol h3 { max-width: none; }
.case .sols--one .sol p { max-width: calc(643 * var(--u)); }
.case .by { display: grid; grid-template-columns: repeat(2, calc(426 * var(--u))); column-gap: calc(20 * var(--u)); }
.case .by li { padding: calc(20 * var(--u)) 0; border-top: 1px solid var(--line); }
.case .by h3 { padding-top: calc(1 * var(--u)); }
.case .by p { margin-top: calc(8 * var(--u)); font-size: var(--body-fs); line-height: var(--body-lh); }
.case .mt { display: grid; grid-template-columns: repeat(4, calc(173 * var(--u))); gap: 0 calc(60 * var(--u)); margin-top: calc(60 * var(--u)); }

/* closing cover: "Next project", the label follows the cursor */
.case .nx { display: block; }
.case .nx__m img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; will-change: translate; }
@media (hover: hover) and (pointer: fine) { .case .nx { cursor: pointer; } }
.case .nx__c { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; visibility: hidden; will-change: transform; color: #fff; }
.case .nx__t { position: absolute; left: 0; top: 0; white-space: nowrap; }
.case .nx__t .xs, .case .nx__s .xs { display: block; }
.case .nx__s { display: none; }
@media (hover: none), (pointer: coarse) { .case .nx__c { display: none; } .case .nx__s { display: block; position: absolute; z-index: 2; left: var(--c1); bottom: calc(110 * var(--u)); } }

/* scroll drum (case.js): a WebGL canvas that replaces the page for a moment while the effect is on */
.case .cs-gl { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 5; pointer-events: none; opacity: 0; }

/* page map: a small copy of the whole case, the frame shows where we are */
.case .cs-mm { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 7; background: rgba(0, 0, 0, .2); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); touch-action: none; }
.case .cs-mm[hidden] { display: none; }
.case .mm-pg { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.case .mm-pg, .case .mm-pg * { animation: none !important; transition: none !important; }
.case .mm-pg .cr { opacity: 1 !important; filter: none !important; }
.case .mm-pg .cover__m img, .case .mm-pg .nx__m img { translate: none !important; }
.case .mm-pg .nx__c { display: none; }

.case .mm-vp { position: absolute; left: -3px; right: -3px; top: 0; border: 2px solid #fff; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.case .cs-mm:hover .mm-vp { background: rgba(255, 255, 255, .16); }

/* lightbox */
.case .cs-lb { position: fixed; inset: 0; z-index: 50; background: rgba(21, 74, 102, .97); display: grid; place-items: center; padding: 4vw; opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.case .cs-lb[hidden] { display: none; }
.case .cs-lb.on { opacity: 1; }
.case .cs-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r); }

/* the growing photo (outside .case) */
.cs-fly { position: fixed; z-index: 400; overflow: hidden; background: #fff; pointer-events: none; box-sizing: border-box; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .12);
  transition: left var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), top var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), width var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), height var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), padding var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1); }
.cs-fly--blur { transition: left var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), top var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), width var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), height var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), padding var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), filter var(--cs-fly-t, 1s) ease-out, opacity calc(var(--cs-fly-t, 1s) * .45) ease-out; will-change: filter, opacity; }
.cs-fly__in { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cs-fly .cs-fly__c { position: absolute; left: 0; top: 0; transition: transform var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1), opacity calc(var(--cs-fly-t, 1s) * .9) ease; }
.cs-fly img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--cs-fly-t, 1s) cubic-bezier(.76, 0, .24, 1); }

/* small screens */
@media (max-width: 899px), (max-width: 1100px) and (orientation: portrait) {
  .case .ch, .case .cover + .ch { padding: 40px 20px; } .case .cover + .ch { padding-top: 70px; } .case .ch:last-of-type { padding-bottom: 70px; }
  .case .r2 { display: block; } .case .r2 > .r2__b { margin-top: 20px; } .case .hd .l { padding: 0; }
  .case .cover__cap { left: 20px; right: 20px; bottom: 70px; } .case .cover__cap .p { max-width: none; } .case .cover__b { left: 20px; right: 20px; }
  .case .gap60, .case .gap40, .case .facts, .case .steps, .case .mt { margin-top: 30px; } .case .blk + .blk { margin-top: 50px; }
  .case .facts { grid-template-columns: 1fr 1fr; gap: 20px; }
  .case .im2, .case .im2.g16, .case .im3 { grid-template-columns: 1fr; gap: 10px; }
  .case .im-stage { gap: 10px; }
  .case .im-cols { grid-template-columns: 1fr; gap: 10px; } .case .im-cols > div { gap: 10px; }
  .case .im-row { flex-direction: column; gap: 10px; } .case .im-row .im { flex: none !important; } .case .cmp__r, .case .cmp--kv .cmp__r { grid-template-columns: 1fr; gap: 4px; }
  .case .steps, .case .mt { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .case .sols, .case .sols--lines, .case .by { grid-template-columns: 1fr; } .case .sol, .case .by li { margin-bottom: 24px; } .case .sol h3, .case .sol p, .case .sols--one .sol p { max-width: none; }
  .case .nx__s { left: 20px; right: 20px; text-align: center; bottom: calc(70px + env(safe-area-inset-bottom)); padding: 4px 0; min-height: 44px; }
}

/* the contact badge opens above the case page */
body.case-open #bdRoot { z-index: 410; }
.case.cs-mm-host > .nx__c { pointer-events: none; }

/* next case: the closing photo steps back while pulling, then a copy of the next cover takes over */
.case .nx__m { transform-origin: 50% 50%; }
.case .nx::before, .case .nx::after { opacity: calc(1 - var(--p, 0) * 4); }
.cs-nxfly { position: fixed; inset: 0; z-index: 400; overflow: hidden; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.cs-nxfly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-nxfly::before, .cs-nxfly::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; }
.cs-nxfly::before { top: 0; height: 32%; background: linear-gradient(rgba(0, 0, 0, .4), transparent); }
.cs-nxfly::after { bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
.case .cover__m { transform-origin: 50% 50%; }
.case .cover::before, .case .cover::after { opacity: calc(1 - var(--pu, 0) * 4); }


/* direct link to a case: the home page behind it (same html) stays invisible until the case is mounted, so nothing flashes first (case.js drops html.direct) */
html.direct body:not(.case-open) :is(.world, header.top:not(.cs-top)) { visibility: hidden; }