/* ============ TOKENS ============ */
:root {
  --bg:        #0c0a08;
  --bg-2:      #141110;
  --bg-3:      #1c1815;
  --fg:        #f4ede0;
  --fg-2:      #d8cfbf;
  --fg-dim:    #8a8074;
  --line:      rgba(244, 237, 224, 0.10);
  --line-2:    rgba(244, 237, 224, 0.18);
  --accent:    #d4a574;
  --display:   'Instrument Serif', 'Times New Roman', serif;
  --mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:      'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-feature-settings: "ss01","cv01"; letter-spacing: 0.04em; }
em { font-style: italic; color: var(--fg); }

::selection { background: var(--accent); color: #0c0a08; }

.page { position: relative; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 32px;
  transition: background 220ms ease, backdrop-filter 220ms ease, padding 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(12, 10, 8, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 12px 32px;
  border-bottom-color: var(--line);
}
.nav-mark { display: flex; align-items: center; gap: 12px; }
.nav-mark-glyph {
  width: 28px; height: 28px; border: 1px solid var(--fg);
  display: grid; place-items: center; border-radius: 50%;
  transition: border-color 200ms;
}
.nav-mark-glyph span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: background 200ms; }
.nav-mark-text { display: flex; flex-direction: column; line-height: 1; }
.nav-mark-name { font-family: var(--display); font-size: 18px; letter-spacing: 0.02em; }
.nav-mark-role { font-size: 9px; color: var(--fg-dim); margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 11px; }
.nav-links a { color: var(--fg-2); transition: color 160ms; position: relative; }
.nav-links a:hover { color: var(--fg); }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms ease;
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta {
  border: 1px solid var(--fg); padding: 8px 14px; border-radius: 999px;
  display: inline-flex; gap: 8px; font-size: 11px;
  transition: transform 200ms;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta span { font-size: 10px; }

/* ============ PROGRESS ============ */
.progress {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; color: var(--fg-dim);
}
.progress-track {
  width: 1px; height: 220px; background: var(--line);
  position: relative; overflow: hidden;
}
.progress-fill { position: absolute; top: 0; left: 0; right: 0; transition: height 60ms linear; }
.progress-num { font-family: var(--mono); }

/* ============ GRAIN & STRIPES ============ */
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.frame-stripes {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-rows: repeat(14, 1fr);
}
.frame-stripes > div { width: 100%; }

/* ============ HERO ============ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* iOS: exclude Safari's collapsing URL bar */
  min-height: 720px;
  overflow: hidden; cursor: none;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-poster {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  filter: saturate(0.95) contrast(1.05) brightness(0.7);
}
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.77vh; /* 16:9 cover */
  height: 56.25vw;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212, 165, 116, 0.10), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(8, 4, 0, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(12,10,8,0.55) 0%, rgba(12,10,8,0.30) 50%, rgba(10,8,6,0.78) 100%);
  transition: opacity 360ms;
}
.hero-veil.playing { opacity: 0.35; }
.hero-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212, 165, 116, 0.18), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(60, 30, 20, 0.6), transparent 60%),
    linear-gradient(180deg, #0c0a08 0%, #1a120c 50%, #0a0806 100%);
}
.hero-grain { opacity: 0.18; }
.hero-center.dim { opacity: 0.18; transition: opacity 360ms; }
.hero-center { transition: opacity 360ms; }

.hero-bars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-bars > div {
  position: absolute; left: 0; right: 0; height: 56px;
  background: var(--bg);
}
.hero-bars > div:first-child { top: 0; }
.hero-bars > div:last-child { bottom: 0; }

.hero-top, .hero-bottom {
  position: relative; z-index: 2;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--fg-dim);
  /* Let taps fall through to the YT iframe; interactive children re-enable. */
  pointer-events: none;
}
.hero-bottom { height: 56px; }
.hero-top {
  color: var(--fg-2);
  padding-top: 96px;
  height: auto;
  min-height: 120px;
  align-items: flex-end;
  padding-bottom: 8px;
}
.hero-tc { color: var(--accent); }

.hero-center {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 32px;
  pointer-events: none; /* text only — don't block the player underneath */
}
.hero-eyebrow { font-size: 11px; color: var(--accent); margin-bottom: 28px; }
.hero-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(80px, 16vw, 280px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  display: flex; flex-direction: column;
  text-wrap: balance;
}
.hero-name span:first-child {
  font-style: italic;
  color: var(--fg-2);
  margin-left: 0.06em;
}
.hero-name-2 {
  letter-spacing: -0.04em;
}
.hero-sub { font-size: 11px; color: var(--fg-dim); margin-top: 28px; }

.hero-bottom { padding-bottom: 24px; }
.hero-play {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--accent); padding: 12px 22px; border-radius: 999px;
  font-size: 11px; color: var(--fg);
  transition: transform 240ms, background 240ms;
  cursor: pointer; pointer-events: auto;
}
.hero-play:hover { transform: scale(1.04); background: rgba(212, 165, 116, 0.12); }

.hero-cursor {
  position: absolute; width: 56px; height: 56px;
  border: 1px solid var(--accent); border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  z-index: 5;
  mix-blend-mode: difference;
  transition: width 220ms, height 220ms;
}

/* ============ FRAME ============ */
.frame {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: transform 480ms cubic-bezier(.2,.7,.2,1), border-color 240ms;
  background: #0c0a08;
}
.frame-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1), filter 480ms;
  filter: saturate(1.02) contrast(1.02);
}
.frame:hover .frame-img { transform: scale(1.04); }
.frame-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 38%, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.18) 100%);
  opacity: 0.85;
  transition: opacity 320ms;
}
.frame:hover .frame-shade { opacity: 1; }
.frame:hover { border-color: var(--line-2); }
.frame:hover .frame-meta { opacity: 1; transform: translateY(0); }
.frame:hover .frame-corners span { width: 18px; height: 18px; }
.frame-corners { position: absolute; inset: 8px; pointer-events: none; }
.frame-corners span {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid rgba(244, 237, 224, 0.7);
  transition: width 320ms cubic-bezier(.2,.7,.2,1), height 320ms cubic-bezier(.2,.7,.2,1);
}
.frame-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.frame-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.frame-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.frame-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.frame-tag {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 8px; align-items: center;
  font-size: 10px; color: rgba(244, 237, 224, 0.85);
  background: rgba(0,0,0,0.45);
  padding: 6px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.frame-tag .dot { color: var(--accent); font-size: 8px; }
.frame-meta {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 280ms, transform 280ms;
  z-index: 2;
}
.frame-kind { font-size: 10px; color: var(--accent); margin-bottom: 8px; }
.frame-title {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.05; letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.frame-sub { font-style: italic; color: var(--fg-2); }
.frame-dir { font-size: 10px; color: var(--fg-2); margin-top: 8px; }
.frame-still {
  position: absolute; bottom: 14px; right: 14px;
  font-size: 10px; color: rgba(244, 237, 224, 0.4);
  letter-spacing: 0.08em;
}

/* ============ WORK ============ */
.work {
  position: relative; padding: 140px 32px 120px;
  border-bottom: 1px solid var(--line);
}
.work-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
  max-width: 1600px;
  margin-left: auto; margin-right: auto;
  width: 100%;
}
.work-eyebrow { font-size: 11px; color: var(--fg-dim); grid-column: 1 / -1; }
.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-top: 12px;
  text-wrap: balance;
}
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
.chip {
  font-size: 11px;
  padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--fg-2);
  display: inline-flex; gap: 8px; align-items: center;
  transition: all 200ms;
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip-count { font-size: 9px; color: var(--fg-dim); }
.chip.on .chip-count { color: rgba(12,10,8,0.6); }

.grid {
  max-width: 1600px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
}
.grid-uniform { grid-auto-rows: 200px; gap: 14px; }
.grid-uniform .grid-cell { grid-column: span 4 !important; grid-row: span 2 !important; }
.grid-tight { gap: 4px; }

.grid-cell { position: relative; min-height: 0; }
.grid-cell .frame { height: 100%; }

.work-foot {
  max-width: 1600px; margin: 64px auto 0;
  display: flex; align-items: center; gap: 18px;
  font-size: 10px; color: var(--fg-dim);
}
.work-foot .dash { flex: 1; height: 1px; background: var(--line); }

/* ============ RECENT (YouTube playlists) ============ */
.recent {
  padding: 120px 32px 120px;
  border-bottom: 1px solid var(--line);
  max-width: 1600px; margin: 0 auto; width: 100%;
}
.recent .work-head { margin-bottom: 40px; }
.recent-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.recent-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: none;
}
.recent-cta {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px;
  min-height: 220px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  text-decoration: none;
  transition: background 220ms, border-color 220ms, transform 220ms;
}
.recent-cta:hover {
  background: var(--bg-3);
  border-color: var(--fg-dim);
  transform: translateY(-2px);
}
.recent-cta-eyebrow {
  font-size: 10px; color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.recent-cta-title {
  font-family: var(--display);
  font-size: 30px; line-height: 1.1;
  color: var(--fg);
  margin-bottom: auto;
  text-wrap: balance;
}
.recent-cta-foot {
  margin-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--fg-dim);
}
.recent-cta-arrow { transition: transform 200ms; display: inline-block; }
.recent-cta:hover .recent-cta-arrow { transform: translate(2px, -2px); }

@media (max-width: 1100px) {
  .recent-cta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .recent-cta-grid { grid-template-columns: 1fr; }
}
.recent-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 1;
}
@media (max-width: 720px) {
  .recent { padding: 60px 18px; }
}
.info {
  padding: 140px 32px 120px;
  max-width: 1600px; margin: 0 auto;
}
.info-grid {
  display: grid; grid-template-columns: 0.85fr 1.4fr;
  column-gap: 80px;
  row-gap: 0;
  align-items: stretch;
}
.info-meta { grid-column: 1 / -1; }
.info-photo { display: flex; flex-direction: column; gap: 12px; }
.info-photo .frame.portrait {
  border-radius: 2px;
  width: 100%;
  flex: 1;
  min-height: 320px;
}
.photo-credit {
  font-size: 10px;
  color: var(--fg-2);
  letter-spacing: 0.12em;
  text-align: right;
  opacity: 0.7;
}
.info-body .work-eyebrow { display: block; margin-bottom: 12px; }
.info-bio {
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 60ch;
  margin-top: 20px;
  text-wrap: pretty;
}
.info-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 0;
  padding-top: 32px; border-top: 1px solid var(--line);
}
.info-label { font-size: 10px; color: var(--accent); margin-bottom: 14px; }
.info-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.info-list li {
  font-size: 14px; color: var(--fg-2);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.info-list li:last-child { border-bottom: 0; }

.contact { margin-top: 72px; }
.contact-eyebrow { font-size: 11px; color: var(--fg-dim); margin-bottom: 18px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.contact-card {
  position: relative;
  padding: 22px 22px 22px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-2);
  transition: background 220ms, border-color 220ms, transform 220ms;
}
a.contact-card:hover { background: var(--bg-3); border-color: var(--fg-dim); transform: translateY(-2px); }
.contact-label { font-size: 10px; color: var(--fg-dim); margin-bottom: 14px; }
.contact-val {
  font-family: var(--display);
  font-size: 22px; line-height: 1.2;
  color: var(--fg);
}
.contact-arrow {
  position: absolute; top: 22px; right: 22px;
  font-size: 18px; transition: transform 240ms;
}
a.contact-card:hover .contact-arrow { transform: translate(2px, -2px); }

/* ============ LIGHTBOX ============ */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 6, 4, 0.86);
  backdrop-filter: blur(12px);
  display: grid; place-items: center;
  padding: 48px;
  animation: fadeIn 240ms ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb-inner {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 32px; max-width: 1400px; width: 100%;
  background: var(--bg); border: 1px solid var(--line-2);
  padding: 24px;
  animation: rise 360ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.lb-frame { position: relative; }
.lb-side { display: flex; flex-direction: column; padding: 8px 12px 8px 0; }
.lb-kind { font-size: 11px; color: var(--accent); margin-bottom: 18px; }
.lb-title { font-family: var(--display); font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.lb-subtitle { font-family: var(--display); font-style: italic; font-size: 28px; color: var(--fg-2); margin-top: 6px; }
.lb-row {
  display: flex; justify-content: space-between;
  font-size: 11px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.lb-row:first-of-type { margin-top: 28px; border-top: 1px solid var(--line); }
.lb-row span:first-child { color: var(--fg-dim); }
.lb-row-awards { align-items: flex-start; }
.lb-row-awards span:last-child { color: var(--accent); }
.lb-awards-list { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.lb-note {
  margin-top: 28px;
  font-family: var(--display);
  font-size: 20px; line-height: 1.5; color: var(--fg-2);
  text-wrap: pretty;
}
.lb-palette { display: flex; gap: 6px; margin-top: 28px; }
.lb-swatch {
  flex: 1; height: 58px; border-radius: 2px;
  display: flex; align-items: flex-end;
  padding: 8px;
  font-size: 9px; color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.lb-frame-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.lb-frame-link:hover .lb-play-ring {
  transform: scale(1.06);
  background: rgba(212, 165, 116, 0.18);
  color: var(--accent);
  border-color: var(--accent);
}
.lb-frame-link:hover .lb-play-label {
  color: var(--accent);
}
.lb-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 4;
  background: #000;
}
.lb-play {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 3;
  color: #f5e9d6;
  transition: color 200ms;
}
.lb-play:hover { color: var(--accent); }
.lb-play-ring {
  width: 72px; height: 72px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  transition: transform 220ms, background 220ms;
}
.lb-play:hover .lb-play-ring {
  transform: scale(1.06);
  background: rgba(212, 165, 116, 0.12);
}
.lb-play-label {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lb-yt {
  margin-top: 22px;
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 200ms;
}
.lb-yt:hover { color: var(--fg); }
.lb-press {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}
.lb-press-label {
  font-size: 11px;
  color: var(--fg);
  letter-spacing: 0.14em;
}
.lb-press-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0;
  margin: 0;
}
.lb-press-link {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-decoration: none;
  transition: color 200ms;
}
.lb-press-link:hover { color: var(--fg); }
.frame-watch {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 233, 214, 0.18);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fg);
  pointer-events: none;
  transition: background 220ms, color 220ms, border-color 220ms;
}
.frame:hover .frame-watch {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c0a08;
}
.frame-watch-tri {
  font-size: 8px;
  line-height: 1;
}
.doc-lb-inner { max-width: 1500px; }
.lb-close {
  margin-top: auto; padding-top: 24px; align-self: flex-start;
  font-size: 11px; color: var(--fg-dim);
  transition: color 180ms;
}
.lb-close:hover { color: var(--accent); }

/* ============ FOOTER ============ */
.footer {
  padding: 48px 32px 28px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 28px;
}
.footer-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--fg-dim);
  flex-wrap: wrap; gap: 12px;
}
.footer-line a:hover { color: var(--accent); }
.footer-big {
  font-family: var(--display);
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: center;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .info-grid { grid-template-columns: 1fr; gap: 48px; }
  .info-photo { max-width: 480px; }
  .info-photo .frame.portrait { aspect-ratio: 5/4; height: auto; min-height: 0; }
  .info-cols { margin-top: 0; }
  .info-cols, .contact-grid { grid-template-columns: 1fr 1fr; }
  .grid { grid-auto-rows: 90px; }
  .lb-inner { grid-template-columns: 1fr; max-height: 90vh; max-height: 90dvh; overflow: auto; }
  .lb-title { font-size: 40px; }
  .progress { display: none; }
}
@media (max-width: 720px) {
  .nav { padding: 14px 18px; }
  .nav.scrolled { padding: 10px 18px; }
  .nav-mark-name { font-size: 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 10px; }
  .nav-label { display: none; } /* numbers only — full labels overflow */
  .hero { min-height: 0; } /* 720px min would overflow short phone viewports */
  .hero-name { font-size: clamp(52px, 15.5vw, 80px); }
  /* While the reel plays, the letterboxed video sits mid-screen where the
     title is — hide the ghosted text so YT's play button reads clearly. */
  .hero-center.dim { opacity: 0; visibility: hidden; }
  .hero-top, .hero-bottom { flex-direction: column; gap: 8px; padding: 16px; height: auto; align-items: flex-start; }
  .hero-bottom .hero-play { align-self: stretch; justify-content: center; }
  .hero-center { padding: 24px 18px; }
  .hero { cursor: auto; }
  .hero-cursor { display: none; }
  .work, .info { padding: 80px 18px; }
  .work-head { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(6, 1fr); }
  .grid-cell { grid-column: span 6 !important; grid-row: auto !important; }
  .grid-cell .frame { aspect-ratio: 16/9 !important; height: auto !important; }
  .info-cols, .contact-grid { grid-template-columns: 1fr; }
  .footer { padding: 32px 18px; }
  .footer-big { font-size: clamp(44px, 16vw, 80px); }
  .lb { padding: 14px; }
  .lb-inner { padding: 14px; gap: 20px; }
  .lb-title { font-size: 32px; }
  .lb-side { padding: 0; }
}

/* ============ DOCS ============ */
.docs {
  padding: 120px 32px 120px;
  border-bottom: 1px solid var(--line);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}
.docs .work-head { margin-bottom: 40px; }
.docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  min-height: 280px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  text-decoration: none;
  transition: background 220ms, border-color 220ms, transform 220ms;
}
.doc-card:hover {
  background: var(--bg-3);
  border-color: var(--fg-dim);
  transform: translateY(-2px);
}
.doc-card-eyebrow {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.doc-card-title {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.05;
  color: var(--fg);
}
.doc-card-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-2);
  margin-top: 4px;
}
.doc-card-crew {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin-top: 14px;
}
.doc-card-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  margin-top: 18px;
  max-width: 52ch;
  text-wrap: pretty;
}
.doc-card-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--fg-dim);
}
.doc-card-arrow {
  transition: transform 200ms;
  display: inline-block;
}
.doc-card:hover .doc-card-arrow {
  transform: translate(2px, -2px);
}
@media (max-width: 720px) {
  .docs { padding: 60px 18px; }
  .docs-grid { grid-template-columns: 1fr; }
}



/* ============ FILMOGRAPHY ============ */
.filmography {
  padding: 120px 32px 140px;
  border-bottom: 1px solid var(--line);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}
.filmography .work-head { margin-bottom: 56px; }
.filmography .section-title em {
  font-style: italic;
  color: var(--fg-2);
}
.filmo-intro {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.filmo-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.filmo-year {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: start;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.filmo-year:first-child { border-top: 1px solid var(--line-2); }
.filmo-year-num {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding-top: 4px;
  position: sticky;
  top: 88px;
}
.filmo-year-rule { display: none; }
.filmo-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.filmo-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: background 200ms;
}
.filmo-item:last-child { border-bottom: 0; }
.filmo-item:hover { background: rgba(255, 255, 255, 0.015); }
.filmo-item-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.filmo-item-title {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.15;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.filmo-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
}
.filmo-item-dot { opacity: 0.5; }
.filmo-item-role {
  font-weight: 500;
  letter-spacing: 0.14em;
}
.filmo-item-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.filmo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  text-decoration: none;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.filmo-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.02);
}
.filmo-link span { font-size: 11px; }

.filmo-foot {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: stretch;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
}
.filmo-foot-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  padding-top: 8px;
}
.filmo-foot-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.filmo-foot-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg);
  transition: background 220ms, border-color 220ms, transform 220ms;
}
.filmo-foot-link:hover {
  background: var(--bg-3);
  border-color: var(--fg-dim);
  transform: translateY(-2px);
}
.filmo-foot-name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.filmo-foot-arrow {
  font-size: 22px;
  transition: transform 220ms;
}
.filmo-foot-link:hover .filmo-foot-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 720px) {
  .filmography { padding: 60px 18px 80px; }
  .filmography .work-head { margin-bottom: 32px; }
  .filmo-year { grid-template-columns: 1fr; gap: 12px; padding-top: 20px; }
  .filmo-year-num { position: static; padding-top: 0; }
  .filmo-item { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
  .filmo-item-title { font-size: 22px; }
  .filmo-item-links { justify-content: flex-start; }
  .filmo-foot { grid-template-columns: 1fr; gap: 16px; }
  .filmo-foot-links { grid-template-columns: 1fr; }
  .filmo-foot-link { padding: 22px 24px; }
}

/* ============ TOUCH / NO-HOVER FIXES ============ */
/* On touch devices :hover state is "sticky" — a tap registers hover on the
   tapped card and only clears when another element is tapped. That made the
   meta overlay swallow the next tap and look like the wrong card was opened.
   Resolve by only applying hover styles where hover is real. */
@media (hover: none) {
  /* Pin hover-only effects back to their base values (never `all: unset` —
     it strips position/object-fit and breaks the card layout). */
  .frame:hover { border-color: var(--line); }
  .frame:hover .frame-img { transform: none; }
  .frame:hover .frame-shade { opacity: 0.85; }
  .frame:hover .frame-corners span { width: 10px; height: 10px; }
  .frame:hover .frame-watch {
    background: rgba(12, 10, 8, 0.7);
    border-color: rgba(245, 233, 214, 0.18);
    color: var(--fg);
  }
  .doc-card:hover {
    background: var(--bg-2);
    border-color: var(--line-2);
    transform: none;
  }
  .doc-card:hover .doc-card-img { transform: none; }
  .doc-card:hover .doc-card-corners span { width: 14px; height: 14px; }
  .filmo-foot-link:hover, .filmo-link:hover, .filmo-item:hover { transform: none; }
  /* Meta always visible on touch (no hover to reveal it) */
  .frame-meta, .frame:hover .frame-meta { opacity: 1; transform: none; }
}
/* Phones: meta moves below the frame instead of overlaying the image */
@media (hover: none) and (max-width: 720px) {
  .frame-meta, .frame:hover .frame-meta {
    position: static;
    background: transparent;
    padding: 12px 0 0;
  }
  .grid-cell {
    display: flex;
    flex-direction: column;
  }
  .grid-cell .frame { flex: 0 0 auto; }
}


/* ============ HERO SOUND CTA (mobile) ============ */
.hero-sound {
  position: absolute;
  top: 96px;
  right: 16px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  background: rgba(12, 10, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--accent);
  border-radius: 999px;
  text-decoration: none;
  color: var(--accent);
  pointer-events: auto;
}
@media (max-width: 720px) {
  .hero-sound { top: 76px; right: 12px; padding: 9px 12px; font-size: 10px; }
}


/* ============ DOCS — image-led cards ============ */
.doc-card { padding: 0 !important; min-height: 0 !important; overflow: hidden; }
.doc-card-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #0c0a08;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.doc-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.1, 1);
}
.doc-card:hover .doc-card-img { transform: scale(1.04); }
.doc-card-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12,10,8,0.5) 100%);
  pointer-events: none;
}
.doc-card-frame .grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
}
.doc-card-corners {
  position: absolute; inset: 12px;
  pointer-events: none;
}
.doc-card-corners span {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
  transition: width 280ms, height 280ms;
}
.doc-card-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.doc-card-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.doc-card-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.doc-card-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.doc-card:hover .doc-card-corners span { width: 18px; height: 18px; }
.doc-card-watch {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line-2);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-2);
  border-radius: 999px;
  transition: background 220ms, color 220ms, border-color 220ms;
}
.doc-card:hover .doc-card-watch {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c0a08;
}
.doc-card-watch-tri { font-size: 8px; }
.doc-card-body {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.doc-card-body .doc-card-foot { padding-top: 20px; margin-top: auto; }
@media (max-width: 720px) {
  .doc-card-body { padding: 22px 22px 26px; }
}


/* Hero video wrap (YT IFrame API replaces the inner div with an iframe) */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0c0a08;
}
.hero-video-wrap iframe,
.hero-video-wrap > div {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 177.78vh;
  min-height: 56.25vw;
  border: 0;
  pointer-events: auto;
}
/* Portrait phones: letterbox the reel instead of cover-cropping, so the
   whole frame and YouTube's native controls (incl. unmute) are reachable. */
@media (max-width: 720px) {
  .hero-video-wrap iframe,
  .hero-video-wrap > div {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 56.25vw;
  }
}