/* Case studies: one page per project on the homepage, from the template approved at gates 1 and 2
   (case-studies/gates/, 2026-10-22). The thread is the homepage's grammar (the name, the window, what was done);
   each page opens its own composition, and each word of what was done becomes a chapter. Moves: work.js. */
@font-face { font-family: 'PP Pangram Sans Narrow'; src: url('fonts/PPPangramSans-NarrowExtrabold.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'PP Neue Montreal'; src: url('fonts/PPNeueMontreal-Book.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PP Neue Montreal'; src: url('fonts/PPNeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bg: #000; --ink: #F2F0EC; --ink2: #A9A49C; --rule: rgba(242,240,236,.22);
  --head: 'PP Pangram Sans Narrow', 'Arial Narrow', sans-serif; --track: -0.01em;
  --sans: 'PP Neue Montreal', system-ui, sans-serif;
  --m: max(16px, 5.7vw); --g: 24px; --cap: 13px;
  --col: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; }
body { background: var(--bg); color: var(--ink); overflow-x: clip; font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
figure { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.nw { white-space: nowrap; }
.cap, figcaption { font-size: var(--cap); line-height: 1.4; color: var(--ink2); }
.cap b, figcaption b { font-weight: 400; color: var(--ink); }
.ln { display: block; overflow: hidden; padding: 0.14em 0; margin: -0.14em 0; }
.ln > span { display: block; white-space: nowrap; will-change: transform; }
.word, .comp, .quote, .more .n { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: var(--track); }

/* ---------- the nav: the name, the project and its chapters (the one on screen filled), the way out */
.chrome { position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: 58px; padding: 0 var(--m); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: var(--cap); line-height: 1; color: var(--ink); transition: transform 0.45s var(--ease-energy, ease-out), background-color 0.3s; }
.chrome.band { background: var(--bg); }
.chrome.away { transform: translateY(-100%); }
.chrome .who { justify-self: start; padding: 6px 0; }
.chrome .ch { display: flex; align-items: center; gap: 4px; }
.chrome .ch .pn { margin-right: 10px; }
.chrome .ch a { padding: 7px 10px 6px; border-radius: 6px; color: var(--ink2); transition: background-color 0.2s, color 0.2s; }
.chrome .ch a.now { background: var(--ink); color: var(--bg); }
.chrome .out { justify-self: end; display: flex; gap: 28px; }
.chrome .out a { padding: 6px 0; }
.chrome .here { display: none; }
@media (hover: hover) and (pointer: fine) {
  .chrome .ch a:not(.now):hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
  .chrome .out a:hover, .chrome .who:hover { color: var(--ink2); }
}

/* ---------- 1 · the open: the homepage's composition; the window grows into the work as you scroll */
.open { position: relative; height: 260vh; }
.open .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.comp { --lh: 0.84; display: grid; column-gap: 0.3em; line-height: var(--lh); }
.comp .l, .comp .r { display: flex; flex-direction: column; min-width: 0; }
.comp .r { justify-content: flex-end; align-items: flex-end; }
.comp .slot { min-height: 0; }
.open .comp { position: absolute; left: var(--m); right: var(--m); top: 50%; transform: translateY(-46%); }
.open .comp .l, .open .comp .r { position: relative; z-index: 3; will-change: transform; }
.v-mid { grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-rows: repeat(var(--rows, 4), calc(var(--lh) * 1em)); font-size: 7.4vw; }
.v-mid .l, .v-mid .r, .v-mid .slot { grid-row: 1 / -1; }
.v-mid .slot { margin: 0.05em 0 0.02em; }
.v-left { grid-template-columns: minmax(0, 1fr) max-content; grid-template-rows: repeat(var(--rows, 5), calc(var(--lh) * 1em)); font-size: 8.6vw; }
.v-left .slot { grid-column: 1; grid-row: 1 / -1; margin: 0.05em 0 0.02em; }
.v-left .l, .v-left .r { grid-column: 2; grid-row: 1 / -1; }
/* the window itself is placed by work.js over its slot, so it can grow past the grid */
.gw { position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; border-radius: 4px; background: #000; will-change: width, height, transform; }
.gw img, .gw video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gw .contain { object-fit: contain; }
.gw .cover { transition: opacity 0.7s var(--ease-smooth, ease); }
.gw.playing .cover { opacity: 0; }
.open .foot { position: absolute; left: var(--m); right: var(--m); bottom: 22px; display: flex; justify-content: space-between; font-size: var(--cap); line-height: 1.35; z-index: 3; transition: opacity 0.3s; }
.open .foot span { color: var(--ink2); }
.open .foot b { font-weight: 400; }

/* ---------- 2 · the brief in one spread */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
.brief { padding-top: 24vh; padding-bottom: 6vh; }
.brief .kick { grid-column: 1 / 3; font-size: var(--cap); color: var(--ink2); padding-top: 0.8em; }
.brief .line { grid-column: 3 / 12; font-size: clamp(26px, 3.4vw, 64px); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.brief .say { grid-column: 3 / 8; grid-row: 2; margin-top: 9vh; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.brief .say p + p { margin-top: 1em; }
.cred { font-size: var(--cap); line-height: 1.5; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); row-gap: 12px; border-top: 1px solid var(--rule); padding-top: 14px; align-content: start; }
.cred dt { color: var(--ink2); }
.cred a { border-bottom: 1px solid currentColor; }
.brief .cred { grid-column: 9 / 13; grid-row: 2; margin-top: 9vh; }

/* ---------- chapters: the word and its window */
.chapter { padding-top: 20vh; }
.k { font-size: var(--cap); color: var(--ink2); }
.word { font-size: 9.6vw; line-height: 0.86; }
.op { position: relative; }
.say1 { font-size: 18px; line-height: 1.45; text-wrap: pretty; }
/* Brand: the word left, the P on its own hexagon grid in the window */
.op-grid { grid-template-rows: auto 1fr auto; row-gap: 0; }
.op-grid .k { grid-column: 1 / 5; grid-row: 1; }
.op-grid .word { grid-column: 1 / 5; grid-row: 2; align-self: start; margin-top: 0.08em; }
.op-grid .say1 { grid-column: 1 / 4; grid-row: 3; align-self: end; }
.op-grid .gridwin { grid-column: 5 / 13; grid-row: 1 / 4; aspect-ratio: 6 / 5; max-height: 80vh; width: 100%; position: relative; overflow: hidden; border-radius: 4px; background: #171513; }
.gridwin svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gridwin .cap { position: absolute; left: 12px; bottom: 10px; padding: 4px 8px 3px; border-radius: 4px; background: #171513; color: #B9B2AA; }   /* on the window's own dark, clear of the grid's lines */
.hx path { fill: none; vector-effect: non-scaling-stroke; }
.hx .cell { stroke: #B58F65; stroke-opacity: 0.22; stroke-width: 1; }
.hx .cell.lit { stroke: #F3E3C8; stroke-opacity: 0.9; stroke-width: 2; filter: url(#glow); }
/* Web: the word top left, the site on a stage with one bar under it; the stage pins while the site plays */
.op-stage { height: 160vh; }
.op-stage .pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.op-stage .k { position: absolute; left: var(--m); top: calc(11vh - 26px); }
.op-stage .word { position: absolute; left: var(--m); top: 11vh; }
.op-stage .stage2 { position: absolute; right: var(--m); top: 11vh; width: 64vw; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0E0D0C; box-shadow: 0 30px 80px -40px rgba(0,0,0,.6); }
.stage2 video, .stage2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-stage .bar { position: absolute; right: var(--m); top: calc(11vh + 64vw * 9 / 16 + 14px); width: 64vw; }
.bar { display: flex; justify-content: space-between; gap: var(--g); font-size: var(--cap); color: var(--ink2); border-top: 1px solid var(--rule); padding-top: 12px; }
.bar b { font-weight: 400; color: var(--ink); }
.op-stage .say1 { position: absolute; left: var(--m); bottom: 10vh; width: calc(var(--col) * 3 + var(--g) * 2); }
/* Film: the window lifts from the word's foot like a garage door */
.op-door { padding: 12vh var(--m) 0; }
.op-door .door { position: relative; width: 100%; height: calc(100svh - 12vh - 9.6vw * 0.86 - max(32px, 5vh) - 6vh); overflow: hidden; border-radius: 4px; background: #000; clip-path: inset(var(--door, 0%) 0 0 0 round 4px); }
.op-door .door video, .op-door .door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-door .foot2 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: max(32px, 5vh); }
.op-door .foot2 .k { text-align: right; line-height: 1.4; }
.op-door .foot2 .k b { display: block; font-weight: 400; color: var(--ink); }

/* ---------- the work */
.beat { padding-top: 16vh; }
.beat figcaption { margin-top: 12px; }
.ph { position: relative; overflow: hidden; border-radius: 4px; background: #121110; }
.ph img, .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a plan beside its view: the sketches and the P */
.plan .sheet { grid-column: 1 / 9; }
.plan .sheet .ph { aspect-ratio: 1920 / 1078; }
.plan .sheet img { filter: brightness(1.35); top: -6%; height: 112%; will-change: transform; }
.plan .side { grid-column: 9 / 13; }
.plan .tile { aspect-ratio: 1920 / 1078; display: grid; place-items: center; background: #171513; border-radius: 4px; }
.plan .tile svg { width: 34%; }
.plan .side .say1 { margin-top: 26px; }
/* objects on paper */
.paper figure:nth-child(1) { grid-column: 1 / 7; }
.paper figure:nth-child(2) { grid-column: 7 / 13; margin-top: 16vh; }
.paper .ph { aspect-ratio: 1600 / 1236; box-shadow: 0 24px 60px -30px rgba(32,30,28,.55); will-change: transform; }
.print figure:nth-child(1) { grid-column: 1 / 9; }
.print figure:nth-child(2) { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-end; }
.print figure:nth-child(1) .ph { aspect-ratio: 1600 / 898; }
.print figure:nth-child(2) .ph { height: calc((var(--col) * 8 + var(--g) * 7) * 898 / 1600); aspect-ratio: 800 / 1000; }
.print figure:nth-child(2) figcaption { text-align: right; }
/* two stages, one bar */
.stages { padding: 16vh var(--m) 0; }
.stages .row { display: flex; gap: var(--g); justify-content: space-between; align-items: flex-start; }
.stages .s1 { width: 62vw; aspect-ratio: 1280 / 710; border-radius: 10px; }
.stages .s2 { height: calc(62vw * 710 / 1280); aspect-ratio: 448 / 682; border-radius: 18px; }
.stages .bar { margin-top: 14px; }
/* the app */
.app .side { grid-column: 1 / 3; }
.app .side .k { margin-bottom: 10px; }
.app .shot { grid-column: 3 / 13; }
.app .shot .ph { aspect-ratio: 1920 / 1082; }
.app .shot img { top: -5%; height: 110%; will-change: transform; }
/* the client's own words */
.words { min-height: 90vh; padding: 16vh var(--m) 10vh; display: flex; flex-direction: column; justify-content: center; }
.quote { font-size: clamp(34px, 6.1vw, 150px); line-height: 0.92; text-wrap: balance; max-width: 15em; }
.words .who { margin-top: 8vh; font-size: var(--cap); line-height: 1.4; }
.words .who span { display: block; color: var(--ink2); }
/* a film inset */
.inset .ph { grid-column: 2 / 12; aspect-ratio: 16 / 9; }
.inset figcaption, .inset .cap { grid-column: 2 / 12; }
/* photographs opening through the P's own cell */
.cells figure:nth-child(1) { grid-column: 1 / 9; }
.cells figure:nth-child(2) { grid-column: 9 / 13; }
.cells figure:nth-child(1) .ph { aspect-ratio: 3 / 2; }
.cells figure:nth-child(2) .ph { aspect-ratio: 2 / 3; height: calc((var(--col) * 8 + var(--g) * 7) * 2 / 3); width: auto; margin-left: auto; }
.cells figure:nth-child(2) figcaption { text-align: right; }
.cells .ph img { clip-path: var(--cell, none); }

/* ---------- more for the client, then the credits */
.more { padding: 20vh var(--m) 0; }
.more .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.more .k { margin-bottom: 18px; }
.more ol { grid-column: 1 / 7; list-style: none; border-top: 1px solid var(--rule); }
.more li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--g); padding: 14px 0 12px; border-bottom: 1px solid var(--rule); color: var(--ink2); transition: color 0.2s; }
.more li a.lit { color: var(--ink); }
.more .n { font-size: clamp(30px, 3.3vw, 64px); line-height: 0.95; white-space: nowrap; }
.more .y { font-size: var(--cap); }
.more .peek { grid-column: 7 / 13; margin-left: var(--g); aspect-ratio: 16 / 9; }
.more .peekcap { grid-column: 7 / 13; margin: 12px 0 0 var(--g); }
.credits { margin: 14vh var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 18px; font-size: var(--cap); line-height: 1.5; border-top: 1px solid var(--rule); padding-top: 14px; }
.credits div { grid-column: span 3; }
.credits div span { display: block; color: var(--ink2); }
.credits .wide { grid-column: span 6; }

/* ---------- next: the next project's own composition, its window growing as you scroll on */
.next { position: relative; height: 230vh; margin-top: 16vh; }
.next .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.next .k { position: absolute; left: var(--m); top: 13vh; z-index: 3; transition: opacity 0.3s, visibility 0.3s; }
.next .k.gone { opacity: 0; visibility: hidden; }
.next .comp { position: absolute; left: var(--m); right: var(--m); top: 19vh; }
.next .comp .l, .next .comp .r { position: relative; z-index: 3; will-change: transform; }
.next .gw { cursor: pointer; }
.next .go { position: absolute; left: var(--m); right: var(--m); bottom: 22px; display: flex; justify-content: space-between; font-size: var(--cap); z-index: 3; transition: opacity 0.3s, visibility 0.3s; }
.next .go.gone { opacity: 0; visibility: hidden; }
.next .go a { padding: 4px 0; border-bottom: 1px solid currentColor; }
.next .go span { color: var(--ink2); }
.foot3 { padding: 0 var(--m) 28px; display: flex; justify-content: space-between; font-size: var(--cap); color: var(--ink2); }

/* ---------- a phone: one column, the window across the width */
@media (max-width: 760px) {
  :root { --g: 14px; --m: 18px; }
  .chrome { grid-template-columns: 1fr auto; height: 52px; }
  .chrome .ch { display: none; }
  .chrome .here { display: inline; color: var(--ink2); margin-right: 18px; }
  .open .comp, .next .comp { display: flex; flex-direction: column; font-size: 15vw; }
  .open .comp { top: 47%; }
  .open .comp .slot { width: 100%; aspect-ratio: var(--arm, 4 / 5); margin: 0.38em 0 0.4em; }
  .next .comp { top: 17vh; }
  .next .comp .slot { width: 100%; aspect-ratio: 16 / 9; margin: 0.38em 0 0.4em; order: 2; }
  .next .comp .l { order: 1; } .next .comp .r { order: 3; align-items: flex-end; }
  .next .comp .what { order: 4; }
  .comp .r { align-items: flex-end; }
  .grid { display: block; }
  .brief .line { font-size: 24px; line-height: 1.22; margin-top: 10px; }
  .brief .say { margin-top: 26px; font-size: 16px; }
  .brief .cred { margin-top: 26px; }
  .word { font-size: 25vw; }
  .op-grid { display: flex; flex-direction: column; }
  .op-grid .gridwin { order: 3; }
  .op-grid .say1 { order: 4; }
  .op-grid .word { margin: 8px 0 18px; }
  .op-grid .gridwin { aspect-ratio: 4 / 5; max-height: none; }
  .op-grid .say1 { margin-top: 16px; font-size: 16px; }
  .op-stage { height: auto; padding: 0 var(--m); }
  .op-stage .pin { position: relative; height: auto; }
  .op-stage .k, .op-stage .word, .op-stage .stage2, .op-stage .bar, .op-stage .say1 { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .op-stage .word { margin: 8px 0 18px; }
  .op-stage .stage2 { border-radius: 8px; }
  .op-stage .bar { margin-top: 12px; }
  .op-stage .say1 { margin-top: 16px; font-size: 16px; }
  .op-door .door { height: auto; aspect-ratio: 16 / 9; }
  .cells figure:nth-child(2) .ph { height: auto; width: 100%; }
  .cells figure:nth-child(2) figcaption { text-align: left; }
  .op-door .foot2 { flex-direction: column; align-items: flex-start; gap: 12px; }
  .op-door .foot2 .k { text-align: left; }
  .say1 { font-size: 16px; }
  .plan .side { margin-top: 26px; }
  .plan .tile { aspect-ratio: 16 / 9; }
  .paper figure:nth-child(2) { margin-top: 26px; }
  .print figure:nth-child(2) { margin-top: 26px; align-items: stretch; }
  .print figure:nth-child(2) .ph { height: auto; width: 100%; }
  .print figure:nth-child(2) figcaption { text-align: left; }
  .stages .row { flex-direction: column; }
  .stages .s1 { width: 100%; }
  .stages .s2 { height: auto; width: 62%; align-self: flex-end; }
  .stages .bar { flex-direction: column; gap: 4px; }
  .app .side { margin-bottom: 16px; }
  .cells figure:nth-child(2) { margin-top: 26px; }
  .more .row { display: block; }
  .more .peek { margin: 26px 0 0; }
  .more .peekcap { margin: 12px 0 0; }
  .credits { display: grid; grid-template-columns: 1fr 1fr; }
  .credits div, .credits .wide { grid-column: span 2; }
}

/* reduced motion: every beat rests where its move ends */
@media (prefers-reduced-motion: reduce) {
  .open, .next { height: auto; }
  .open .stage, .next .stage { position: relative; }
  .op-stage { height: auto; }
  .op-stage .pin { position: relative; }
}

/* =========================================================================================================
   The rollout (2026-10-22): every homepage composition can open a page, and the beats the ten pages need.
   ========================================================================================================= */
/* the compositions, from the homepage (v4-work.css), with .slot where each window rests */
.v-right { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: repeat(var(--rows, 4), calc(var(--lh) * 1em)); font-size: 8.6vw; }
.v-right .l, .v-right .r { grid-column: 1; grid-row: 1 / -1; }
.v-right .r { align-items: flex-start; }
.v-right .slot { grid-column: 2; grid-row: 1 / -1; margin: 0.05em 0 0.02em; }
.v-stack { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0.24em; font-size: 6.4vw; }
.v-stack .l { grid-column: 1; grid-row: 1; } .v-stack .r { grid-column: 2; grid-row: 1; }
.v-stack .slot { grid-column: 1 / -1; grid-row: 2; aspect-ratio: var(--ar, 16 / 9); max-height: 62vh; }
.v-lockup { grid-template-columns: max-content; grid-template-rows: auto auto auto; font-size: 10.4vw; }
.v-lockup .l { grid-column: 1; grid-row: 1; }
.v-lockup .slot { grid-column: 1; grid-row: 2; width: 64%; aspect-ratio: 2.7 / 1; justify-self: end; margin: 0.12em 0 0; }
.v-lockup .r { grid-column: 1; grid-row: 3; justify-self: end; font-size: 0.42em; margin-top: 0.25em; }
.v-lockup .sp { display: inline-block; width: 0.258em; }
.v-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--g); row-gap: 0.42em; font-size: 4.2vw; }
.v-two .l { grid-column: 1; grid-row: 1; } .v-two .r { grid-column: 2; grid-row: 1; align-items: flex-end; }
.v-two .slot { grid-row: 2; grid-column: 1; aspect-ratio: 16 / 9; } .v-two .slot.s2 { grid-column: 2; }
.v-two .what { grid-column: 1 / -1; grid-row: 3; font-size: 1.9em; display: flex; flex-direction: column; }
.v-pair { grid-template-columns: max-content 6.76em 2.14em max-content; grid-template-rows: repeat(var(--rows, 4), calc(var(--lh) * 1em)); justify-content: space-between; column-gap: 0.22em; font-size: 5.4vw; }
.v-pair .l { grid-column: 1; grid-row: 1 / -1; } .v-pair .slot { grid-column: 2; grid-row: 1 / -1; } .v-pair .slot.s2 { grid-column: 3; } .v-pair .r { grid-column: 4; grid-row: 1 / -1; }
.v-bleed { grid-template-columns: max-content max-content; justify-content: space-between; grid-template-rows: auto auto auto; font-size: 7vw; }
.v-bleed .l { grid-column: 1; grid-row: 1; flex-direction: row; gap: 0.25em; }
.v-bleed .slot { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 21 / 9; margin: 0.24em calc(-1 * var(--m)) 0.34em; }
.v-bleed .r { grid-column: 2; grid-row: 3; }
/* wireframe to render (Built before they exist): the outlined words fill, the pictures come from clay to colour */
.wire { --fill: 1; --clay: 0; }
.wire .ln > span { color: color-mix(in srgb, var(--ink) calc(var(--fill) * 100%), transparent); -webkit-text-stroke: 0.014em var(--ink); }
.wire img, .wire video { filter: grayscale(var(--clay)) contrast(calc(1 - var(--clay) * 0.35)) brightness(calc(1 + var(--clay) * 0.22)); }
.chx { display: inline-block; will-change: transform; white-space: pre; }

/* a chapter opener with one window beside its word (the clink, the wipe, the keys, the stack) */
.op-win { grid-template-rows: auto 1fr auto; }
.op-win .k { grid-column: 1 / 5; grid-row: 1; }
.op-win .word { grid-column: 1 / 5; grid-row: 2; align-self: start; margin-top: 0.08em; }
.op-win .say1 { grid-column: 1 / 4; grid-row: 3; align-self: end; }
.op-win .mwin { grid-column: 5 / 13; grid-row: 1 / 4; position: relative; overflow: hidden; border-radius: 4px; background: #000; aspect-ratio: var(--ar, 16 / 9); }
.op-win.rev .k, .op-win.rev .word { grid-column: 9 / 13; } .op-win.rev .say1 { grid-column: 9 / 13; } .op-win.rev .mwin { grid-column: 1 / 9; }
.mwin img, .mwin video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mwin .contain, .ph .contain { object-fit: contain; }
.mwin .cap { position: absolute; left: 12px; bottom: 10px; padding: 4px 8px 3px; border-radius: 4px; background: rgba(10,10,10,.72); color: #D9D4CE; }

/* a film across the page (one picture, one tag) */
.film-full { padding-top: 16vh; }
.film-full .ph { width: 100%; aspect-ratio: var(--ar, 16 / 9); border-radius: 0; }
.film-full .cap { padding: 12px var(--m) 0; }

/* a row of pictures at one height: each figure grows by its own shape (--ar) */
.rowp { display: flex; gap: var(--g); align-items: flex-start; padding: 16vh var(--m) 0; }
.rowp figure { flex: var(--ar, 1.5) 1 0; min-width: 0; }
.rowp .ph { aspect-ratio: var(--ar, 1.5); }
.rowp.tight { padding-top: var(--g); }

/* words beside a picture */
.split .txt { grid-column: 1 / 5; align-self: end; }
.split .txt .k { margin-bottom: 10px; }
.split .pic { grid-column: 5 / 13; }
.split.rev .txt { grid-column: 9 / 13; grid-row: 1; } .split.rev .pic { grid-column: 1 / 9; grid-row: 1; }
.split .pic .ph { aspect-ratio: var(--ar, 16 / 9); }

/* a vertical film in a phone's shape, beside its words */
.phonebeat { padding: 16vh var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.phonebeat .txt { grid-column: 1 / 6; }
.phonebeat .txt .k { margin-bottom: 10px; }
.phonebeat .handset { grid-column: 8 / 12; aspect-ratio: 9 / 16; border-radius: 22px; max-height: 84vh; justify-self: center; height: 84vh; width: auto; }
.phonebeat .handset + .handset { grid-column: 12 / 13; }
.phonebeat.two .handset:nth-of-type(2) { grid-column: 6 / 9; } .phonebeat.two .handset:nth-of-type(3) { grid-column: 9 / 12; }

/* the concept chip (Emma) */
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid currentColor; font-size: 12px; line-height: 1; color: var(--ink); }
.brief .kick .chip { margin-top: 10px; }

@media (max-width: 760px) {
  .comp.v-right, .comp.v-stack, .comp.v-lockup, .comp.v-two, .comp.v-pair, .comp.v-bleed { display: flex; flex-direction: column; font-size: 13vw; }
  .v-two .l, .v-two .r, .v-bleed .l { flex-direction: column; gap: 0; }
  .comp .slot { width: 100%; aspect-ratio: var(--arm, 4 / 5); margin: 0.3em 0 0.34em; max-height: none; }
  .next .comp .slot { aspect-ratio: var(--arm, 16 / 9); }
  .v-lockup .slot { width: 72%; aspect-ratio: 2.7 / 1; align-self: flex-end; margin: 0.12em 0 0.12em; }
  .v-lockup .r { align-self: flex-end; }
  .v-two, .v-pair, .v-bleed, .v-stack { --arm: 16 / 9; }
  .v-lockup { --arm: 2.7 / 1; }
  .open .v-lockup .slot, .next .v-lockup .slot { width: 72%; }
  .v-bleed .slot { width: calc(100% + 2 * var(--m)); margin-left: calc(-1 * var(--m)); }
  .v-two .what { font-size: 1.2em; }
  .op-win, .op-win.rev { display: flex; flex-direction: column; }
  .op-win .word { margin: 8px 0 18px; } .op-win .mwin { order: 3; width: 100%; } .op-win .say1 { order: 4; margin-top: 16px; }
  .rowp { flex-direction: column; }
  .rowp figure { width: 100%; }
  .split .txt { margin-bottom: 16px; }
  .phonebeat { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .phonebeat .handset { height: auto; width: 72%; align-self: center; max-height: none; }
}

/* page to page (F6): the homepage's window becomes this page's window, and Next's window becomes the next page's
   (a cross-document view transition; browsers without it simply navigate) */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: var(--ease-default, ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* =========================================================================================================
   More chapter openers (2026-10-22, after the rollout's cold read: no page repeats one opener, and neighbours differ)
   ========================================================================================================= */
/* the word above its film, the film across the page (L026, a line above, the thing below) */
.op-full { padding-top: 20vh; }
.op-full .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); align-items: end; }
.op-full .head .k { grid-column: 1 / 13; margin-bottom: 8px; }
.op-full .head .word { grid-column: 1 / 9; }
.op-full .head .say1 { grid-column: 9 / 13; padding-bottom: 0.4em; }
.op-full .full { position: relative; width: 100%; aspect-ratio: var(--ar, 16 / 9); max-height: 86vh; overflow: hidden; background: #000; margin-top: 4vh; }
.op-full .full video, .op-full .full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-full .full .contain { object-fit: contain; }
.op-full .cap { padding: 12px var(--m) 0; }
/* a film with its word at its foot, opening from an inset */
.op-foot { padding: 16vh var(--m) 0; }
.op-foot .ph { width: 100%; height: calc(100svh - 12vh - 9.6vw * 0.86 - max(32px, 5vh) - 6vh); border-radius: 4px; }
.op-foot .foot2 { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--g); margin-top: max(32px, 5vh); }
.op-foot .foot2 .k { text-align: right; line-height: 1.4; max-width: 30ch; }
.op-foot .foot2 .k b { display: block; font-weight: 400; color: var(--ink); }
/* a picture between the two words of the chapter's name (L015, the homepage's own grammar) */
.op-split { padding-top: 20vh; }
.op-split .row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 0.3em; align-items: center; padding: 0 var(--m); font-size: 9.6vw; }
.op-split .row .word { font-size: 1em; }
.op-split .row .mwin { position: relative; overflow: hidden; border-radius: 4px; background: #000; aspect-ratio: var(--ar, 2.4 / 1); }
.op-split .under { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 3vh var(--m) 0; align-items: start; }
.op-split .under .k { grid-column: 1 / 4; }
.op-split .under .say1 { grid-column: 9 / 13; }
/* the chapter's word upright, a spine that stays beside its pictures while they pass (L051) */
.upright { position: relative; --spine: calc(9.6vw * 0.92); }
.upright > .spine { position: sticky; top: 0; height: 100vh; height: 100svh; width: calc(var(--m) + var(--spine)); margin-bottom: -100vh; margin-bottom: -100svh; z-index: 3; pointer-events: none; display: flex; align-items: center; padding-left: var(--m); }
.upright > .spine .word { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; line-height: 0.86; }
.upright .rowp, .upright .split, .upright .grid, .upright .film-full .cap, .upright .beat > .k { padding-left: calc(var(--m) + var(--spine) + var(--g)); }
.upright .film-full .ph { margin-left: calc(var(--m) + var(--spine) + var(--g)); width: calc(100% - var(--m) - var(--spine) - var(--g)); }
@media (max-width: 760px) {
  .op-full .head, .op-split .under { display: block; }
  .op-full .head .say1, .op-split .under .say1 { margin-top: 12px; font-size: 16px; }
  .op-full .full { max-height: none; }
  .op-foot .ph { height: auto; aspect-ratio: var(--ar, 16 / 9); }
  .op-foot .foot2 { flex-direction: column; align-items: flex-start; gap: 12px; }
  .op-foot .foot2 .k { text-align: left; }
  .op-split .row { font-size: 15vw; grid-template-columns: 1fr; row-gap: 0.12em; }
  .op-split .row .word:last-child { justify-self: end; }
  .upright > .spine { position: relative; height: auto; width: auto; margin-bottom: 0; padding: 16vh var(--m) 0; display: block; }
  .upright > .spine .word { writing-mode: horizontal-tb; transform: none; }
  .upright .rowp, .upright .split, .upright .grid, .upright .film-full .cap, .upright .beat > .k { padding-left: var(--m); }
  .upright .film-full .ph { margin-left: 0; width: 100%; }
}
/* a long chapter name takes the whole width; its line goes under it */
.op-full .head .word.wide { grid-column: 1 / 13; }
.op-full .head .word.wide + .say1 { grid-column: 1 / 6; grid-row: 3; margin-top: 2vh; padding-bottom: 0; }
@media (max-width: 760px) { .op-full .head .word.wide { font-size: 11.5vw; } }


/* ---------- the visual audit, 2026-10-22 */
/* the credits under More sit on the page's margins, like every other block (they were inset twice) */
.more .credits { margin-left: 0; margin-right: 0; }
/* the More label is a label: book weight, as every other .k (the face has no bold, so the browser faked one) */
.more .k { font-weight: 400; }
/* the Photos spine: a rail the height of its chapter with the word sticky inside, so the word can never overhang the
   next section (the negative margin let it lie across More for a screen) */
@media (min-width: 761px) {
  .upright > .spine { position: absolute; top: 0; bottom: 0; left: 0; height: auto; margin: 0; display: block; }
  .upright > .spine .word { position: sticky; top: 0; height: 100vh; height: 100svh; text-align: center; }
}
/* on a phone a More row puts the year under the name, so the names keep their size */
@media (max-width: 760px) {
  .more li a { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
/* no widows in the small print */
.cap, figcaption, .credits div, .cred dd, .say1, .say p, .peekcap { text-wrap: pretty; }
/* the quote's opening mark hangs in the margin, so the words align with the page */
.quote { text-indent: -0.42em; }
/* photographs on paper sit on the paper: no dark hairline at their edge */
.paper .ph, .print .ph { background: transparent; }
/* the way on: once the next window has landed, the two links return as small plates on its film */
.next .go.landed { opacity: 1; visibility: visible; bottom: calc(var(--wb, 0px) + 16px); }
.next .go.landed a { border-bottom: 0; padding: 9px 13px 8px; border-radius: 6px; background: var(--bg); color: var(--ink); }
/* the next window is a link: it says so under the pointer */
.next .gw { cursor: pointer; }
.go a, .cred a, .more li a, .chrome a { transition: opacity 0.2s, color 0.2s; }
@media (hover: hover) {
  .go a:hover, .cred a:hover, .chrome a:hover { opacity: 0.62; }
  .next .gw:hover video { filter: brightness(1.06); }
}

/* ---------- the consistency audit, 2026-10-22 */
/* a phone: the homepage's margin and bar, so the name never jumps between pages; the name stays on one line, and with
   Previous in the row the chapter label gives way */
@media (max-width: 760px) {
  :root { --m: max(16px, 5.7vw); }
  .chrome { height: 58px; }
  .chrome .who { white-space: nowrap; }
  .chrome .here { display: none; }
  .chrome .out { gap: 18px; }
}
/* a narrow desktop: the chapter plates keep clear of Index */
@media (min-width: 761px) and (max-width: 1000px) { .chrome .ch .pn { display: none; } }
/* the face has book and medium only: the brief's line is medium, and the browser never fakes a bold */
.brief .line { font-weight: 500; }
body { font-synthesis: none; }
/* the More names not yet lit read quieter even on a saturated ground (large text, 3:1) */
.more li a:not(.lit) { color: var(--ink3, var(--ink2)); }
/* labels never leave one word alone either */
.k { text-wrap: pretty; }

/* the year beside a quiet More name keeps the small text's 5:1 */
.more li a:not(.lit) .y { color: var(--ink2); }
/* ?still: the opens and stages rest composed, as with reduced motion */
html.still .open, html.still .next, html.still .op-stage { height: auto; }
html.still .open .stage, html.still .next .stage, html.still .op-stage .pin { position: relative; }

/* the deal: a caption appears once its still has landed */
.deal-cap { opacity: 0; transition: opacity 0.35s var(--ease-smooth, ease); }
.deal-cap.dealt { opacity: 1; }
html.still .deal-cap { opacity: 1; }

/* the wordmark and the menu at the size of KG's reference (KG, 2026-10-22: Athletics' Nike page, 18px on a 1541px
   screen), so the nav reads as the site's voice rather than a caption */
@media (min-width: 761px) { .chrome { font-size: clamp(14px, 1.17vw, 18px); height: 68px; } }
@media (max-width: 760px) { .chrome { font-size: 15px; } }

/* every stacked headline shares the hero's leading: about 0.16 of a cap between lines (KG, 2026-10-22: "cut it down by 70%") */

/* =========================================================================================================
   QA pass 2 (2026-10-22, KG: "this isnt really fully professional yet"), held to the reference finish
   (kg-finish-refs/REFERENCE-FINISH.md): one short type scale, the name over what was done, square media, nothing
   set on a client's frame, and an ending that ends once. Shared by every case study.
   ========================================================================================================= */
/* one short scale: display (the open's name), the chapter word, the lede, body (18) and small (16, 15 on a phone);
   nothing under 15px. The chapter word always sits a clear step under the smallest open name (6.4vw) */
:root { --cap: 16px; --wd: 5.6vw; --lede: clamp(26px, 3.4vw, 64px); }
@media (max-width: 760px) { :root { --cap: 15px; --wd: 11vw; } }
body { font-size: 16px; }
.word { font-size: var(--wd); }
.op-split .row { font-size: var(--wd); }
.upright { --spine: calc(var(--wd) * 0.92); }
.op-door .door, .op-foot .ph { height: calc(100svh - 12vh - var(--wd) * 0.86 - max(32px, 5vh) - 6vh); }
.quote { font-size: var(--wd); }
.more .n { font-size: var(--lede); }
@media (max-width: 760px) {
  .op-door .door, .op-foot .ph { height: auto; }
  .op-full .head .word.wide { font-size: var(--wd); }
}

/* the name over what was done (KG rule 2): the discipline words in the name's face at 0.45 of it, under the window on
   its outer edge, so the name holds one margin and the film and the discipline the other (the homepage's GVC).
   v-two's right word is a name and v-lockup's is set already, so both keep theirs */
.comp:where(:not(.v-two, .v-lockup)) .r { font-size: 0.45em; flex-direction: row; flex-wrap: wrap; column-gap: 0.28em; justify-content: flex-end; align-items: flex-end; margin-top: 0.34em; }
@media (min-width: 761px) {
  .v-mid { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: repeat(var(--rows, 4), calc(var(--lh) * 1em)) auto; }
  .v-mid .l { grid-column: 1; grid-row: 1 / -1; } .v-mid .slot { grid-column: 2; grid-row: 1 / -2; } .v-mid .r { grid-column: 2; grid-row: -2 / -1; }
  .v-left { grid-template-rows: repeat(var(--rows, 5), calc(var(--lh) * 1em)) auto; }
  .v-left .slot { grid-column: 1; grid-row: 1 / -2; } .v-left .l { grid-column: 2; grid-row: 1 / -1; } .v-left .r { grid-column: 1; grid-row: -2 / -1; justify-content: flex-start; }
  .v-right { grid-template-rows: repeat(var(--rows, 4), calc(var(--lh) * 1em)) auto; }
  .v-right .l { grid-column: 1; grid-row: 1 / -1; } .v-right .slot { grid-column: 2; grid-row: 1 / -2; } .v-right .r { grid-column: 2; grid-row: -2 / -1; align-items: flex-end; }
  .v-stack { grid-template-rows: auto auto auto; }
  .v-stack .r { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  /* the stack is as wide as its window at the window's own shape, so the discipline ends on the window's edge */
  .v-stack { width: min(100%, calc(52vh * var(--ar, 16 / 9))); }
  .open .v-stack, .next .v-stack { right: auto; width: min(100% - 2 * var(--m), calc(52vh * var(--ar, 16 / 9))); }
  .v-stack .slot { max-height: none; }
  .v-pair { grid-template-columns: max-content 6.76em 2.14em; grid-template-rows: repeat(var(--rows, 4), calc(var(--lh) * 1em)) auto; font-size: 6.6vw; }
  .v-pair .l { grid-row: 1 / -1; } .v-pair .slot { grid-row: 1 / -2; } .v-pair .r { grid-column: 2 / -1; grid-row: -2 / -1; }
}

/* square media, no shadows: the work carries the frame */
.gw, .gridwin, .ph, .plan .tile, .mwin, .op-split .row .mwin, .op-foot .ph, .op-door .door, .stages .s1, .stages .s2, .op-stage .stage2, .phonebeat .handset { border-radius: 0; }
.op-stage .stage2, .paper .ph { box-shadow: none; }
.op-door .door { clip-path: inset(var(--door, 0%) 0 0 0); }

/* nothing set on a client's frame (QA-M25): a caption that lived inside its window sits under it */
.gridwin:has(> .cap), .mwin:has(> .cap) { overflow: visible; margin-bottom: calc(var(--cap) * 1.4 + 14px); }
.gridwin .cap, .mwin .cap { left: 0; top: calc(100% + 12px); bottom: auto; padding: 0; border-radius: 0; background: none; color: var(--ink2); }
.gridwin .cap b, .mwin .cap b { color: var(--ink); }

/* the concept mark is plain small text, never a chip (Emma still says Concept) */
.chip { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; font-size: inherit; line-height: inherit; color: var(--ink); }

/* the way on: once the next window has landed, the two links sit in the text row under it on the ground, never on
   its film (work.js stops the window a band short of the screen's foot) */
.next .go.landed { bottom: 22px; }
.next .go.landed a { padding: 4px 0; border-radius: 0; background: none; color: inherit; border-bottom: 1px solid currentColor; }
@media (max-width: 760px) { .comp:where(:not(.v-two, .v-lockup)) .r { margin-top: 0; } }
/* one rhythm: More opens at the beat's step, as part of its chapter */
.more { padding-top: 16vh; }