/* KEITI — portfolio
   Layout: a looping media strip on top, the wordmark at the bottom, menu tucked into the bottom-right corner.
   Type: a heavy grotesque for display, a quiet sans for text, a light serif italic for counterpoint.
   Display: Gotham Ultra.
   Script: Gunter (trial file; characters it lacks fall back to Instrument Serif). */

@font-face { font-family: "K Display"; src: url("fonts/GothamUltra.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "K Sans"; src: url("fonts/InstrumentSans.woff") format("woff"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "K Script"; src: url("fonts/Gunter.woff2") format("woff2"), url("fonts/Gunter.woff") format("woff"); font-display: swap; }
@font-face { font-family: "K Serif"; src: url("fonts/InstrumentSerif-Italic.woff") format("woff"); font-style: italic; font-display: swap; }

:root {
  --paper: #f4f4f1;
  --ink: #000;
  --muted: #6d6d66;
  --line: rgba(0, 0, 0, .16);
  --panel: #e6e6e0;
  --accent: #f4ec8c;
  --on-accent: #000;
  --band: #000;
  --on-band: #f4f4f1;
  --gutter: max(16px, 2.1vw);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --display: "K Display", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --track: -.04em;
  --sans: "K Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "K Script", "K Serif", Georgia, serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #000;
  --ink: #f4f4f1;
  --muted: #8a8a83;
  --line: rgba(244, 244, 241, .18);
  --panel: #141414;
  --band: #f4f4f1;
  --on-band: #000;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink); overflow-x: clip;
  font-family: var(--sans); font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s { font-family: var(--serif); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0 var(--gutter); }

/* ---------- corner chrome ---------- */
.mark {
  position: fixed; z-index: 30; top: 18px; right: var(--gutter); color: #fff; mix-blend-mode: difference;
  line-height: 0; opacity: .92; transition: opacity .3s, transform .5s var(--ease);
}
.mark svg { display: block; height: 26px; width: auto; }
.mark:hover { opacity: 1; transform: rotate(-8deg); }
.menu-btn {
  position: fixed; z-index: 40; right: var(--gutter); bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 40px; background: var(--ink); display: grid; place-content: center; gap: 6px;
}
.menu-btn i { display: block; width: 26px; height: 2px; background: var(--accent); transition: transform .45s var(--ease); }
:root[data-theme="dark"] .menu-btn i { background: #000; }
.menu-open .menu-btn i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn i:last-child { transform: translateY(-4px) rotate(-45deg); }
.foot-line {
  position: fixed; z-index: 30; left: var(--gutter); right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
  pointer-events: none; color: #fff; mix-blend-mode: difference;
}
.foot-line > * { pointer-events: auto; }
.foot-line nav { display: flex; gap: 14px; }
.social { margin-right: 13px; }
.social a { display: block; width: 16px; height: 16px; }
.social svg { width: 100%; height: 100%; fill: currentColor; }
.social a:hover { opacity: .6; }
.foot-line nav a, .foot-line nav button { text-transform: uppercase; font-size: 12px; letter-spacing: .02em; }
.foot-line nav a:hover, .foot-line nav button:hover, .foot-line [aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 35; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 var(--gutter) 110px;
  clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease-io);
}
.menu-open .menu { clip-path: inset(0 0 0 0); }
.big {
  position: relative; display: block;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86;
  font-size: clamp(64px, 13vw, 220px); letter-spacing: var(--track);
  transform: translateY(40%); opacity: 0; transition: transform .8s var(--ease), opacity .5s;
}
.big__b { display: block; transition: opacity .25s; }
.big__i {
  position: absolute; left: 0; bottom: -.04em; font-size: 1.22em; white-space: nowrap; color: var(--accent); opacity: 0; transition: opacity .25s;
  font-family: var(--serif); font-style: normal; font-weight: 400; text-transform: none; pointer-events: none; letter-spacing: 0;
}
.big:hover .big__b, .big:focus-visible .big__b { opacity: 0; }
.big:hover .big__i, .big:focus-visible .big__i { opacity: 1; }
.menu-open .big { transform: none; opacity: 1; }
.menu-open .big:nth-child(2) { transition-delay: .06s; }
.menu-open .big:nth-child(3) { transition-delay: .12s; }
.menu__row { display: flex; gap: 24px; margin-top: 28px; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.menu__row button:hover { color: var(--accent); }

/* cursor chip */
.chip {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  background: var(--accent); color: var(--on-accent); font-size: 13px; padding: 6px 12px 7px;
  transform: translate3d(-100px, -100px, 0); opacity: 0; scale: .6; transition: opacity .25s, scale .3s var(--ease); white-space: nowrap;
}
.chip.is-on { opacity: 1; scale: 1; }

/* ---------- page transition: plain screen, square image, project name ---------- */
.curtain { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; }
.curtain__bg { position: absolute; inset: 0; background: var(--paper); transform: translateY(100%); }
.curtain__img { position: fixed; left: 0; top: 0; object-fit: cover; z-index: 1; }
.curtain__title, .ph__title {
  position: fixed; left: 0; right: 0; z-index: 2; text-align: center; white-space: nowrap; margin: 0;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: var(--track);
}
.curtain__title { color: var(--ink); }
.curtain__title span { display: inline-block; }
.is-leaving .curtain { visibility: visible; pointer-events: auto; }

/* ---------- home ---------- */
.home { height: 100svh; overflow: hidden; position: relative; }
.strip { --s: min(17vw, 36vh); position: absolute; left: 0; right: 0; top: 0; height: calc(var(--s) * 1.5 + 70px); cursor: grab; touch-action: pan-y; }
.strip.is-dragging { cursor: grabbing; }
.track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: flex-start; will-change: transform; }
.thumb { position: relative; flex: none; width: var(--s); }
.thumb__media { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--panel); clip-path: inset(0 0 100% 0); }
.thumb.is-in .thumb__media { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
.thumb__media img, .thumb__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb__media img { transform: scale(1.08); transition: transform 1.2s var(--ease); }
.thumb.is-active .thumb__media img { transform: scale(1); }
.thumb__media video { opacity: 0; transition: opacity .4s; }
.thumb.is-playing .thumb__media video { opacity: 1; }
/* label proportions follow a tall, tight title and a tiny caption */
.thumb__label { position: absolute; left: 0; top: 100%; padding-top: 12px; width: min(100%, 15em); opacity: 0; transition: opacity .3s; pointer-events: none; }
.thumb__label b { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.45vw, 24px); line-height: .9; letter-spacing: var(--track); }
.thumb__label small { display: block; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin-top: 7px; }
.thumb.is-active .thumb__label { opacity: 1; }
.thumb a { position: absolute; inset: 0; z-index: 5; }
.thumb a:focus-visible { outline-offset: -4px; }

.meter { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 80px); top: calc(min(17vw, 36vh) * 1.5 + 84px); height: 1px; background: var(--line); z-index: 4; }
.meter__fill { position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); width: 0; }
.meter__count { position: absolute; right: -64px; top: -7px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }

.home__bottom {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 52px; z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26ch) 90px; gap: 3vw; align-items: end;
}
.word { margin: 0; display: inline-block; font-size: 24vw; line-height: 0; user-select: none; }
.word svg { display: block; height: .74em; width: auto; }
.home__about { font-size: clamp(17px, 1.45vw, 24px); line-height: 1.22; max-width: 24ch; padding-bottom: 4px; margin: 0; }

/* index view */
.index { position: absolute; inset: 0; overflow-y: auto; padding: 80px var(--gutter) 150px; z-index: 6; background: var(--paper);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.home.show-index .index { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.rows-head, .row a { display: grid; grid-template-columns: 2.6em minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: baseline; }
.rows-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-bottom: 8px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row a { padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.row__n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.row__t { font-family: var(--display); font-weight: 900; letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; font-size: clamp(16px, 2.05vw, 34px); line-height: .95; transform-origin: 0 70%; transition: transform .5s var(--ease); }
.row a:hover .row__t { transform: translateX(14px) skewX(-12deg); }
.row__c { font-size: 14px; min-width: 0; }
.row__c small { display: block; color: var(--muted); font-size: 12px; }
.float-preview { position: fixed; left: 0; top: 0; z-index: 7; width: 200px; aspect-ratio: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .25s; }
.float-preview.is-on { opacity: 1; }
.float-preview img, .float-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- project hero: square image grows to fill the screen as you scroll ---------- */
.ph { position: relative; height: 230vh; }
.ph__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ph__img { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.ph__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ph__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%); opacity: 0; pointer-events: none; }
.ph__title { position: absolute; will-change: transform; }
.ph__client { position: absolute; left: 0; right: 0; text-align: center; margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

.p-info { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding: 9vh var(--gutter) 10vh; }
.p-info h2 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; color: var(--muted); }
.p-info__a { grid-column: 1 / span 4; }
.p-info__b { grid-column: 5 / span 4; }
.p-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.p-meta dt { color: var(--muted); }
.p-meta dd { margin: 0; }
.p-tags { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; columns: 2; column-gap: 2em; }

/* media: one item per row at its own proportions; runs of upright items share a row */
.media { display: flex; flex-direction: column; gap: 10px; padding: 10vh 15px 0; }
.blk--one { width: 100%; }
.blk--tall { height: 96vh; max-width: 100%; aspect-ratio: var(--ar); margin: 0 auto; }
.blk--tall .fr { height: 100%; width: 100%; }
.blk--row { display: flex; gap: 10px; align-items: flex-start; }
.blk__c { min-width: 0; }
.fr { position: relative; margin: 0; width: 100%; max-width: 100%; overflow: hidden; background: var(--panel); }
.fr__in { position: absolute; inset: 0; will-change: transform; }
.fr__in img, .fr__in video { width: 100%; height: 100%; object-fit: cover; }

.player { cursor: pointer; background: #000; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: var(--accent); color: var(--on-accent); font-size: 14px; padding: 9px 16px 10px;
  display: inline-flex; gap: 10px; align-items: center; transition: transform .4s var(--ease);
}
.player__play::before { content: ""; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.player:hover .player__play { transform: translate(-50%, -50%) scale(1.06); }
.player.is-playing .player__play { opacity: 0; pointer-events: none; }

/* recognition band: a flat block */
.band { position: relative; background: var(--accent); color: var(--on-accent); margin-top: 18vh; padding: 14vh var(--gutter) 14vh; }
.band__h { margin: 0 0 6vh; font-family: var(--display); font-weight: 900; letter-spacing: var(--track); text-transform: uppercase; font-size: clamp(48px, 9vw, 160px); line-height: .84; white-space: nowrap; }
.p-awards { list-style: none; margin: 0; padding: 0; font-size: 14px; columns: 2; column-gap: 4vw; }
.p-awards li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .2); break-inside: avoid; }
.p-awards li span:last-child { color: rgba(0, 0, 0, .65); text-align: right; }

.next { display: block; padding: 18vh var(--gutter) 22vh; text-align: center; }
.next small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2.4vh; }
.next strong { display: inline-block; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: var(--track); white-space: nowrap; transition: transform .7s var(--ease); }
.next:hover strong { transform: translateY(-6px); }
.next { position: relative; z-index: 2; }
.follow { position: fixed; left: 0; top: 0; z-index: 1; width: min(22vw, 300px); aspect-ratio: 1; pointer-events: none; overflow: hidden; opacity: 0; scale: .85; transition: opacity .3s, scale .45s var(--ease); }
.follow.is-on { opacity: 1; scale: 1; }
.follow img { width: 100%; height: 100%; object-fit: cover; }
.curtain__hero { position: fixed; inset: 0; z-index: 1; opacity: 0; }
.curtain__hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- about ---------- */
.ab-hero { background: var(--band); color: var(--on-band); padding: 16vh var(--gutter) 18vh; position: relative; overflow: hidden; }
.ab-type { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; row-gap: .04em; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: var(--track); font-size: clamp(40px, 7.4vw, 136px); }
.ab-type > span { white-space: nowrap; display: inline-block; will-change: transform; }
.ab-type .s { letter-spacing: -.02em; }
.ab-type .a { color: var(--accent); }
.ab-type .sym { font-family: var(--sans); font-weight: 400; font-size: .8em; }
:root[data-theme="dark"] .ab-type .a { color: #8c7a00; }
.ab-photo { aspect-ratio: 16 / 9; max-height: 110vh; width: 100%; position: relative; overflow: hidden; }
.ab-photo__in { position: absolute; inset: -7% 0; will-change: transform; }
.ab-photo__in img { width: 100%; height: 100%; object-fit: cover; }
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding: 18vh var(--gutter) 0; }
.ab-grid h2 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; color: var(--muted); }
.ab-lead { grid-column: 1 / span 7; margin: 0; font-size: clamp(26px, 3vw, 46px); line-height: 1.08; letter-spacing: -.01em; }
.ab-side { grid-column: 9 / -1; display: grid; gap: 7vh; align-content: start; }
.ab-side p { margin: 0; }
.career { grid-column: 1 / -1; margin-top: 16vh; }
.career ol { list-style: none; margin: 0; padding: 0; }
.career li { display: grid; grid-template-columns: 9em minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.career li span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.career li b { font-weight: 500; }
.clients { font-size: clamp(20px, 2vw, 30px); line-height: 1.15; }
.ab-awards { margin-top: 22vh; }
.awards__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, .2); }
.awards__list > li { border-bottom: 1px solid rgba(0, 0, 0, .2); }
.awards__list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) 1.5em; gap: 16px; align-items: baseline; padding: 14px 0 12px; }
.awards__list summary::-webkit-details-marker { display: none; }
.awards__list summary b { font-family: var(--display); font-weight: 900; letter-spacing: var(--track); text-transform: uppercase; font-size: clamp(20px, 2.7vw, 40px); line-height: .95; white-space: nowrap; display: inline-block; transition: transform .5s var(--ease); }
.awards__list summary:hover b { transform: translateX(10px); }
.awards__list summary span { font-size: 15px; }
.awards__list summary i { font-style: normal; justify-self: end; transition: transform .3s; }
.awards__list details[open] summary i { transform: rotate(45deg); }
.awards__list details ul { list-style: none; margin: 0 0 16px; padding: 0 0 0 calc(64.3% + 6px); font-size: 14px; }
.awards__list details ul li { padding: 3px 0; }
.awards__list .static summary { cursor: default; }
.pubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw; margin-top: 12vh; }
.pubs h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.pubs p { margin: 0; max-width: 52ch; }
.site-foot { height: 120px; }

/* scroll-linked reveal: the script drives --e from 0 to 1 and back */
[data-par] { transform: translate3d(0, var(--py, 0px), 0); }
.js .sr { opacity: var(--e, 1); transform: translate3d(0, calc((1 - var(--e, 1)) * 70px + var(--py, 0px)), 0); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .home { height: auto; overflow: visible; padding-bottom: 20px; }
  .strip { position: static; height: auto; cursor: auto; padding-top: 70px; }
  .track { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 10px; padding: 0 var(--gutter); transform: none !important; }
  .thumb { width: auto !important; }
  .thumb.dup { display: none; }
  .thumb__label { position: static; opacity: 1; padding-top: 8px; }
  .thumb__label b { font-size: 15px; }
  .meter, .index, .float-preview, .chip, .follow { display: none; }
  .home__bottom { position: static; grid-template-columns: 1fr; padding: 40px var(--gutter) 0; gap: 18px; }
  .foot-line nav { display: none; }
  .foot-line { position: relative; left: auto; right: auto; bottom: auto; padding: 24px var(--gutter) 90px; mix-blend-mode: normal; color: var(--ink); }
  .menu-btn { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ph { height: 190vh; }
  .ph__title { white-space: normal; padding: 0 var(--gutter); }
  .p-info__a, .p-info__b { grid-column: 1 / -1; }
  .media { gap: 14px; }
  .blk--row { flex-direction: column; gap: 14px; }
  .blk__c { flex: none !important; width: 100%; }
  .blk--tall { height: auto; width: 100%; }
  .p-awards { columns: 1; }
  .band__h, .next strong { white-space: normal; }
  .ab-lead, .ab-side { grid-column: 1 / -1; }
  .ab-photo { height: auto; }
  .career li { grid-template-columns: 6.5em 1fr; }
  .career li span:last-child { grid-column: 2; color: var(--muted); margin-top: -10px; }
  .awards__list summary { grid-template-columns: 1fr 1.5em; }
  .awards__list summary b { white-space: normal; }
  .awards__list summary span { grid-row: 2; }
  .awards__list summary i { grid-row: 1 / span 2; grid-column: 2; }
  .awards__list details ul { padding-left: 0; }
  .pubs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .thumb__media { clip-path: none; }
  .js .sr { opacity: 1; transform: none; }
}

/* ---------- index (home) ---------- */
.ix-list { padding: 90px var(--gutter) 14vh; }
.ix .rows-head, .ix .row a { grid-template-columns: 2.6em minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }

/* cursor follower: next-project thumbnail, or the portrait over the About text */
.follow.follow--top { z-index: 55; width: 190px; }
[data-cursor-img] { cursor: none; }

/* zoomable media */
[data-zoom] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 70; background: #000; color: #f4f4f1; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.lightbox__stage { width: calc(100vw - 120px); height: calc(100vh - 110px); display: grid; place-items: center; cursor: zoom-out; }
.lightbox__stage img, .lightbox__stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__x { position: absolute; top: 18px; right: var(--gutter); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 28px; padding: 12px; }
.lightbox__prev { left: 10px; } .lightbox__next { right: 10px; }
.lightbox__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 12px; font-variant-numeric: tabular-nums; }
.lightbox button:hover { color: var(--accent); }

/* ---------- bio: portrait grows from a small square to full screen ---------- */
.ab-ph { position: relative; height: 220vh; }
.ab-ph__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ab-ph__img { position: absolute; inset: 0; will-change: clip-path; }
.ab-ph__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ab-lead-wrap { padding: 20vh var(--gutter) 0; }
.ab-type--lead { font-size: clamp(30px, 4.6vw, 84px); color: var(--ink); row-gap: .1em; }
.ab-type--mix { font-size: clamp(22px, 2.6vw, 46px); color: var(--ink); margin-top: 6vh; row-gap: .1em; }
.ab-type--lead .a, .ab-type--mix .a { color: var(--on-accent); background: var(--accent); padding: 0 .08em; }
.ab-col { grid-column: 1 / span 6; }
.ab-col--2 { grid-column: 8 / span 5; }
.p-info__c { grid-column: 9 / span 4; }
.p-shows { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) {
  .ix-list .rows-head { display: none; }
  .ix .row a { grid-template-columns: 2em 1fr; }
  .ix .row a .row__c { display: none; }
  .ix .row__t { white-space: normal; font-size: 20px; }
  .ab-col, .ab-col--2, .p-info__c { grid-column: 1 / -1; }
  .ab-ph { height: 170vh; }
  .lightbox__stage { width: calc(100vw - 24px); }
}