/* 00-tokens.css */
/* Design tokens (SPEC §2). Dark only. */
:root {
  color-scheme: dark;

  --bg: #0A0A0B;
  --bg-2: #0F0F11;
  --bg-hover: #141416;
  --line: #1F1F22;
  --line-2: #2A2A2E;
  --text: #EDEDEA;
  --text-2: #C9C9C4;
  --text-3: #A3A39E;
  --muted: #8F8F8A;
  --accent: #CFC8B8;

  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(64px, 8vw, 112px);

  --font-sans: "Inter", system-ui, sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;
}

/* 10-base.css */
/* Base elements and typography (SPEC §3, §4.6 links/focus, §6 smooth scroll). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  /* Keeps layout steady when the lightbox locks scrolling. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The landing page fills the viewport exactly; no gutter. */
html:has(body.landing) {
  scrollbar-gutter: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  /* "normal", as in the mockups; text blocks set their own line-height. */
  line-height: normal;
}

body > main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 500;
}

/* H1 hero */
h1 {
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Section H2 */
h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Utilities */
.muted {
  color: var(--muted);
}

.accent {
  color: var(--accent);
}

.skip-link {
  position: absolute;
  top: 8px;
  left: var(--gutter);
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
  transform: none;
}

/* 20-components.css */
/* Shared components (SPEC §4). Page-specific styles live in 30-… and up. */

/* ---- Layout -------------------------------------------------------------- */

/* Horizontal page padding, everywhere. */
.wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Vertical section rhythm. */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* §4.2: fixed 180px label column next to the content; stacks when narrow. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
}

.split__label {
  flex: 0 0 180px;
}

.split__body {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 980px;
}

/* Mono section label, e.g. "/ 01 ARTIST" (§4.2). Normal leading as in the
   mockups; multi-line labels (Artist focus sections) set 1.8. */
.label {
  font-size: 12px;
  color: var(--muted);
}

/* ---- 4.1 Header ---------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 0 24px;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
  scrollbar-width: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
}

.site-nav a:hover {
  color: var(--accent);
}

.site-nav a.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav {
    width: 100%;
  }
}

/* ---- Hero (Artist, VJ) --------------------------------------------------- */

.hero {
  position: relative;
  height: 62vw;
  min-height: 440px;
  /* Never taller than 90% of the screen, so the whole hero is visible at once. */
  max-height: min(780px, 90vh);
  max-height: min(780px, 90svh);
  overflow: hidden;
  background: #000;
}

/* Video, image or .ph placeholder filling the hero. */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 11, 0.85) 100%);
  pointer-events: none;
}

.hero__row {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.hero__row h1 {
  max-width: 820px;
}

.hero__meta {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-align: right;
}

/* When the caption wraps under the title, both lines align left together. */
@media (max-width: 720px) {
  .hero__meta {
    text-align: left;
  }
}

/* ---- 4.3 Media tile ------------------------------------------------------ */

.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.tile__media {
  overflow: hidden;
  background: var(--bg-hover);
}

.tile__media picture {
  width: 100%;
  height: 100%;
}

.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.tile:hover .tile__media img,
.tile:hover .tile__media video {
  transform: scale(1.025);
  filter: saturate(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover .tile__media img,
  .tile:hover .tile__media video {
    transform: none;
  }
}

.tile__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}

.tile__title {
  font-size: 24px;
  font-weight: 500;
}

.tile__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ---- 4.4 Placeholder media ----------------------------------------------- */

.ph {
  /* Fills a sized parent (hero, tile media); an inline aspect-ratio sizes it otherwise. */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg-hover);
}

.ph__label {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  text-align: center;
}

/* ---- End band and footer (Main.dc.html) ---------------------------------- */

.end-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 48px;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  border-top: 1px solid var(--line);
}

.end-band__text {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.lbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 20px;
  border: 1px solid var(--accent);
  font-size: 15px;
  white-space: nowrap;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 20px var(--gutter) 32px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  color: var(--text-3);
}

.site-footer a:hover {
  color: var(--accent);
}

/* 25-lightbox.css */
/* Shared lightbox (src/assets/js/site.js). One <dialog class="lb">; flat, no radius or shadow. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px clamp(16px, 3vw, 40px) 32px;
  border: 0;
  box-sizing: border-box;
  overflow-y: auto;
  background: rgba(8, 8, 9, 0.97);
  color: var(--text);
}
.lb[open] { display: flex; flex-direction: column; gap: 20px; }
.lb::backdrop { background: transparent; }
.lb-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lb-count { margin: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--text-3); }
.lb-title { color: var(--text); }
.lb-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.lb-close { font-size: 22px; }
.lb-btn:hover { background: var(--bg-hover); }
.lb-mid { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-height: 0; }
.lb-stage { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; }
.lb-stage figure { margin: 0; display: flex; justify-content: center; }
.lb-stage figure[hidden] { display: none; }
.lb-stage figcaption { display: none; }
.lb-stage picture { display: contents; }
.lb-stage img,
.lb-stage video { max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain; display: block; }
.lb-stage video { background: #000; }
.lb-thumbs { display: flex; gap: 8px; overflow-x: auto; justify-content: safe center; padding: 4px; }
.lb-thumbs { scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs[hidden],
.lb-btn[hidden] { display: none; }
.lb-thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: opacity 0.15s;
}
.lb-thumb img { height: 64px; width: auto; display: block; }
.lb-thumb:hover { opacity: 0.8; }
.lb-thumb.is-active { opacity: 1; outline-color: var(--accent); }
@media (max-width: 640px) {
  .lb-mid { flex-wrap: wrap; justify-content: center; }
  .lb-stage { flex-basis: 100%; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-thumb { transition: none; }
}

/* 30-landing.css */
/* Landing page (SPEC §5.1). */
body.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* Mockup: tighter row gap when the meta wraps under the brand. */
.landing .site-header {
  row-gap: 12px;
}

/* Plain heading here, not a link: no 44px tap-target box (keeps the 62px header). */
.landing .site-header__brand {
  display: block;
  min-height: 0;
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.site-header__meta {
  margin: 0;
  color: var(--muted);
}

.landing main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.landing-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  padding: clamp(28px, 4vw, 48px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.landing-intro h1 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.landing-intro__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  font-size: 14px;
  white-space: nowrap;
}

.doors {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  min-height: 560px;
}

.door {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-height: 280px;
  overflow: hidden;
  background: #000;
  border-right: 1px solid var(--line);
  transition: flex-grow 0.5s ease;
}

.door:last-child {
  border-right: 0;
}

.door:hover,
.door:focus-visible {
  flex-grow: 1.3;
  color: var(--text);
}

.door:focus-visible {
  outline-offset: -2px;
}

.door picture {
  position: absolute;
  inset: 0;
}

.door .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s ease, transform 0.8s ease;
}

.door picture .media {
  position: static;
}

.door:hover .media,
.door:focus-visible .media {
  opacity: 1;
  transform: scale(1.04);
}

.door__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 35%, rgba(10, 10, 11, 0.85) 100%);
}

.door__index {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.door__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Four doors share the row on desktop: sized so "Photographer" fits a quarter. */
.door__title {
  font-size: clamp(30px, 2.7vw, 46px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.door__desc {
  max-width: 340px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}

.door__go {
  align-self: flex-start;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  transition: transform 0.4s ease;
}

.door:hover .door__go,
.door:focus-visible .door__go {
  transform: translateX(8px);
}

.landing-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.landing-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  color: var(--text-3);
}

.landing-footer a:hover {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .door,
  .door .media,
  .door__go {
    transition: none;
  }

  .door:hover,
  .door:focus-visible {
    flex-grow: 1;
  }

  .door:hover .media,
  .door:focus-visible .media {
    transform: none;
  }
}

/* Tablet: two rows of two doors. */
@media (min-width: 721px) and (max-width: 1100px) {
  .door {
    flex: 1 1 50%;
    min-height: 320px;
  }

  .door:nth-child(2n) {
    border-right: 0;
  }

  .door:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .door:hover,
  .door:focus-visible {
    flex-grow: 1;
  }

}

@media (max-width: 720px) {
  .doors {
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 0;
  }

  .door {
    flex: 1 0 auto;
    min-height: 33svh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .door:last-child {
    border-bottom: 0;
  }

  .door:hover,
  .door:focus-visible {
    flex-grow: 1;
  }

  .door:hover .media,
  .door:focus-visible .media {
    transform: none;
  }
}

@media (hover: none) {
  .door:hover,
  .door:focus-visible {
    flex-grow: 1;
  }

  .door:hover .media,
  .door:focus-visible .media {
    transform: none;
  }
}

/* 40-artist.css */
/* Artist page (HANDOVER §2, Main.dc.html). Hero classes live in 20-components.css. */

.statement {
  padding: clamp(48px, 7vw, 96px) var(--gutter);
}

.statement .label {
  letter-spacing: 0.06em;
}

.statement__text {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 980px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---- Work rows ----------------------------------------------------------- */

.work {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px clamp(32px, 5vw, 72px);
  padding: clamp(40px, 5vw, 72px) var(--gutter);
  border-top: 1px solid var(--line);
}

.work--reverse {
  flex-direction: row-reverse;
}

.work__media {
  flex: 3 1 560px;
  min-width: 0;
  display: flex;
  justify-content: center;
  cursor: zoom-in;
}

.work__media:focus-visible,
.work__cta:focus-visible {
  outline: 2px solid var(--accent, #CFC8B8);
  outline-offset: 4px;
}

/* The media box is as wide as its column but never taller than 90% of the
   screen: for tall (portrait) works the width shrinks to 90vh x aspect ratio,
   so the whole picture is always visible without scrolling. --ar is "w / h". */
.work__media picture,
.work__media video {
  display: block;
  width: 100%;
  min-width: 0; /* flex item: don't grow to the video's intrinsic width */
  max-width: calc(90vh * (var(--ar)));
  max-width: calc(90svh * (var(--ar)));
  overflow: hidden;
}

.work__media img,
.work__media video {
  display: block;
  width: 100%;
  height: auto; /* ignore the width/height attributes; aspect-ratio sizes it */
  aspect-ratio: var(--ar);
  object-fit: cover;
  background: #000;
  transition: transform 0.6s ease;
}

.work__media:hover img,
.work__media:hover video {
  transform: scale(1.02);
}

.work__text {
  flex: 2 1 320px;
  min-width: 0;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.work__kind {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.work__text h3 {
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.work__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

.work__facts {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.work__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.work__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--text);
}

.work__cta:hover {
  border-color: #CFC8B8;
}

.works__note {
  padding: 0 var(--gutter) clamp(48px, 6vw, 80px);
  font-size: 15px;
  color: var(--text-3);
}

.works__note a,
.facts__link {
  border-bottom: 1px solid #CFC8B8;
}

.facts__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
}

@media (max-width: 640px) {
  .work,
  .work--reverse {
    flex-direction: column;
    align-items: stretch;
  }

  .work__media,
  .work__text {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work__media:hover img,
  .work__media:hover video {
    transform: none;
  }
}

/* ---- About --------------------------------------------------------------- */

.about {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--line);
}

.about__label {
  flex: 0 0 180px;
  letter-spacing: 0.06em;
}

.about__text {
  flex: 2 1 440px;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
}

.about__text .about__lead {
  font-size: 26px;
  line-height: 1.35;
  color: var(--text);
}

.facts {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: 14px;
  line-height: 1.8;
}

.facts .muted {
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* 45-photographer.css */
/* Photographer page. Uses .hero, .split and .label from 20-components.css. */

.hero--photo picture {
  position: absolute;
  inset: 0;
}

/* The hero image is a portrait frame: keep the pylon's arms in view. */
.hero--photo .hero__media {
  object-position: 50% 35%;
}

.hero--photo .hero__meta {
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.photo-statement {
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.photo-statement .label {
  letter-spacing: 0.06em;
}

.photo-statement__text {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 980px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Sticky jump links to each series. */
.series-index {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 0 28px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  padding: 4px var(--gutter);
  background: rgba(10, 10, 11, 0.94);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.series-index::-webkit-scrollbar {
  display: none;
}

.series-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-3);
}

.series-index a:hover {
  color: var(--accent);
}

.series {
  padding: var(--section-y) var(--gutter) 0;
  scroll-margin-top: 52px;
}

.series__head {
  margin-bottom: 40px;
}

.series .label {
  line-height: 1.8;
}

.series__text {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.series__text h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.series__text p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Justified rows: each frame's flex-grow is its aspect ratio (set inline),
   so the three frames in a row end up the same height and fill the width uncropped. */
.series__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.series__row {
  display: flex;
  gap: 8px;
}

.series__frame {
  flex-basis: 0;
  min-width: 0;
  background: var(--bg-hover);
}

.series__open {
  display: block;
  cursor: zoom-in;
}

.series__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.series__open img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.series__open:hover img {
  opacity: 0.85;
}

.photo-also {
  margin: clamp(56px, 7vw, 96px) var(--gutter) 0;
  font-size: 15px;
  color: var(--text-3);
}

.photo-also a {
  border-bottom: 1px solid var(--accent);
}

@media (max-width: 640px) {
  .series__row {
    flex-wrap: wrap;
  }

  .series__frame {
    flex: 1 1 40%;
  }
}

/* 50-vj.css */
/* VJ page (HANDOVER §2 VJ; reference/VJ.dc.html). */

.vj-eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.vj-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-end;
  padding: clamp(64px, 9vw, 128px) var(--gutter) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}

.vj-hero__main {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vj-hero h1 {
  max-width: 900px;
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.vj-hero__lead {
  max-width: 640px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-2);
}

.vj-hero__side {
  flex: 1 1 320px;
  min-width: 0;
  border-top: 1px solid var(--line-2);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vj-hero__side .vj-eyebrow {
  margin-bottom: 4px;
}

.vj-hero__venues {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
}

.vj-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  font-size: 14px;
}

.showreel {
  padding: clamp(32px, 4vw, 56px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.showreel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 16px;
}

.showreel__cap {
  font-size: 13px;
  color: var(--muted);
}

.showreel video {
  display: block;
  width: 100%;
  /* Never taller than 90% of the screen. */
  max-width: calc(90vh * 16 / 9);
  max-width: calc(90svh * 16 / 9);
  margin-inline: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.vj-started {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.vj-started__label {
  flex: 0 0 180px;
}

.vj-started__fig {
  flex: 1 1 520px;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vj-started blockquote {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.vj-started figcaption {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.gigs {
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}

.gigs__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.gigs__head h2 {
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
}

.gigs__list {
  border-top: 1px solid var(--line-2);
}

.gig {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}

.gig__year {
  flex: 0 0 72px;
  font-size: 14px;
  color: var(--accent);
}

.gig__id {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gig__title {
  font-size: 24px;
  font-weight: 500;
}

.gig__tag {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.gig__desc {
  flex: 2 1 400px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-3);
}

/* Link to a gig's documentation video (first lightbox item). */
.gig__watch {
  flex: 1 1 100%;
  margin: 12px 0 0;
}

.gig__watch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  border-bottom: 1px solid var(--accent);
}

.gig__thumbs {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gig__thumb {
  flex: 1 0 140px;
  min-width: 140px;
  background: var(--bg-hover);
  cursor: zoom-in;
}

.gig__thumb picture,
.gig__thumb img {
  display: block;
  width: 100%;
}

.gig__thumb img {
  height: 220px;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.gig__thumb:hover img {
  opacity: 0.85;
}

.gig__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.rig {
  padding: clamp(64px, 8vw, 112px) var(--gutter);
  gap: 32px 64px;
  border-top: 1px solid var(--line);
}

.rig__label {
  flex: 0 0 180px;
}

.rig__grid {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.rig__cell {
  background: var(--bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rig__k {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.rig__v {
  font-size: 20px;
}

/* 55-contact.css */
/* Contact page. */
.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(40px, 6vw, 96px);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}

.contact__main {
  flex: 3 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact__eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.contact__title {
  margin: 0;
  max-width: 760px;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.contact__intro {
  margin: 0;
  max-width: 620px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
}

.contact__mail {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font-size: clamp(26px, 3.6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  word-break: break-word;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

.contact__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  font-size: 15px;
}

.contact__details > * {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
}

.contact__details span {
  color: var(--muted);
}

.topics {
  flex: 2 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2);
}

.topic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
}

.topic__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 500;
}

.topic__head > span:last-child {
  color: var(--muted);
}

.topic__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-3);
}

/* 60-programmer.css */
/* Programmer page (Round 3). */

.intro {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-end;
  padding: clamp(64px, 9vw, 128px) var(--gutter) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}

.intro__text {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.intro__text > * { margin: 0; }
.intro .label { letter-spacing: 0.06em; }

.intro h1 {
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.intro__lead {
  max-width: 640px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-2);
}

.tools {
  flex: 1 1 320px;
  min-width: 0;
  border-top: 1px solid var(--line-2);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}

.tools p { margin: 0; }
.tools .label { margin: 0 0 4px; letter-spacing: 0.08em; }

.projects {
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}

.projects__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.projects__head h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
}

.projects__head p { margin: 0; letter-spacing: 0.06em; }

.projects__list { border-top: 1px solid var(--line-2); }

.project {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}

.project__year {
  flex: 0 0 72px;
  font-size: 14px;
  color: var(--accent);
}

.project__title {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project__title .label { letter-spacing: 0.06em; }

.project h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
}

.project__body {
  flex: 2 1 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project__body > * { margin: 0; }

.project__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-3);
}

.project__stack {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.project__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--accent);
}

.studio {
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  border-top: 1px solid var(--line);
}

.studio__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  margin-bottom: 32px;
}

.studio__head > .label { flex: 0 0 180px; margin: 0; letter-spacing: 0.06em; }

.studio__intro {
  flex: 1 1 520px;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio__intro > * { margin: 0; }

.studio__intro h2 {
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
}

.studio__intro p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

.studio__intro .studio__credit {
  font-size: 15px;
  color: var(--text-3);
}

.studio__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  border-bottom: 1px solid var(--accent);
}

.studio__list { border-top: 1px solid var(--line-2); }

.studio__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}

.studio__year {
  flex: 0 0 72px;
  font-size: 14px;
  color: var(--accent);
}

.studio__name {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.studio__name .label { letter-spacing: 0.06em; }

.studio__title {
  font-family: var(--font-head, 'Inter Tight', 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 500;
}

.studio__desc {
  flex: 2 1 400px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-3);
}

.studio__role { color: var(--muted); }

/* 70-404.css */
/* 404 page. */
.notfound {
  padding-block: var(--section-y);
}

.notfound h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.notfound p {
  margin: 0 0 32px;
  color: var(--text-3);
}

.notfound__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  letter-spacing: 0.04em;
}