/* ============================================================
   DENIZ ÇAĞLARCAN — site shell (hierarchy demo)
   Same visual language as Golden Boy / ITERA project pages.
============================================================ */

:root {
  --bg:        #050505;
  --bg-soft:   #0c0a08;
  --ink:       #ededeb;
  --ink-dim:   #8a8580;
  --ink-mute:  #58544f;
  --gold:      #d6b269;
  --gold-soft: #b08a3a;
  --line:      rgba(214, 178, 105, 0.18);
  --hairline:  rgba(255, 255, 255, 0.06);

  --max:       1280px;
  --gutter:    clamp(20px, 5vw, 64px);

  --serif:     "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --display:   -apple-system, "SF Pro Display", "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --nav-h:     64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold); color: #000; }

.skip {
  position: absolute; left: -9999px; top: -9999px;
}
.skip:focus { left: 16px; top: 16px; padding: 8px 12px; background: var(--gold); color: #000; z-index: 999; }

/* ============================================================
   TOP NAV  (sticky, auto-hide on scroll-down)
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: transform 0.45s var(--ease), background 0.3s, border-color 0.3s;
}
.nav.is-scrolled {
  background: rgba(5, 5, 5, 0.75);
  border-bottom-color: var(--hairline);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__brand {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav__brand strong { font-weight: 500; }

.nav__list {
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.78;
  position: relative;
  padding: 6px 0;
  transition: opacity 0.3s, color 0.3s;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__list a:hover,
.nav__list a.is-active {
  color: var(--gold);
  opacity: 1;
}
.nav__list a:hover::after,
.nav__list a.is-active::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 16px; }

.listen-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  transition: border-color 0.4s, color 0.4s, background 0.4s;
}
.listen-pill:hover { border-color: var(--gold); color: var(--gold); }
.listen-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.nav__burger {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.nav__burger span:nth-child(1) { top: 14px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(0) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__list {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
  }
  .nav__list.is-open { transform: translateY(0); }
  .nav__list a { font-size: 18px; letter-spacing: 0.2em; }
  .nav__burger { display: block; }
  .listen-pill .label { display: none; }
  .listen-pill { padding: 8px 12px; }
}

/* ============================================================
   HERO — homepage
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) 80px;
}

/* Hero backdrop. Default = generative gold haze; if --hero-bg is set inline,
   the real image takes over. */
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-color: #000;
  animation: heroDrift 28s ease-in-out infinite alternate;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(214,178,105,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(214,178,105,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(176,138,58,0.04) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.hero__noise {
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.84  0 0 0 0 0.70  0 0 0 0 0.41  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero__vignette {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to bottom, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}

@keyframes heroDrift {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, -1%); }
}

.hero__copy {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1100px;
  pointer-events: none;
}
.hero__copy a, .hero__copy button { pointer-events: auto; }

.hero__name {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(48px, 9vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  text-shadow:
    0 0 22px rgba(0,0,0,0.55),
    0 4px 28px rgba(0,0,0,0.5);
}
.hero__name .ink-soft { color: var(--ink); opacity: 0.92; }

.hero__roles {
  margin: 1.4em 0 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(15px, 1.8vw, 22px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__roles span { margin: 0 0.6em; }
.hero__roles em { font-style: normal; color: var(--gold); }

.hero__current {
  display: inline-block;
  margin-top: 3em;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}
.hero__current em {
  font-style: normal;
  color: var(--gold);
  margin-left: 0.6em;
}

.hero__scroll {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 36px;
  margin: 12px auto 0;
  background: var(--ink-dim);
  animation: scrollLine 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 0.9; }
}

/* ============================================================
   PAGE HEADER (non-home pages)
============================================================ */
.page-head {
  position: relative;
  padding: calc(var(--nav-h) + clamp(60px, 12vh, 140px)) var(--gutter) clamp(40px, 8vh, 90px);
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.page-head__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.page-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4em;
}
.page-head__title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
}
.page-head__lede {
  margin: 0.8em 0 0;
  max-width: 640px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--ink-dim);
}

/* ============================================================
   SECTIONS — generic
============================================================ */
section { position: relative; }

.section {
  padding: clamp(70px, 12vh, 140px) var(--gutter);
}
.section--soft { background: var(--bg-soft); }

.section__inner { max-width: var(--max); margin: 0 auto; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.6em;
}

.section__title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1em;
  color: var(--ink);
}

/* ============================================================
   FEATURED WORK BLOCK (home)
============================================================ */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .featured { grid-template-columns: 1fr; }
}
.featured__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: #0a0805;
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(214,178,105,0.10);
}
.featured__media::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(214,178,105,0.18) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.featured__media .label {
  position: absolute;
  top: 16px; left: 18px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  z-index: 1;
}
.featured__media .name {
  position: absolute;
  bottom: 22px; left: 22px; right: 22px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  z-index: 1;
}
.featured__copy .eyebrow { margin-bottom: 1.6em; }
.featured__copy h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
}
.featured__copy p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0 0 1.8em;
}

/* ============================================================
   TWO-UP STRIP (latest premiere | upcoming concerts)
============================================================ */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 720px) { .two-up { grid-template-columns: 1fr; } }
.two-up__cell {
  background: var(--bg);
  padding: clamp(40px, 8vh, 90px) clamp(28px, 5vw, 64px);
}
.two-up__cell .eyebrow { margin-bottom: 1.6em; }
.two-up__cell h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
.two-up__cell p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
}
.two-up__cell .meta {
  display: block;
  margin-top: 1.6em;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   PULL QUOTE
============================================================ */
.pull {
  text-align: center;
  padding: clamp(80px, 14vh, 160px) var(--gutter);
}
.pull__quote {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 920px;
  margin: 0 auto;
  color: var(--ink);
}
.pull__cite {
  display: block;
  margin-top: 2em;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ============================================================
   MUSIC INDEX — filters + grid
============================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(40px, 6vh, 70px);
}
.filters button {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.filters button:hover,
.filters button.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(214,178,105,0.06);
}

.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 36px);
}
@media (max-width: 980px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .works { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .work__title { font-size: 14px; letter-spacing: 0.02em; }
  .work__year { font-size: 9.5px; }
  .work__sub { font-size: 10.5px; line-height: 1.4; }
}

.work {
  display: block;
  cursor: pointer;
  transition: transform 0.5s var(--ease);
}
.work:hover { transform: translateY(-4px); }
.work__art {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: #0a0805;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 14px 36px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(214,178,105,0.06);
}
.work__art::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
  transition: transform 1.1s var(--ease), filter 0.5s ease;
  filter: brightness(0.85) saturate(1.05);
}
.work:hover .work__art::before { transform: scale(1.05); filter: brightness(1) saturate(1.1); }

/* Default gradient when no cover image is supplied — varies by nth-of-type so the
   contemporary works grid still feels textured rather than 13 identical tiles. */
.work__art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(214,178,105,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #1d1814 0%, #050402 100%);
  z-index: -1;
}
.work:nth-child(3n+2) .work__art::after { background: radial-gradient(circle at 65% 30%, rgba(176,138,58,0.22) 0%, transparent 60%), linear-gradient(220deg, #15110a 0%, #050402 100%); }
.work:nth-child(3n+3) .work__art::after { background: radial-gradient(circle at 50% 70%, rgba(214,178,105,0.16) 0%, transparent 55%), linear-gradient(135deg, #0f0c08 0%, #050402 100%); }
.work:nth-child(5n+4) .work__art::after { background: radial-gradient(circle at 80% 20%, rgba(214,178,105,0.20) 0%, transparent 55%), linear-gradient(200deg, #1a1610 0%, #060403 100%); }
.work:nth-child(7n+5) .work__art::after { background: radial-gradient(circle at 20% 80%, rgba(176,138,58,0.24) 0%, transparent 55%), linear-gradient(170deg, #16110c 0%, #050402 100%); }

.work__art .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s var(--ease);
  backdrop-filter: blur(8px);
}
.work:hover .work__art .play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.work__meta {
  padding: 18px 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.work__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.work__year {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
}
.work__sub {
  margin: 4px 4px 0;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ============================================================
   FILM REEL HERO
============================================================ */
.reel-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: var(--max);
  margin: 0 auto;
  background: linear-gradient(135deg, #1a1612 0%, #050402 100%);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(214,178,105,0.08);
}
.reel-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(214,178,105,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(176,138,58,0.14) 0%, transparent 60%);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
.reel-hero__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.4s;
}
.reel-hero__play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(214,178,105,0.12); }
.reel-hero__caption {
  position: absolute;
  bottom: 22px; left: 24px;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ============================================================
   CREDIT LIST (Film page)
============================================================ */
.credits {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.credits li {
  display: grid;
  grid-template-columns: 90px 1fr 200px 160px;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
  transition: padding-left 0.4s var(--ease);
}
.credits li:hover { padding-left: 14px; }
.credits .yr { color: var(--gold); font-size: 12px; letter-spacing: 0.24em; }
.credits .title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.01em;
}
.credits .dir { color: var(--ink-dim); font-size: 13px; }
.credits .role { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; text-align: right; }
@media (max-width: 760px) {
  .credits li { grid-template-columns: 60px 1fr; row-gap: 6px; }
  .credits .dir, .credits .role { grid-column: 2; text-align: left; }
}

/* ============================================================
   TABS (Performance page)
============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 clamp(40px, 6vh, 70px);
}
.tabs button {
  padding: 16px 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.perf-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .perf-grid { grid-template-columns: 1fr; } }

.perf-grid p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 1em;
}

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  color: var(--ink);
  font-size: 15px;
}
.list-plain li .when { color: var(--gold); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
.list-plain li .what { color: var(--ink); }

/* ============================================================
   WRITING — paper list
============================================================ */
.papers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.papers li {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.papers .yr { color: var(--gold); font-size: 12px; letter-spacing: 0.24em; }
.papers .title { font-family: var(--display); font-weight: 300; font-size: clamp(18px, 1.8vw, 22px); }
.papers .venue { display: block; color: var(--ink-dim); font-size: 13px; margin-top: 4px; }
.papers .pdf {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.papers .pdf:hover { color: var(--gold); border-color: var(--gold); background: rgba(214,178,105,0.05); }
@media (max-width: 760px) {
  .papers li { grid-template-columns: 60px 1fr; }
  .papers .pdf { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* ============================================================
   ABOUT
============================================================ */
.bio {
  max-width: 760px;
  margin: 0 auto;
}
.bio p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.5;
  margin: 0 0 1.2em;
  color: var(--ink);
}
.bio p:first-of-type {
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--ink);
}
.bio em { color: var(--gold); font-style: italic; }

.cv-cta {
  display: inline-block;
  margin-top: 2.4em;
  padding: 16px 36px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(214,178,105,0.04);
  transition: background 0.4s, color 0.4s;
}
.cv-cta:hover { background: var(--gold); color: #000; }

.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 6vh, 70px);
}
@media (max-width: 760px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .pcard__title { font-size: 13px; line-height: 1.35; }
  .pcard__note, .pcard__meta, .pcard__src { font-size: 10.5px; }
}

.press-grid blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.press-grid cite {
  display: block;
  margin-top: 1.2em;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   CONTACT / CTA STRIP
============================================================ */
.contact {
  text-align: center;
  padding: clamp(100px, 18vh, 200px) var(--gutter);
}
.contact h2 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(28px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.4em;
  color: var(--ink);
}
.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.btn {
  display: inline-block;
  padding: 16px 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.4s, background 0.4s, color 0.4s;
  cursor: pointer;
}
.btn:hover { border-color: var(--gold); background: rgba(214,178,105,0.06); color: var(--gold); }
.btn--gold { border-color: var(--gold); color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: #000; }

/* ============================================================
   FOOTER
============================================================ */
.foot {
  padding: 60px var(--gutter) 100px;
  background: var(--bg-soft);
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-dim);
}
.foot__grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 720px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
.foot__brand { font-family: var(--display); color: var(--ink); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.foot__brand p { margin: 0.4em 0 0; color: var(--ink-dim); letter-spacing: 0.06em; text-transform: none; font-size: 13px; max-width: 28ch; }
/* brand name links home and takes the same gold as the column headings, in both themes + home variants */
.foot a.foot__brand-name { color: var(--gold); text-decoration: none; transition: opacity .3s ease; }
.foot a.foot__brand-name:hover { color: var(--gold); opacity: 0.72; }
.home-white .foot a.foot__brand-name, .home-manifesto .foot a.foot__brand-name { color: var(--gold); }
.foot h4 { font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.4em; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 0 0 0.6em; }
.foot a { color: var(--ink-dim); transition: color 0.3s; }
.foot a:hover { color: var(--gold); }
.foot__base {
  max-width: var(--max);
  margin: 60px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}

/* ============================================================
   PERSISTENT "LISTEN" DRAWER (bottom-right)
============================================================ */
.listen-drawer {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 90;
  width: min(360px, calc(100vw - 40px));
  background: rgba(12, 10, 8, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 24px 60px -10px rgba(0,0,0,0.7);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.4s;
  pointer-events: none;
}
.listen-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.listen-drawer__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.listen-drawer__eyebrow { font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); }
.listen-drawer__close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-dim); font-size: 18px; line-height: 1; padding: 4px;
}
.listen-drawer__close:hover { color: var(--gold); }
.listen-drawer__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  color: var(--ink);
}
.listen-drawer__sub { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.06em; }
.listen-drawer__controls {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
}
.lp-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(214,178,105,0.06);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}
.lp-btn:hover { background: rgba(214,178,105,0.16); }
.lp-bar {
  flex: 1;
  height: 2px;
  background: var(--hairline);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.lp-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--gold);
  transition: width 0.2s linear;
}
.lp-time { font-size: 10px; letter-spacing: 0.16em; color: var(--ink-dim); min-width: 64px; text-align: right; }

/* ============================================================
   REVEAL animations
============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s ease, transform 1.1s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   V3 OVERRIDES: white hero + impactful roles + UVP section
   These add to (do not replace) the dark theme; only the home
   hero and the UVP section use them. All other pages stay dark.
============================================================ */

.hero--white {
  background: #ffffff;
}
.hero--white .hero__bg,
.hero--white .hero__noise,
.hero--white .hero__vignette {
  display: none;
}

.hero--white .hero__name {
  color: #000;
  text-shadow: none;
  font-weight: 200;
}
.hero__name--dark { color: #000; text-shadow: none; }

/* The roles line: black, weighty, present. */
.hero__roles--impact {
  margin: 1.2em 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  text-shadow: none;
}
.hero__roles--impact span { color: #000; }
.hero__roles--impact em {
  color: #000;
  font-style: normal;
  margin: 0 0.4em;
  opacity: 0.45;
}

/* "Currently …" pill on a white hero: black border + black text. */
.hero__current--dark {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.04);
  color: #000;
  backdrop-filter: none;
}
.hero__current--dark em {
  color: #000;
  font-style: italic;
  font-weight: 500;
  margin: 0 0.4em;
}

.hero__scroll--dark { color: rgba(0, 0, 0, 0.5); }
.hero__scroll--dark::after { background: rgba(0, 0, 0, 0.5); }

/* ============================================================
   UVP — Unique Value Proposition section.
   Two columns: headline on the left, body on the right.
   White background continues the hero, then the page goes dark
   for the Featured Work below.
============================================================ */
.uvp {
  background: #ffffff;
  color: #000;
  padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(100px, 16vh, 200px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.uvp__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 880px) {
  .uvp__inner { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); }
}

.uvp__eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin: 0 0 1.6em;
}

.uvp__head {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: #000;
  max-width: 14ch;
}

.uvp__right p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.55;
  margin: 0 0 1.4em;
  color: #1a1a1a;
}
.uvp__right p:last-child { margin-bottom: 0; }

/* ============================================================
   V3 HOME PAGE — entirely white theme below the hero too.
   Activated by `<body class="home-white">` so the OTHER pages
   (works, visual, screen, performance, research, about, concerts,
   press) keep the dark theme untouched.
============================================================ */

/* Page background */
.home-white { background: #ffffff; color: #1a1a1a; }

/* Generic sections */
.home-white .section { background: #ffffff; color: #1a1a1a; }
.home-white .section--soft { background: #f8f7f5; color: #1a1a1a; }

/* Eyebrow stays gold for accent across the page */
.home-white .eyebrow { color: var(--gold); }

/* Featured Work block */
.home-white .featured__copy h2 { color: #000; }
.home-white .featured__copy p { color: #444; }
.home-white .featured__media {
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Two-up strip (latest premiere / ensemble) */
.home-white .two-up {
  background: rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.home-white .two-up__cell { background: #ffffff; color: #1a1a1a; }
.home-white .two-up__cell h3 { color: #000; }
.home-white .two-up__cell p { color: #444; }

/* Pull quote */
.home-white .pull { background: #ffffff; }
.home-white .pull__quote { color: #000; }
.home-white .pull__quote em { color: var(--gold); font-style: italic; }
.home-white .pull__cite { color: #666; }

/* Contact strip */
.home-white .contact h2 { color: #000; }
.home-white .contact .btn {
  color: #000;
  border-color: rgba(0, 0, 0, 0.18);
  background: transparent;
}
.home-white .contact .btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(214, 178, 105, 0.06);
}
.home-white .contact .btn--gold {
  border-color: var(--gold);
  color: #000;
  background: transparent;
}
.home-white .contact .btn--gold:hover {
  background: var(--gold);
  color: #000;
}

/* Footer */
.home-white .foot {
  background: #f8f7f5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: #555;
}
.home-white .foot__brand { color: #000; }
.home-white .foot__brand p { color: #555; }
.home-white .foot h4 { color: var(--gold); }
.home-white .foot a { color: #555; }
.home-white .foot a:hover { color: var(--gold); }
.home-white .foot__base {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: #888;
}

/* Listen drawer reads as light too, so it does not punch a dark hole on
   the white page. The nav stays dark by design (white menu text). */
.home-white .listen-drawer {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.18);
}
.home-white .listen-drawer__title { color: #000; }
.home-white .listen-drawer__sub { color: #666; }
.home-white .lp-bar { background: rgba(0, 0, 0, 0.08); }

/* ============================================================
   V4 LANDING — manifesto hero with full-bleed video background.
   Activated by `<body class="home-manifesto home-white">`.
   The hero is its own world (cream + video + black manifesto +
   signature + four pillars). The rest of the page inherits
   v3 white-theme overrides.
============================================================ */

/* Background of the page: warm cream that matches the video edges so
   the seam between video hero and page is invisible. */
.home-manifesto { background: #efe8de; }

/* Nav: transparent, dark text, no dark blur bar. Sits flush on the
   cream/video, matching the demo's spaced-caps aesthetic. */
.nav--light {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent !important;
}
.nav--light.is-scrolled {
  background: rgba(239, 232, 222, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
.nav--light .nav__brand,
.nav--light .nav__list a {
  color: #111;
}
.nav--light .nav__list a { opacity: 0.78; }
.nav--light .nav__list a:hover,
.nav--light .nav__list a.is-active { color: #000; opacity: 1; }
.nav--light .nav__list a::after { background: #000; }
.nav--light .listen-pill {
  color: #111;
  border-color: rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.35);
}
.nav--light .listen-pill:hover { border-color: #000; color: #000; }
.nav--light .listen-pill .dot { background: #c08a30; box-shadow: 0 0 8px rgba(192,138,48,0.6); }
.nav--light .nav__burger span { background: #111; }

/* ============================================================
   HERO — video background hero
============================================================ */
.hero--video {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #efe8de;
  padding: 0;
  display: block;
}

.hero--video .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* A very gentle vignette so the text on the left stays readable across
   the whole 1m46 loop. Subtle — does not dim the visuals. */
.hero--video .hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(239,232,222,0.55) 0%, rgba(239,232,222,0.18) 38%, transparent 60%),
    linear-gradient(to bottom, transparent 70%, rgba(239,232,222,0.7) 100%);
}

/* The text block sits left, vertically centered, with breathing room. */
.hero--video .hero__copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
  padding: calc(var(--nav-h) + clamp(60px, 12vh, 120px)) clamp(28px, 6vw, 90px) clamp(160px, 18vh, 220px);
  pointer-events: none;
}
.hero--video .hero__copy a,
.hero--video .hero__copy button { pointer-events: auto; }

/* ============================================================
   MANIFESTO — multi-line two-tone headline.
   "I COMPOSE / FOR ROOMS,"  is solid black, heavy.
   "SCREENS, AND / WORLDS NOT / YET BUILT." is faded.
============================================================ */
.manifesto {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
  text-transform: uppercase;
}
.manifesto__line {
  display: block;
}
.manifesto__line--strong {
  color: #0a0a0a;
}
.manifesto__line--weak {
  color: rgba(20, 20, 20, 0.28);
}

/* The signature — handwritten Allura cursive */
.signature {
  font-family: "Allura", "Snell Roundhand", "Apple Chancery", cursive;
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1;
  color: #1a1a1a;
  margin: 0 0 1.6em;
  letter-spacing: 0.01em;
}

/* Roles strip */
.roles-spaced {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #111;
  margin: 0 0 1.6em;
  border-top: 1px solid rgba(0,0,0,0.18);
  padding-top: 1.6em;
}

/* Body paragraph */
.hero-body {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: #333;
  max-width: 38ch;
  margin: 0 0 2.4em;
}

/* "EXPLORE WORKS →" CTA — underlined label + circled arrow */
.explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0a0a0a;
}
.explore-cta > span:first-child {
  border-bottom: 1px solid #0a0a0a;
  padding-bottom: 6px;
}
.explore-cta__circle {
  width: 40px; height: 40px;
  border: 1px solid #0a0a0a;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.explore-cta:hover .explore-cta__circle {
  background: #0a0a0a;
  color: #efe8de;
  transform: translateX(4px);
}

/* Vertical "SCROLL TO DISCOVER" on the left edge */
.scroll-vertical {
  position: absolute;
  bottom: 200px;
  left: 28px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

/* ============================================================
   FOUR PILLARS at the bottom of the hero
============================================================ */
.pillars {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 60px);
  padding: clamp(20px, 3vh, 36px) clamp(28px, 6vw, 90px) clamp(28px, 4vh, 48px);
}
@media (max-width: 880px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(0,0,0,0.18);
  padding-top: 14px;
  color: #1a1a1a;
}
.pillar__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(0,0,0,0.55);
}
.pillar__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin: 0;
}
.pillar__desc {
  font-family: var(--display);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: #444;
  margin: 0;
  max-width: 24ch;
}

/* ============================================================
   Reduced motion: still show the video, just no auto-play hint.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__video { animation: none; }
}

/* ============================================================
   Inherit the v3 white-theme overrides for sections BELOW the hero.
   We mirror the .home-white block onto .home-manifesto so the
   Featured Work, Two-up, Pull quote, Contact, Footer also stay white.
============================================================ */
.home-manifesto .section { background: #ffffff; color: #1a1a1a; }
.home-manifesto .section--soft { background: #f8f7f5; color: #1a1a1a; }
.home-manifesto .eyebrow { color: var(--gold); }
.home-manifesto .featured__copy h2 { color: #000; }
.home-manifesto .featured__copy p { color: #444; }
.home-manifesto .two-up { background: rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }
.home-manifesto .two-up__cell { background: #fff; color: #1a1a1a; }
.home-manifesto .two-up__cell h3 { color: #000; }
.home-manifesto .two-up__cell p { color: #444; }
.home-manifesto .pull { background: #fff; }
.home-manifesto .pull__quote { color: #000; }
.home-manifesto .pull__cite { color: #666; }
.home-manifesto .contact h2 { color: #000; }
.home-manifesto .contact .btn { color: #000; border-color: rgba(0,0,0,0.18); background: transparent; }
.home-manifesto .contact .btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(214,178,105,0.06); }
.home-manifesto .contact .btn--gold { border-color: var(--gold); color: #000; background: transparent; }
.home-manifesto .contact .btn--gold:hover { background: var(--gold); color: #000; }
.home-manifesto .foot { background: #f8f7f5; border-top: 1px solid rgba(0,0,0,0.06); color: #555; }
.home-manifesto .foot__brand { color: #000; }
.home-manifesto .foot__brand p { color: #555; }
.home-manifesto .foot h4 { color: var(--gold); }
.home-manifesto .foot a { color: #555; }
.home-manifesto .foot a:hover { color: var(--gold); }
.home-manifesto .foot__base { border-top: 1px solid rgba(0,0,0,0.06); color: #888; }
.home-manifesto .listen-drawer { background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 24px 60px -10px rgba(0,0,0,0.18); }
.home-manifesto .listen-drawer__title { color: #000; }
.home-manifesto .listen-drawer__sub { color: #666; }
.home-manifesto .lp-bar { background: rgba(0,0,0,0.08); }

/* ============================================================
   V4 v=7 — viewport-fit hero, right-aligned nav, animated scroll
============================================================ */

/* --- NAV: brand left, EVERYTHING ELSE right-aligned together --- */
.nav--light {
  justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 56px);
}
.nav--light .nav__brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #0a0a0a;
}
.nav--light .nav__brand strong { font-weight: 600; }

/* The right group: 6 nav items + Listen, all sitting together at the right edge */
.nav--light .nav__right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}
.nav--light .nav__list {
  display: flex;
  gap: clamp(16px, 2.2vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav--light .nav__list a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #111;
  opacity: 0.78;
  padding: 6px 0;
  position: relative;
  transition: opacity 0.3s, color 0.3s;
}
.nav--light .nav__list a:hover,
.nav--light .nav__list a.is-active { opacity: 1; color: #000; }
.nav--light .nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav--light .nav__list a:hover::after,
.nav--light .nav__list a.is-active::after { transform: scaleX(1); }

/* ============================================================
   HERO — force exact viewport height, flex column distribution.
   nav at top, manifesto centered vertically, pillars pinned bottom.
============================================================ */
.hero--video {
  height: 100vh;
  min-height: 620px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

/* The video + scrim layer absolutely fills the hero behind everything. */
.hero--video > .hero__video,
.hero--video > .hero__scrim { z-index: 0; }
.hero--video > .hero__video { z-index: 0; }
.hero--video > .hero__scrim { z-index: 1; }

/* Top content row: manifesto sits left, vertically centered in the available space */
.hero--video .hero__copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: center;
  max-width: 640px;
  padding: calc(var(--nav-h) + clamp(24px, 4vh, 40px)) clamp(28px, 6vw, 90px) 0;
}

/* --- Compact the type so all the copy + pillars fit one viewport --- */
.manifesto {
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 0.96;
  margin: 0 0 0.4em;
}
.signature {
  font-size: clamp(28px, 3.4vw, 44px);
  margin: 0 0 1.1em;
}
.roles-spaced {
  font-size: 10px;
  letter-spacing: 0.32em;
  margin: 0 0 1.2em;
  padding-top: 1.2em;
}
.hero-body {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 0 1.6em;
}
.explore-cta {
  font-size: 11px;
  letter-spacing: 0.28em;
  gap: 14px;
}
.explore-cta__circle { width: 36px; height: 36px; }

/* ============================================================
   PILLARS row — pinned to bottom of the hero grid (row 2),
   so it always sits inside the viewport, no scroll required.
============================================================ */
.hero--video .pillars {
  position: relative;
  grid-row: 2;
  z-index: 2;
  padding: 14px clamp(28px, 6vw, 90px) clamp(20px, 3vh, 32px);
}
.pillar { padding-top: 12px; }
.pillar__num { font-size: 10px; }
.pillar__title { font-size: 12px; }
.pillar__desc { font-size: 11px; line-height: 1.45; max-width: 28ch; }

/* ============================================================
   SCROLL TO DISCOVER — always visible, animated with a pulsing
   vertical line that draws and undraws (never fades the text).
============================================================ */
.scroll-vertical {
  position: absolute;
  left: clamp(14px, 2vw, 28px);
  bottom: 50%;
  transform: translateY(50%) rotate(180deg);
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 1; /* ALWAYS visible */
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
/* Pulsing vertical line above the text (visually above, after rotation). */
.scroll-vertical::before {
  content: "";
  display: block;
  width: 1px;
  height: 48px;
  background: #1a1a1a;
  transform-origin: top;
  animation: scrollLinePulse 2.4s ease-in-out infinite;
}
@keyframes scrollLinePulse {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

@media (max-width: 880px) {
  .scroll-vertical { display: none; }
}

/* ============================================================
   Tighten the scrim so the white-cream bleed on the left does not
   wash out the SCROLL line, but still keeps text readable.
============================================================ */
.hero--video .hero__scrim {
  background:
    linear-gradient(to right, rgba(239,232,222,0.62) 0%, rgba(239,232,222,0.20) 36%, transparent 58%),
    linear-gradient(to bottom, transparent 75%, rgba(239,232,222,0.5) 100%);
}

/* ============================================================
   V4 v=8 — DC monogram, left-half pillars, body highlights
============================================================ */

/* The brand block: DC monogram + spaced-caps wordmark, both left-aligned */
.nav--light .nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.4px solid #0a0a0a;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  line-height: 1;
  flex-shrink: 0;
}
.nav__brand-text {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #0a0a0a;
  white-space: nowrap;
}

/* ============================================================
   Pillars: constrained to the LEFT HALF, matching demo composition.
   Four narrow columns sitting under the EXPLORE WORKS CTA.
============================================================ */
.hero--video .pillars {
  max-width: 58%;
  padding-right: 0;
}
@media (max-width: 1280px) {
  .hero--video .pillars { max-width: 65%; }
}
@media (max-width: 980px) {
  .hero--video .pillars { max-width: 80%; }
}
@media (max-width: 720px) {
  .hero--video .pillars { max-width: 100%; }
}

/* Body paragraph: highlighted phrases in heavier black like the demo */
.hero-body strong {
  color: #000;
  font-weight: 700;
}

/* ============================================================
   Stronger left scrim so the manifesto, body, and pillars remain
   crisp over any frame of the video, since everything now sits on
   the LEFT half. The right half stays clear for the sculpture.
============================================================ */
.hero--video .hero__scrim {
  background:
    linear-gradient(to right, rgba(239,232,222,0.78) 0%, rgba(239,232,222,0.50) 30%, rgba(239,232,222,0.10) 50%, transparent 62%),
    linear-gradient(to bottom, transparent 68%, rgba(239,232,222,0.55) 100%);
}

/* ============================================================
   V4 v=9 — EXACT DEMO LAYOUT (2.jpeg, pixel-matched)
   The hero copy is TOP-aligned at the left margin and flows down,
   exactly as in the reference: manifesto (upper-left) -> signature
   -> roles -> body -> EXPLORE WORKS, with the four pillars pinned
   bottom-left and SCROLL TO DISCOVER on the far-left edge.
   Only the nav, the cursive signature, and the roles wording are
   intentionally ours; everything else mirrors the picture.
============================================================ */

/* Left margin used by every left-column element, matched to the demo
   (manifesto left edge sits at ~7.6% of width). */
:root { --hero-pad-l: clamp(28px, 7.4vw, 104px); }

/* --- Copy column: TOP-aligned AND LEFT-aligned (demo pins it hard left) --- */
.hero--video {
  grid-template-columns: minmax(0, 1fr);  /* one FULL-WIDTH column. Without this, once
                                             items stop stretching the implicit auto column
                                             shrinks to ~max-content and floats to center,
                                             which is what pushed the copy to mid-page. */
  justify-items: start;              /* grid items hug the left edge, not center */
}
.hero--video .hero__copy {
  grid-row: 1;
  align-self: start;                 /* was center: this was the "middle of page" bug */
  justify-self: stretch;             /* span full width so left padding sets the true margin */
  width: 100%;
  max-width: none;                   /* base/v7 capped this to 660-720 and the block floated mid-page */
  margin: 0;
  text-align: left;                  /* base .hero__copy set center: that floated copy to mid-page */
  padding: calc(var(--nav-h) + clamp(40px, 10vh, 112px)) var(--hero-pad-l) 0;
}
.hero--video .hero__copy .manifesto,
.hero--video .hero__copy .signature,
.hero--video .hero__copy .roles-spaced,
.hero--video .hero__copy .hero-body { text-align: left; }

/* --- Manifesto: WIDE + heavy, demo spacing (EXPERIENCES ~30% W, pitch ~6.5% H) --- */
.manifesto {
  font-family: "Archivo", var(--display);
  font-weight: 900;
  font-size: clamp(38px, 4.6vw, 70px);
  line-height: 0.92;                 /* demo pitch ~6.5% vs glyph ~4.9% */
  letter-spacing: -0.01em;
  transform: scaleX(0.87);           /* demo type is semi-condensed: 34.8% -> 30.3% W */
  transform-origin: left top;
  margin: 0 0 0.28em;
}
.manifesto__line { display: block; white-space: nowrap; }
.manifesto__line--strong { color: #0a0a0a; }
.manifesto__line--weak   { color: rgba(20, 20, 20, 0.30); }

/* --- Signature: small cursive, tucked directly under the manifesto --- */
.signature {
  font-family: "Allura", "Snell Roundhand", "Apple Chancery", cursive;
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1;
  color: #1a1a1a;
  margin: 0 0 1.35em;
  padding-left: 4px;                  /* matches the demo's slight cursive indent */
}

/* --- Roles strip: spaced caps, NO rule line (the demo has none) --- */
.roles-spaced {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(10px, 0.92vw, 12px);
  letter-spacing: 0.30em;
  color: #1a1a1a;
  border-top: none;                  /* demo shows no horizontal rule here */
  padding-top: 0;
  margin: 0 0 1.6em;
}

/* --- Body paragraph --- */
.hero-body {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
  color: #333;
  max-width: 40ch;
  margin: 0 0 2.2em;
}
.hero-body strong { color: #000; font-weight: 700; }

/* --- EXPLORE WORKS CTA --- */
.explore-cta { font-size: clamp(11px, 0.95vw, 12px); letter-spacing: 0.26em; gap: 18px; }
.explore-cta__circle { width: 44px; height: 44px; }

/* --- Pillars: pinned bottom-left, narrow columns like the demo --- */
.hero--video .pillars {
  grid-row: 2;
  width: 100%;
  max-width: clamp(520px, 52vw, 700px);   /* left ~half, like the demo */
  justify-self: start;
  margin: 0 auto 0 0;                      /* pin the pillar block to the left */
  text-align: left;
  gap: clamp(18px, 2.4vw, 40px);
  padding: 14px var(--hero-pad-l) clamp(40px, 8vh, 82px) var(--hero-pad-l);
}
.hero--video .pillar { text-align: left; align-items: flex-start; }
.pillar { padding-top: 12px; gap: 7px; }
.pillar__num   { font-size: 10px; letter-spacing: 0.3em; color: rgba(0,0,0,0.55); }
.pillar__title { font-size: 12px; letter-spacing: 0.26em; }
.pillar__desc  { font-size: 11px; line-height: 1.45; max-width: 22ch; color: #444; }

/* --- SCROLL TO DISCOVER: far-left edge, vertical, always visible --- */
.scroll-vertical {
  left: clamp(12px, 1.7vw, 26px);
  bottom: 38%;
  transform: translateY(50%) rotate(180deg);
  color: #1a1a1a;
}

/* ===== MOBILE FOOTER + CONTACT (Deniz 2026-07-04) ===== */
@media (max-width: 720px) {
  .foot__grid { grid-template-columns: 1fr auto; }
  .foot__grid > div:nth-child(2) { justify-self: end; text-align: right; }
  .foot__grid > div:nth-child(3) { grid-column: 1; }
  .foot__brand p { text-align: justify; }
  .contact .contact__links { flex-direction: column; align-items: center; gap: 14px; }
  .contact .contact__links .btn { min-width: 210px; justify-content: center; text-align: center; }
  .contact .contact__links .btn--gold { order: 3; }
}

/* ===== MOBILE FOOTER row pairing (Deniz 2026-07-04): CONTACT bottom-aligned
   to SITE so heading<->Concerts, LinkedIn<->Research, Instagram<->Press,
   Email<->About. Contact order flips via CSS order (desktop DOM untouched). */
@media (max-width: 720px) {
  .foot__grid { grid-template-columns: 1fr auto; }
  .foot__grid > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .foot__grid > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; text-align: right; }
  .foot__grid > div:nth-child(2) ul { display: flex; flex-direction: column; align-items: flex-end; }
  .foot__grid > div:nth-child(3) { grid-column: 1; grid-row: 2; align-self: end; }
  .foot__grid > div:nth-child(3) ul { display: flex; flex-direction: column; }
}

/* mobile: brand bio uses the same face/size/tracking as the contact links */
@media (max-width: 720px) {
  .foot__brand p { font-family: var(--sans); letter-spacing: normal; font-size: 12px; }
}

/* ===== DESKTOP FOOTER (Deniz 2026-07-04): SITE centered on the page with
   centered text; CONTACT at the right edge, right-aligned. Mobile pairing
   rules above are untouched (this block is >720px only). ===== */
@media (min-width: 721px) {
  .foot__grid { grid-template-columns: 1fr auto 1fr; }
  .foot__grid > div:nth-child(2) { justify-self: center; text-align: center; }
  .foot__grid > div:nth-child(3) { justify-self: end; text-align: right; }
}