/* Projects and the three case studies, the Rejouice way (2 Nov 2026).
   Measured on rejouice.com/work and /work/terminal-industries at 1920: every project opens on one full-screen picture
   of its world (not its screens), the name light and centred on it; a case study opens on that same picture with one
   62 px light line, then a white sheet with what was done on the left and two short paragraphs on the right, then the
   work at full gutter width (40 px edges, 20 px apart, no cards, no shadows, one 6 px radius), and ends on the next
   project's picture. One face (UD Display light for big lines, UD Text below 20 px), pure black and white words.
   Everything here starts with w-. Loaded after case.css and type.css. */

.w-page {
  --w-edge: clamp(16px, 2.1vw, 40px);
  --w-gap: clamp(10px, 1.05vw, 20px);
  --w-ink: #030303; --w-paper: #FFFFFF; --w-grey: #EFEEEB; --w-note: #767676; --w-night: #000000; --w-warm: #F5F3EE;
  --w-line: rgba(3, 3, 3, .14);
  --w-expo: cubic-bezier(.19, 1, .22, 1);
  --w-io: cubic-bezier(.645, .045, .355, 1);
  background: var(--w-night);
}
.w-page main { display: block; }
.w-page :is(h1, h2, h3, p) { font-family: var(--font); }

/* ---------- the projects page: the line at the top ---------- */
.w-top { padding: clamp(150px, 15vw, 270px) var(--w-edge) clamp(64px, 6vw, 112px); color: var(--w-warm); }
.w-top h1 { margin: 0; max-width: 15ch; font: 300 clamp(48px, 6.2vw, 120px)/.98 var(--font); letter-spacing: -.03em; text-wrap: balance; }
.w-top-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--w-edge); align-items: end; margin-top: clamp(40px, 4vw, 72px); }
.w-top p { margin: 0; max-width: 34ch; font: 300 clamp(18px, 1.15vw, 22px)/1.2 var(--font); letter-spacing: -.01em; color: var(--w-warm); }
.w-names { display: flex; flex-wrap: wrap; gap: 6px 28px; justify-self: end; margin: 0; padding: 0; list-style: none; }
.w-names a { color: var(--w-warm); text-decoration: none; font: 400 15px/1.3 var(--font-text, var(--font)); background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .6s cubic-bezier(.16, 1, .3, 1); }
.w-names a:hover { background-size: 100% 1px; }

/* ---------- the projects: one full screen each, each one sliding over the last ---------- */
.w-reel { position: relative; }
.w-tile { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; overflow: hidden; color: var(--w-warm); text-decoration: none; background: var(--w-night); isolation: isolate; }
.w-tile + .w-tile { box-shadow: 0 -1px 0 rgba(0, 0, 0, 1); }
.w-film { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.w-film :is(video, img) { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transform: translate3d(0, var(--w-par, 0px), 0) scale(var(--w-zoom, 1)); will-change: transform; }
.w-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); }
.w-tile-name { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); font: 300 clamp(40px, 3.25vw, 62px)/1.08 var(--font); letter-spacing: -.015em; white-space: nowrap; }
.w-tile-name span { background: linear-gradient(currentColor, currentColor) left 96% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .6s cubic-bezier(.16, 1, .3, 1); }
.w-tile:hover .w-tile-name span { background-size: 0 1px; background-position: right 96%; }
.w-tile-foot { position: absolute; left: var(--w-edge); right: var(--w-edge); bottom: clamp(20px, 2.1vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; font: 400 15px/1.35 var(--font-text, var(--font)); }
.w-tile-foot p { margin: 0; max-width: 36ch; }
.w-tile-foot small { display: block; font-size: 15px; opacity: .7; }
.w-tile-go { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.w-tile-go .arrow { transition: transform .6s var(--w-expo); }
.w-tile:hover .w-tile-go .arrow { transform: translateX(6px); }

/* ---------- after the projects ---------- */
.w-after { position: relative; z-index: 2; background: var(--w-paper); color: var(--w-ink); padding: clamp(96px, 9vw, 170px) var(--w-edge); }
.w-after-agency { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px var(--w-edge); padding-bottom: clamp(80px, 8vw, 150px); }
.w-after-agency p { margin: 0; max-width: 30ch; font: 300 clamp(20px, 1.25vw, 24px)/1.2 var(--font); letter-spacing: -.01em; }

/* ---------- a case study: the picture and one line ---------- */
.w-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--w-warm); isolation: isolate; }
.w-hero .w-film::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .62)); }
.w-hero-cap { position: absolute; left: var(--w-edge); right: var(--w-edge); bottom: clamp(28px, 3.4vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px var(--w-edge); align-items: end; }
.w-hero-name { margin: 0; font: 400 15px/1.35 var(--font-text, var(--font)); }
.w-hero-name a { color: inherit; text-decoration: none; opacity: .7; transition: opacity .25s; }
.w-hero-name a:hover { opacity: 1; }
.w-hero-name b { display: block; margin-top: 4px; font-weight: 400; font-size: 15px; }
.w-hero h1 { margin: 0; max-width: 24ch; font: 300 clamp(36px, 3.25vw, 62px)/1.08 var(--font); letter-spacing: -.015em; text-wrap: balance; }

/* the round pause button every film has */
.w-toggle { position: absolute; z-index: 3; right: var(--w-edge); top: clamp(84px, 6vw, 104px); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .42); color: var(--w-warm); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .25s, color .25s; }
.w-toggle:hover { background: var(--w-warm); color: #000000; }
.w-toggle svg { width: 12px; height: 12px; }
.w-shot .w-toggle, .w-wide .w-toggle { top: auto; bottom: clamp(12px, 1.2vw, 20px); right: clamp(12px, 1.2vw, 20px); }

/* ---------- the white sheet: what we did, and why ---------- */
.w-sheet { position: relative; z-index: 2; background: var(--w-paper); color: var(--w-ink); }
.w-sheet { --sel-bg: var(--w-ink); --sel-fg: var(--w-paper); }
.w-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px var(--w-edge); padding: clamp(72px, 6vw, 120px) var(--w-edge) clamp(120px, 11vw, 210px); }
.w-did { margin: 0; padding: 0; list-style: none; font: 300 clamp(18px, 1.05vw, 20px)/1.2 var(--font); letter-spacing: -.01em; }
.w-facts { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px clamp(28px, 3vw, 56px); margin: clamp(36px, 3vw, 56px) 0 0; }
.w-facts dt { font: 400 15px/1.35 var(--font-text, var(--font)); color: var(--w-note); }
.w-facts dd { margin: 4px 0 0; font: 400 15px/1.35 var(--font-text, var(--font)); }
.w-why > p { max-width: 30em; margin: 0 0 1.2em; font: 300 clamp(18px, 1.05vw, 20px)/1.2 var(--font); letter-spacing: -.01em; }
.w-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 12px; color: inherit; text-decoration: none; font: 400 15px/1.35 var(--font-text, var(--font)); padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .6s cubic-bezier(.16, 1, .3, 1); }
.w-link:hover { background-size: 30% 1px; }

/* ---------- the work at full gutter width ---------- */
.w-work { display: grid; gap: var(--w-gap); padding: 0 var(--w-edge); }
.w-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--w-gap); }
.w-fig { margin: 0; }
.w-fig figcaption { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px var(--w-edge); padding: 14px 0 clamp(18px, 1.6vw, 30px); font: 400 15px/1.35 var(--font-text, var(--font)); }
.w-fig figcaption span { color: var(--w-note); max-width: 46ch; }
.w-two .w-fig figcaption { grid-template-columns: 1fr; }

/* a panel: a field (the project's own colour, or the studio grey) with the real screens set into it */
.w-panel { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--w-field, var(--w-grey)); isolation: isolate; }
.w-panel--tall { aspect-ratio: 4 / 5; }
.w-panel--dark { --w-field: #000; }

/* a desktop screen, big, with a slow lift as it arrives (it starts a little tilted back and flattens by the middle
   of the screen, as Rejouice's cards do) */
.w-screen { position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
  transform: translate(-50%, -50%) perspective(1800px) rotateX(calc(var(--w-tilt, 0) * 14deg)) translateY(calc(var(--w-tilt, 0) * 6%)) scale(calc(1 - var(--w-tilt, 0) * .06)); transform-origin: 50% 100%; will-change: transform; }
.w-panel--tall .w-screen { width: 86%; }
.w-screen img, .w-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* a long page drifts down and back up inside its screen, easing at both ends */
.w-screen.is-long img { height: auto; object-fit: initial; animation: w-scroll var(--w-dur, 26s) var(--w-io) infinite alternate; }
@keyframes w-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(var(--w-run, -60%)); } }

/* phones: the real phone page in a rounded screen with a thin black edge */
.w-phones { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.6vw, 52px); }
.w-phone { position: relative; width: clamp(120px, 15.5%, 300px); aspect-ratio: 390 / 844; overflow: hidden; border-radius: clamp(18px, 2.2vw, 42px); background: #FFFFFF; box-shadow: 0 0 0 clamp(3px, .3vw, 6px) #0B0B0B, 0 40px 80px -40px rgba(0, 0, 0, .35); transform: translateY(calc(var(--w-tilt, 0) * var(--w-lag, 0) * 1%)); will-change: transform; }
.w-phone:nth-child(2) { --w-lag: 22; }
.w-phone:nth-child(3) { --w-lag: 44; }
.w-phone img { display: block; width: 100%; height: auto; animation: w-scroll var(--w-dur, 22s) var(--w-io) infinite alternate; }
.w-phone:nth-child(2) img { animation-delay: -6s; }
.w-phone:nth-child(3) img { animation-delay: -12s; }
.w-phone.is-still img { animation: none; }

/* the project's world again, wide, between the screens */
.w-wide { position: relative; overflow: hidden; aspect-ratio: 2.39 / 1; border-radius: 6px; background: #000; isolation: isolate; }
.w-wide :is(video, img) { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, var(--w-par, 0px), 0); will-change: transform; }

/* a recording fills its panel */
.w-shot { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--w-grey); }
.w-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------- the choices, as Rejouice's lists: label left, rows right, hairlines that draw ---------- */
.w-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px var(--w-edge); padding: clamp(120px, 11vw, 210px) var(--w-edge) 0; }
.w-list h2 { margin: 0; font: 300 clamp(28px, 1.9vw, 36px)/1.04 var(--font); letter-spacing: -.02em; max-width: 12ch; }
.w-rows { margin: 0; padding: 0; list-style: none; }
.w-rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 24px; padding: 20px 0 22px; }
.w-rows li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--w-line); transform: scaleX(var(--w-draw, 1)); transform-origin: 0 50%; transition: transform 1s var(--w-io); }
.w-rows h3 { margin: 0; font: 400 15px/1.35 var(--font-text, var(--font)); }
.w-rows p { margin: 0; font: 400 15px/1.35 var(--font-text, var(--font)); color: var(--w-note); max-width: 40ch; }
html.js .w-rows:not(.is-drawn) li::before { --w-draw: 0; }
.w-rows li:nth-child(2)::before { transition-delay: .08s; }
.w-rows li:nth-child(3)::before { transition-delay: .16s; }
.w-rows li:nth-child(4)::before { transition-delay: .24s; }

/* where it is now, and the ask */
.w-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px var(--w-edge); padding: clamp(96px, 9vw, 170px) var(--w-edge) clamp(110px, 10vw, 190px); }
.w-now h2 { margin: 0; font: 300 clamp(28px, 1.9vw, 36px)/1.04 var(--font); letter-spacing: -.02em; }
.w-now p { margin: 0 0 1em; max-width: 30em; font: 300 clamp(18px, 1.05vw, 20px)/1.2 var(--font); letter-spacing: -.01em; }
.w-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px var(--w-edge); align-items: end; padding: 0 var(--w-edge) clamp(110px, 10vw, 190px); }
.w-ask h2 { margin: 0; max-width: 16ch; font: 300 clamp(40px, 4.3vw, 82px)/1.04 var(--font); letter-spacing: -.02em; text-wrap: balance; }
.w-btn { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 3px; color: inherit; text-decoration: none; font: 400 17px/1.3 var(--font-text, var(--font)); border-bottom: 1px solid currentColor; white-space: nowrap; }
.w-btn .arrow { transition: transform .6s var(--w-expo); }
.w-btn:hover .arrow { transform: translateX(6px); }

/* ---------- the next project: its picture, its name ---------- */
.w-next { position: relative; z-index: 2; display: block; background: var(--w-paper); color: var(--w-ink); padding: 0 var(--w-edge) var(--w-edge); text-decoration: none; }
.w-next-top { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0 14px; border-top: 1px solid var(--w-line); font: 400 15px/1.35 var(--font-text, var(--font)); }
.w-next-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; max-height: 86svh; width: 100%; border-radius: 6px; background: #000; color: var(--w-warm); isolation: isolate; }
.w-next-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--w-expo); }
.w-next:hover .w-next-pic img { transform: scale(1); }
.w-next-pic::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.w-next-name { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); font: 300 clamp(36px, 3.25vw, 62px)/1.08 var(--font); letter-spacing: -.015em; white-space: nowrap; }
.w-next-name span { background: linear-gradient(currentColor, currentColor) left 96% / 100% 1px no-repeat; padding-bottom: 2px; }

/* ---------- arrivals: things rise into place, long and soft (expo out, 1.2 s) ---------- */
html.js .w-rise { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .6s var(--w-io), transform 1.2s var(--w-expo); }
html.js .w-rise.is-in { opacity: 1; transform: none; }

/* ---------- laptops ---------- */
@media (max-width: 1100px) {
  .w-screen { width: 82%; }
  .w-phone { width: clamp(110px, 21%, 260px); }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .w-top { padding-top: 132px; }
  .w-top-row, .w-intro, .w-list, .w-now, .w-after-agency { grid-template-columns: minmax(0, 1fr); }
  .w-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-facts > div:first-child { grid-column: 1 / -1; }
  .w-names { justify-self: start; }
  .w-tile-name, .w-next-name { white-space: normal; text-align: center; width: 86%; }
  .w-tile-foot { grid-template-columns: 1fr; }
  .w-hero-cap { grid-template-columns: 1fr; }
  .w-hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .w-two { grid-template-columns: 1fr; }
  .w-fig figcaption { grid-template-columns: 1fr; }
  .w-panel { aspect-ratio: 4 / 5; }
  .w-panel .w-screen { width: 88%; aspect-ratio: 390 / 600; }
  .w-panel--phones { aspect-ratio: 4 / 5; }
  .w-phones .w-phone:nth-child(3) { display: none; }
  .w-phone { width: 40%; }
  .w-wide { aspect-ratio: 4 / 3; }
  .w-ask { grid-template-columns: 1fr; }
  .w-rows li { grid-template-columns: 1fr; }
  .w-next-pic { aspect-ratio: 4 / 5; }
}

/* the whole tile is the link; the pause button sits above it */
.w-tile-link { position: absolute; inset: 0; z-index: 1; color: inherit; text-decoration: none; }
.w-tile .w-toggle { z-index: 2; }
.w-tile-line { display: block; max-width: 36ch; }
.w-tile-line small { display: block; font-size: 15px; opacity: .7; }
.w-ask--flush { padding: 0; }

/* each project's own field colour, for the first panel of its case study */
.w-page--monpro { --w-own: #173A33; }
.w-page--visitrove { --w-own: #101B2A; }
.w-page--studio { --w-own: #1A1411; }
.w-panel--field { --w-field: var(--w-own, #101010); }

/* where each picture keeps its subject when a phone crops it */
.w-film--monpro :is(video, img) { object-position: 52% 50%; }
.w-film--visitrove :is(video, img) { object-position: 66% 50%; }
.w-film--studio :is(video, img) { object-position: 62% 50%; }

/* Laptops: the round pause button sits over a playing film, and a live blur behind it is redrawn every frame of the film
   and of the scroll. A plain fill a shade darker looks the same at this size and costs nothing. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .w-toggle { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .52); }
}

/* Laptops: the Projects tiles' line and View project sit a little higher off the bottom edge (Alex 3 Nov 23:09: "bring
   the description slightly up"), so the next tile rising over it doesn't meet the words as soon. */
@media (min-width: 761px) {
  .w-tile-foot { bottom: clamp(36px, 3.6vw, 72px); }
}