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; }


.comp { --lh: 0.84; 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; }


.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; }


.brk { padding: 22vh var(--m) 8vh; }
.big { font-family: var(--head); font-weight: var(--head-w); text-transform: uppercase; line-height: 0.84; 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; }
}


.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; }


.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); }
}


.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; }
}


.ch { display: inline-block; will-change: transform; }



#gvc .comp .win { aspect-ratio: 16 / 9; }
#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); }



.wire { --fill: 1; --clay: 0; }

.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)); }


#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; }


@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) {
  #lucciola .deal { gap: 8px; }
}



.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; }


#product .v-pair { grid-template-columns: max-content 6.76em 2.14em max-content; justify-content: space-between; font-size: clamp(40px, 6vw, 150px); }

#rally .v-stack .win { aspect-ratio: 2.39 / 1; }

#lucciola .comp .l, #lucciola .comp .r { position: relative; z-index: 3; }

.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-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; }
}

#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; }

.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 .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; }

.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 .ln { padding-top: 0.3em; margin-top: -0.3em; }

#gvc { padding-bottom: 30vh; }



#paddock .win img { object-position: 64% 50%; }

.hero .cap b { font-weight: 500; }

.info .line, .info .meta, .facts dd, .say { text-wrap: pretty; }
@media (min-width: 761px) {
  
  .lab.bench .tiles figure { width: calc((100vw - 2 * var(--m) - 2 * var(--g)) / 3); }
  
  .lab.bench .rail { overflow: hidden; }
  .lab.bench + .more { padding-top: 9vh; }
}
@media (max-width: 760px) {
  
  #product .v-pair { font-size: 15vw; }
  .mbr { display: inline; }
  
  #gvc { padding-bottom: 45vh; }
}
@media (min-width: 761px) { .mbr { display: none; } }

.still .hero { height: auto; }
.still .hero .stage { position: relative; }
.still .hero .cue { display: none; }

@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 .info .facts { grid-column: 3 / 9; }



#gvc.night .comp .l.up .ln, html.still #gvc.night .comp .l .ln { overflow: visible; }


.lockup .lk { display: inline-grid; grid-template-columns: max-content max-content; grid-template-rows: repeat(3, 0.84em); column-gap: 0.72em; line-height: 0.84; }
.lockup .k { grid-column: 1; grid-row: 1; } .lockup .g { grid-column: 1; grid-row: 2; }
.lockup .io { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; }
.lockup .b { grid-column: 2; grid-row: 3; }


@media (min-width: 761px) { .chrome { font-size: clamp(15px, 1.17vw, 18px); height: 68px; } }
@media (max-width: 760px) { .chrome { font-size: 15px; } }


.proj .info .line { grid-column: 1 / 7; }





.proj .comp { font-size: var(--t-display); }
.proj .info { margin-top: clamp(26px, 2.8vw, 48px); }
.proj .comp:not(.v-two) .r { font-size: 0.45em; margin-top: 0.5em; }
.proj .v-bleed .win { margin-top: 0.34em; }
.proj .comp .win, .lab .tiles .win, #lucciola .deal img, .v-bleed .win { border-radius: 0; }
@media (min-width: 761px) {
  
  .proj .comp:not(.v-two):not(.v-bleed):not(.v-stack) .win { grid-row: 1 / -1; align-self: stretch; aspect-ratio: 16 / 9; width: auto; }
  .proj .comp:not(.v-two) .r { grid-row: -1 / span 1; }
  
  .proj .v-mid { grid-template-columns: max-content minmax(0, 1fr); }
  .proj .v-mid .win { grid-column: 2; justify-self: end; }
  .proj .v-mid .r { grid-column: 2; align-items: flex-end; }
  
  .proj .v-right .win { grid-column: 2; justify-self: end; }
  .proj .v-right .r { grid-column: 2; align-items: flex-end; }
  
  .proj .v-left { grid-template-columns: minmax(0, 1fr) max-content; }
  .proj .v-left .win { grid-column: 1; justify-self: start; }
  .proj .v-left .l { grid-column: 2; align-items: flex-end; }
  .proj .v-left .r { grid-column: 1; align-items: flex-start; }
  
  .proj .v-stack .r { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
  
  .proj .v-bleed { font-size: var(--t-display); }
  
  #product .v-pair { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; justify-content: stretch; font-size: var(--t-display); }
  #product .v-pair .win { grid-column: 3; aspect-ratio: 16 / 9; }
  #product .v-pair .w2 { grid-column: 4; aspect-ratio: 9 / 16; }
  #product .v-pair .r { grid-column: 3 / -1; justify-self: end; align-items: flex-end; }
}

.proj .v-two { font-size: calc(var(--t-display) * 0.42); }
.v-two .what { font-size: 2.381em; }
@media (max-width: 760px) {
  .proj .comp:not(.v-two) { font-size: 15vw; }
  .proj .comp:not(.v-two) .r { margin-top: 0; }
  
  .v-two .l { order: 1; } .v-two .win { order: 2; } .v-two .r { order: 3; margin-top: 0.3em; align-items: flex-start; } .v-two .w2 { order: 4; } .v-two .what { order: 5; margin-top: 0.3em; }
}


.big { font-size: var(--t-display); }
.steps h3, .index .n { font-size: var(--t-head); }
.info .line, .brk .say, .lab .say { font-size: var(--t-lede); line-height: 1.32; }
.index .d, .steps p { font-size: var(--t-small); }

.chip { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; font-size: inherit; }

.about .me .win { border-radius: 0; }

.ask { gap: 0.6em 1.4em; flex-wrap: wrap; font-size: var(--t-lede); }
.ask .btn { height: auto; padding: 4px 0; border-radius: 0; background: none; color: var(--ink); font-weight: 400; border-bottom: 1px solid currentColor; }
@media (hover: hover) { .ask .btn:hover { background: none; opacity: 0.62; } }
@media (max-width: 760px) { .ask { gap: 14px; } }




body { background: transparent; }


.process .say { margin-left: 0; margin-top: 4vh; color: var(--ink2); }
.pscene { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; height: 100vh; height: 100svh; margin-top: 4vh; }
.psteps { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 3.2vh; margin: 0; padding: 0; border: 0; }
.psteps li { position: relative; padding-left: 18px; }
.psteps li::before { content: ''; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 2px; background: var(--rule); }
.psteps li::after { content: ''; position: absolute; left: 0; top: 0.3em; width: 2px; height: calc((100% - 0.6em) * var(--fill, 0)); background: var(--ink); }
.psteps button { all: unset; cursor: pointer; display: block; }
.psteps button:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.psteps h3 { margin: 0; font-size: clamp(30px, 2.9vw, 56px); color: var(--ink2); transition: color 0.35s, transform 0.5s var(--ease-default, ease); transform-origin: 0 50%; }
.psteps li.on h3 { color: var(--ink); }
.psteps p { margin-top: 10px; max-width: 34ch; color: var(--ink2); display: grid; grid-template-rows: 0fr; opacity: 0; transition: opacity 0.35s, grid-template-rows 0.5s var(--ease-default, ease); }
.psteps li.on p { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .psteps li:not(.on) button:hover h3 { color: var(--ink); transform: translateX(6px); } }
.pstage { grid-column: 5 / -1; position: relative; aspect-ratio: 16 / 9; max-height: 78vh; justify-self: stretch; background: #111; border-radius: 4px; overflow: hidden; color: #F7F3EF; }

.pp { position: absolute; inset: 0; background: #000; will-change: clip-path; }
.pp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-seam { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; margin-left: -0.5px; background: #F7F3EF; box-shadow: 0 0 18px 2px rgba(247, 243, 239, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s; }

.p-tag { position: absolute; left: 20px; bottom: 16px; height: calc(1.4em + 10px); width: 60%; overflow: hidden; font-size: var(--cap); line-height: 1.4; }
.p-tag span { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 5px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #F7F3EF; transform: translateY(110%); opacity: 0; transition: transform 0.5s cubic-bezier(.2, .7, .1, 1), opacity 0.3s; }
.p-tag span.on { transform: none; opacity: 1; transition-delay: 0.35s; }
@media (max-width: 760px) {
  .pscene { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
  .pstage { width: 100%; max-height: none; order: -1; }
  .psteps { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .psteps li { padding-left: 0; padding-bottom: 8px; }
  .psteps li::before, .psteps li::after { top: auto; bottom: 0; left: 0; height: 2px; width: 100%; }
  .psteps li::after { width: calc(100% * var(--fill, 0)); height: 2px; }
  .psteps h3 { font-size: 24px; }
  .psteps p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   
}
.pnote { display: none; }
@media (max-width: 760px) { .pnote { display: block; min-height: 4.6em; max-width: 36ch; color: var(--ink2); transition: opacity 0.3s; } }

.p-static .pscene { height: auto; align-items: start; }
.p-static .psteps p { opacity: 1; }
.p-static .psteps h3 { color: var(--ink); }
@media (max-width: 760px) { .p-static .psteps { flex-direction: column; } .p-static .psteps p { position: static; width: auto; height: auto; clip-path: none; } .p-static .pnote { display: none; } }