/* Project pages. Shared by all six; each page only changes its content.
   Sizes follow the page width on a 1440 design canvas (402 on phones),
   so a large monitor shows the same composition, just bigger. */

body.project {
  --sx: calc(100vw / 1440);
  --s: var(--sx);
  --u: var(--sx);
  --gray: #54606d;
  --next-bg: #d0d6dc;
}

/* ---------- Header ----------
   At the top and while scrolling down, only the INDEX pill shows (the big
   title names the page). Scrolling up brings back the full bar. */
.project .site-header { height: calc(46 * var(--u)); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.project .hdr-bar {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(250, 248, 243, 0.85);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.35s ease;
}
.project .site-name, .project .site-title { opacity: 0; pointer-events: none; }
.project .site-header.is-bar .hdr-bar,
.project .site-header.is-bar .site-name,
.project .site-header.is-bar .site-title { opacity: 1; pointer-events: auto; }
/* Scrolling down hides the bar, name and title, but the menu button stays */
.project .site-header.is-hidden .hdr-bar,
.project .site-header.is-hidden .site-name,
.project .site-header.is-hidden .site-title { opacity: 0; pointer-events: none; }
.project .index-btn {
  top: calc(2 * var(--u)); right: calc(24 * var(--u));
  width: max(42px, calc(42 * var(--u))); height: max(42px, calc(42 * var(--u)));
  margin: 0; padding: 0; justify-content: center;
  border-radius: 50%;
  background: rgba(250, 249, 241, 0.8);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  transition: background-color 0.3s ease;
}
.project .site-header.is-bar .index-btn { background: transparent; }
.project .index-btn .bars { --bw: max(22px, calc(26 * var(--u))); }

/* ---------- Layers: under the light (1), light (2), above (3) ---------- */
.project main, .project .p-foot { position: relative; }
.p-title, .p-next-title, .p-next-label, .p-next-client, .p-next-bg { z-index: 1; }
.p-hero, .p-intro, .p-fig, .p-body, .p-next-thumb, .p-foot { z-index: 3; }
.p-fig.p-screens { z-index: auto; }   /* lets its drawing sit under the text above */

/* ---------- Title ---------- */
.p-title {
  position: relative; margin: 0;
  padding: calc(58 * var(--u)) calc(96 * var(--u)) 0;
}
.p-title h1 { max-width: calc(924 * var(--u)); }   /* as in Figma: long titles take two lines */
.p-title .p-client { max-width: calc(1248 * var(--u)); }
.p-title h1 {
  margin: 0;
  font: 800 calc(102 * var(--u))/calc(96 * var(--u)) "Lexend", sans-serif;
  letter-spacing: -0.02em; color: var(--ink);
}
.p-client {
  margin: calc(15 * var(--u)) 0 0;
  font: 700 max(15px, calc(24 * var(--u)))/1.3 "Source Sans 3", sans-serif;
  color: var(--gray);
}

/* ---------- Media: parallax inside a fixed frame ---------- */
.p-media { position: relative; overflow: hidden; background: #0a0b3e14; }
.p-media img, .p-media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.js .p-media.is-parallax img, .js .p-media.is-parallax video {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.13);
  will-change: transform;
}

/* ---------- Hero ---------- */
.p-hero { position: relative; margin: calc(40 * var(--u)) 0 0; }
.p-hero .p-media { aspect-ratio: 1440 / 792; }
.p-intro {
  position: relative;
  display: flex; gap: calc(48 * var(--u)); align-items: flex-start;
  margin: calc(39 * var(--u)) calc(96 * var(--u)) 0;
}
.p-lead {
  flex: 0 0 calc(816 * var(--u)); margin: 0;
  font: 500 calc(72 * var(--u))/calc(84 * var(--u)) "Lexend", sans-serif;
  letter-spacing: -0.02em; color: var(--ink);
  text-wrap: wrap;   /* fill the first line; typeset.js still keeps the last two words together */
}
.p-role { flex: 0 0 calc(384 * var(--u)); padding-top: calc(18 * var(--u)); }
.p-role h2 {
  margin: 0;
  font: 700 max(14px, calc(20 * var(--u)))/1.5 "Source Sans 3", sans-serif;
  color: var(--accent);
}
.p-role p { margin: 0; font-size: max(15px, calc(20 * var(--u))); line-height: 1.5; text-wrap: pretty; }
/* Full film links under MY ROLE */
.p-role .p-film { margin-top: calc(14 * var(--u)); }
.p-film a {
  color: var(--accent); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 3px;
}
.p-film a:hover { color: var(--ink); }
.p-film a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.lb-open .top-btn { visibility: hidden; }

/* ---------- Figures and captions ---------- */
.p-fig { position: relative; margin: calc(72 * var(--u)) 0 0; }
.p-fig + .p-fig.is-tight { margin-top: calc(28 * var(--u)); }
.p-cap {
  margin: calc(12 * var(--u)) calc(96 * var(--u)) 0;
  font-size: max(14px, calc(18 * var(--u))); line-height: 1.667;
  text-wrap: pretty;
}
.p-cap.is-right { text-align: right; margin-left: auto; width: calc(384 * var(--u)); }
.p-cap.is-wide { width: calc(708 * var(--u)); }
/* Captions appear all at once when their image is fully on screen */
.js .p-cap { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .p-cap.is-in { opacity: 1; transform: none; }

/* Image with the caption beside it, at the bottom (img 1 in Figma) */
.p-fig.is-side { display: flex; align-items: flex-end; gap: calc(48 * var(--u)); }
.p-fig.is-side .p-media { flex: 0 0 calc(1020 * var(--u)); aspect-ratio: 1020 / 569; }
.p-fig.is-side .p-cap { margin: 0 0 calc(-8 * var(--u)); width: calc(276 * var(--u)); }

.p-strip-first .p-media { aspect-ratio: 1440 / 323; background: none; }   /* the rendering has a transparent background */
.p-strip-final .p-media { aspect-ratio: 1866 / 470; background: none; }   /* video is set on the page color */
.p-exterior .p-media { aspect-ratio: 1440 / 504; }

.p-hero .p-media.is-169 { aspect-ratio: 16 / 9; }
.project main { overflow-x: clip; }   /* collages may bleed off the right edge */

/* ---------- Collage (storyboard pages and similar) ----------
   Each piece sits where it does in Figma, in design px from the collage's
   top-left: --x, --y, --w. Pieces fade in one after another. */
.p-collage { position: relative; margin: calc(80 * var(--u)) 0 0 calc(96 * var(--u)); }
.p-collage .c-stage { position: relative; height: calc(var(--h) * var(--u)); }
.p-collage .c-piece {
  position: absolute; margin: 0;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u));
}
.p-collage .c-piece img { display: block; width: 100%; height: auto; }
.p-collage .p-cap { position: absolute; margin: 0; left: 0; top: calc(var(--cy) * var(--u)); width: calc(384 * var(--u)); }

/* Sequential reveal: pieces (or strips) appear one by one, top to bottom */
.js [data-reveal] > .r-item { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-reveal].is-in > .r-item { opacity: 1; transform: none; }
.js .c-stage[data-reveal] > .r-item { transform: translateY(24px); }
.js .c-stage[data-reveal].is-in > .r-item { transform: none; }

/* Stacked strips (The Final Solution) */
.p-stack .r-item { display: block; }
.p-stack .r-item + .r-item { margin-top: -1px; }   /* no hairline between strips at any zoom */
.p-stack img { display: block; width: 100%; height: auto; }

/* Two designs side by side, the second set lower (Design A / Design B) */
.p-pair { display: grid; grid-template-columns: calc(696 * var(--u)) calc(696 * var(--u)); column-gap: calc(48 * var(--u)); margin-top: calc(81 * var(--u)); }
.p-pair .p-fig { margin: 0; }
.p-pair .p-fig + .p-fig { margin-top: calc(156 * var(--u)); }
.p-pair .p-media { aspect-ratio: 16 / 9; }
.p-pair .p-cap { margin: calc(8 * var(--u)) 0 0; text-align: right; }
.p-pair .p-fig + .p-fig .p-cap { margin-right: calc(96 * var(--u)); }

/* A screen shown inside a device frame */
.p-framed .p-media {
  margin-left: calc(115 * var(--u)); width: calc(1210 * var(--u)); aspect-ratio: 16 / 9;
  border: calc(12 * var(--u)) solid #111; border-radius: calc(18 * var(--u)); box-sizing: content-box;
}
.p-framed .p-cap { margin-top: calc(34 * var(--u)); }

/* A transparent illustration spread with its caption placed inside */
.p-spread { margin-top: calc(40 * var(--u)); }
.p-spread .s-stage { position: relative; }
.p-spread .s-stage img { display: block; width: 100%; height: auto; }
.p-spread .p-cap { position: absolute; margin: 0; left: calc(var(--cx, 528) * var(--u)); top: calc(var(--cy, 395) * var(--u)); width: calc(var(--cw, 384) * var(--u)); }

/* Game screens: one large, three small stacked beside it */
.p-games { margin-top: calc(26 * var(--u)); }
.p-games .g-grid { display: grid; grid-template-columns: calc(816 * var(--u)) calc(384 * var(--u)); column-gap: calc(48 * var(--u)); margin: 0 calc(96 * var(--u)); }
.p-games .g-main { margin-top: calc(18 * var(--u)); aspect-ratio: 16 / 9; }
.p-games .g-side { display: grid; grid-template-rows: repeat(3, auto); }
.p-games .g-side .p-media { aspect-ratio: 385 / 201; }
.p-games .p-cap { width: calc(600 * var(--u)); margin: calc(27 * var(--u)) 0 0; }

/* A slow, endless strip (infographic cards). Pauses on hover, on focus,
   with its button, and for visitors who prefer less motion. */
.p-marquee { margin-top: calc(81 * var(--u)); }
.p-marquee .m-view { overflow: hidden; }
.p-marquee .m-track { display: flex; width: max-content; will-change: transform; }
.p-marquee .m-track img { display: block; height: calc(545 * var(--u)); width: auto; margin-right: calc(18 * var(--u)); -webkit-user-drag: none; user-select: none; }
/* Drag to move: vertical swipes still scroll the page on touch screens */
.p-marquee.is-live .m-view { cursor: grab; touch-action: pan-y; }
.p-marquee.is-held .m-view { cursor: grabbing; }
.p-marquee .m-view:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* Drag / swipe hint, placed as in Figma (Group 1556): the hand sits on
   the bottom edge of the strip, the word just below it. --k is the size
   unit, the design px on desktop. "Drag" for mouse, "Swipe" for touch. */
.p-marquee { position: relative; }
.m-hint {
  --k: var(--u);
  position: absolute; z-index: 4; pointer-events: none;
  left: calc(804.5 * var(--k)); top: calc(457.5 * var(--k));
  width: calc(76 * var(--k)); height: calc(122.5 * var(--k));
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.m-hint.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.m-hint svg { position: absolute; display: block; fill: #db2a58; overflow: visible; }
.m-hint-arrows { left: 0; top: 0; width: calc(62 * var(--k)); height: calc(23 * var(--k)); }
.m-hint-hand { left: calc(14.5 * var(--k)); top: calc(18.5 * var(--k)); width: calc(61 * var(--k)); height: calc(86 * var(--k)); }
.m-hint-word {
  position: absolute; left: calc(23.5 * var(--k)); top: calc(108.5 * var(--k)); width: calc(51 * var(--k));
  text-align: center;
  font: 700 max(11px, calc(14 * var(--k)))/1 "Lexend", sans-serif;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--brown); white-space: nowrap;
}
.m-hint .is-swipe { display: none; }
@media (hover: none), (pointer: coarse) {
  .m-hint .is-drag { display: none; }
  .m-hint .is-swipe { display: inline; }
}
/* The hand rocks gently side to side while the hint shows */
.m-hint.is-on .m-hint-hand, .m-hint.is-on .m-hint-arrows { animation: m-hint-rock 1.4s ease-in-out 0.3s 2 both; }
@keyframes m-hint-rock {
  0%, 100% { transform: none; }
  30% { transform: translateX(calc(-7 * var(--k))); }
  70% { transform: translateX(calc(7 * var(--k))); }
}

/* Screens laid over a line drawing (Refugee Crisis activity) */
.p-screens { margin-top: calc(170 * var(--u)); }
.p-screens .ss-bg { position: absolute; z-index: 1; left: 0; right: 0; top: calc(-257 * var(--u)); pointer-events: none; }
.p-screens .ss-bg img { display: block; width: 100%; height: auto; }
.p-screens .ss-stage { position: relative; z-index: 3; height: calc(864 * var(--u)); }
.p-screens .ss-stage .p-media { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); aspect-ratio: 16 / 9; }
.p-screens .p-cap { position: relative; z-index: 3; margin: calc(27 * var(--u)) 0 0 calc(366 * var(--u)); width: calc(600 * var(--u)); }   /* lines up with the left edge of the last screen */

/* Image inset to the page margins */
.p-fig.is-inset .p-media { margin: 0 calc(96 * var(--u)); }

/* Two screens side by side */
.p-duo .d-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(48 * var(--u)); margin: 0 calc(96 * var(--u)); }
.p-duo .p-media { aspect-ratio: 600 / 338; }

/* Three tall films side by side */
.p-trio .t-row { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(48 * var(--u)); margin: 0 calc(96 * var(--u)); }
.p-trio .p-media { aspect-ratio: 384 / 683; background: #000; }

/* Multi-line captions: each line its own sentence */
.p-cap .l { display: block; }
.p-cap .meta { color: var(--gray); }

/* Videos play on their own; controls appear on hover or keyboard focus */
.p-media video:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* ---------- Large body text ---------- */
.p-body {
  position: relative;
  margin: calc(76 * var(--u)) calc(264 * var(--u)) 0;
  max-width: calc(912 * var(--u));
  font: 400 calc(48 * var(--u))/calc(66 * var(--u)) "Lexend", sans-serif;
  letter-spacing: -0.02em; color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Next project ---------- */
.p-next { position: relative; margin-top: calc(149 * var(--u)); }
.p-next-bg { position: absolute; inset: 0; background: var(--next-bg); }
.p-next a {
  position: relative; display: flex; align-items: center; gap: calc(36 * var(--u));
  /* The band is 576 tall in Figma, with the thumbnail centered in it */
  min-height: calc(576 * var(--u)); box-sizing: border-box;
  padding: calc(40 * var(--u)) 0 calc(40 * var(--u)) calc(96 * var(--u));
  color: inherit; text-decoration: none;
}
.p-next-text { flex: 0 1 calc(924 * var(--u)); min-width: 0; max-width: calc(924 * var(--u)); position: relative; }
.p-next-label {
  position: relative; display: block;
  font: 700 max(18px, calc(32 * var(--u)))/1 "Lexend", sans-serif;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--accent);
  margin-bottom: calc(10 * var(--u));
}
.p-next-title {
  position: relative; display: block;
  font: 800 calc(102 * var(--u))/calc(96 * var(--u)) "Lexend", sans-serif;
  letter-spacing: -0.02em; color: var(--ink);
}
.p-next-client {
  position: relative; display: block; margin-top: calc(15 * var(--u));
  font: 700 max(15px, calc(24 * var(--u)))/1.3 "Source Sans 3", sans-serif;
}
/* As in Figma: the thumbnail sits flush with the right edge of the page,
   16:9 at 384 wide, or 3:4 at 240 wide for portrait projects */
.p-next-thumb { position: relative; display: block; flex: 0 0 calc(384 * var(--u)); margin-left: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.p-next-thumb.is-port { flex-basis: calc(240 * var(--u)); aspect-ratio: 3 / 4; }
.p-next-thumb video, .p-next-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p-next a:hover .p-next-thumb video, .p-next a:focus-visible .p-next-thumb video,
.p-next a:hover .p-next-thumb img, .p-next a:focus-visible .p-next-thumb img { transform: scale(1.04); }
.p-next a:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
/* The next page's hero grows out of the clicked thumbnail (transition.js
   names the thumbnail; style.css sets the motion) */
.p-hero .p-media { view-transition-name: p-hero; }

/* ---------- Footer ---------- */
.p-foot {
  position: relative; display: flex; align-items: baseline;
  padding: calc(110 * var(--u)) calc(96 * var(--u)) calc(50 * var(--u));
  color: var(--brown); text-transform: uppercase;
}
/* Same link animation as the index menu and About: an underline grows in
   from the left on hover and leaves to the right; the color stays */
.p-foot a {
  color: inherit; text-decoration: none; padding-bottom: 0.2em;
  background: linear-gradient(currentColor, currentColor) right bottom / 0 2px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.p-foot a:hover, .p-foot a:focus-visible { background-size: 100% 2px; background-position: left bottom; }
.p-foot a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.p-foot .f-about { font: 800 max(14px, calc(20 * var(--u)))/1 "Lexend Exa", sans-serif; }
.p-foot .f-mail {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 700 max(12px, calc(16 * var(--u)))/1 "Lexend", sans-serif; letter-spacing: 0.03em;
}

/* ---------- Top button (same circle as the pause button) ---------- */
.top-btn {
  position: fixed; z-index: 10;
  right: calc(18 * var(--u)); bottom: calc(34 * var(--u));
  width: max(48px, calc(65 * var(--u))); aspect-ratio: 1;
  border: 0; border-radius: 50%;
  background: rgba(248, 246, 236, 0.92);
  box-shadow: 0 1px 6px rgba(10, 11, 62, 0.12);
  color: var(--brown); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: max(4px, calc(6 * var(--u)));
  font: 700 max(9px, calc(12 * var(--u)))/1 "Lexend", sans-serif;
  letter-spacing: 0.03em; text-transform: uppercase;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.top-btn.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.top-btn svg { height: max(13px, calc(18 * var(--u))); width: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.top-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Motion on scroll ----------
   project.js adds these classes only when motion is allowed, so nothing is
   ever hidden for visitors who prefer less motion or if the script fails.
   Text: words rise in quick succession. Images: the frame rises and fades
   in while the picture inside settles from a slight zoom. Groups (pairs,
   trios, small screens) follow one after another. */
/* Words rising: .rv-words lives in style.css (shared with home) */
/* Transitions sit on the "in" state only, so hiding an element that is
   already on screen happens at once and only the entrance animates */
.rv-block { opacity: 0; transform: translateY(calc(28 * var(--u))); }
.rv-block.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease var(--d, 0ms), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
}
.rv-media { opacity: 0; transform: translateY(calc(64 * var(--u))); }
.rv-media > img, .rv-media > video { scale: 1.1; }
.rv-media.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s ease var(--d, 0ms), transform 1.2s cubic-bezier(0.16, 0.8, 0.2, 1) var(--d, 0ms);
}
.rv-media.is-in > img, .rv-media.is-in > video { scale: 1; transition: scale 1.6s cubic-bezier(0.16, 0.8, 0.2, 1) var(--d, 0ms); }
/* The hero settles from a slight zoom as the page opens */
.rv-hero > img, .rv-hero > video { scale: 1.08; }
.rv-hero.is-in > img, .rv-hero.is-in > video { scale: 1; transition: scale 2s cubic-bezier(0.16, 0.8, 0.2, 1) 0.15s; }
/* Depth: figures drift a little slower than the text (set by project.js) */
.p-drift { translate: 0 var(--dy, 0px); }

@media (prefers-reduced-motion: reduce) {
  .m-hint.is-on .m-hint-hand, .m-hint.is-on .m-hint-arrows { animation: none; }
  .js [data-reveal] > .r-item { transition: none; transform: none !important; }
  .js .p-media.is-parallax img, .js .p-media.is-parallax video { transform: none; }
  .js .p-cap { transition: none; transform: none; }
}

/* ---------- Phones (Figma "iPhone 17 - 1", 402 wide) ---------- */
@media (max-width: 699px) {
  body.project { --sx: calc(100vw / 402); --s: var(--sx); --u: var(--sx); }
  .project .site-header { height: calc(56 * var(--u)); }
  .project .site-name { left: calc(24 * var(--u)); top: calc(14 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }
  .project .site-title { left: calc(24 * var(--u)); top: calc(34 * var(--u)); transform: none; font-size: max(11px, calc(12 * var(--u))); }
  .project .index-btn { top: calc(8 * var(--u)); right: calc(12 * var(--u)); width: 44px; height: 44px; }
  .project .index-btn .bars { --bw: 22px; }

  .p-title { padding: calc(58 * var(--u)) calc(24 * var(--u)) 0; }
  .p-title h1, .p-title .p-client { max-width: none; }
  .p-title h1 { font-size: calc(60 * var(--u)); line-height: 1; }
  .p-client { font-size: max(14px, calc(16 * var(--u))); }
  .p-hero { margin-top: calc(24 * var(--u)); }
  .p-intro { display: block; margin: calc(12 * var(--u)) calc(24 * var(--u)) 0; }
  .p-lead { font-size: calc(36 * var(--u)); line-height: 1; }
  .p-role { padding-top: calc(24 * var(--u)); }
  .p-role h2, .p-role p { font-size: max(15px, calc(16 * var(--u))); }

  .p-fig { margin-top: calc(36 * var(--u)); }
  .p-fig + .p-fig.is-tight { margin-top: calc(16 * var(--u)); }
  .p-fig.is-side { display: block; }
  .p-fig.is-side .p-media { aspect-ratio: 402 / 225; }
  .p-cap, .p-fig.is-side .p-cap, .p-cap.is-right, .p-cap.is-wide {
    width: auto; margin: calc(12 * var(--u)) calc(24 * var(--u)) 0;
    font-size: max(14px, calc(16 * var(--u))); line-height: 1.3;
  }
  .p-body {
    margin: calc(48 * var(--u)) calc(24 * var(--u)) 0; max-width: none;
    font-size: calc(24 * var(--u)); line-height: 1.3;
  }

  /* Collage becomes a sideways swipe row on phones */
  .p-collage { margin: calc(40 * var(--u)) 0 0; }
  .p-collage .c-stage {
    height: auto; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 calc(24 * var(--u)) 8px; scrollbar-width: none;
  }
  .p-collage .c-stage::-webkit-scrollbar { display: none; }
  .p-collage .c-piece { position: static; flex: 0 0 72%; width: auto; scroll-snap-align: center; }
  .p-collage .p-cap { position: static; width: auto; margin: calc(12 * var(--u)) calc(24 * var(--u)) 0; }

  .p-pair { display: block; margin-top: calc(36 * var(--u)); }
  .p-pair .p-fig + .p-fig { margin-top: calc(24 * var(--u)); }
  .p-pair .p-cap, .p-pair .p-fig + .p-fig .p-cap { margin: calc(8 * var(--u)) calc(24 * var(--u)) 0; text-align: left; }
  .p-framed .p-media { margin: 0 calc(16 * var(--u)); width: auto; border-width: 6px; border-radius: 10px; }
  .p-spread { margin-top: calc(24 * var(--u)); }
  .p-spread .p-cap { position: static; width: auto; margin: calc(8 * var(--u)) calc(24 * var(--u)) 0; }
  .p-games .g-grid { display: block; margin: 0; }
  .p-games .g-main { margin: 0; }
  .p-games .g-side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
  .p-games .p-cap { width: auto; margin: calc(12 * var(--u)) calc(24 * var(--u)) 0; }

  .p-marquee { margin-top: calc(36 * var(--u)); }
  .p-marquee .m-track img { height: 260px; margin-right: 10px; }
  /* Phones: same as desktop, the hand on the strip's bottom edge and the
     word below it; the caption moves down a little to make room */
  .m-hint { --k: 0.85px; left: calc(50% - 38 * var(--k)); top: calc(260px - 87.5 * var(--k)); }
  .p-marquee .p-cap { margin-top: 40px; }
  .p-screens { margin-top: calc(40 * var(--u)); }
  .p-screens .ss-bg { display: none; }
  .p-screens .ss-stage { height: auto; display: grid; gap: 8px; }
  .p-screens .ss-stage .p-media { position: static; width: auto; }
  .p-screens .p-cap { width: auto; margin: calc(12 * var(--u)) calc(24 * var(--u)) 0; }

  .p-fig.is-inset .p-media { margin: 0; }
  .p-duo .d-row { grid-template-columns: 1fr; row-gap: 8px; margin: 0; }
  .p-trio .t-row { column-gap: 6px; margin: 0 calc(24 * var(--u)); }

  .p-next { margin-top: calc(72 * var(--u)); }
  .p-next a { display: block; min-height: 0; padding: calc(56 * var(--u)) calc(24 * var(--u)) calc(56 * var(--u)); }
  .p-next-label { font-size: max(18px, calc(24 * var(--u))); }
  .p-next-title { font-size: calc(60 * var(--u)); line-height: 1; }
  .p-next-client { font-size: max(14px, calc(16 * var(--u))); }
  .p-next-thumb { margin: calc(24 * var(--u)) 0 0; width: 100%; }
  .p-next-thumb.is-port { width: 62%; }
  .p-foot { flex-direction: column; align-items: flex-start; gap: 16px; padding: calc(48 * var(--u)) calc(24 * var(--u)) calc(64 * var(--u)); }
  .p-foot .f-mail { position: static; transform: none; }
  .top-btn { right: calc(24 * var(--u)); bottom: calc(20 * var(--u)); width: max(44px, calc(46 * var(--u))); gap: 2px; font-size: 8px; }
  .top-btn svg { height: 12px; }
}