/* ============================================================
   VARIABLES
============================================================ */
:root {
  --yellow:  #FFBC42;
  --red:     #D81159;
  --black:   #000000;
  --teal:    #218380;
  --stormy:  #15616D;
  --white:   #F5F5F0;
  --dark:    #0a0a0a;
  --mid:     #111111;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  --t-fast:  0.25s var(--ease-out);
  --t-mid:   0.55s var(--ease-out);
  --t-slow:  0.85s var(--ease-out);

  --nav-z:   1000;
  --nav-btn-z: 1100;
  --cursor-z:  9000;
  --loader-z:  9999;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;
}

a, button { cursor: none; }
img, video { display: block; max-width: 100%; }
ul { list-style: none; }

/* ============================================================
   LOADER
============================================================ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: var(--loader-z);
  display: flex;
  align-items: flex-end;
  padding: 0;
  pointer-events: none;
  transition: opacity 0.6s ease 0.2s;
}

.loader.done { opacity: 0; }

.loader__bar {
  width: 0%;
  height: 2px;
  background: var(--yellow);
  transition: width 1s var(--ease-in-out);
  position: absolute;
  bottom: 0;
  left: 0;
}

/* ============================================================
   GRAIN
============================================================ */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 8000;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.4s steps(1) infinite;
}

@keyframes grainShift {
  0%  { transform: translate(0, 0); }
  25% { transform: translate(-2%, -1%); }
  50% { transform: translate(1%, 2%); }
  75% { transform: translate(2%, -2%); }
}

/* ============================================================
   CUSTOM CURSOR
============================================================ */
.cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--yellow);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--cursor-z);
  transform: translate(-50%, -50%);
  transition: width var(--t-fast), height var(--t-fast), background var(--t-fast);
  mix-blend-mode: difference;
}

.cursor-ring {
  position: fixed;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 188, 66, 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--cursor-z) - 1);
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease-out),
              height 0.2s var(--ease-out),
              border-color 0.2s ease,
              opacity 0.2s ease;
}

body.cursor-hover .cursor         { width: 18px; height: 18px; }
body.cursor-hover .cursor-ring    { width: 58px; height: 58px; border-color: rgba(255,188,66,0.6); }
body.cursor-light .cursor-ring    { border-color: rgba(0,0,0,0.3); }
body.nav-open  .cursor            { background: var(--white); }

@media (hover: none) {
  .cursor, .cursor-ring { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
}

/* ============================================================
   NAVIGATION BUTTON
============================================================ */
.nav-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: var(--nav-btn-z);
  background: none;
  border: none;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  width: 54px;
  cursor: none;
}

.nav-btn__line {
  display: block;
  width: 100%;
  height: 2.25px;
  background: var(--white);
  transform-origin: center;
  transition: transform var(--t-mid), opacity var(--t-mid), background var(--t-fast);
}

/* When nav is open */
.nav-btn.is-open .nav-btn__line:nth-child(1) { transform: translateY(9.75px) rotate(45deg); }
.nav-btn.is-open .nav-btn__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-btn.is-open .nav-btn__line:nth-child(3) { transform: translateY(-9.75px) rotate(-45deg); }

/* Dark variant (for light sections) */
.nav-btn.is-dark .nav-btn__line { background: var(--black); }

/* ============================================================
   NAVIGATION OVERLAY
============================================================ */
.nav {
  position: fixed;
  inset: 0;
  z-index: var(--nav-z);
  display: flex;
  align-items: stretch;
  pointer-events: none;
}

.nav__bg {
  position: absolute;
  inset: 0;
  background: var(--dark);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease-in-out);
}

.nav.is-open .nav__bg {
  clip-path: inset(0 0 0% 0);
}

.nav.is-open {
  pointer-events: all;
}

.nav__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 8vw;
  width: 100%;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav__item { overflow: hidden; }

.nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 1.2rem;
  text-decoration: none;
  padding: 0.25rem 0;
  position: relative;
}

.nav__link::before {
  content: none;
}

.nav__link-text {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: lowercase;
  transform: translateY(100%);
  transition: transform var(--t-slow), color var(--t-fast);
}

/* Staggered entrance */
.nav__item:nth-child(1) .nav__link-text { transition-delay: 0.05s; }
.nav__item:nth-child(2) .nav__link-text { transition-delay: 0.10s; }
.nav__item:nth-child(3) .nav__link-text { transition-delay: 0.15s; }
.nav__item:nth-child(4) .nav__link-text { transition-delay: 0.20s; }
.nav__item:nth-child(5) .nav__link-text { transition-delay: 0.25s; }
.nav__item:nth-child(6) .nav__link-text { transition-delay: 0.30s; }
.nav__item:nth-child(7) .nav__link-text { transition-delay: 0.35s; }
.nav__item:nth-child(8) .nav__link-text { transition-delay: 0.40s; }
.nav__item:nth-child(9) .nav__link-text { transition-delay: 0.45s; }

.nav.is-open .nav__link-text { transform: translateY(0); }

.nav__link:hover .nav__link-text { color: var(--yellow); }

.nav__footer {
  margin-top: 4rem;
  overflow: hidden;
}

.nav__email {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.35);
  text-decoration: none;
  transform: translateY(100%);
  transition: transform var(--t-slow) 0.4s, color var(--t-fast);
}

.nav.is-open .nav__email { transform: translateY(0); }
.nav__email:hover { color: var(--yellow); }

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* — media layer — */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__video.is-ready { opacity: 1; }

/* — animated fallback — */
.hero__fallback {
  position: absolute;
  inset: 0;
  background: var(--dark);
  overflow: hidden;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 12s ease-in-out infinite alternate;
}

.hero__orb--1 {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(33,131,128,0.45) 0%, transparent 70%);
  top: -10%; left: -10%;
  animation-duration: 14s;
}

.hero__orb--2 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(216,17,89,0.30) 0%, transparent 70%);
  top: 30%; right: -5%;
  animation-duration: 10s;
  animation-delay: -4s;
}

.hero__orb--3 {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(255,188,66,0.20) 0%, transparent 70%);
  bottom: 5%; left: 30%;
  animation-duration: 16s;
  animation-delay: -8s;
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4%, 6%) scale(1.08); }
  100% { transform: translate(-4%, -3%) scale(0.95); }
}

/* — overlay — */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.75) 100%
  );
}

/* — content — */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  animation: heroPop 1.1s var(--ease-out) 0.6s forwards;
}

@keyframes heroPop {
  to { opacity: 1; transform: translateY(0); }
}

.hero__name {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8.5vw, 8rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--white);
}

.hero__tagline {
  display: none;
}

/* ============================================================
   SECTION — SHARED
============================================================ */
.section {
  position: relative;
  padding: 9rem 6vw;
  overflow: hidden;
}

.section__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-bottom: 5rem;
}

.section__num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--yellow);
  font-weight: 400;
  flex-shrink: 0;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

/* ============================================================
   SCROLL REVEAL
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MEDIA PLACEHOLDER
============================================================ */
.placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: rgba(255,255,255,0.028);
  border: 1px dashed rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-mid);
}

.placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,188,66,0.04) 100%);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.placeholder:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,188,66,0.25);
}

.placeholder:hover::after { opacity: 1; }

.placeholder__label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  position: relative;
  z-index: 1;
}

.placeholder__icon {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.1);
  font-weight: 300;
  position: relative;
  z-index: 1;
  transition: color var(--t-fast);
}

.placeholder:hover .placeholder__icon { color: rgba(255,188,66,0.5); }

/* Height variants */
.placeholder--tall    { min-height: 340px; }
.placeholder--portrait { min-height: 420px; aspect-ratio: 3 / 4; }

/* Light-section variant */
.section--about .placeholder {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}

.section--about .placeholder:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(216,17,89,0.25);
}

.section--about .placeholder .placeholder__label { color: rgba(0,0,0,0.25); }
.section--about .placeholder .placeholder__icon  { color: rgba(0,0,0,0.15); }

/* ============================================================
   MEDIA GRID HELPER
============================================================ */
.media-grid { display: grid; gap: 1rem; }
.media-grid--2col { grid-template-columns: 1.6fr 1fr; }

/* ============================================================
   CONNECTION SECTION
============================================================ */
.section--connection {
  background: var(--dark);
  min-height: 100vh;
}

.section--connection .section__title { color: var(--teal); }

.connection__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
}

.section--connection .section__inner { position: relative; z-index: 1; }

.connection__body {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 5rem;
  align-items: start;
}

.connection__text p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.75;
  color: rgba(245,245,240,0.6);
}

.connection__media .media-grid { height: 380px; }
.connection__media .placeholder { min-height: unset; height: 100%; }

/* ============================================================
   MARBLES SECTION
============================================================ */
.section--marbles {
  background: var(--black);
  padding-bottom: 10rem;
}

.section--marbles .section__title { color: var(--white); }
.section--marbles .section__num  { color: var(--yellow); }

.marbles__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
}

.marble-cell { overflow: hidden; }
.marble-cell .placeholder { min-height: unset; height: 100%; }

.marble-cell--hero { grid-column: span 7; height: 480px; }
.marble-cell--sm:nth-child(2) { grid-column: span 5; height: 232px; }
.marble-cell--sm:nth-child(3) { grid-column: span 5; height: 232px; }
.marble-cell--md:nth-child(4) { grid-column: span 5; height: 310px; }
.marble-cell--md:nth-child(5) { grid-column: span 7; height: 310px; }
.marble-cell--wide             { grid-column: span 12; height: 320px; }

.marble-cell .placeholder {
  transition: transform var(--t-mid);
}
.marble-cell:hover .placeholder { transform: scale(0.985); }

/* ============================================================
   FIBONACCI SECTION
============================================================ */
.section--fibonacci {
  background: var(--mid);
  min-height: 110vh;
}

.section--fibonacci .section__title { color: var(--yellow); }

.fibonacci__wrap { position: relative; }

.fibonacci__quote {
  max-width: 320px;
  margin-bottom: 3rem;
  margin-left: auto;
  text-align: right;
}

.fibonacci__quote p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(245,245,240,0.4);
  font-style: italic;
}

.fibonacci__grid {
  display: grid;
  /* 8 cols so proportions divide cleanly */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 110px);
  gap: 8px;
}

.fib-cell .placeholder { min-height: unset; height: 100%; }

/* Fibonacci proportions: 8, 5, 3, 2, 1 */
.fib-cell--8 { grid-column: 1 / 6; grid-row: 1 / 4; } /* 5 cols × 3 rows */
.fib-cell--5 { grid-column: 6 / 9; grid-row: 1 / 4; } /* 3 cols × 3 rows */
.fib-cell--3 { grid-column: 1 / 4; grid-row: 4 / 6; } /* 3 cols × 2 rows */
.fib-cell--2 { grid-column: 4 / 7; grid-row: 4 / 6; } /* 3 cols × 2 rows */
.fib-cell--1 { grid-column: 7 / 9; grid-row: 4 / 6; } /* 2 cols × 2 rows */

/* ============================================================
   FRAGMENTED APPEARANCES
============================================================ */
.section--fragmented {
  background: var(--black);
  min-height: 110vh;
}

.section--fragmented .section__title { color: var(--red); }
.section--fragmented .section__num   { color: var(--yellow); }

.fragmented__stage {
  position: relative;
  height: 680px;
  margin-top: 2rem;
}

.frag-piece {
  position: absolute;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), z-index 0s;
}

.frag-piece .placeholder { min-height: unset; height: 100%; }

.frag-piece:hover { z-index: 20; }

.frag-piece--a {
  width: 46%; height: 56%;
  top: 0; left: 4%;
  transform: rotate(-1.8deg);
  z-index: 2;
}
.frag-piece--b {
  width: 34%; height: 58%;
  top: 4%; right: 4%;
  transform: rotate(2.2deg);
  z-index: 3;
}
.frag-piece--c {
  width: 29%; height: 38%;
  bottom: 8%; left: 14%;
  transform: rotate(-0.6deg);
  z-index: 4;
}
.frag-piece--d {
  width: 26%; height: 34%;
  bottom: 4%; right: 18%;
  transform: rotate(1.8deg);
  z-index: 2;
}
.frag-piece--e {
  width: 18%; height: 28%;
  top: 44%; left: 42%;
  transform: rotate(-3deg);
  z-index: 5;
}

.frag-piece--a:hover { transform: rotate(-1.8deg) scale(1.03); }
.frag-piece--b:hover { transform: rotate(2.2deg)  scale(1.03); }
.frag-piece--c:hover { transform: rotate(-0.6deg) scale(1.03); }
.frag-piece--d:hover { transform: rotate(1.8deg)  scale(1.03); }
.frag-piece--e:hover { transform: rotate(-3deg)   scale(1.05); }

/* ============================================================
   ABOUT SECTION
============================================================ */
.section--about {
  background: var(--white);
  color: var(--black);
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.section--about .section__num   { color: var(--red); }
.section--about .section__title { color: var(--black); }
.section--about .section__head  { margin-bottom: 2.5rem; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 7rem;
  align-items: center;
}

.about__portrait { height: 540px; }

.about__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about__bio {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.85;
  color: rgba(0,0,0,0.58);
  margin-top: 1.4rem;
}

/* ============================================================
   FESTIVALS & EXHIBITIONS
============================================================ */
.section--festivals {
  background: var(--stormy);
  min-height: 90vh;
}

.section--festivals .section__title { color: var(--white); }
.section--festivals .section__num   { color: var(--yellow); }

.timeline {
  position: relative;
  max-width: 760px;
  margin-top: 1rem;
}

.timeline__line {
  position: absolute;
  left: 72px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.12);
}

.timeline__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 3rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: 72px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  z-index: 1;
  transition: transform var(--t-fast), background var(--t-fast);
}

.timeline__item:hover::before {
  transform: translate(-50%, -50%) scale(1.6);
  background: var(--red);
}

.timeline__year {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--yellow);
  padding-top: 0.25rem;
  text-align: right;
}

.timeline__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--white);
  margin-bottom: 0.3rem;
  transition: color var(--t-fast);
}

.timeline__item:hover .timeline__title { color: var(--yellow); }

.timeline__body { display: flex; flex-direction: column; gap: 0.2rem; justify-content: center; }

.timeline__venue {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(245,245,240,0.4);
}

/* Status badges on timeline items */
.timeline__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 1px;
  border: 1px solid;
  vertical-align: middle;
  margin-left: 0.7rem;
  position: relative;
  top: -0.1em;
}

.timeline__badge--current {
  color: var(--yellow);
  border-color: rgba(255,188,66,0.35);
  background: rgba(255,188,66,0.07);
  animation: badgePulse 2.2s ease-in-out infinite;
}

.timeline__badge--upcoming {
  color: #218380;
  border-color: rgba(33,131,128,0.35);
  background: rgba(33,131,128,0.07);
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* "View all" link */
.timeline__more {
  padding: 2rem 0 0;
  display: flex;
  justify-content: flex-end;
}

.timeline__more-link {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.3);
  text-decoration: none;
  transition: color var(--t-fast);
  position: relative;
}

.timeline__more-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--yellow);
  transition: width var(--t-mid);
}

.timeline__more-link:hover { color: var(--yellow); }
.timeline__more-link:hover::after { width: 100%; }

/* ============================================================
   CONTACT SECTION
============================================================ */
.section--contact {
  background: var(--black);
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.contact__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.contact__wrap .section__num {
  color: var(--yellow);
  margin-bottom: 1rem;
}

.contact__heading {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11vw, 10rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--white);
  margin-bottom: 3.5rem;
}

.contact__email {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid var(--yellow);
  padding-bottom: 0.25rem;
  margin-bottom: 3rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.contact__email:hover {
  color: var(--white);
  border-color: var(--white);
}

.contact__links {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.contact__social {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.35);
  text-decoration: none;
  position: relative;
  transition: color var(--t-fast);
}

.contact__social::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--yellow);
  transition: width var(--t-mid);
}

.contact__social:hover { color: var(--yellow); }
.contact__social:hover::after { width: 100%; }

/* Background ghost text */
.contact__ghost {
  position: absolute;
  bottom: -0.12em;
  right: -0.04em;
  font-family: var(--font-display);
  font-size: 20vw;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.018);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .section { padding: 6rem 5vw; }

  .connection__body {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .connection__media .media-grid { height: 280px; }

  .marbles__grid { grid-template-columns: repeat(2, 1fr); }
  .marble-cell--hero  { grid-column: span 2; height: 280px; }
  .marble-cell--sm:nth-child(2) { grid-column: span 1; height: 200px; }
  .marble-cell--sm:nth-child(3) { grid-column: span 1; height: 200px; }
  .marble-cell--md:nth-child(4) { grid-column: span 1; height: 230px; }
  .marble-cell--md:nth-child(5) { grid-column: span 1; height: 230px; }
  .marble-cell--wide  { grid-column: span 2; height: 220px; }

  .fibonacci__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 130px);
  }
  .fib-cell--8 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .fib-cell--5 { grid-column: 1 / 3; grid-row: 3 / 4; }
  .fib-cell--3 { grid-column: 1 / 2; grid-row: 4 / 6; }
  .fib-cell--2 { grid-column: 2 / 3; grid-row: 4 / 6; }
  .fib-cell--1 { grid-column: 1 / 3; grid-row: 6 / 7; }

  .fragmented__stage { height: 800px; }
  .frag-piece--a { width: 65%; height: 40%; }
  .frag-piece--b { width: 52%; height: 36%; top: 38%; right: 0%; }
  .frag-piece--c { width: 58%; height: 30%; bottom: 22%; left: 4%; }
  .frag-piece--d { width: 44%; height: 26%; bottom: 4%; right: 4%; }
  .frag-piece--e { width: 38%; height: 22%; bottom: 30%; right: 12%; top: auto; left: auto; }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about__portrait { height: 380px; }

  .timeline__line { left: 56px; }
  .timeline__item { grid-template-columns: 56px 1fr; gap: 2rem; }
  .timeline__item::before { left: 56px; }
}

@media (max-width: 540px) {
  .section { padding: 5rem 5vw; }
  .section__head { margin-bottom: 3.5rem; }

  .hero__name { letter-spacing: 0.01em; }

  .media-grid--2col { grid-template-columns: 1fr; }
  .connection__media .media-grid { height: auto; }
  .connection__media .media-grid .placeholder { height: 200px; }

  .fibonacci__grid { grid-template-rows: repeat(6, 100px); }

  .fragmented__stage { height: 600px; }
  .frag-piece--a { width: 78%; height: 36%; }
  .frag-piece--e { display: none; }

  .contact__heading { font-size: 3.8rem; }
  .contact__ghost { display: none; }

  .nav__inner { padding: 5rem 7vw; }
}

/* ============================================================
   NAV — 10th item stagger
============================================================ */
.nav__item:nth-child(10) .nav__link-text { transition-delay: 0.50s; }

/* Fix: hamburger X stays white when nav is open over a light page */
.nav-btn.is-dark.is-open .nav-btn__line { background: var(--white); }

/* ============================================================
   INDEX FOOTER
============================================================ */
.index-footer {
  padding: 3.5rem 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(245,245,240,0.05);
}

.index-footer__email {
  font-size: 0.8rem;
  letter-spacing: 0.10em;
  color: rgba(245,245,240,0.32);
  text-decoration: none;
  transition: color var(--t-fast);
}

.index-footer__email:hover { color: var(--yellow); }

.index-footer__links {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.index-footer__link {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.26);
  text-decoration: none;
  transition: color var(--t-fast);
}

.index-footer__link:hover { color: var(--white); }

/* ============================================================
   PAGE — standalone section pages
   Extra top padding so content clears the fixed nav button
============================================================ */
.page-main > .section:first-child {
  padding-top: 9rem;
}

/* Light-background pages (about.html) */
body[data-page-light] .nav-btn__line                  { background: var(--black); }
body[data-page-light] .nav-btn.is-open .nav-btn__line { background: var(--white); }

/* Carousel at top of page — no extra padding needed (it's full-bleed) */
.page-main > .carousel:first-child { padding-top: 0; }

/* ============================================================
   NEXT WORK LINK
============================================================ */
.next-work {
  padding: 4rem 6vw;
  border-top: 1px solid rgba(245,245,240,0.07);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--black);
  text-decoration: none;
  transition: background var(--t-fast);
}

.next-work:hover { background: #0c0c0c; }

.next-work__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.next-work__label {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.28);
}

.next-work__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 2.6rem);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  transition: color var(--t-fast);
}

.next-work:hover .next-work__name { color: var(--yellow); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .page-main > .section:first-child { padding-top: 7rem; }
}

@media (max-width: 540px) {
  .next-work { padding: 3rem 5vw; }
}

/* ============================================================
   MEDIA FILL — actual images replacing placeholders
============================================================ */
.media-fill {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: block;
}

.media-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

/* Zoom on hover for grid cells */
.marble-cell:hover .media-fill img,
.fib-cell:hover    .media-fill img { transform: scale(1.04); }

/* Section-specific height resets (mirrors placeholder rules) */
.connection__media .media-fill  { min-height: unset; height: 100%; }
.marble-cell .media-fill        { min-height: unset; height: 100%; }
.fib-cell    .media-fill        { min-height: unset; height: 100%; }
.frag-piece  .media-fill        { min-height: unset; height: 100%; }
.about__portrait .media-fill    { height: 100%; }

/* Standalone height variants */
.media-fill--tall    { min-height: 340px; }
.media-fill--portrait { min-height: 420px; aspect-ratio: 3 / 4; }

/* ============================================================
   YOUTUBE BACKGROUND VIDEO
   Sits inside .hero__media, behind overlay + content layers.
   Simulates object-fit:cover via min-width/min-height trick.
============================================================ */
.hero__yt-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--dark);
}

/* The YT IFrame API replaces #ytBgPlayer div with an <iframe>
   that keeps the same id — styles below target that iframe. */
#ytBgPlayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* 16:9 at full viewport width */
  width: 100vw;
  height: 56.25vw;

  /* Portrait / tall viewports: ensure full height coverage */
  min-height: 100vh;
  min-width: 177.78vh; /* 100vh ÷ (9/16) */

  pointer-events: none;  /* Block all interaction with the iframe */
  border: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

#ytBgPlayer.is-ready {
  opacity: 1;
}

/* ============================================================
   NAV — curator-focused reduced size
============================================================ */
.nav__link-text {
  font-size: clamp(1.6rem, 3.5vw, 3.2rem);
}

.nav__item--install { display: none; }
@media (max-width: 900px) {
  .nav__item--install { display: block; }
}

/* ============================================================
   HOME BUTTON
============================================================ */
.home-btn {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: var(--nav-btn-z);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.45);
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}
.home-btn:hover { color: var(--yellow); }
body[data-page-light] .home-btn { color: rgba(0,0,0,0.45); }
body[data-page-light] .home-btn:hover { color: var(--red); }

/* ============================================================
   INSTALLATION SIDEBAR (desktop left rail)
============================================================ */
.install-nav {
  position: fixed;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.install-nav__link {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.28);
  text-decoration: none;
  transition: color var(--t-fast);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.install-nav__link::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245,245,240,0.2);
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}

.install-nav__link:hover        { color: var(--yellow); }
.install-nav__link:hover::before { background: var(--yellow); transform: scale(1.5); }
.install-nav__link.is-active    { color: var(--white); }
.install-nav__link.is-active::before { background: var(--yellow); }

@media (max-width: 900px) {
  .install-nav { display: none; }
}

/* Hide sidebar on homepage — works-index section takes over */
body[data-page="home"] .install-nav { display: none; }

/* ============================================================
   WORKS INDEX  (homepage installation list)
============================================================ */
.works-index {
  background: var(--black);
  border-top: 1px solid rgba(245,245,240,0.05);
}

.works-index__item {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2.2rem 6vw;
  border-bottom: 1px solid rgba(245,245,240,0.05);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast);
}

/* Left accent line on hover */
.works-index__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-mid);
}

.works-index__item:hover { background: rgba(255,255,255,0.018); }
.works-index__item:hover::before { transform: scaleY(1); }

.works-index__num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(245,245,240,0.22);
  flex-shrink: 0;
  width: 2rem;
}

.works-index__title {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.25vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(245,245,240,0.70);
  flex: 1;
  line-height: 1;
  transition: color var(--t-fast);
}

.works-index__item:hover .works-index__title { color: var(--white); }

.works-index__arrow {
  font-size: 1.2rem;
  color: rgba(245,245,240,0.14);
  flex-shrink: 0;
  transition: color var(--t-fast), transform var(--t-mid);
}

.works-index__item:hover .works-index__arrow {
  color: var(--yellow);
  transform: translateX(8px);
}

@media (max-width: 540px) {
  .works-index__item { padding: 1.6rem 5vw; gap: 1.5rem; }
  .works-index__title { font-size: clamp(0.65rem, 3.5vw, 1rem); }
}

/* ============================================================
   CAROUSEL
============================================================ */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--dark);
  user-select: none;
}

.carousel__track {
  display: flex;
  transition: transform 0.65s var(--ease-in-out);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  overflow: hidden;
  position: relative;
}

.carousel__slide img,
.carousel__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  border-radius: 1px;
  line-height: 1;
}

.carousel__btn:hover {
  background: rgba(255,188,66,0.15);
  border-color: rgba(255,188,66,0.4);
  color: var(--yellow);
}

.carousel__btn--prev { left: 1.5rem; }
.carousel__btn--next { right: 1.5rem; }

.carousel__dots {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  z-index: 10;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,245,240,0.3);
  border: none;
  cursor: none;
  padding: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}

.carousel__dot.is-active {
  background: var(--yellow);
  transform: scale(1.3);
}

@media (max-width: 540px) {
  .carousel__slide { height: 60vh; min-height: 320px; }
  .carousel__btn   { width: 40px; height: 40px; font-size: 1.2rem; }
}

/* ============================================================
   INSTALLATION CONTENT (below carousel)
============================================================ */
.install-content {
  padding: 5.5rem 6vw 7rem;
  max-width: 900px;
  margin: 0 auto;
}

.install-content__num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--yellow);
  display: block;
  margin-bottom: 1.2rem;
}

.install-content__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--white);
  margin-bottom: 2rem;
}

.install-content__text {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.85;
  color: rgba(245,245,240,0.52);
  max-width: 620px;
}

/* ============================================================
   HERO — curator override  (Syne preserved — original hero aesthetic)
============================================================ */
.hero__name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.hero__subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 0.9vw, 0.75rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.4);
  margin-top: 0.9rem;
}

/* ============================================================
   CONTACT — reduced heading size
============================================================ */
.contact__heading {
  font-size: clamp(3.5rem, 8vw, 7rem);
  letter-spacing: 0.01em;
}

/* ============================================================
   I18N — bilingual visibility (NL / EN)
   The active language is set via data-lang on <html>.
   Each translatable block is duplicated as .lng--en / .lng--nl.
============================================================ */
html[data-lang="en"] .lng--nl { display: none !important; }
html[data-lang="nl"] .lng--en { display: none !important; }

/* ============================================================
   LANGUAGE TOGGLE
============================================================ */
.lang-toggle {
  position: fixed;
  top: 2.15rem;
  right: 6rem;
  z-index: var(--nav-btn-z);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lang-toggle button {
  background: none;
  border: none;
  padding: 0.2rem 0.1rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.4);
  cursor: none;
  transition: color var(--t-fast);
}

.lang-toggle button.is-active { color: var(--yellow); }
.lang-toggle button:hover     { color: var(--white); }

.lang-toggle__sep {
  font-size: 0.6rem;
  color: rgba(245,245,240,0.2);
  line-height: 1;
}

/* Dark variant on light pages */
body[data-page-light] .lang-toggle button            { color: rgba(0,0,0,0.4); }
body[data-page-light] .lang-toggle button.is-active  { color: var(--red); }
body[data-page-light] .lang-toggle button:hover      { color: var(--black); }
body[data-page-light] .lang-toggle__sep              { color: rgba(0,0,0,0.2); }

@media (max-width: 540px) {
  .lang-toggle { top: 2.25rem; right: 5rem; }
}

/* ============================================================
   HERO MOTTO  (tagline under the subtitle, homepage)
============================================================ */
.hero__motto {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: rgba(245,245,240,0.78);
  margin-top: 1.4rem;
}