/* GXRSKY — black, off-white, one signal red.
   Playfair Display (headings, titles) · Manrope (UI and text). */
:root {
  --bg: #000;
  --fg: #efece6;
  --dim: rgba(239, 236, 230, .55);
  --faint: rgba(239, 236, 230, .3);
  --line: rgba(239, 236, 230, .14);
  --red: #ff2a1a;
  --serif: "Playfair Display", "Times New Roman", serif;
  --ui: "Manrope", system-ui, sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 2.4vw, 36px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
/* type (v3, :root-prefixed so the later `font:` shorthands do not reset it): Jost for text and UI, Cormorant for titles.
   font-size-adjust evens out x-heights: Cormorant has a small eye, so titles are scaled up to read as large as before. */
:root { --ui: "Jost", system-ui, sans-serif; --sans: "Jost", system-ui, sans-serif; --serif: "Cormorant", "Times New Roman", serif; }
:root .t-fallback, :root .t-ttl, :root .sign-name, :root .foot-mail, :root .page-t, :root .ix-y, :root .ix-row .ttl, :root .ix-pv-t, :root .ab-name, :root .hl-t, :root .ab-mail, :root .lb-title { font-weight: 500; font-size-adjust: .54; letter-spacing: -.005em; }
/* text and UI: Jost a touch larger (x-height .52) — everything except the titles */
/* the big display titles stay larger */
:root .ab-name, :root .lb-title { font-size-adjust: .63; }
:root body *:not(.t-fallback, .t-ttl, .sign-name, .foot-mail, .page-t, .ix-y, .ix-row .ttl, .ix-pv-t, .ab-name, .hl-t, .ab-mail, .lb-title) { font-size-adjust: .52; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: var(--red); color: #000; }

.lbl { font: 700 11px/1.4 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.dim { color: var(--dim); }
.red { color: var(--red); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--red); color: #000; padding: 10px 14px; font: 600 13px var(--ui); }
.skip:focus { top: 8px; }
.noscript { padding: 100px 20px; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

/* ---------- header: floating pills ---------- */
.dock {
  position: fixed; z-index: 60; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; max-width: calc(100vw - 20px);
}
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: 99px;
  font: 600 14px/1 var(--ui); letter-spacing: .005em; white-space: nowrap;
  background: rgba(18, 16, 16, .78); color: var(--fg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 8px 30px rgba(0,0,0,.35);
  transition: background .25s, color .25s, box-shadow .25s;
}
a.pill:hover, button.pill:hover { background: rgba(48, 42, 42, .9); }
.pill-ico { width: 44px; padding: 0 !important; }
.pill-ico svg { width: 17px; height: 17px; }
.pill-tabs { padding: 4px; gap: 2px; }
.pill-tabs button, .pill-lang button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.pill-tabs button { height: 36px; padding: 0 18px; border-radius: 99px; color: var(--dim); transition: background .25s, color .25s; }
.pill-tabs button:hover { color: var(--fg); background: rgba(255,255,255,.08); }
.pill-tabs button[aria-current="true"] { background: var(--red); color: #000; }
.pill-lang { padding: 4px; gap: 2px; }
.pill-lang button { height: 36px; padding: 0 12px; border-radius: 99px; color: var(--dim); font-size: 12px; transition: background .25s, color .25s; }
.pill-lang button:hover { color: var(--fg); }
.pill-lang button[aria-pressed="true"] { color: var(--fg); background: rgba(255,255,255,.12); }

/* floating nav (v3): a small pill with the current section; opens into the three sections.
   It sits over the content and takes no room of its own. */
.nav { padding: 4px; gap: 0; }
.nav-tog {
  display: inline-flex; align-items: center; gap: 12px; height: 36px; padding: 0 16px 0 14px; border-radius: 99px;
  color: var(--red); font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase;
}
.nav-tog:hover { background: rgba(255,255,255,.06); }
.nav-ic { position: relative; display: inline-flex; gap: 3px; width: 12px; height: 11px; }
.nav-ic i { display: block; width: 1.5px; height: 11px; background: currentColor; transition: transform .7s var(--ease), opacity .4s; }
.dock.open .nav-ic i:nth-child(1) { transform: translateX(4.5px) rotate(45deg); }
.dock.open .nav-ic i:nth-child(2) { opacity: 0; }
.dock.open .nav-ic i:nth-child(3) { transform: translateX(-4.5px) rotate(-45deg); }
.nav-cur { display: inline-block; max-width: 160px; overflow: hidden; white-space: nowrap; transition: max-width .9s var(--ease), opacity .5s; }
.dock.open .nav-cur { max-width: 0; opacity: 0; }
.nav-tog { transition: gap .9s var(--ease), padding .9s var(--ease), background .25s; }
.dock.open .nav-tog { gap: 0; padding: 0 12px; }
.nav-items { display: flex; gap: 2px; padding: 0; max-width: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-width 1s var(--ease), opacity .6s, visibility 0s 1s; }
/* open items speak in the same voice as the closed pill: small, spaced capitals */
.nav-items button { height: 36px; padding: 0 16px; font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.dock.open .nav-items { max-width: 520px; opacity: 1; visibility: visible; transition: max-width 1s var(--ease), opacity .7s .1s, visibility 0s; }
/* Instagram and Telegram always sit next to the nav; the language pill lives in the top-right corner */
.lang-corner { position: fixed; z-index: 60; top: 14px; right: var(--gut); }
@keyframes navIn { from { opacity: 0; transform: translateY(-4px); } }

/* showreel pill, bottom centre (hidden while SITE.showreel is empty) */
.reel {
  position: fixed; z-index: 55; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 24px 0 20px; border-radius: 99px;
  background: var(--red); color: #000; font: 700 14px/1 var(--ui); letter-spacing: .01em;
  box-shadow: 0 10px 40px rgba(255, 42, 26, .35); transition: transform .4s var(--ease), opacity .3s;
}
.reel:hover { transform: translateX(-50%) scale(1.05); }
.reel-dot { width: 0; height: 0; border-left: 9px solid #000; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
body.lb-open .reel { opacity: 0; pointer-events: none; }

/* ---------- Selected: justified grid ---------- */
.sel { padding-top: 0; }   /* the nav floats over the wall */
.jgrid { display: flex; flex-wrap: wrap; width: 100%; padding: 0 var(--gut); }
.tile { position: relative; flex: none; container-type: inline-size; padding: 0 3px 26px; }
.tile > button { display: block; width: 100%; }
.t-media { position: relative; display: block; overflow: hidden; background: #0d0b0b; border-radius: 4px; }
.t-media img, .t-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), opacity .5s;
}
.t-media img { opacity: 0; }
.t-media img.ok { opacity: 1; }
.t-media video { opacity: 0; }
.tile.playing video { opacity: 1; }
.tile.playing .t-media img { opacity: 0; }
.t-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font: 800 clamp(18px, 2vw, 30px)/1 var(--serif); color: rgba(239,236,230,.18); }
.t-media:has(img.ok) .t-fallback { visibility: hidden; }
.t-media::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s; }
.t-cap { display: block; padding: 12px 2px 0; }
.t-top { display: block; min-height: 15px; font: 700 11px/1.35 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
/* roles show on the desktop wall (hover caption); phones keep the tiles quiet */
body:not(.wall) .jgrid .t-top { display: none; }
.t-ttl { display: block; margin-top: 0; font: 700 21px/1.12 var(--serif); color: var(--fg); letter-spacing: -.01em; }
.t-cl { display: block; margin-top: 3px; font-size: 15px; color: var(--dim); }
.t-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.8); opacity: 0;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: opacity .35s, transform .5s var(--ease); z-index: 2; pointer-events: none;
}
.t-play::before { content: ""; margin-left: 4px; border-left: 13px solid var(--fg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
@media (hover: hover) {
  .jgrid:hover .tile:not(:hover) .t-media::after { opacity: .7; }
  .jgrid:hover .tile:not(:hover) .t-cap { opacity: .45; }
  .t-cap { transition: opacity .4s; }
  .jgrid .tile:hover .t-media img, .jgrid .tile:hover .t-media video { transform: scale(1.04); }
  .tile:hover .t-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .tile:hover .t-ttl { color: var(--red); }
}
@container (max-width: 240px) { .t-ttl { font-size: 17px; } .t-cl { font-size: 14px; } }

/* video wall (desktop with a mouse): no room for captions, info fades in over the frame on hover */
.wall .jgrid { padding: 0; }   /* edge to edge */
.wall .jgrid .tile { padding: 0 1px 2px; }
.wall .t-media { border-radius: 0; }
.wall .t-play { display: none; }
.wall .t-cap {
  position: absolute; left: 1px; right: 1px; bottom: 2px; z-index: 3; pointer-events: none;
  padding: 64px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.45) 55%, transparent);
  opacity: 0; transition: opacity .45s var(--ease);
}
.wall .t-cap > span { transform: translateY(10px); opacity: 0; transition: transform .6s var(--ease), opacity .5s var(--ease); }
.wall .t-cap .t-ttl { transition-delay: .05s; }
.wall .t-cap .t-cl { transition-delay: .1s; }
.wall .tile:hover .t-cap, .wall .tile:focus-within .t-cap { opacity: 1; }
.wall .tile:hover .t-cap > span, .wall .tile:focus-within .t-cap > span { transform: none; opacity: 1; }
.wall .tile:hover .t-ttl { color: var(--fg); }
.wall .jgrid:hover .tile:not(:hover) .t-media::after { opacity: .45; }
.wall .t-ttl { font-size: 22px; margin-top: 6px; }
.wall .t-top { font-size: 10.5px; }

/* quiet signature under the Selected grid */
.sign {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 48px; align-items: start;
  margin: clamp(48px, 6vw, 90px) calc(var(--gut) + 3px) 0; padding-top: 22px; border-top: 1px solid var(--line);
}
.sign-name { font: 800 clamp(30px, 2.8vw, 44px)/1 var(--serif); letter-spacing: -.03em; }
.sign-bio { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--dim); max-width: 56ch; }
.sign-more { margin-top: 14px; color: var(--fg); transition: color .2s; }
.sign-more:hover { color: var(--red); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 99px;
  font: 600 14px/1 var(--ui); letter-spacing: .005em;
  box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s, box-shadow .25s;
}
.btn:hover { box-shadow: inset 0 0 0 1px var(--fg); }

/* ---------- footer ---------- */
.foot { padding: clamp(70px, 8vw, 120px) var(--gut) 60px; }
.foot-mail {
  display: inline-block; font: 800 clamp(34px, 6.6vw, 112px)/.95 var(--serif); letter-spacing: -.04em;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat; transition: background-size .6s var(--ease), color .3s;
  word-break: break-all;
}
.foot-mail:hover { color: var(--red); background-size: 100% 3px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; }
.foot-links a { color: var(--fg); }
.foot-links a:hover, .ab-links a:hover { color: var(--red); }
.clock { color: var(--fg); }

/* ---------- pages (Index / About) ---------- */
.view { min-height: 100vh; }   /* footer always starts below the first screen, even with a short filtered index */
.page { padding: 96px var(--gut) 0; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 3px 22px; border-bottom: 1px solid var(--line); }
.page-t { font: 900 clamp(44px, 5.4vw, 88px)/.9 var(--serif); letter-spacing: -.04em; }

/* ---------- Index ---------- */
.ix-sum { white-space: nowrap; }
/* Index has no visible heading or count: the filters are the top of the page (heading kept for screen readers) */
.pane-index .page-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
.pane-index { padding-top: 66px; }
/* filter bar: sticks under the header while the list scrolls */
.ix-bar {
  position: sticky; top: 66px; z-index: 20; margin: 0 calc(var(--gut) * -1); padding: 14px var(--gut) 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  background: rgba(0,0,0,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.ix-fg { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ix-fl { flex: none; }
.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 99px;
  font: 600 14px/1 var(--ui); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s, background .2s, box-shadow .2s;
}
.chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.chip[aria-pressed="true"], .chip-on { color: #000; background: var(--red); box-shadow: none; }
.chip sup { font-size: 10px; opacity: .65; }
.chip .x { font-size: 12px; }
.ix-active { display: flex; }

.ix-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 64px); align-items: start; padding-top: 8px; }

/* list grouped by year */
.ix-year + .ix-year { margin-top: 18px; }
.ix-y {
  display: flex; align-items: baseline; gap: 10px; padding: 26px 0 20px;
  font: 900 clamp(40px, 4vw, 64px)/.9 var(--serif); letter-spacing: -.04em; color: var(--fg);
}
.ix-y sup { font: 700 12px/1 var(--ui); letter-spacing: .08em; color: var(--red); }
.ix-rows { border-top: 1px solid var(--line); }
.ix-row {
  position: relative; display: grid; align-items: baseline; cursor: pointer;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr) minmax(0, 1.6fr) 124px;
  gap: 18px; padding: 11px 12px; border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.ix-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--red); transform: scaleY(0); transition: transform .25s var(--ease); }
.ix-th { display: none; }
.ix-row .ttl { font: 700 20px/1.2 var(--serif); letter-spacing: -.01em; transition: color .2s; }
.ix-row .cl { font-size: 15px; color: var(--dim); justify-self: start; transition: color .2s; }
.ix-row button.cl:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.ix-row.rep .cl { color: var(--faint); }
.ix-row .cl.own { font-style: italic; color: var(--faint); }
.ix-row .ro { font-size: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-row .ty { font: 700 11px/1.4 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); text-align: right; white-space: nowrap; }
.ix-row.on { background: rgba(255,255,255,.045); }
.ix-row.on::before { transform: scaleY(1); }
.ix-row.on .ttl { color: var(--red); }
.ix-none { padding: 60px 0; color: var(--dim); font-size: 18px; }

/* live preview panel */
.ix-pv { position: sticky; top: 150px; cursor: pointer; }
.ix-pv.none { visibility: hidden; }
.ix-pv-media {
  position: relative; height: min(56vh, 600px); border-radius: 6px; overflow: hidden; background: #0b0909;
}
.ix-pv-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(30px) brightness(.4) saturate(1.2); }
.ix-pv-img, .ix-pv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s; }
.ix-pv-vid { opacity: 0; }
.ix-pv-media.playing .ix-pv-vid { opacity: 1; }
.ix-pv-media.playing .ix-pv-img { opacity: 0; }
.ix-pv:hover .t-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ix-pv-info { padding-top: 18px; }
.ix-pv-t { margin-top: 8px; font: 800 clamp(26px, 2.4vw, 40px)/1.02 var(--serif); letter-spacing: -.03em; }
.ix-pv-cl { margin-top: 8px; font-size: 15px; color: var(--dim); }
.ix-pv-d { margin-top: 14px; font-size: 15px; line-height: 1.55; color: rgba(239,236,230,.8); max-width: 60ch;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- About ---------- */
.pane-about { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: clamp(28px, 4.5vw, 80px); align-items: start; }
.ab-photo { position: static; }   /* scrolls away with the page */
.ab-photo img { width: 100%; height: auto; aspect-ratio: 834/1280; object-fit: cover; border-radius: 18px; }
.ab-photo figcaption { display: none; }   /* no caption: it is obviously me */
.ab-name { font: 900 clamp(56px, 7vw, 120px)/1 var(--serif); letter-spacing: -.045em; }
.ab-name em { font-style: italic; font-weight: 500; color: var(--red); font-size: 1.22em; }   /* italic Cormorant runs small: surname reads larger than the first name */
.ab-roles { margin: 20px 0 40px; font: 600 15px/1.5 var(--ui); color: var(--dim); }
.ab-bio p { font: 400 clamp(17px, 1.3vw, 21px)/1.55 var(--sans); letter-spacing: 0; margin-bottom: .9em; max-width: 64ch; }
.ab-h { margin: 52px 0 0; }
.hl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 14px 0 10px; }
.hl li { border-top: 1px solid var(--line); }
.hl li > * { display: block; width: 100%; padding: 20px 0 22px; }
.hl-n { display: block; margin-bottom: 10px; color: var(--red); }
.hl-t { display: block; text-wrap: balance; font: 800 clamp(21px, 1.7vw, 27px)/1.1 var(--serif); letter-spacing: -.015em; margin-bottom: 8px; transition: color .2s; }
.hl-s { display: block; font-size: 16px; line-height: 1.55; color: var(--dim); }
.hl-go { display: inline-block; margin-top: 12px; color: var(--red); transition: transform .3s var(--ease); }
.hl-link:hover .hl-t { color: var(--red); }
.hl-link:hover .hl-go { transform: translateX(4px); }
.ab-also { margin-top: 18px; max-width: 64ch; }
.ab-also p { font-size: 16px; line-height: 1.55; padding: 12px 0; border-top: 1px solid var(--line); }
.ab-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 48px; }
.ab-clients .ab-list { columns: 2; column-gap: 32px; }
.ab-clients .ab-list li { break-inside: avoid; }
/* contacts sit right under the bio */
.ab-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-top: 6px; }
.ab-contact .ab-mail { margin-bottom: 0; }
.ab-contact .ab-links { display: flex; gap: 18px; }
.ab-contact .ab-links a { font-size: 16px; }
.ab-cols h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--dim); }
.ab-cols h3:not(:first-child) { margin-top: 32px; }
.ab-list li { font-size: 16px; line-height: 1.6; }
.ab-mail { display: inline-block; font: 800 26px/1.2 var(--serif); margin-bottom: 12px; border-bottom: 2px solid var(--red); }
.ab-mail:hover { color: var(--red); }
.ab-links a::after { content: " ↗"; color: var(--dim); }

/* ---------- LIGHTBOX ---------- */
.lb { position: fixed; inset: 0; z-index: 80; background: #000; overflow-y: auto; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; } }
.lb-panel { min-height: 100%; padding: 0 var(--gut) 48px; display: flex; flex-direction: column; }
.lb-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; color: var(--red); background: #000; }
.lb-btns { display: flex; gap: 6px; }
.lb-btns .pill { font-size: 16px; }
.lb-sub { display: none; }
.lb-stage {
  --ar: 1.7778; position: relative; margin: 0 auto; background: #000; overflow: hidden;
  width: min(100%, calc((100vh - 250px) * var(--ar))); aspect-ratio: var(--ar);
}
/* players can show a hairline of their own (white) page at the edges when the frame size rounds to
   half pixels: overscan the iframe by 2px and let the stage clip it */
.lb-stage iframe { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border: 0; background: #000; color-scheme: dark; }
/* stills gallery: a horizontal strip of frames, each as tall as the stage */
.lb-stage.is-stills { width: 100%; aspect-ratio: auto; height: calc(100vh - 250px); }
.lb-strip {
  display: flex; gap: 8px; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-strip img { height: 100%; width: auto; max-width: none; flex: none; object-fit: contain; scroll-snap-align: start; border-radius: 3px; background: #0b0909; }
.lb-snav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: var(--fg); font-size: 18px; transition: background .2s;
}
.lb-snav:hover { background: var(--red); color: #000; }
.lb-snav.prev { left: 10px; } .lb-snav.next { right: 10px; }
.lb-scount { position: absolute; right: 12px; bottom: 10px; color: var(--fg); background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 99px; }
.lb-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); }
.lb-info { display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; gap: 28px; padding-top: 20px; margin-top: 16px; border-top: 1px solid var(--line); }
.lb-title { margin-top: 8px; font: 800 clamp(28px, 2.8vw, 46px)/1 var(--serif); letter-spacing: -.03em; }
.lb-dl > div + div { margin-top: 16px; }
.lb-dl dt { color: var(--dim); margin-bottom: 6px; }
.lb-dl dd { font-size: 17px; }
.lb-right { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.lb-desc { color: rgba(239,236,230,.85); font-size: 17px; line-height: 1.6; }

/* vertical video on wide screens: video left, text right, everything visible without scrolling */
@media (min-width: 1000px) {
  .lb.is-vert .lb-panel { display: grid; grid-template-columns: auto minmax(320px, 520px); grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 72px); justify-content: center; }
  .lb.is-vert .lb-top { grid-column: 1 / -1; }
  .lb.is-vert .lb-stage { width: auto; height: calc(100vh - 110px); margin: 0; }
  .lb.is-vert .lb-info { grid-template-columns: 1fr; align-content: center; gap: 22px; margin: 0; padding: 0; border: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pill { padding: 0 16px; }
  .pill-tabs button { padding: 0 14px; }
}
@media (max-width: 999px) {
  /* index: no preview panel, thumbnails in the rows */
  .ix-wrap { grid-template-columns: 1fr; }
  .ix-pv { display: none; }
  .ix-row { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 10px 6px; }
  .ix-th { --h: 52px; display: flex; align-items: center; width: 72px; height: var(--h); grid-row: 1 / span 2; overflow: hidden; }
  .ix-th img { height: var(--h); width: min(100%, calc(var(--h) * var(--ar))); object-fit: cover; border-radius: 3px; background: #111; }
  .ix-row .ttl { grid-column: 2; font-size: 18px; }
  .ix-row .cl { grid-column: 2; font-size: 14px; }
  .ix-row .ro { grid-column: 3; grid-row: 1 / span 2; }
  .ix-row .ty { display: none; }
  .ab-cols { grid-template-columns: 1fr 1fr; }
  .lb-info { grid-template-columns: 1fr 1fr; }
  .lb-right { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .lbl { font-size: 12px; }
  .dock { top: 10px; gap: 4px; }
  .pill { height: 48px; font-size: 12.5px; }
  .pill-ico { width: 48px; }
  .pill-tabs button { height: 40px; padding: 0 12px; font-size: 12.5px; letter-spacing: 0; }
  .nav-tog, .nav-items button { height: 40px; }
  .nav-items button { padding: 0 10px; letter-spacing: .08em; }
  /* phones: while open, the three sections get the whole pill; language and socials step aside */
  .dock { left: 10px; transform: none; }   /* phones: nav on the left, language on the right */
  .lang-corner { top: 10px; right: 10px; }
  .dock.open .pill-ico, .dock.open ~ .lang-corner { display: none; }
  .dock.open .nav-tog { padding: 0 10px; }
  .pill-lang { width: 48px; padding: 0; }
  .pill-lang button { height: 48px; width: 48px; padding: 0; font-size: 12px; }
  .pill-lang button[aria-pressed="true"] { display: none; }   /* phones: one button that switches to the other language */
  .pill-lang button[aria-pressed="false"] { color: var(--fg); }
  .sel { padding-top: 0; }
  .sign { grid-template-columns: 1fr; gap: 6px; margin: 36px 13px 0; }
  .jgrid { padding: 0 10px; }
  .tile { padding: 0 3px 22px; }
  .t-top { font-size: 12px; }
  .t-ttl { font-size: 18px; }
  .t-cl { font-size: 14px; }

  .page { padding-top: 80px; }
  .page-head { flex-wrap: wrap; }
  .ix-bar { top: 66px; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px var(--gut); }
  .ix-fg { gap: 8px; }
  .ix-fl { width: 58px; }
  .ix-chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .ix-fg { width: 100%; }
  .ix-chips::-webkit-scrollbar { display: none; }
  .chip { height: 36px; padding: 0 13px; font-size: 13.5px; flex: none; }
  .ix-row { grid-template-columns: 64px minmax(0, 1fr); padding: 10px 4px; }
  .ix-th { --h: 48px; width: 64px; grid-row: 1 / span 3; }
  .ix-row .ttl { font-size: 17px; }
  .ix-row .ro { grid-column: 2; grid-row: auto; font-size: 13px; }

  .pane-about { grid-template-columns: 1fr; }
  .ab-photo { position: static; max-width: 360px; }
  .hl { grid-template-columns: 1fr; }
  .ab-cols { grid-template-columns: 1fr; }
  .lb-sub { display: block; margin: 0 0 10px; font-size: 14px; color: var(--dim); }
  .lb-info { grid-template-columns: 1fr; }
  .lb-stage.is-stills { height: 62vh; }
  .lb-snav { display: none; }
  .foot-row { flex-direction: column; }
  .reel { height: 46px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  html { scroll-behavior: auto; }
}