/* vko.media light, final layer for the index site */
:root {
  --bg: #FAFAFA;
  --surface: #F0F0EF;
  --ink: #0D0D0D;
  --ink-2: #3A3A3A;
  --muted: #6B6B6B;
  --faint: rgb(13 13 13 / .1);
  --accent: oklch(0.72 0.18 38);
  --accent-ink: oklch(0.58 0.19 38);
  --cyan: #22D3EE;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.32, .72, 0, 1);
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --top: max(16px, env(safe-area-inset-top));
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html, body { background: var(--bg); overflow-x: clip; }
body { margin: 0; color: var(--ink); font: 400 16px/24px var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.lock { overflow: hidden; }
::selection { background: var(--ink); color: var(--bg); }
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; touch-action: manipulation; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; corner-shape: superellipse(1.6); }
[tabindex="-1"]:focus { outline: none; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 300; padding: 8px 16px; background: var(--ink); color: var(--bg); border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
.muted { color: var(--muted); }
section[id] { scroll-margin-top: 96px; }

/* liquid glass: one material for every floating surface */
.glass {
  background: rgb(250 250 250 / .58);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(13 13 13 / .04), 0 8px 24px rgb(13 13 13 / .08);
  backdrop-filter: blur(14px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
}
/* Chromium can refract the backdrop through an SVG displacement map */
.lg .glass { backdrop-filter: url(#lg-refract) blur(6px) saturate(1.9); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 220ms var(--ease), scale 160ms ease-out;
}
.btn .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--ink); }
.btn .ico svg { transition: transform 260ms var(--ease); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn:active, .chip-btn:active, .icon-btn:active, .item > h3 > button:active, .card:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #262626; }
  .btn.ghost:hover { background: #E6E6E4; }
  .btn:hover .ico svg { transform: rotate(45deg); }
}
.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; flex: none;
  border: 1px solid var(--faint); border-radius: 999px; background: rgb(250 250 250 / .85); color: var(--ink); cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color 220ms var(--ease), scale 160ms ease-out;
}
.icon-btn.sm { width: 40px; height: 40px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: #fff; } }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--faint); border-radius: 999px; background: none; font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; transition: background-color 220ms var(--ease), color 220ms var(--ease), scale 160ms ease-out; }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-btn sup { font-size: 11px; color: var(--muted); }
.chip-btn[aria-pressed="true"] sup { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .chip-btn:hover:not([aria-pressed="true"]) { background: var(--surface); } }

/* info "i": short technical notes live here, not in the copy */
.i-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; border: 1px solid var(--faint); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1; font-weight: 600; font-style: normal; cursor: help; vertical-align: middle; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.i-btn:hover, .i-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tip {
  position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 32px)); padding: 16px; border-radius: 22px;
  color: var(--ink); font-size: 14px; line-height: 20px; text-align: left;
  opacity: 0; translate: 0 8px; transition: opacity 200ms var(--ease), translate 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete; corner-shape: superellipse(1.6); }
.tip:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .tip:popover-open { opacity: 0; translate: 0 8px; } }
.tip b { display: block; margin-bottom: 4px; font-weight: 600; }

/* hint chip: tells what to do, fades once used */
.hint { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); transition: opacity 400ms var(--ease), translate 400ms var(--ease); }
.hint svg { flex: none; }
.hint.gone { opacity: 0; translate: 0 6px; pointer-events: none; }
.hint .swipe { animation: swipe 1.6s var(--ease) 3; }
@keyframes swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }

/* progress and cursor */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 90; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor] { cursor: none; }
.cursor .dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 999px; background: var(--ink); transition: transform 260ms var(--ease), background-color 200ms var(--ease), opacity 200ms var(--ease); }
.cursor .tag { position: absolute; left: 0; top: 0; translate: -50% -50%; scale: .7; opacity: 0; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; transition: scale 260ms var(--ease), opacity 180ms var(--ease); }
.cursor.on-dark .dot { background: #FAFAFA; }
.cursor.on-dark .tag { background: #FAFAFA; color: var(--ink); }
.cursor.link .dot { transform: scale(3.2); background: rgb(13 13 13 / .12); }
.cursor.on-dark.link .dot { background: rgb(250 250 250 / .2); }
.cursor.label .dot { transform: scale(0); }
.cursor.label .tag { scale: 1; opacity: 1; }
.cursor.hide .dot { opacity: 0; }
.cursor.down .dot { transform: scale(.6); }

/* nav */
.nav { position: fixed; top: var(--top); left: var(--gutter); right: var(--gutter); z-index: 120; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.nav > * { pointer-events: auto; }
.pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.pill a, .pill button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.pill .logo { gap: 0; letter-spacing: -.02em; }
.pill .logo i { font-style: normal; color: var(--accent); }
.pill a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.pill .hello { background: var(--accent); color: var(--ink); }
.pill .menu-btn { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .pill a:not([aria-current="true"]):not(.hello):hover { background: rgb(13 13 13 / .07); } }
.burger { position: relative; width: 16px; height: 10px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms var(--ease); }
.burger::before { top: 0; }
.burger::after { bottom: 0; }
.menu-open .burger::before { transform: translateY(4px) rotate(45deg); }
.menu-open .burger::after { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 860px) { .pill .opt { display: none; } }

/* menu */
.menu {
  position: fixed; inset: 0; z-index: 110; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: end;
  padding: calc(var(--top) + 88px) var(--gutter) max(32px, env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 340ms var(--ease-io), visibility 0ms 340ms;
}
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path 480ms var(--ease-io), visibility 0ms; }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu ol li { overflow: hidden; border-top: 1px solid var(--faint); }
.menu ol li a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 10px 0; font-size: clamp(44px, 7.5vw, 112px); line-height: 1; font-weight: 500; letter-spacing: -.05em; text-decoration: none; transform: translateY(105%); transition: transform 480ms var(--ease), color 200ms var(--ease); }
.menu-open .menu ol li a { transform: none; transition-delay: calc(var(--i) * 40ms + 100ms), 0ms; }
.menu ol li a .arr { font-size: .4em; opacity: 0; transform: translateX(-12px); transition: opacity 220ms var(--ease), transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .menu ol li a:hover { color: var(--accent-ink); } .menu ol li a:hover .arr { opacity: 1; transform: none; } }
.menu aside { display: grid; gap: 28px; opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease), transform 400ms var(--ease); }
.menu-open .menu aside { opacity: 1; transform: none; transition-delay: 260ms; }
.menu aside h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.menu aside ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 18px; line-height: 28px; }
.u { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .u:hover { background-size: 100% 1px; } }
@media (max-width: 860px) { .menu { grid-template-columns: 1fr; gap: 32px; align-items: start; } .menu ol li a { font-size: clamp(40px, 13vw, 72px); } }

/* hover preview */
.peek { position: fixed; left: 0; top: 0; z-index: 115; width: 220px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; pointer-events: none; opacity: 0; scale: .94; transition: opacity 200ms var(--ease), scale 220ms var(--ease); box-shadow: 0 24px 64px rgb(13 13 13 / .22); background: var(--surface); corner-shape: superellipse(1.6); }
.peek.wide { width: 340px; }
.peek img, .peek video { width: 100%; height: 100%; object-fit: cover; }
.peek.on { opacity: 1; scale: 1; }
@media (hover: none) { .peek { display: none; } }

/* hero: the reel printed as halftone, a lens shows the footage */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.hero canvas, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .poster { filter: grayscale(1) contrast(1.1); opacity: .35; }
.hero canvas { opacity: 0; transition: opacity 900ms var(--ease); touch-action: pan-y; }
.hero canvas.on { opacity: 1; }
.hero-ui { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--top) + 72px) var(--gutter) max(28px, env(safe-area-inset-bottom)); pointer-events: none; }
.hero-ui a, .hero-ui button { pointer-events: auto; }
.halo { text-shadow: 0 0 8px var(--bg), 0 0 18px var(--bg), 0 0 32px var(--bg); }
.corners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; font-size: 14px; line-height: 20px; }
.corners b { display: block; font-weight: 600; }
.corners span { color: var(--ink-2); }
.corners > * { opacity: 0; translate: 0 12px; animation: in 600ms var(--ease) forwards; animation-delay: calc(var(--k) * 60ms + 600ms); }
.corners a { text-decoration: none; }
.corners .live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: #22C55E; vertical-align: 1px; animation: blink 1.4s var(--ease) 2; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes in { to { opacity: 1; translate: 0 0; } }
.mega { align-self: end; margin: 0; font-size: clamp(64px, 15vw, 270px); line-height: .8; font-weight: 500; letter-spacing: -.07em; }
.mega .ln { display: block; overflow: hidden; padding: 0 .06em .04em 0; }
.mega .ch { display: inline-block; transform: translateY(105%); animation: up 750ms var(--ease) forwards; animation-delay: calc(var(--i) * 22ms + 80ms); }
@keyframes up { to { transform: none; } }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 20px; }
.cue { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 600; transition: opacity 300ms var(--ease); }
.cue i { position: relative; width: 1px; height: 40px; background: var(--faint); overflow: hidden; }
.cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: top; animation: cue 1.6s cubic-bezier(.77, 0, .175, 1) 3 1s both; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.scrolled .cue { opacity: 0; }
@media (max-width: 760px) {
  .mega { font-size: clamp(56px, 22vw, 270px); }
  .corners { grid-template-columns: 1fr 1fr; }
  
}

/* manifesto */
.manifesto { padding: 140px var(--gutter) 120px; }
.manifesto p { margin: 0; max-width: 1240px; font-size: clamp(32px, 5vw, 76px); line-height: 1.04; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.manifesto .w { color: rgb(13 13 13 / .14); transition: color 300ms var(--ease); }
.manifesto .w.on { color: var(--ink); }
.vpill { display: inline-block; width: 1.5em; height: .8em; margin: 0 .08em; border-radius: 999px; overflow: hidden; vertical-align: -.04em; background: var(--surface); transform: scale(.6); opacity: 0; transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.vpill.on { transform: none; opacity: 1; }
.vpill video, .vpill img { width: 100%; height: 100%; object-fit: cover; }

/* section heads */
.sec { padding: 40px var(--gutter) 80px; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.head h2 { margin: 0; font-size: clamp(48px, 8vw, 128px); line-height: .85; font-weight: 500; letter-spacing: -.06em; text-wrap: balance; }
.head p { margin: 12px 0 0; max-width: 520px; color: var(--ink-2); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* index */
.thead, .item > h3 > button { display: grid; grid-template-columns: 56px minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) 120px 40px; gap: 16px; align-items: center; }
.thead { padding: 12px 0; border-bottom: 1px solid var(--ink); font-size: 14px; line-height: 20px; color: var(--muted); font-weight: 500; }
.list { list-style: none; margin: 0; padding: 0; }
.item { position: relative; border-bottom: 1px solid var(--faint); scroll-margin-top: 92px; }
.item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.item > h3 { margin: 0; font: inherit; }
.item > h3 > button { width: 100%; padding: 20px 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 18px; line-height: 28px; transition: scale 160ms ease-out; }
.item .n { color: var(--muted); font-size: 14px; }
.item .t { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; transition: transform 250ms var(--ease); }
.item .t small { display: none; }
.item .k, .item .r { color: var(--ink-2); }
.item .y { text-align: right; color: var(--muted); font-size: 14px; }
.item .pm { position: relative; justify-self: end; width: 40px; height: 40px; border-radius: 999px; background: var(--surface); transition: background-color 220ms var(--ease), transform 250ms var(--ease), color 220ms var(--ease); }
.item .pm::before, .item .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform 250ms var(--ease); }
.item .pm::after { transform: rotate(90deg); }
.item.open .pm { transform: rotate(180deg); background: var(--ink); color: var(--bg); }
.item.open .pm::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) {
  .item:hover::after { transform: none; }
  .item > h3 > button:hover .t { transform: translateX(12px); }
  .item > h3 > button:hover .pm { background: var(--accent); }
}
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease-io); }
.item.open .drawer { grid-template-rows: 1fr; }
.drawer > div { overflow: hidden; }
.drawer-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; padding: 8px 0 40px; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.item.open .drawer-in { opacity: 1; transform: none; transition-delay: 80ms; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { padding: 12px 0; border-top: 1px solid var(--faint); text-wrap: pretty; }
.drawer .actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.strip-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.strip-tools .count { font-size: 14px; line-height: 20px; color: var(--muted); }
.strip-tools .count b { color: var(--ink); font-weight: 600; }
.mini { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0; padding-bottom: 8px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mini.at-end { -webkit-mask-image: none; mask-image: none; }
.mini::-webkit-scrollbar { display: none; }
.mini.dragging { scroll-snap-type: none; }
.mini.dragging .card { pointer-events: none; }
@media (max-width: 860px) {
  .thead { display: none; }
  .item > h3 > button { grid-template-columns: minmax(0, 1fr) 40px; }
  .item .n, .item .k, .item .r, .item .y { display: none; }
  .item .t small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--muted); }
  .drawer-in { grid-template-columns: 1fr; gap: 20px; }
  .drawer-in .media-col { order: -1; }
  .mini { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding: 0 var(--gutter); }
}

/* cards keep the exact ratio of their file */
.card { --mh: clamp(260px, 46svh, 480px); position: relative; flex: none; width: calc(var(--mh) * var(--ar, .5625)); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; scroll-snap-align: start; perspective: 800px; transition: scale 160ms ease-out; }
.mini .card { --mh: 300px; }
.card .media { position: relative; height: var(--mh); border-radius: 22px; overflow: hidden; background: var(--surface); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); corner-shape: superellipse(1.6); }
.card .media img, .card .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .media video { opacity: 0; transition: opacity 300ms var(--ease); }
.card .media video.live { opacity: 1; }
.card .play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; }
.card .ct { margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; }
.card .ct b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .ct span { color: var(--muted); flex: none; }
@media (hover: hover) and (pointer: fine) { .card:hover .media { box-shadow: 0 20px 44px rgb(13 13 13 / .18); } }

/* cv */
.cv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 80px var(--gutter); border-top: 1px solid var(--faint); }
.cv h2 { margin: 0; font-size: clamp(48px, 8vw, 128px); line-height: .85; font-weight: 500; letter-spacing: -.06em; }
.cv p { margin: 20px 0 24px; max-width: 440px; font-size: 18px; line-height: 28px; color: var(--ink-2); text-wrap: pretty; }
.cv .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--faint); }
.tl li:last-child { border-bottom: 1px solid var(--faint); }
.tl .when { color: var(--muted); font-size: 14px; }
.tl b { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; }
.tl span.role { color: var(--ink-2); font-size: 14px; text-align: right; }
@media (max-width: 860px) { .cv { grid-template-columns: 1fr; gap: 24px; } .tl li { grid-template-columns: 1fr; gap: 2px; } .tl span.role { text-align: left; } }

/* contact sheet */
.sheet { border-top: 1px solid var(--faint); padding-top: 80px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 16px; }
.grid button { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; transition: scale 160ms ease-out; }
.grid .ph { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface); display: grid; place-items: center; padding: 12px; perspective: 900px; corner-shape: superellipse(1.6); }
.grid .ph img { max-height: 100%; width: auto; border-radius: 4px; box-shadow: 0 4px 14px rgb(0 0 0 / .16); opacity: 0; transform: scale(1.03); transition: opacity 400ms var(--ease), transform 600ms var(--ease); }
.grid .ph img.ld { opacity: 1; transform: none; }
.grid .meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.grid .meta b { color: var(--ink); font-weight: 600; }
.grid .meta span { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { .grid button:hover .ph img.ld { transform: scale(1.04) rotate(-1deg); } }
.grid.as-list { grid-template-columns: 1fr; gap: 0; }
.grid.as-list button { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--faint); }
.grid.as-list .ph { padding: 6px; }
.grid.as-list .meta { margin: 0; font-size: 16px; line-height: 24px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; } .grid .meta span { display: none; } }
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .grid .ph > img.ld { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes tilt { from { transform: perspective(900px) rotateX(24deg) translateY(24px); } }
}

/* contact */
.contact { padding: 120px var(--gutter) 40px; border-top: 1px solid var(--ink); }
.hello-big { display: inline-block; font-size: clamp(56px, 13vw, 210px); line-height: .82; font-weight: 500; letter-spacing: -.07em; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 92% / 0 .08em no-repeat; transition: background-size 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .hello-big:hover { background-size: 100% .08em; } }
.contact .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; align-items: start; }
.contact h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.contact ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.contact ul a, .menu aside ul a { display: inline-block; padding: 8px 0; }
.roll { display: inline-block; overflow: hidden; height: 20px; vertical-align: top; }
.roll > span { display: block; transition: transform 260ms var(--ease); }
.copied .roll > span { transform: translateY(-100%); }
@media (max-width: 760px) { .contact .row { grid-template-columns: 1fr 1fr; } }
footer { padding: 24px var(--gutter) max(32px, env(safe-area-inset-bottom)); color: var(--muted); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; }

/* dialogs */
dialog.sheet-d, dialog.dark-d, dialog.light-d { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; }
dialog.sheet-d { background: var(--bg); color: var(--ink); overflow: auto; overscroll-behavior: contain; clip-path: inset(100% 0 0 0 round 28px); transition: clip-path 340ms var(--ease-io), display 340ms allow-discrete, overlay 340ms allow-discrete; }
dialog.sheet-d[open] { clip-path: inset(0 0 0 0 round 0); transition-duration: 520ms; }
@starting-style { dialog.sheet-d[open] { clip-path: inset(100% 0 0 0 round 28px); } }
dialog.sheet-d::backdrop { background: rgb(13 13 13 / 0); transition: background-color 400ms var(--ease), display 400ms allow-discrete, overlay 400ms allow-discrete; }
dialog.sheet-d[open]::backdrop { background: rgb(13 13 13 / .35); }
@starting-style { dialog.sheet-d[open]::backdrop { background: rgb(13 13 13 / 0); } }
dialog.dark-d { background: #0D0D0D; color: #FAFAFA; overflow: hidden; opacity: 0; transition: opacity 300ms var(--ease), display 300ms allow-discrete, overlay 300ms allow-discrete; }
dialog.dark-d[open] { opacity: 1; }
@starting-style { dialog.dark-d[open] { opacity: 0; } }
dialog.dark-d::backdrop { background: #0D0D0D; opacity: 0; transition: opacity 300ms var(--ease), display 300ms allow-discrete, overlay 300ms allow-discrete; }
dialog.dark-d[open]::backdrop { opacity: 1; }
@starting-style { dialog.dark-d[open]::backdrop { opacity: 0; } }
dialog.light-d { background: var(--bg); color: var(--ink); overflow: hidden; opacity: 0; transition: opacity 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete; }
dialog.light-d[open] { opacity: 1; }
@starting-style { dialog.light-d[open] { opacity: 0; } }
dialog.light-d::backdrop { background: var(--bg); opacity: 0; transition: opacity 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete; }
dialog.light-d[open]::backdrop { opacity: 1; }
@starting-style { dialog.light-d[open]::backdrop { opacity: 0; } }

/* case */
.case-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--top) var(--gutter) 16px; background: rgb(250 250 250 / .8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.case-bar .crumbs { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.case-bar .crumbs span { color: var(--muted); font-weight: 500; }
.case-head { padding: 24px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.case-head .kind { color: var(--muted); }
.case-head h2 { margin: 8px 0 0; font-size: clamp(56px, 10vw, 160px); line-height: .88; font-weight: 500; letter-spacing: -.06em; }
.case-head .role { margin: 20px 0 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.case-head ul { list-style: none; margin: 0; padding: 0; }
.case-head li { padding: 14px 0; border-top: 1px solid var(--faint); font-size: 18px; line-height: 28px; text-wrap: pretty; }
.case-head .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.chip { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--surface); font-size: 14px; line-height: 20px; font-weight: 500; }
.stagger > * { opacity: 0; transform: translateY(16px); }
.run .stagger > * { animation: rise 500ms var(--ease) forwards; animation-delay: calc(var(--k, 0) * 40ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.reel-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--gutter) 12px; }
.reel { display: flex; gap: 16px; overflow-x: auto; padding: 8px var(--gutter) 32px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel.dragging { scroll-snap-type: none; }
.reel.dragging .card { pointer-events: none; }
.reel .card { opacity: 0; transform: translateX(24px); }
.run .reel .card { animation: slide 500ms var(--ease) forwards; animation-delay: calc(var(--k, 0) * 40ms + 220ms); }
@keyframes slide { to { opacity: 1; transform: none; } }
.case-next { display: block; width: 100%; margin-top: 32px; padding: 40px var(--gutter) max(56px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--faint); background: none; text-align: left; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; }
.case-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 300ms var(--ease); }
.case-next span { display: block; color: var(--muted); font-weight: 500; transition: color 220ms var(--ease); }
.case-next b { display: block; margin-top: 8px; font-size: clamp(48px, 8vw, 120px); line-height: 1; letter-spacing: -.05em; font-weight: 500; transition: color 220ms var(--ease), transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .case-next:hover::before { transform: scaleY(1); } .case-next:hover span { color: rgb(250 250 250 / .6); } .case-next:hover b { color: var(--bg); transform: translateX(16px); } }
@media (max-width: 860px) { .case-head { grid-template-columns: 1fr; gap: 24px; } }

/* player */
.player .bgv { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; translate: -50% -50%; scale: 3.6; object-fit: cover; filter: blur(14px) saturate(1.3); opacity: .45; pointer-events: none; }
.player .main { position: absolute; inset: calc(var(--top) + 60px) 0 100px; display: grid; place-items: center; touch-action: none; }
.player .main video, .player .main img { display: block; object-fit: cover; border-radius: 16px; background: #000; box-shadow: 0 32px 80px rgb(0 0 0 / .5); corner-shape: superellipse(1.6); }
.player .main .swap { animation: swap 360ms var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(calc(var(--dir, 1) * 40px)) scale(.97); } }
.p-top, .p-bottom { position: absolute; left: var(--gutter); right: var(--gutter); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.p-top { top: var(--top); }
.p-bottom { bottom: max(24px, env(safe-area-inset-bottom)); }
.p-title b { display: block; font-size: 18px; line-height: 28px; font-weight: 600; }
.p-title span { color: rgb(250 250 250 / .6); font-size: 14px; line-height: 20px; }
.dark-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; flex: none; border: 1px solid rgb(250 250 250 / .14); border-radius: 999px; background: rgb(250 250 250 / .08); color: #FAFAFA; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 200ms var(--ease), scale 160ms ease-out; }
.dark-btn:active { scale: .94; }
@media (hover: hover) and (pointer: fine) { .dark-btn:hover { background: rgb(250 250 250 / .18); } }
.p-ctrls { display: flex; align-items: center; gap: 12px; flex: 1; }
.scrub { position: relative; flex: 1; height: 32px; cursor: pointer; touch-action: none; }
.scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%; border-radius: 4px; background: rgb(250 250 250 / .2); }
.scrub .fill { position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%; border-radius: 4px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.scrub .kn { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 14px; height: 14px; translate: -50% -50%; border-radius: 999px; background: #FAFAFA; scale: 0; transition: scale 200ms var(--ease); }
.scrub:hover .kn, .scrub.drag .kn { scale: 1; }
.p-time { min-width: 96px; text-align: right; font-size: 14px; line-height: 20px; color: rgb(250 250 250 / .7); }
.p-side { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; z-index: 2; display: grid; gap: 8px; }
.p-flash { position: absolute; left: 50%; top: 50%; z-index: 3; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 999px; display: grid; place-items: center; background: rgb(13 13 13 / .55); opacity: 0; pointer-events: none; }
.p-flash.on { animation: flash 600ms var(--ease); }
@keyframes flash { 0% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
.p-hint { position: absolute; left: 50%; bottom: 96px; z-index: 3; translate: -50% 0; padding: 8px 14px; border-radius: 999px; background: rgb(250 250 250 / .12); color: #FAFAFA; font-size: 13px; line-height: 18px; font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity 300ms var(--ease); pointer-events: none; white-space: nowrap; }
.p-hint.on { opacity: 1; }
@media (max-width: 760px) { .p-side { display: none; } .player .main { inset: calc(var(--top) + 52px) 0 92px; } .player .main video, .player .main img { border-radius: 0; } .p-time { min-width: 0; } }

/* photo viewer */
.v-top { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--top); z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.v-title b { font-size: 18px; line-height: 28px; font-weight: 600; }
.v-title span { margin-left: 12px; color: var(--muted); font-size: 14px; line-height: 20px; }
.v-actions { display: flex; gap: 8px; }
.v-stage { position: absolute; inset: calc(var(--top) + 60px) var(--gutter) 112px; display: grid; place-items: center; }
.shot { position: relative; overflow: hidden; border-radius: 22px; touch-action: pan-y; corner-shape: superellipse(1.6); }
.shot.zoomed { touch-action: none; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; -webkit-user-drag: none; user-select: none; }
.shot.leave img { animation: out 160ms ease-in forwards; }
.shot.enter img { animation: in2 320ms var(--ease) both; }
@keyframes out { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -32px)); } }
@keyframes in2 { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 48px)); } }
.v-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.v-arrow[data-dir="-1"] { left: calc(-1 * var(--gutter) + 16px); }
.v-arrow[data-dir="1"] { right: calc(-1 * var(--gutter) + 16px); }
.strip { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 8px; justify-content: safe center; padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip button { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; opacity: .45; transform: scale(.9); transition: opacity 200ms var(--ease), transform 260ms var(--ease), box-shadow 200ms var(--ease); corner-shape: superellipse(1.6); }
.strip button img { width: 100%; height: 100%; object-fit: cover; }
.strip button[aria-current="true"] { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.info { position: absolute; right: 16px; top: calc(var(--top) + 64px); bottom: 112px; z-index: 4; width: min(360px, calc(100% - 32px)); padding: 24px; border-radius: 28px; overflow: auto; transform: translateX(calc(100% + 32px)); transition: transform 400ms var(--ease-io); corner-shape: superellipse(1.6); }
.info.open { transform: none; }
.info h3 { margin: 4px 0 20px; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.02em; }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 0; }
.info dt { color: var(--muted); }
.info dd { margin: 0; font-weight: 500; text-align: right; }
.info p { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--faint); color: var(--muted); font-size: 14px; line-height: 20px; }
@media (max-width: 760px) { .v-stage { inset: calc(var(--top) + 56px) 0 104px; } .shot { border-radius: 0; } .v-arrow { display: none; } .v-title span { display: none; } }
::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* toast */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 500; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; opacity: 0; transform: translate(-50%, calc(100% + 32px)); transition: transform 400ms var(--ease), opacity 200ms var(--ease); pointer-events: none; }
.toast i { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* shown once on entry */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .reveal, .stagger > *, .reel .card, .corners > * { opacity: 1; transform: none; translate: none; }
  .mega .ch { transform: none; }
  .manifesto .w { color: var(--ink); }
  .vpill { transform: none; opacity: 1; }
  .grid .ph img { opacity: 1; transform: none; }
  dialog.sheet-d { clip-path: none; }
}

/* ---------- project card ---------- */
.case { --ac: var(--ink); }
.case .case-bar { position: fixed; left: 0; right: 0; top: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color 300ms var(--ease); }
.case.scrolled .case-bar { background: rgb(250 250 250 / .8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.case .case-bar .crumbs { padding: 8px 14px; border-radius: 999px; }
.cz-hero { position: relative; height: min(86svh, 900px); min-height: 520px; margin: 12px; border-radius: 28px; overflow: hidden; background: var(--ac); color: #FAFAFA; isolation: isolate; corner-shape: superellipse(1.6); }
.cz-hero video, .cz-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 1400ms var(--ease); }
.run .cz-hero video, .run .cz-hero > img { scale: 1; }
.cz-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0) 48%, color-mix(in oklab, var(--ac) 55%, #000) 100%); opacity: .9; }
.cz-hero.still::after { display: none; }
.cz-hero > img.figure { inset: auto; right: clamp(16px, 4vw, 56px); top: 45%; translate: 0 -60%; width: min(42%, 600px); height: auto; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgb(0 0 0 / .35); corner-shape: superellipse(1.6); }
.cz-in { position: absolute; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.cz-in .kind { display: inline-flex; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 20px; font-weight: 500; }
.cz-in .kind span { padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cz-in h2 { margin: 16px 0 0; font-size: clamp(56px, 11vw, 180px); line-height: .84; font-weight: 500; letter-spacing: -.065em; }
.cz-in h2 .ln { display: block; overflow: hidden; padding-bottom: .05em; }
.cz-in h2 .ln > span { display: inline-block; transform: translateY(105%); }
.run .cz-in h2 .ln > span { animation: up 700ms var(--ease) forwards; animation-delay: 160ms; }
.cz-in .role { margin: 14px 0 0; font-size: 20px; line-height: 28px; font-weight: 500; opacity: .9; }
.cz-play { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; background: #FAFAFA; color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; transition: scale 160ms ease-out; }
.cz-play i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--ac); color: #FAFAFA; }
.cz-play:active { scale: .96; }
.cz-lead { padding: 56px var(--gutter) 8px; max-width: 1100px; margin: 0; font-size: clamp(24px, 3vw, 44px); line-height: 1.12; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.cz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 40px var(--gutter) 0; border-top: 1px solid var(--ink); }
.cz-stat { padding: 24px 24px 24px 0; }
.cz-stat + .cz-stat { padding-left: 24px; border-left: 1px solid var(--faint); }
.cz-stat b { display: block; font-size: clamp(48px, 7vw, 104px); line-height: .9; font-weight: 500; letter-spacing: -.05em; color: var(--ac); font-variant-numeric: tabular-nums; }
.cz-stat span { display: block; margin-top: 12px; max-width: 260px; color: var(--ink-2); text-wrap: pretty; }
.cz-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; padding: 56px var(--gutter) 40px; }
.cz-body h3 { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.cz-did { list-style: none; margin: 0; padding: 0; }
.cz-did li { position: relative; padding: 16px 0 16px 28px; border-top: 1px solid var(--faint); font-size: 20px; line-height: 28px; text-wrap: pretty; }
.cz-did li::before { content: ""; position: absolute; left: 0; top: 26px; width: 10px; height: 10px; border-radius: 999px; background: var(--ac); }
.cz-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-tools .chip { gap: 4px; align-items: center; }
.cz-tools .chip .i-btn { margin-left: 2px; width: 20px; height: 20px; }
.cz-next { position: relative; display: block; width: calc(100% - 24px); height: 46svh; min-height: 320px; margin: 24px 12px max(12px, env(safe-area-inset-bottom)); padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: var(--nac, var(--ink)); color: #FAFAFA; text-align: left; cursor: pointer; isolation: isolate; corner-shape: superellipse(1.6); }
.cz-next video, .cz-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity 400ms var(--ease), scale 900ms var(--ease); }
.cz-next .t { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); z-index: 1; }
.cz-next .t span { display: block; font-weight: 500; opacity: .75; }
.cz-next .t b { display: block; margin-top: 8px; font-size: clamp(48px, 9vw, 140px); line-height: .9; font-weight: 500; letter-spacing: -.06em; }
.cz-next .go { position: absolute; right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: #FAFAFA; color: var(--ink); transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cz-next:hover video, .cz-next:hover img { opacity: .8; scale: 1.04; } .cz-next:hover .go { transform: rotate(45deg); } }
.cz-reel-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 24px var(--gutter) 12px; }
.cz-reel-h h3 { margin: 0; font-size: clamp(32px, 4vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
@media (max-width: 860px) {
  .cz-hero { margin: 8px; height: 78svh; border-radius: 22px; corner-shape: superellipse(1.6); }
  .cz-hero > img.figure { left: 16px; right: 16px; top: 76px; width: auto; translate: none; }
  .cz-stats { grid-template-columns: 1fr; }
  .cz-stat, .cz-stat + .cz-stat { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--faint); }
  .cz-body { grid-template-columns: 1fr; gap: 28px; }
  .cz-did li { font-size: 17px; line-height: 26px; }
  .cz-next { width: calc(100% - 16px); margin: 16px 8px; height: 40svh; border-radius: 22px; corner-shape: superellipse(1.6); }
}
@media (prefers-reduced-motion: reduce) { .cz-in h2 .ln > span { transform: none; } .cz-hero video, .cz-hero > img { scale: 1; } }

/* hero, version C: white page, mega name, frames drop under the cursor */
.trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.trail img { position: absolute; left: 0; top: 0; width: clamp(140px, 16vw, 240px); height: auto; border-radius: 16px; box-shadow: 0 16px 40px rgb(13 13 13 / .18); opacity: 0; will-change: transform, opacity; corner-shape: superellipse(1.6); }
.hero .mega { color: var(--ink); }
.hero .mega .ln:last-child { text-align: left; }
@media (max-width: 760px) { .hero .mega { max-width: none; } }

/* descriptions sit under the title, the video makes room */
.p-desc { position: absolute; left: var(--gutter); top: calc(var(--top) + 60px); z-index: 2; width: min(620px, calc(100% - 2 * var(--gutter) - 64px)); margin: 0; padding: 10px 16px; border-radius: 16px; background: rgb(250 250 250 / .08); border: 1px solid rgb(250 250 250 / .12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: rgb(250 250 250 / .9); font-size: 15px; line-height: 22px; text-wrap: pretty; cursor: pointer; corner-shape: superellipse(1.6); }
.p-desc > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-desc.full > span { -webkit-line-clamp: unset; }
.p-desc.swap { animation: descIn 420ms var(--ease); }
@keyframes descIn { from { opacity: 0; transform: translateY(8px); } }
.player:has(.p-desc:not([hidden])) .main { top: calc(var(--top) + 132px); }
.v-desc { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
@media (max-width: 760px) { .p-desc { font-size: 14px; line-height: 20px; } .player:has(.p-desc:not([hidden])) .main { top: calc(var(--top) + 124px); } .v-desc { max-width: 60vw; } }

/* ---------- reels player ---------- */
dialog.player { transition: opacity 300ms var(--ease), clip-path 460ms var(--ease-io), display 460ms allow-discrete, overlay 460ms allow-discrete; clip-path: inset(0 round 0); }
dialog.player.grow { clip-path: var(--from); transition: none; }
.feed { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.slide { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #0D0D0D; }
.s-bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(36px) saturate(1.3) brightness(.55); }
.s-media { position: absolute; inset: 0; display: grid; place-items: center; }
.s-media > img, .s-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.s-media > .s-poster { transition: opacity 300ms var(--ease); }
.active .s-media > video ~ .s-poster, .active .s-media > .s-poster:has(+ video) { opacity: 0; }
/* a vertical reel on a vertical screen fills it edge to edge */
@media (max-aspect-ratio: 3/4) { .slide.tall .s-media > img, .slide.tall .s-media > video { object-fit: cover; } }
/* entering slides grow in as they scroll into place */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .s-media, .s-ui { animation: reel-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes reel-in { from { opacity: .4; transform: scale(.9) translateY(4%); } }
}
.s-ui { position: absolute; left: 16px; right: 72px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 18px); z-index: 2; color: #FAFAFA; text-shadow: 0 1px 10px rgb(0 0 0 / .45); }
.slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, rgb(0 0 0 / .6)); pointer-events: none; transition: height 300ms var(--ease), background-color 300ms var(--ease); }
.slide.expanded::after { height: 100%; background: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .78) 55%); }
.s-who { display: flex; align-items: center; gap: 10px; }
.s-ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; box-shadow: 0 0 0 2px #FAFAFA; color: #FAFAFA; font-weight: 600; font-size: 15px; text-shadow: none; flex: none; }
.s-who b { font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pill { margin-left: 4px; padding: 4px 12px; border: 1px solid rgb(250 250 250 / .6); border-radius: 12px; background: none; color: #FAFAFA; font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; text-shadow: none; flex: none; corner-shape: superellipse(1.6); }
.s-desc { position: relative; display: flex; align-items: baseline; gap: 4px; max-width: 620px; margin: 10px 0 0; font-size: 15px; line-height: 21px; cursor: pointer; }
.s-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-txt b { font-weight: 600; margin-right: 4px; }
.s-more { display: none; flex: none; padding: 0; border: 0; background: none; color: rgb(250 250 250 / .75); font-size: 15px; line-height: 21px; cursor: pointer; text-shadow: inherit; }
.s-desc.cut .s-more { display: inline; }
.expanded .s-txt { white-space: normal; overflow: visible; max-height: 50dvh; overflow-y: auto; }
.expanded .s-more { display: none; }
.s-meta { display: block; margin-top: 6px; color: rgb(250 250 250 / .6); font-size: 13px; line-height: 18px; }
.s-bar { position: absolute; left: 16px; right: 16px; bottom: max(6px, env(safe-area-inset-bottom)); z-index: 3; height: 20px; cursor: pointer; touch-action: none; }
.s-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; border-radius: 2px; background: rgb(250 250 250 / .3); }
.s-bar i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; border-radius: 2px; background: #FAFAFA; transform-origin: left; transform: scaleX(var(--p, 0)); }
.s-bar.drag::before, .s-bar.drag i { height: 5px; }
.player .p-top { top: var(--top); left: 16px; right: 16px; }
.p-count { padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; line-height: 20px; font-weight: 600; }
.player .p-hint { bottom: 50%; }
.player .p-side { right: 12px; top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); translate: none; }
@media (max-width: 760px) { .player .p-side { display: grid; } .s-desc, .s-more { font-size: 14px; } }

/* next project: the name makes room for the round button */
.cz-next .t { right: calc(clamp(20px, 4vw, 56px) + 80px); }
.cz-next .t b { font-size: clamp(40px, 9vw, 140px); text-wrap: balance; }

/* ---------- hero reel ---------- */
.hero-reel { position: absolute; right: calc(var(--gutter) + 6vw); top: 50%; translate: 0 -46%; z-index: 1; pointer-events: auto; }
.reel-card { position: relative; display: block; height: min(64svh, 640px); aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: #111; cursor: pointer; box-shadow: 0 30px 80px rgb(13 13 13 / .22), 0 0 0 1px rgb(13 13 13 / .06); rotate: 3deg; transition: rotate 500ms var(--ease), scale 300ms var(--ease); touch-action: pan-y; animation: rc-in 900ms var(--ease) 300ms both; corner-shape: superellipse(1.6); }
@keyframes rc-in { from { opacity: 0; transform: translateY(40px) scale(.94); } }
@media (hover: hover) and (pointer: fine) { .reel-card:hover { rotate: 0deg; scale: 1.02; } }
.reel-card:active { scale: .98; }
.rc-stack { position: absolute; inset: 0; }
.rc-stack video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.rc-bars { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; gap: 4px; }
.rc-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; }
.rc-bars i b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.rc-bars i.done b { transform: none; }
.rc-bars i.on b { animation: rc-fill var(--dur, 4200ms) linear forwards; }
@keyframes rc-fill { to { transform: none; } }
.rc-tag { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgb(13 13 13 / .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #FAFAFA; text-align: left; corner-shape: superellipse(1.6); }
.rc-tag .s-ava { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 1.5px #FAFAFA; }
.rc-tag b { display: block; font-size: 14px; line-height: 18px; font-weight: 600; }
.rc-tag small { display: block; font-size: 12px; line-height: 16px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.rc-stack::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(0 0 0 / .25), transparent 22%, transparent 70%, rgb(0 0 0 / .35)); pointer-events: none; }
@media (max-width: 760px) {
  .hero-reel { position: relative; right: auto; top: auto; translate: none; align-self: center; justify-self: center; margin: 12px 0; }
  .reel-card { height: min(56svh, 520px); rotate: -2deg; }
  .hero-ui { grid-template-rows: auto 1fr auto auto; }
}
@media (prefers-reduced-motion: reduce) { .reel-card { animation: none; rotate: 0deg; } }

/* ---------- phone: work tiles become a 3 column grid, like a profile ---------- */
@media (max-width: 760px) {
  .reel, .mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; cursor: default; }
  .mini { margin-inline: 0; padding: 0 0 8px; }
  .reel { padding: 0 var(--gutter) 24px; }
  .reel .card, .mini .card { width: auto; perspective: none; }
  .reel .card .media, .mini .card .media { height: auto; aspect-ratio: 3 / 4; border-radius: 16px; transform: none; corner-shape: superellipse(1.6); }
  .reel .card .ct, .mini .card .ct { display: flex; margin-top: 6px; font-size: 13px; line-height: 18px; }
  .reel .card .play, .mini .card .play { left: 6px; bottom: 6px; padding: 3px 7px 3px 5px; font-size: 11px; line-height: 14px; gap: 3px; background: rgb(13 13 13 / .45); color: #fff; border: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .mini .card:nth-child(n+5) { display: none; }
  .mini .card.more::after { content: attr(data-more); position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: 16px; background: rgb(13 13 13 / .55); color: #fff; font-size: 28px; font-weight: 600; aspect-ratio: 3 / 4; height: auto; bottom: auto; corner-shape: superellipse(1.6); }
  .mini .card.more .play { display: none; }
  .strip-tools, .cz-reel-h .v-actions { display: none; }
  .reel .card { opacity: 1; transform: none; }
  .run .reel .card { animation: tile-in 500ms var(--ease) both; animation-delay: calc(var(--k, 0) * 30ms + 200ms); }
  @keyframes tile-in { from { opacity: 0; transform: scale(.94); } }
}

/* ---------- hero, full screen reel: the interface steps aside after a moment ---------- */
.hero { background: #0D0D0D; color: #FAFAFA; }
.hero-reel { position: absolute; inset: 0; translate: none; margin: 0; z-index: 0; }
.reel-card, .reel-card:hover { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; rotate: 0deg; scale: 1; box-shadow: none; animation: none; }
.rc-stack::after { background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 26%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .6) 100%); transition: opacity 700ms var(--ease); }
.rc-bars { left: var(--gutter); right: var(--gutter); top: calc(var(--top) + 64px); }
.rc-tag { left: auto; right: var(--gutter); bottom: calc(max(28px, env(safe-area-inset-bottom)) + 64px); max-width: 280px; }
.hero .corners span, .hero .corners b { color: #FAFAFA; }
.hero .corners span { opacity: .75; }
.hero .mega { color: #FAFAFA; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.hero .cue { color: #FAFAFA; }
.hero .cue i { background: rgb(250 250 250 / .3); }
.hero .cue i::after { background: #FAFAFA; }
.hero .btn { background: #FAFAFA; color: var(--ink); }
.hero-ui > :not(.hero-reel) { position: relative; z-index: 1; }
.hero-ui > :not(.hero-reel), .rc-tag, .rc-stack::after, .nav { transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
/* not 0: iOS stops hit testing fully transparent layers, the tap would fall through to the reel */
.hero-idle .hero-ui > :not(.hero-reel), .hero-idle .rc-tag { opacity: .01; translate: 0 12px; }
.hero-idle .rc-stack::after { opacity: .35; }
.hero-idle .nav { opacity: .01; translate: 0 -12px; }
@media (max-width: 760px) {
  .hero-reel { position: absolute; inset: 0; margin: 0; align-self: auto; justify-self: auto; }
  .reel-card { height: 100%; rotate: 0deg; }
  .hero-ui { grid-template-rows: auto 1fr auto auto; }
  .rc-tag { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--top) + 84px); max-width: 46%; padding: 6px 10px 6px 6px; }
  .rc-tag small { max-width: 110px; }
  .hero .corners { grid-template-columns: 1fr; max-width: 50%; gap: 14px; }
  .hero .corners > :nth-child(2) { display: none; }
  .hero .corners > :nth-child(3) { grid-column: auto; }
  .hero-ui { padding-top: calc(var(--top) + 84px); }
}

/* ---------- native charts ---------- */
.chart { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; }
.chart .series { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms cubic-bezier(.65, 0, .35, 1) var(--d, 0ms); }
.chart .pt { opacity: 0; transform-box: fill-box; transform-origin: center; scale: .4; transition: opacity 300ms var(--ease) calc(var(--d, 0ms) + 500ms), scale 500ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0ms) + 500ms); }
.chart .bar { transform-box: fill-box; transform-origin: left; scale: 0 1; transition: scale 900ms var(--ease) var(--d, 0ms); }
.chart.drawn .series { stroke-dashoffset: 0; }
.chart.drawn .pt { opacity: 1; scale: 1; }
.chart.drawn .bar { scale: 1 1; }
.chart-hero { position: absolute; right: clamp(16px, 4vw, 56px); top: calc(var(--top) + 64px); width: min(54%, 720px); }
.cz-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 8px var(--gutter) 24px; }
.cz-charts figure { margin: 0; padding: 24px; border-radius: 22px; background: var(--surface); corner-shape: superellipse(1.6); }
.cz-charts figure:first-child { grid-column: 1 / -1; }
.cz-charts figure:first-child .chart { max-width: 860px; margin-inline: auto; }
.cz-charts figcaption { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 22px; text-wrap: pretty; }
.mini-chart { padding: 0; display: block; }
@media (max-width: 860px) {
  .chart-hero { left: 16px; right: 16px; width: auto; top: calc(var(--top) + 60px); }
  .cz-charts { grid-template-columns: 1fr; }
  .cz-charts figure { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .chart .series { stroke-dashoffset: 0; } .chart .pt { opacity: 1; scale: 1; } .chart .bar { scale: 1 1; } }

/* ---------- project story ---------- */
.cz-story { padding: 64px var(--gutter) 8px; }
.cz-k { margin: 0 0 32px; font-size: clamp(32px, 4vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.st { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: 32px 0; border-top: 1px solid var(--faint); }
.st.flip .st-media { order: 2; }
.st.solo { grid-template-columns: 1fr; }
.st-media { position: relative; justify-self: center; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--surface); cursor: pointer; aspect-ratio: var(--ar); box-shadow: 0 20px 50px rgb(13 13 13 / .12); transition: scale 300ms var(--ease); corner-shape: superellipse(1.6); }
.st-media.tall { width: min(100%, 380px); max-height: 72svh; }
.st-media img, .st-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-media video { opacity: 0; transition: opacity 400ms var(--ease); }
.st-media video.live { opacity: 1; }
.st-media .play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .st-media:hover { scale: 1.02; } }
.st-n { display: block; color: var(--ac); font-size: 14px; line-height: 20px; font-weight: 600; }
.st-text h4 { margin: 8px 0 0; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.st-text p { margin: 16px 0 0; max-width: 560px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cz-body.tools-only { grid-template-columns: 1fr; padding-top: 24px; }
@media (max-width: 860px) {
  .st, .st.flip { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; }
  .st.flip .st-media { order: 0; }
  .st-media.tall { width: 100%; max-height: none; aspect-ratio: 4 / 5; }
}

/* ---------- phone: photos fill the screen, the interface steps aside ---------- */
.photo .v-top, .photo .strip { transition: opacity 400ms var(--ease), translate 400ms var(--ease); }
.photo.ui-off .v-top { opacity: 0; translate: 0 -10px; pointer-events: none; }
.photo.ui-off .strip { opacity: 0; translate: 0 10px; pointer-events: none; }
@media (max-width: 760px) {
  .photo .v-stage { inset: 0; }
  .photo .shot { border-radius: 0; }
}
@media (max-width: 760px) {
  .photo .shot img { object-fit: contain; }
  .photo .shot.fill { touch-action: none; }
  .photo .shot.fill img { object-fit: cover; }
}

/* ---------- contact, tidy ---------- */
.contact { padding: 96px var(--gutter) 24px; border-top: 1px solid var(--faint); }
.contact .hello-big { margin: 0; background: none; }
.c-lead { margin: 16px 0 0; color: var(--ink-2); font-size: 18px; line-height: 26px; }
.c-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.c-copy { min-height: 48px; }
.c-list { list-style: none; margin: 48px 0 0; padding: 0; max-width: 720px; }
.c-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; border-top: 1px solid var(--faint); font-size: 17px; line-height: 24px; }
.c-list li:last-child { border-bottom: 1px solid var(--faint); }
.c-list li > span:first-child { color: var(--muted); flex: none; }
.c-list b { font-weight: 500; text-align: right; }
.c-list a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; text-decoration: none; font-weight: 500; }
.c-list a i { display: inline-grid; width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.c-list a i svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .c-list a:hover i { transform: translate(2px, -2px); } .c-list a:hover { color: var(--accent-ink); } }
.c-two { display: inline-flex; gap: 8px; }
.c-two a { padding: 6px 14px; border-radius: 999px; background: var(--surface); }
footer { border-top: 0; }
@media (max-width: 760px) { .contact { padding-top: 72px; } .c-list li { font-size: 16px; } }

/* photo viewer: nothing scrolls sideways, closed details panel is truly gone */
dialog.light-d, dialog.dark-d { overflow: clip; overscroll-behavior: none; }
.info { visibility: hidden; transition: transform 400ms var(--ease-io), visibility 0s 400ms; }
.info.open { visibility: visible; transition: transform 400ms var(--ease-io), visibility 0s; }

/* HDR safe: no backdrop blur over or above HDR photos, iOS would drop them to SDR */
.play.solid { background: rgb(250 250 250 / .88); color: var(--ink); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.case.scrolled .case-bar { background: rgb(250 250 250 / .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.pointer :focus-visible { outline: none; }

/* invisible switch over buttons: a real tap on it is the only haptic iOS 26.5+ allows */
.hap { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.hap input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

/* brand logos in avatars */
.s-ava { overflow: hidden; }
.s-ava img { width: 70%; height: 70%; object-fit: contain; }

/* photo carousel inside the reels feed */
.s-car { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.s-car::-webkit-scrollbar { display: none; }
.s-car img { flex: none; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; }
.s-cc { position: absolute; right: var(--gutter); top: calc(var(--top) + 64px); z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgb(13 13 13 / .55); color: #FAFAFA; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.s-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(250 250 250 / .4); transition: background-color 200ms var(--ease), scale 200ms var(--ease); }
.s-dots i.on { background: #FAFAFA; scale: 1.2; }
.s-audio { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; color: #FAFAFA; }
.s-audio svg { width: 12px; height: 12px; fill: currentColor; animation: note 1.6s var(--ease) infinite alternate; }
@keyframes note { to { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .s-audio svg { animation: none; } }
.s-dots { top: calc(var(--top) + 72px); bottom: auto; }
.s-cc { top: calc(var(--top) + 64px); }
/* keep the carousel photos in HDR: no blur above them */
#vkoPlayer:has(.slide.active .s-car) :is(.p-count, .dark-btn) { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(13 13 13 / .55); }

/* footer */
footer { align-items: center; margin-top: 8px; padding-top: 20px; }
.to-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 500; }
.to-top i { display: inline-grid; width: 14px; height: 14px; transition: translate 220ms var(--ease); }
.to-top i svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .to-top:hover i { translate: 0 -2px; } }

/* Safari 26 samples this strip for the status bar colour: full width, thicker than 10px, opaque */
.tint { position: fixed; left: 0; right: 0; top: 0; z-index: 90; height: 12px; background: var(--bg); transition: background-color 300ms var(--ease); }
html.over-hero .tint { background: #0D0D0D; }
/* CV links in the contact list: small pills like Copy */
.contact .c-two { gap: 8px; }
.contact .c-two a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--faint); border-radius: 999px; background: none; font-size: 15px; line-height: 20px; font-weight: 500; transition: background-color 200ms var(--ease); corner-shape: round; }
@media (hover: hover) and (pointer: fine) { .contact .c-two a:hover { background: var(--surface); color: var(--ink); } }
.cv { padding-bottom: 48px; }
.contact { padding-top: 72px; }
@media (max-width: 760px) { .contact { padding-top: 56px; } }
.contact .c-list { margin-top: 32px; }

/* iOS 26: the Safari toolbar floats over the page. Full screen layers take the large viewport,
   so content runs under the toolbar instead of stopping above it */
dialog.sheet-d, dialog.dark-d, dialog.light-d { height: 100lvh; }
.menu { bottom: auto; height: 100lvh; }
/* The project card opens inside the page (non modal dialog) and scrolls with the page:
   iOS 26 cuts fixed layers above its floating toolbar, only page scroll runs underneath */
dialog.sheet-d.case { position: absolute; inset: 0 0 auto 0; z-index: 60; height: auto; min-height: 100lvh; overflow: visible; }
html.case-page :is(#main, footer, .nav) { display: none; }

/* carousel zoom */
.s-car img { touch-action: pan-x pan-y; transition: object-position 300ms var(--ease); will-change: auto; }
.slide.pinching .s-car img { position: relative; z-index: 2; }
.slide.pinching :is(.s-ui, .s-dots, .s-cc) { opacity: 0; transition: opacity 160ms var(--ease); }

/* HDR photos: no scroll driven opacity or scale on the carousel layer, iOS would tone map it to SDR */
.slide:has(.s-car) .s-media { animation: none; }
/* the hero runs under the toolbar too; its controls stay above it */
@media (pointer: coarse) {
  .hero { height: calc(100svh + 104px); }
  .hero-ui { padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + 104px); }
}
/* hero runs under the status bar too: no tint strip there */
html.over-hero .tint { display: none; }
/* landscape projects on phones: one column of 16:9 tiles */
@media (max-width: 760px) {
  .mini:has(.card[style*="--ar:1.6"]) { grid-template-columns: minmax(0, 1fr); }
  .mini .card[style*="--ar:1.6"] .media { aspect-ratio: 16 / 9; }
}


/* iOS: the reels feed scrolls the page and snaps. Each slide is taller than the visible area by the
   toolbar zone, so the active video runs under Safari's floating toolbar and the next one never shows there */
html.ios { --bar: 96px; }
html.player-page { scroll-snap-type: y mandatory; background: #0D0D0D; }
html.player-page :is(#main, footer, .nav, #vkoCase) { display: none; }
html.player-page .tint { background: #0D0D0D; }
html.player-page dialog.player { position: absolute; inset: 0 0 auto 0; z-index: 70; height: auto; overflow: visible; clip-path: none; }
html.player-page dialog.player .feed { position: static; overflow: visible; scroll-snap-type: none; }
html.player-page dialog.player .slide { height: calc(100lvh + var(--bar)); }
html.player-page dialog.player :is(.p-top, .p-side, .p-flash, .p-hint) { position: fixed; }
html.player-page dialog.player .s-ui { bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--bar) + 18px); }
html.player-page dialog.player .s-bar { bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--bar)); }
html.player-page dialog.player .p-side { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px); }
html.player-page dialog.player .slide:not(.active) :is(.s-ui, .s-bar) { opacity: 0; }
html.player-page dialog.player .s-ui { bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--bar) + 78px); }
html.player-page dialog.player .s-bar { bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--bar) + 60px); }
html.player-page dialog.player .p-side { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 190px); }

/* landscape reels sit in the middle of what is visible, not of the slide that runs under the toolbar */
html.player-page dialog.player .slide:not(.tall) .s-media { bottom: calc(var(--bar) + max(14px, env(safe-area-inset-bottom)) + 120px); top: calc(var(--top) + 56px); }


/* iOS: each reel also reaches up under the status bar. Its picture bleeds upward; a later slide paints
   over the one before, so the previous reel never shows there */
html.ios { --topz: 72px; }
html.player-page .tint { display: none; }
html.player-page dialog.player .slide { overflow: visible; }
html.player-page dialog.player .slide .s-media { top: calc(-1 * var(--topz)); }
html.player-page dialog.player .slide .s-bg { top: calc(-40px - var(--topz)); }
html.player-page dialog.player .slide:not(.tall) .s-media { top: calc(var(--top) + 56px); }
/* snap areas exactly one screen tall (taller ones let the scroll stop inside them);
   the active reel's picture reaches under the status bar and under the toolbar, above its neighbours */
html.player-page dialog.player .slide { height: 100lvh; scroll-snap-align: start; scroll-snap-stop: always; }
html.player-page dialog.player .slide.active { z-index: 2; }
html.player-page dialog.player .slide .s-media { top: calc(-1 * var(--topz)); bottom: calc(-1 * var(--bar)); }
html.player-page dialog.player .slide .s-bg { top: calc(-40px - var(--topz)); bottom: calc(-40px - var(--bar)); }
html.player-page dialog.player .slide:not(.tall) .s-media { top: calc(var(--top) + 56px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); }
html.player-page dialog.player .s-ui { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); }
html.player-page dialog.player .s-bar { bottom: calc(max(6px, env(safe-area-inset-bottom)) + 40px); }
html.player-page dialog.player .p-side { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 170px); }
html.player-page { scroll-padding: 0; }
html.player-page dialog.player .slide::after { bottom: calc(-1 * var(--bar)); height: calc(40% + var(--bar)); }
html.player-page dialog.player .slide.expanded::after { height: calc(100% + var(--bar)); }

/* the hero reel takes sideways swipes, the page keeps vertical scroll */
#reelCard { touch-action: pan-y; }

.s-car video { flex: none; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; touch-action: pan-x pan-y; }
/* only near 9:16 reels fill the phone screen; 3:4 and squarer ones keep their frame, like photos */
@media (max-aspect-ratio: 3/4) { .slide.tall:not(.full) .s-media > img, .slide.tall:not(.full) .s-media > video { object-fit: contain; } }

.s-cc { display: none; }
.nav .hello { color: #0D0D0D; }
/* the page mode feed never scrolls sideways */
html.player-page dialog.player { overflow-x: clip; }

/* end of the feed */
.slide.end { display: grid; place-items: center; background: #0D0D0D; color: #FAFAFA; text-align: center; }
.slide.end::after { display: none; }
.end-in { width: min(420px, calc(100% - 48px)); }
.end-in img { width: min(240px, 56vw); height: auto; margin: 0 auto 20px; display: block; animation: wag 2.4s var(--ease) infinite alternate; transform-origin: 50% 90%; }
@keyframes wag { from { rotate: -4deg; } to { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .end-in img { animation: none; } }
.end-in h3 { margin: 0; font-size: clamp(34px, 9vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.end-in p { margin: 14px 0 28px; color: rgb(250 250 250 / .7); font-size: 17px; line-height: 25px; text-wrap: pretty; }
.end-act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.end-act .btn { background: #FAFAFA; color: #0D0D0D; }
.end-act .btn.ghost { background: none; color: #FAFAFA; border: 1px solid rgb(250 250 250 / .3); }
html.player-page dialog.player .slide.end .end-in { padding-bottom: var(--bar); }

/* transparent cutouts (Wagner) stand on the page: no frame, no fill, nothing cropped */
.st-media.cutout { background: none; box-shadow: none; border-radius: 0; overflow: visible; corner-shape: round; clip-path: none !important; }
.st-media.cutout img { object-fit: contain; }
.st-media.cutout .play { display: none; }

/* iOS cuts fixed layers above its floating toolbar; while a full screen viewer is open the page under it
   hides and takes the viewer's colour, so the strip under the toolbar reads as part of the viewer */
html.modal-open :is(#main, footer, .nav, #vkoCase, .tint) { visibility: hidden; }
html.modal-open:has(dialog.light-d[open]) { background: var(--bg); }
html.modal-open:has(dialog.dark-d[open]) { background: #0D0D0D; }
html.modal-open body { background: transparent; }
html.modal-open body > canvas { visibility: hidden; }
/* frame details: as tall as its content */
.info { bottom: auto; max-height: calc(100% - var(--top) - 180px); }
/* iOS: thumbnails clear the floating toolbar */
html.ios #vkoPhoto .strip { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 24px); }
html.ios #vkoPhoto .p-hint { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 24px + 150px); }
#vkoPhoto .p-hint { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 96px); top: auto; }

/* while the photo is dragged to close, the page shows through the fading viewer */
html.photo-drag :is(#main, footer, .nav, #vkoCase), html.photo-drag body > canvas { visibility: visible; }
@media (pointer: coarse) { #vkoPhoto .shot:not(.fill) { touch-action: none; } }
html.photo-drag #vkoPhoto::backdrop { background: transparent; }

/* stats: a quiet spec strip instead of three shouting numbers */
.cz-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px var(--gutter) 0; border: 0; border-radius: 22px; background: var(--surface); padding: 6px; gap: 6px; corner-shape: superellipse(1.6); }
.cz-stat, .cz-stat + .cz-stat { padding: 16px 16px 18px; border: 0; border-radius: 16px; background: var(--bg); corner-shape: superellipse(1.6); }
.cz-stat b { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -.04em; }
.cz-stat span { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
@media (max-width: 760px) {
  .cz-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-stat, .cz-stat + .cz-stat { padding: 12px 10px 14px; border: 0; }
  .cz-stat b { font-size: 26px; }
  .cz-stat span { font-size: 12px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* case hero: kind and years as plain text, the facts as one quiet line under the role */
.cz-in .kind { margin: 0 0 10px; font-size: 14px; line-height: 20px; color: rgb(250 250 250 / .8); }
.cz-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; max-width: 640px; font-size: 14px; line-height: 20px; color: rgb(250 250 250 / .8); }
.cz-facts b { color: #FAFAFA; font-weight: 600; font-variant-numeric: tabular-nums; }
/* a big number only where it is a real result, next to the clip that proves it */
.st-proof { margin: 0 0 18px; }
.st-proof b { display: block; font-size: clamp(56px, 8vw, 112px); line-height: .9; font-weight: 500; letter-spacing: -.05em; color: var(--ac); font-variant-numeric: tabular-nums; }
.st-proof span { display: block; margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--muted); }
.cz-lead { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.38; max-width: 52ch; letter-spacing: -.01em; }
.cz-in .kind { display: block; }

/* no index numbers, no ruled lines: rows and sections are told apart by space and a soft tint */
.item > h3 > button { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) 120px 40px; padding: 18px 16px; border-radius: 18px; transition: background-color 200ms var(--ease), scale 160ms ease-out; corner-shape: superellipse(1.6); }
.item { border-bottom: 0; }
.item::after { display: none; }
@media (hover: hover) and (pointer: fine) { .item > h3 > button:hover { background: var(--surface); } }
.item.open > h3 > button { background: var(--surface); }
.drawer-in { padding-inline: 16px; }
.drawer li, .tl li, .tl li:last-child, .c-list li, .c-list li:last-child, .menu ol li, .st { border: 0; }
.drawer li { padding: 6px 0; }
.tl li { padding: 10px 0; }
.c-list li { min-height: 52px; }
.cv, .contact, .case-next, footer { border-top: 0; }
.cv { padding-top: 120px; }
.st { padding: 40px 0; }
@media (max-width: 760px) {
  .item > h3 > button { grid-template-columns: minmax(0, 1fr) 40px; padding: 16px 12px; }
  .drawer-in { padding-inline: 12px; }
}

/* How it went: one beat per screen. The clip stands full height and sticks, the text scrolls along its edge */
.st { grid-template-columns: minmax(0, 1fr) minmax(0, 40ch); align-items: start; gap: clamp(32px, 5vw, 80px); padding: 0 0 18svh; }
.st.flip .st-media { order: 0; }
.st-media, .st-media.tall { position: sticky; top: calc(var(--top) + 76px); justify-self: start; width: auto; max-width: 100%; height: calc(100svh - var(--top) - 100px); max-height: none; aspect-ratio: var(--ar); box-shadow: none; border-radius: 28px; }
.st-media.wide { width: 100%; height: auto; }
.st-text { padding-block: 22svh 0; }
.st.solo { grid-template-columns: minmax(0, 60ch); }
.st.solo .st-text { padding-block: 0; }
@media (max-width: 860px) {
  .st { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 56px; }
  .st-media, .st-media.tall { position: relative; top: auto; justify-self: center; height: min(78svh, calc((100vw - 2 * var(--gutter)) / var(--ar))); }
  .st-media.wide { height: auto; width: 100%; }
  .st-text { padding-block: 0; }
}

/* motion by meaning: text simply appears, media opens like a shutter, a result rises, nothing tilts */
.reveal { transform: none; transition: opacity 520ms var(--ease); }
.st.reveal { opacity: 1; }
.st.reveal .st-text { opacity: 0; transition: opacity 520ms var(--ease) 120ms; }
.st.reveal.in .st-text { opacity: 1; }
.st.reveal .st-media:not([data-cursor="View"]) { clip-path: inset(100% 0 0 0 round 28px); transition: clip-path 900ms var(--ease), scale 300ms var(--ease); }
.st.reveal.in .st-media:not([data-cursor="View"]) { clip-path: inset(0 round 28px); }
.st.in .st-proof b { animation: proof-rise 800ms var(--ease) both 200ms; }
@keyframes proof-rise { from { opacity: 0; translate: 0 .35em; } }
.card .media { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .st.reveal .st-text, .st.reveal .st-media:not([data-cursor="View"]) { opacity: 1; clip-path: none; transition: none; }
  .st.in .st-proof b { animation: none; }
}
.st { grid-template-columns: auto minmax(0, 40ch); justify-content: start; }
.st-media.wide { width: min(62vw, 900px); }
.cz-in .kind { margin-bottom: 18px; }
@media (max-width: 860px) { .st { grid-template-columns: minmax(0, 1fr); } .st-media.wide { width: 100%; } }
/* the case hero text stays readable over burnt in subtitles: a soft shade over the lower part of the hero */
.cz-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .35) 40%, rgb(0 0 0 / .7)); pointer-events: none; }
.cz-hero .cz-in { z-index: 2; }
@media (max-width: 760px) { .mini .card.more[style*="--ar:1.6"]::after { aspect-ratio: 16 / 9; } }

/* case hero: dots for the swipe through the project's work */
.cz-hero { touch-action: pan-y; }
.cz-dots { position: absolute; right: clamp(20px, 4vw, 56px); top: calc(var(--top) + 64px); z-index: 3; display: flex; gap: 5px; }
.cz-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(250 250 250 / .45); cursor: pointer; transition: background-color 200ms var(--ease), scale 200ms var(--ease); }
.cz-dots i.on { background: #FAFAFA; scale: 1.25; }
.cz-hero > img, .cz-hero > video { will-change: auto; }

/* end of the feed: a count up and a rubber stamp instead of a mascot */
.end-mark { position: relative; display: grid; place-items: center; margin: 0 auto 28px; }
.end-n { font-size: clamp(120px, 38vw, 220px); line-height: .85; font-weight: 500; letter-spacing: -.06em; color: var(--accent); font-variant-numeric: tabular-nums; }
.end-stamp { position: absolute; padding: 8px 18px; border: 3px solid #FAFAFA; border-radius: 14px; color: #FAFAFA; font-size: clamp(22px, 6vw, 32px); line-height: 1; font-weight: 700; text-transform: none; rotate: -12deg; opacity: 0; scale: 2.4; corner-shape: superellipse(1.6); }
.slide.end.go .end-stamp { animation: stamp 520ms cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes stamp { 0% { opacity: 0; scale: 2.4; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
.slide.end.go .end-mark { animation: thud 360ms ease-out 300ms; }
@keyframes thud { 30% { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .slide.end.go .end-stamp { animation: none; opacity: 1; scale: 1; } .slide.end.go .end-mark { animation: none; } }
.end-act { justify-content: center; }
.end-act .btn { padding: 12px 22px; justify-content: center; }
.end-stamp { background: #0D0D0D; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }

/* case hero runs edge to edge from the very top; only the bottom corners stay round */
.cz-hero, .cz-hero.still { margin: 0 0 12px; border-radius: 0 0 32px 32px; height: min(92svh, 960px); }
@media (max-width: 760px) { .cz-hero, .cz-hero.still { margin: 0 0 8px; border-radius: 0 0 26px 26px; height: 84svh; } }
html.case-page .tint { display: none; }
/* swipe dots centred under the top bar, like story bars */
.cz-dots { left: 50%; right: auto; translate: -50% 0; top: calc(var(--top) + 60px); }

/* phones: story media as full width 3:4 previews, edge to edge */
@media (max-width: 860px) {
  .st-media, .st-media.tall, .st-media.wide { justify-self: stretch; width: calc(100% + 2 * var(--gutter)); max-width: none; height: auto; aspect-ratio: 3 / 4; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; corner-shape: round; }
  .st-media.wide { aspect-ratio: var(--ar); }
  .st.reveal .st-media:not([data-cursor="View"]) { clip-path: inset(100% 0 0 0); }
  .st.reveal.in .st-media:not([data-cursor="View"]) { clip-path: inset(0); }
  .st-media.cutout { width: 100%; margin-inline: 0; aspect-ratio: var(--ar); }
}
@media (max-width: 860px) { .st-media.tall img, .st-media.tall video { object-position: 50% 22%; } }

/* Photo section */
.photo-sec { padding: 96px var(--gutter) 24px; }
.ps-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46ch); gap: 24px; align-items: end; margin-bottom: 32px; }
.ps-head h2 { margin: 0; font-size: clamp(48px, 8vw, 128px); line-height: .85; font-weight: 500; letter-spacing: -.06em; }
.ps-head p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 26px; text-wrap: pretty; }
.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
.ps-tile { display: block; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.ps-tile.big { grid-column: span 2; grid-row: span 2; }
.ps-img { display: block; overflow: hidden; border-radius: 22px; background: var(--surface); aspect-ratio: 4 / 5; corner-shape: superellipse(1.6); }
.ps-tile.big .ps-img { aspect-ratio: auto; height: calc(100% - 52px); }
.ps-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .ps-tile:hover .ps-img img { scale: 1.03; } }
.ps-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 15px; line-height: 20px; }
.ps-cap b { font-weight: 600; }
.ps-cap span { color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
  .photo-sec { padding-top: 72px; }
  .ps-head { grid-template-columns: 1fr; }
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .ps-tile.big { grid-row: auto; }
  .ps-tile.big .ps-img { aspect-ratio: 4 / 3; height: auto; }
  .ps-cap { flex-direction: column; gap: 2px; font-size: 14px; }
}

/* the photo gallery is its own page-like window */
#vkoGallery .photo-sec { padding-top: calc(var(--top) + 96px); min-height: 100lvh; }
html.modal-open #vkoGallery { visibility: hidden; }
html.photo-drag #vkoGallery { visibility: visible; }
html.player-page #vkoGallery { display: none; }
.ps-grid { align-items: start; }

/* Photo window: full bleed scenes, type docked in the corner (elaya, scrolltide), a peek of the series */
#vkoGallery .photo-sec { padding: 0 0 40px; }
#vkoGallery .ps-head { padding: calc(var(--top) + 96px) var(--gutter) 28px; margin: 0; }
#vkoGallery .ps-grid { display: block; }
.ps-scene { position: relative; display: block; width: 100%; height: 100svh; margin: 0 0 8px; overflow: hidden; }
.ps-scene .ps-img { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; height: auto; corner-shape: round; }
.ps-scene .ps-img img { width: 100%; height: 100%; object-fit: cover; }
.ps-scene:not(.hdr)::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .55)); pointer-events: none; }
.ps-scene .ps-cap { position: absolute; left: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); z-index: 2; display: grid; gap: 4px; max-width: min(520px, 70%); margin: 0; color: #FAFAFA; text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.ps-scene .ps-cap b { font-size: clamp(30px, 4.6vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.ps-scene .ps-cap span { color: rgb(250 250 250 / .85); font-size: 15px; white-space: normal; }
.ps-peek { position: absolute; right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); z-index: 2; display: flex; }
.ps-peek img { width: clamp(56px, 7vw, 96px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 2px solid rgb(250 250 250 / .9); margin-left: -18px; rotate: calc(var(--r, 0) * 1deg); box-shadow: 0 10px 24px rgb(0 0 0 / .35); transition: rotate 400ms var(--ease), translate 400ms var(--ease); corner-shape: superellipse(1.6); }
.ps-peek img:nth-child(1) { --r: -8; } .ps-peek img:nth-child(2) { --r: 3; } .ps-peek img:nth-child(3) { --r: 10; }
@media (hover: hover) and (pointer: fine) { .ps-scene:hover .ps-peek img { translate: 0 -6px; } .ps-scene:hover .ps-peek img:nth-child(1) { --r: -14; } .ps-scene:hover .ps-peek img:nth-child(3) { --r: 16; } }
.ps-scene .ps-img img { transition: scale 900ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .ps-scene:hover .ps-img img { scale: 1.02; } }
@media (max-width: 760px) {
  .ps-scene { height: 86svh; }
  .ps-scene .ps-cap { max-width: calc(100% - 2 * var(--gutter) - 110px); }
  .ps-scene .ps-cap span { font-size: 13px; }
}
@media (max-width: 760px) { .ps-scene .ps-cap b { font-size: 26px; overflow-wrap: anywhere; } }

/* contact: room under the big hello; two columns on wide screens */
.contact .c-lead { margin-top: .9em; }
@media (min-width: 1024px) {
  .contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 120px); align-items: start; }
  .contact > .hello-big, .contact > .c-lead, .contact > .c-actions { grid-column: 1; }
  .contact > .c-list { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; max-width: none; }
}
/* footer: copyright left, links right */
footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.f-links { display: inline-flex; align-items: center; gap: 24px; }
.f-links a { color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.f-links a:hover { color: var(--ink); }
@media (min-width: 1024px) {
  .contact > .hello-big { grid-column: 1 / -1; }
  .contact > .c-list { grid-row: 2 / span 2; align-self: start; margin-top: 18px; }
}
.contact .hello-big { padding-bottom: .16em; }
.contact .c-lead { margin-top: 0; }
@media (min-width: 1024px) { .contact { grid-template-rows: auto auto 1fr; } .contact > .c-actions { align-self: start; } }