/* v4 after the reel: one ground whose colour fades with the scroll (v4.js), big pictures, big names. */
body { --g: 24px; }
.work, .brk, .more, .contact { 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; }
.kick { font-size: var(--cap); line-height: 1.35; color: var(--ink2); display: flex; align-items: center; gap: 10px; }
.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; }
.nw { white-space: nowrap; }

.proj { padding: 16vh var(--m) 0; }

/* the composition: the hero's grammar for every project, the client on one side, the work as the window, what was
   done on the other (KEVIN GRAND [window] IS ON BRAND); the window sits in a different place each time */
.comp { --lh: 0.95; display: grid; column-gap: 0.3em; grid-template-rows: repeat(var(--rows), calc(var(--lh) * 1em));
  font-family: var(--head); font-weight: var(--head-w); text-transform: uppercase; line-height: var(--lh); font-size: clamp(56px, 8.6vw, 220px); }
.comp .l, .comp .r { font-size: 1em; font-weight: var(--head-w); display: flex; flex-direction: column; grid-row: 1 / -1; min-width: 0; }
.comp .r { justify-content: flex-end; }
.comp .win { display: block; position: relative; overflow: hidden; background: #000; border-radius: 4px; grid-row: 1 / -1; margin: 0.05em 0 0.02em; min-height: 0; }
.comp .win img, .comp .win video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.comp .win .contain { object-fit: contain; }
.v-mid { grid-template-columns: max-content minmax(0, 1fr) max-content; font-size: clamp(52px, 7.4vw, 190px); }
.v-mid .l { grid-column: 1; } .v-mid .win { grid-column: 2; } .v-mid .r { grid-column: 3; align-items: flex-end; }
.v-left { grid-template-columns: minmax(0, 1fr) max-content; }
.v-left .win { grid-column: 1; } .v-left .l, .v-left .r { grid-column: 2; }
.v-right { grid-template-columns: max-content minmax(0, 1fr); }
.v-right .l, .v-right .r { grid-column: 1; } .v-right .win { grid-column: 2; }
.v-stack { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0.24em; }
.v-stack .l { grid-column: 1; grid-row: 1; } .v-stack .r { grid-column: 2; grid-row: 1; align-items: flex-end; }
.v-stack .win { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 9; }

/* the words under it: the number, one line, the facts and the link */
.info { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; margin-top: 26px; }
.info .kick { grid-column: 1 / 3; }
.info .line { grid-column: 3 / 8; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.35; max-width: 34ch; }
.info .meta { grid-column: 8 / 12; font-size: var(--cap); line-height: 1.5; color: var(--ink2); max-width: 46ch; }
.info .go { grid-column: 8 / 12; grid-row: 2; justify-self: start; margin-top: 14px; font-size: var(--cap); padding: 4px 0; border-bottom: 1px solid currentColor; }

/* the breaks: Kevin and the process, set as big as the names */
.brk { padding: 22vh var(--m) 8vh; }
.big { font-family: var(--head); font-weight: var(--head-w); text-transform: uppercase; line-height: 0.9; font-size: clamp(56px, 9.6vw, 230px); }
.brk .say { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.3; max-width: 32ch; margin: 6vh 0 0 calc(50% + var(--g) / 2); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin-top: 8vh; border-top: 1px solid var(--rule); padding-top: 22px; }
.steps .n { font-size: var(--cap); color: var(--ink2); }
.steps h3 { font-family: var(--head); font-weight: var(--head-w); text-transform: uppercase; font-size: clamp(34px, 3.4vw, 64px); line-height: 0.95; margin-top: 18px; }
.steps p { margin-top: 12px; max-width: 30ch; color: var(--ink2); }

.more { padding: 18vh var(--m) 6vh; }
.index { list-style: none; margin-top: 18px; border-top: 1px solid var(--rule); }
.index li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--g); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.index .n { font-family: var(--head); font-weight: var(--head-w); text-transform: uppercase; font-size: clamp(30px, 3.2vw, 54px); line-height: 1; }
.index .d { color: var(--ink2); }
.index .y { color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }

.contact { padding: 22vh var(--m) 28px; min-height: 100vh; display: flex; flex-direction: column; }
.contact .big { font-size: clamp(64px, 14vw, 340px); }
.ask { display: flex; align-items: center; gap: 28px; margin-top: 6vh; }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 1px 22px 0; border-radius: 24px; background: var(--ink); color: var(--bg); font-weight: 500; }
.mail { padding: 4px 0; border-bottom: 1px solid currentColor; }
.foot { margin-top: auto; padding-top: 12vh; display: flex; justify-content: space-between; font-size: var(--cap); color: var(--ink2); }

@media (max-width: 760px) {
  body { --g: 14px; }
  .proj { padding-top: 12vh; }
  .comp, .v-mid, .v-left, .v-right, .v-stack { display: flex; flex-direction: column; font-size: 15vw; }
  .comp .r { align-items: flex-end; margin-top: 0.08em; }
  .comp .win { width: 100%; aspect-ratio: 16 / 9; margin: 0.38em 0 0.3em; }
  .v-stack .win { aspect-ratio: 16 / 9; }
  .info { display: block; }
  .info .line { margin-top: 10px; }
  .info .meta { margin-top: 10px; }
  .brk .say { margin-left: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .index li { grid-template-columns: minmax(0, 1fr) auto; }
  .index .d { grid-column: 1 / -1; grid-row: 2; }
  .ask { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* two windows in one line: Built before they exist, Chuda and DCL */
.v-pair { grid-template-columns: max-content var(--cols, 1fr 1fr) max-content; column-gap: 0.22em; font-size: clamp(52px, 7vw, 180px); }
.v-pair .l { grid-column: 1; } .v-pair .win { grid-column: 2; } .v-pair .w2 { grid-column: 3; } .v-pair .r { grid-column: 4; align-items: flex-end; }

/* off the clock: the explorations, square and big */
.lab { padding: 22vh var(--m) 6vh; }
.lab .say { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.3; max-width: 32ch; margin-top: 4vh; }
.lab .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin-top: 8vh; }
.lab .tiles figure { margin: 0; }
.lab .tiles .win { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: #111; }
.lab .tiles video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.lab figcaption { font-size: var(--cap); color: var(--ink2); margin-top: 10px; }
.lab .meta { margin-top: 28px; font-size: var(--cap); color: var(--ink2); }
@media (max-width: 760px) {
  .comp .w2 { width: 100%; aspect-ratio: 4 / 5; margin: 0 0 0.14em; }
  .lab .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* two 16:9 windows under one line of words: Built before they exist */
.v-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--g); row-gap: 0.24em; font-size: clamp(52px, 8vw, 200px); }
.v-two .l { grid-column: 1; grid-row: 1; flex-direction: row; gap: 0.25em; }
.v-two .r { grid-column: 2; grid-row: 1; flex-direction: row; justify-content: flex-end; gap: 0.25em; }
.v-two .win { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 9; }
.v-two .w2 { grid-column: 2; grid-row: 2; }
@media (max-width: 760px) {
  .v-two .l, .v-two .r { flex-direction: column; gap: 0; }
  .comp .w2 { aspect-ratio: 16 / 9; }
  #product .w2 { aspect-ratio: 4 / 5; }
}

/* ---------- each project's own composition (the moves are in v4-moves.js) */
.ch { display: inline-block; will-change: transform; }

/* 03 Good Vibes Cantina: the logo itself is the picture, by day on cream and by night in neon */
/* the window plays Shift Change whole, at its own 16:9, so no client type is ever cut; its cream sits on a deeper cream */
#gvc .comp .win { aspect-ratio: 16 / 9; align-self: center; }
#gvc.night .comp .l .ln:nth-child(1) > span { color: #4FD18B; text-shadow: 0 0 0.16em rgba(79, 209, 139, 0.5); }
#gvc.night .comp .l .ln:nth-child(2) > span { color: #FF6168; text-shadow: 0 0 0.16em rgba(255, 97, 104, 0.5); }
#gvc.night .comp .l .ln:nth-child(3) > span { color: #FFB547; text-shadow: 0 0 0.16em rgba(255, 181, 71, 0.45); }

/* 04 Made it Grand: KG's lockup, KEVIN / GRAND IS ON, with the window in the word's place under line 2 */
.v-lockup { display: grid; grid-template-columns: max-content max-content; grid-template-rows: auto auto; column-gap: 0.3em; align-items: end; font-size: clamp(56px, 9.4vw, 230px); }
.v-lockup .l { grid-column: 1; grid-row: 1; }
.v-lockup .win { grid-column: 1; grid-row: 2; width: 100%; aspect-ratio: 16 / 9; margin: 0.22em 0 0; }
.v-lockup .r { grid-column: 2; grid-row: 2; }
.v-lockup .sp { display: inline-block; width: 0.258em; }

/* 06 Built before they exist: wireframe to render (v4-moves.js scrubs --fill and --clay) */
.wire { --fill: 1; --clay: 0; }
/* the outlined words fill as the section comes in, and are whole before they reach reading height (v4-moves.js) */
.wire .l .ln > span, .wire .r .ln > span, .wire .what .ln > span { color: color-mix(in srgb, var(--ink) calc(var(--fill) * 100%), transparent); -webkit-text-stroke: 0.014em var(--ink); }
.wire .win img, .wire .win video { filter: grayscale(var(--clay)) contrast(calc(1 - var(--clay) * 0.35)) brightness(calc(1 + var(--clay) * 0.22)); }

/* 10 Paddock x Lucciola: three stills dealt from behind the film */
#lucciola .comp .win { position: relative; z-index: 2; }
#lucciola .deal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); margin-top: calc(var(--g) * 2); position: relative; z-index: 1; }
#lucciola .deal img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; will-change: transform; }

/* 12 Off the clock on a desktop: a bench slid sideways, pinned while it passes */
@media (min-width: 761px) {
  .lab.bench { padding-top: 9vh; min-height: 100vh; overflow: hidden; }
  .lab.bench .tiles { display: flex; gap: var(--g); width: max-content; margin-top: 5vh; }
  .lab.bench .tiles figure { width: min(34vw, 50vh); flex: none; }
}
@media (max-width: 760px) {
  .v-lockup { grid-template-columns: max-content; font-size: 15vw; }
  .v-lockup .r { grid-column: 1; grid-row: 3; justify-self: end; margin-top: 0.1em; }
  #lucciola .deal { gap: 8px; }
}

/* ---------- third pass */
/* 04 the window as the lockup's word: right-aligned under GRAND IS ON, the ident's own 3D word filling it */
.v-lockup { font-size: clamp(64px, 12.6vw, 300px); }
.v-lockup .win.slot { width: 64%; aspect-ratio: 2.7 / 1; justify-self: end; margin: 0.12em 0 0; }
.v-lockup .slot video { position: absolute; inset: auto; width: 227%; height: auto; left: -74.85%; top: -201.6%; object-fit: fill; max-width: none; }
/* 06 two clients over their windows, what was done under both */
.v-two { font-size: clamp(30px, 4.6vw, 110px); }
.v-two .what { grid-column: 1 / -1; grid-row: 3; font-size: 2.05em; margin-top: 0.08em; display: flex; flex-direction: column; }

/* 07 the films at their own shapes: Chuda 16:9, DCL 9:16 (four lines are 3.8em tall) */
#product .v-pair { grid-template-columns: max-content 6.76em 2.14em max-content; justify-content: space-between; font-size: clamp(40px, 6vw, 150px); }
/* 09 the road box itself is 2.39:1; the move only widens it */
#rally .v-stack .win { aspect-ratio: 2.39 / 1; }
/* 10 the deal stays under the words */
#lucciola .comp .l, #lucciola .comp .r { position: relative; z-index: 3; }
/* 11 a cinema band, edge to edge */
.v-bleed { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; grid-template-rows: auto auto auto; font-size: clamp(56px, 9vw, 220px); }
.v-bleed .l { grid-column: 1; grid-row: 1; flex-direction: row; gap: 0.25em; }
.v-bleed .win { grid-column: 1 / -1; grid-row: 2; width: 100vw; margin: 0.2em calc(-1 * var(--m)); aspect-ratio: 21 / 9; border-radius: 0; }
.v-bleed .r { grid-column: 2; grid-row: 3; align-items: flex-end; }
@media (max-width: 760px) {
  .v-lockup .win.slot { width: 64%; align-self: flex-end; }
  .v-two .what { font-size: 1.3em; }
  #product .v-pair { font-size: 15vw; }
  .v-bleed .win { width: calc(100% + 2 * var(--m)); margin-left: calc(-1 * var(--m)); aspect-ratio: 16 / 9; }
}
/* fit fixes: what was done sits under the lockup's word; the product line fits the width; the rally's words take two rows */
.v-lockup .r { grid-column: 1; grid-row: 3; justify-self: end; font-size: 0.42em; margin-top: 0.25em; }
#product .v-pair { font-size: clamp(36px, 5.4vw, 140px); }
#rally .v-stack .r { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin-top: 0.12em; }
.v-bleed .win { aspect-ratio: 16 / 9; }
/* air between big names and their windows */
.v-two { row-gap: 0.42em; }
.v-two .what { margin-top: 0.12em; }
.v-bleed .win { margin-top: 0.24em; margin-bottom: 0.34em; }

/* about: KEVIN [portrait] GRANDISON, the hero's grammar once more, with Kevin in the window. Placeholders (.ph,
   [data-placeholder]) are dashed so they read as gaps to fill; site/tools/build.py refuses to ship while any remain. */
.about .me { margin-top: 16vh; }
.portrait .g { position: absolute; inset: -40%; will-change: transform;
  background: radial-gradient(60% 70% at 35% 45%, #B58F65 0%, rgba(181,143,101,0) 70%), radial-gradient(60% 70% at 75% 65%, #1F8F61 0%, rgba(31,143,97,0) 70%), #0E0D0C; }
/* Kevin's portrait: high key, white ground; the window keeps his face and shoulders at any shape */
.portrait { background: #fff; }
.portrait img { object-position: 52% 42%; }
.ph-tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; font: 400 var(--cap)/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: #F2F0EC; }
.ph { text-decoration: underline dashed 1px; text-underline-offset: 0.24em; color: var(--ink2); }
.facts { display: grid; row-gap: 8px; }
.facts div { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); column-gap: var(--g); }
.facts dd { color: var(--ink); }
@media (max-width: 760px) {
  .about .me { margin-top: 10vh; }
  .about .portrait { aspect-ratio: 1 / 1; }
  .facts { margin-top: 14px; }
}
/* Fraunces: the key run lifts letters 0.24em, so its line masks keep that much air above */
#fraunces .ln { padding-top: 0.3em; margin-top: -0.3em; }
/* Good Vibes Cantina runs from day to night inside its own section: room below it so the night holds as long as the day */
#gvc { padding-bottom: 30vh; }

/* ---------- the visual audit, 2026-10-22 (home) */
/* Paddock's window keeps the P mark whole: the frame sits on the mark's side of the cover */
#paddock .win img { object-position: 64% 50%; }
/* the reel caption: medium, never a synthesised bold */
.hero .cap b { font-weight: 500; }
/* no widows in the lines and facts */
.info .line, .info .meta, .facts dd, .say { text-wrap: pretty; }
@media (min-width: 761px) {
  /* the bench ends on three whole tiles, none cut by the screen's edge */
  .lab.bench .tiles figure { width: calc((100vw - 2 * var(--m) - 2 * var(--g)) / 3); }
  /* the bench shows through its rail, the page's margins: a tile enters and leaves at the margin, never cut by the screen's edge */
  .lab.bench .rail { overflow: hidden; }
  .lab.bench + .more { padding-top: 9vh; }
}
@media (max-width: 760px) {
  /* a phone's names share one scale; the process heading takes two lines ("How it / comes together") so it sets larger */
  #product .v-pair { font-size: 15vw; }
  .mbr { display: inline; }
  /* Good Vibes Cantina's night has room to be seen */
  #gvc { padding-bottom: 45vh; }
}
@media (min-width: 761px) { .mbr { display: none; } }
/* ?still and reduced motion: the hero rests composed, and there's no cue to scroll for a reel that doesn't grow */
.still .hero { height: auto; }
.still .hero .stage { position: relative; }
.still .hero .cue { display: none; }
/* hover: the nav, the case-study links and the contact answer the pointer */
@media (hover: hover) {
  .chrome a, .go, .mail, .btn { transition: opacity 0.2s, background-color 0.2s; }
  .chrome a:hover, .go:hover, .mail:hover { opacity: 0.62; }
  .btn:hover { background: color-mix(in srgb, var(--ink) 84%, var(--bg)); }
}
/* About without a line of its own yet: the facts take the line's place */
.about .info .facts { grid-column: 3 / 9; }