/* ──────────────────────────────────────────────────────────
   Dani Sánchez · Filmmaker portfolio
   Cinematic / minimal — white field, refined sans, quiet motion
   ────────────────────────────────────────────────────────── */

:root {
  --bg: #f7f5f1;
  --fg: #0d0d0c;
  --fg-2: #4a4a47;
  --fg-3: #8a8a85;
  --line: rgba(13, 13, 12, 0.10);
  --line-2: rgba(13, 13, 12, 0.18);

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(24px, 4vw, 64px);
  /* Content padding mirrors the nav offsets so headings, logos & meta
     all "hacen caja" with brand-left and timecode-right. Placeholders
     still go edge-to-edge by breaking out of this. */
  --content-pad: clamp(40px, 22vw, 460px);
  --col-gap: clamp(12px, 1.6vw, 24px);
  --row-gap: clamp(12px, 1.6vw, 24px);
  --grid-cols: 3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

body { padding-top: 56px; }
.hero { margin-top: -56px; }

html { scroll-behavior: smooth; }

body {
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

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

/* ── Typography utilities ──────────────────────────────── */

.mono {
  font-family: var(--mono);
  font-feature-settings: "zero", "ss01";
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 400;
}

.h-display {
  font-size: clamp(48px, 10vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 600;
  margin: 0;
}

.h-section {
  font-size: clamp(56px, 9vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
}

.lead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 56ch;
  letter-spacing: -0.01em;
}

/* ── Page-level film grain ─────────────────────────────── */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Nav ───────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: 56px;
  /* Symmetrical offsets — same var as section content for perfect caja */
  padding: 0 var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease;
}

.nav.solid {
  background: #000;
  border-bottom-color: rgba(255,255,255,0.08);
}

.nav-brand {
  display: flex;
  align-items: center;
}

.brand-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  padding: 5px 9px 6px;
  gap: 1px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}

.brand-line { display: block; line-height: 1; }
.brand-sub { letter-spacing: 0.18em; opacity: 0.95; }

/* Hide the legacy mark dot if any leftover renders */
.nav-brand .mark { display: none; }

.nav-menu {
  display: flex;
  gap: clamp(18px, 2.5vw, 36px);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.nav-menu a {
  position: relative;
  padding: 4px 0;
  opacity: 0.78;
  font-weight: 700;
  transition: opacity 220ms ease;
}
.nav-menu a:hover, .nav-menu a.active { opacity: 1; }
.nav-menu a .num {
  font-family: var(--mono);
  font-size: 10px;
  margin-right: 6px;
  opacity: 0.55;
}

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.hero-stage {
  position: absolute;
  inset: 0;
}

.hero-letterbox {
  position: absolute;
  left: 0; right: 0;
  height: 6vh;
  background: #000;
  z-index: 4;
  pointer-events: none;
}
.hero-letterbox.top { top: 0; }
.hero-letterbox.bot { bottom: 0; }

.hero-meta {
  position: absolute;
  z-index: 5;
  /* Use the same content-pad as the nav so hero title makes caja with brand */
  inset: auto var(--content-pad) clamp(80px, 14vh, 180px) var(--content-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  pointer-events: none;
}
.hero-name-wrap { pointer-events: auto; }

.hero-name-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.hero-name {
  display: block;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
}

.hero-cta-stack {
  display: inline-block;   /* sizes to widest child = slogan natural width */
  margin-top: 14px;
  box-sizing: border-box;
}

.hero-slogan {
  display: block;
  margin-top: clamp(20px, 2.6vw, 40px);
  font-family: var(--font);
  font-size: clamp(18px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  text-transform: none;
}

.hero-showreel {
  display: block;
  margin-top: 14px;
  width: 100%;          /* matches slogan width (parent inline-block) */
  box-sizing: border-box;
  text-align: center;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.75);
  color: #fff;
  cursor: pointer;
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  pointer-events: auto;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.hero-showreel:hover {
  background: #fff;
  color: #000;
}

/* Showreel modal */
.showreel-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  animation: srfade 280ms ease;
}
@keyframes srfade { from { opacity: 0; } to { opacity: 1; } }
.showreel-modal .frame {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.showreel-modal iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.showreel-modal .close {
  position: absolute;
  top: 24px; right: 28px;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 200ms ease;
}
.showreel-modal .close:hover { opacity: 1; }

.hero-timecode {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.65;
  text-transform: uppercase;
}

.hero-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-rec::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff2222;
  animation: rec 1.4s ease-in-out infinite;
}
@keyframes rec { 50% { opacity: 0.15; } }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 6vh, 72px);
  transform: translateX(-50%);
  z-index: 5;
  width: 3px;
  height: 64px;
  pointer-events: none;
  opacity: 0.7;
}
.hero-scroll::after {
  content: "";
  display: block;
  width: 3px;
  height: 100%;
  background: #fff;
  transform-origin: top;
  animation: scrollDown 2.4s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Section header ────────────────────────────────────── */

.section {
  position: relative;
  padding: clamp(60px, 8vh, 110px) var(--content-pad) 0;
  /* No bottom padding, no top border — each anchor ends flush with content */
  overflow: hidden;
}

/* All sections share the same top padding so spacing between disciplines
   is consistent — Editing and Post must match Direction exactly. */

.section-head {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(40px, 6vh, 80px);
}

.section-head .meta {
  display: flex;
  flex-direction: column;
}

.section-head .num {
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
  line-height: 1;
  opacity: 0.85;
  /* Tight gap to discipline title (~1/3 of previous spacing) */
  margin-bottom: clamp(40px, 6vh, 80px);
}

.section-head h2 {
  display: block;
  /* Cap at the hero name size so disciplines never exceed "Dani Sánchez" */
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
}

.section-head .body {
  max-width: 52ch;
  color: var(--fg-2);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
}

.section-head .body p { margin: 0 0 1em; }

/* ── Clients strip ─────────────────────────────────────── */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: 18px 0;
  margin-bottom: clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  opacity: 0.85;
}

.clients .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.client-logo {
  height: 22px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 220ms ease;
}
.client-logo:hover { opacity: 1; }

.clients.has-images {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 28px);
  /* Nudge the first logo right to match the title glyph's left side-bearing */
  padding-left: clamp(2px, 0.25vw, 6px);
  padding-top: clamp(18px, 2.4vw, 30px);
  padding-bottom: clamp(18px, 2.4vw, 30px);
  border: 0;
}

/* Strips with few logos: keep the same inter-logo distance as the dense
   strips instead of spreading them edge-to-edge with space-between. */
.clients.has-images.even-gap {
  justify-content: flex-start;
  gap: clamp(28px, 3.3vw, 52px);
}
.clients.has-images.even-gap .client-logo-img[alt="Falsalarma"] {
  height: clamp(26px, 2.9vw, 43px);
}
.clients.has-images.even-gap .client-logo-img[alt="TDP"] {
  height: clamp(29px, 3.3vw, 48px);
}

.client-logo-img {
  flex: 0 1 auto;
  height: clamp(20px, 2.3vw, 34px);
  width: auto;
  max-width: 12%;
  object-fit: contain;
  object-position: center;
  opacity: 0.75;
  transition: opacity 260ms ease;
}
.client-logo-img:hover { opacity: 1; }

/* Two-row grid for disciplines with many logos (e.g. Direction).
   7 columns × 2 rows (last row centers leftover items) without
   changing the section header height. */
.clients.has-images.two-rows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px) clamp(16px, 2vw, 40px);
  flex-wrap: initial;
}
.clients.has-images.two-rows .client-logo-img {
  max-width: 100%;
  height: clamp(24px, 2.6vw, 38px);
}
@media (max-width: 860px) {
  .clients.has-images.two-rows {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Per-logo optical balancing — each source PNG has different internal
   padding, so heights are tuned individually to match visual mass. */
.client-logo-img[alt="Fox Sports"] {
  height: clamp(28px, 3.2vw, 44px);
}
.client-logo-img[alt="Igor Studio"] {
  height: clamp(30px, 3.3vw, 48px);
}
.client-logo-img[alt="INEFC"] {
  height: clamp(26px, 2.9vw, 42px);
}
.client-logo-img[alt="beIN Sports"],
.client-logo-img[alt="Falsalarma"],
.client-logo-img[alt="Alterkdos"],
.client-logo-img[alt="Dalton"] {
  height: clamp(24px, 2.7vw, 40px);
}
.client-logo-img[alt="TV3"] {
  height: clamp(22px, 2.5vw, 38px);
}
.client-logo-img[alt="TVE"] {
  height: clamp(23px, 2.6vw, 39px);
}
.client-logo-img[alt="Adam Foods"] {
  height: clamp(27px, 3.0vw, 45px);
}
.client-logo-img[alt="TDP"] {
  height: clamp(24px, 2.7vw, 40px);
}
.client-logo-img[alt="Tgt"] {
  height: clamp(28px, 3.1vw, 46px);
}
.client-logo-img[alt="MTV"] {
  height: clamp(24px, 2.7vw, 40px);
}
.client-logo-img[alt="Lidl"] {
  height: clamp(26px, 2.9vw, 43px);
}
.client-logo-img[alt="Fira Barcelona"] {
  height: clamp(25px, 2.8vw, 42px);
}
.client-logo-img[alt="CaixaBank"] {
  height: clamp(23px, 2.6vw, 39px);
}
.client-logo-img[alt="Disney"] {
  height: clamp(27px, 3.0vw, 45px);
}
.client-logo-img[alt="El Joyo II"] {
  height: clamp(30px, 3.4vw, 50px);
}
.clients.text {
  border: 0;
  padding: clamp(22px, 3vw, 36px) 0;
  font-family: var(--font);
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  max-width: 72ch;
}
.clients.text strong { font-weight: 600; color: var(--fg); }

@media (max-width: 860px) {
  .clients.has-images {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
  }
  .client-logo-img { flex: 0 0 auto; max-width: 30%; }
}

/* ── Project grid ──────────────────────────────────────── */

/* Edge-to-edge stacked layout (altcinc-style).
   The discipline grid becomes a single full-bleed column —
   each project takes the full viewport width, stacked vertically. */
.grid {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 18px);
  /* break out of the section's horizontal padding (full-bleed placeholders) */
  margin-left: calc(var(--content-pad) * -1);
  margin-right: calc(var(--content-pad) * -1);
}

.card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 148;
  overflow: hidden;
  background: #0e0e0d;
}
@media (max-width: 720px) {
  /* Match the source frame ratio (2.84:1) so mobile cards show the full
     image edge-to-edge with no horizontal crop. */
  .card-frame { aspect-ratio: 2.84 / 1; }
}

.card-frame .layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease;
}
.card-frame .layer.is-on { opacity: 1; }

.card-frame .lb {
  position: absolute;
  left: 0; right: 0;
  height: 4.2%;
  background: #000;
  z-index: 3;
  pointer-events: none;
}
.card-frame .lb.t { top: 0; }
.card-frame .lb.b { bottom: 0; }

.card-frame .grain-cell {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.card-tc {
  position: absolute;
  top: 8px; right: 10px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
}

.card-num {
  position: absolute;
  top: 14px; left: 18px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 500;
  z-index: 5;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

/* — Hover-reveal title overlay (for hover-style = title / info) — */
.card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 6;
  padding: 16px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.card:hover .card-overlay { opacity: 1; transform: translateY(0); }

.card-overlay .t { font-size: 16px; letter-spacing: -0.01em; font-weight: 500; }
.card-overlay .m { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

/* — Caption beneath the frame (default, always visible) — */
.card-caption {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.015em;
  padding: 16px var(--pad) clamp(36px, 5vh, 64px);
}
.card-caption .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg-3);
  white-space: nowrap;
}

.card.is-open .card-frame { outline: 1px solid var(--fg); outline-offset: -1px; }

.card-overlay { padding: 22px var(--pad); }
.card-overlay .t { font-size: clamp(22px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.02em; }
.card-overlay .m { font-size: 11px; }

/* Hide hover-style title overlay & default caption — frames stay clean.
   All info lives inside the inline expansion only. */
.card-overlay,
.card-caption,
.card-num,
.card-tc,
[data-hover="reveal"] .card .reveal-text { display: none !important; }
[data-hover="reveal"] .card-frame::after { display: none; }
[data-hover="preview"] .card-overlay { display: none; }
[data-hover="title"] .card-caption { visibility: hidden; }
[data-hover="reveal"] .card-overlay { display: none; }
[data-hover="reveal"] .card-frame::after {
  content: "";
  position: absolute; inset: 0; z-index: 5;
  background: rgba(255,255,255,0);
  transition: background 320ms ease;
  pointer-events: none;
}
[data-hover="reveal"] .card:hover .card-frame::after { background: rgba(247,245,241,0.78); }
[data-hover="reveal"] .card .reveal-text {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  color: var(--fg);
  opacity: 0; transition: opacity 280ms ease;
  text-align: center; padding: 16px;
}
[data-hover="reveal"] .card:hover .reveal-text { opacity: 1; }
[data-hover="reveal"] .reveal-text .t { font-size: 22px; letter-spacing: -0.02em; }
[data-hover="reveal"] .reveal-text .m { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

/* preview mode shows a soft "preview" cue while not playing */
[data-hover="preview"] .card-caption { }

/* ── Inline expansion — dark, altcinc-style ───────────────────────── */

.expansion {
  width: 100%;
  background: #000;
  color: #fff;
  position: relative;
  animation: expansion-mount 520ms cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: opacity, transform;
}

@keyframes expansion-mount {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bleed the black background into the surrounding section so when
   the desplegable opens, there's no white field showing through the
   flex gap above or the section padding-bottom below. */
.expansion::before,
.expansion::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  background: #000;
  pointer-events: none;
}
.expansion::before {
  top: calc(clamp(8px, 1.4vw, 18px) * -1);
  height: clamp(8px, 1.4vw, 18px);
}
.expansion::after {
  /* A generous black trailing strip so the close of the desplegable
     fades nicely into the next section instead of clipping abruptly. */
  bottom: calc(clamp(60px, 8vh, 120px) * -1);
  height: clamp(60px, 8vh, 120px);
}

.expansion-close-x {
  position: absolute;
  top: 18px;
  right: clamp(24px, 4vw, 64px);
  z-index: 10;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.expansion-close-x:hover {
  background: #fff;
  color: #000;
}

.expansion-meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 3vw, 64px);
  /* Same content-pad as the nav so Project aligns with brand and Synopsis with Contact */
  padding: clamp(72px, 9vw, 140px) var(--content-pad) clamp(48px, 7vw, 110px);
}

@media (max-width: 1100px) {
  .expansion-meta {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 32px;
  }
}
@media (max-width: 700px) {
  .expansion-meta {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .expansion-meta { grid-template-columns: 1fr; }
}

.meta-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #fff;
}

.meta-label {
  font-family: var(--font);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  letter-spacing: -0.005em;
}

.meta-sep {
  font-family: var(--font);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  margin-bottom: 4px;
}

.meta-value {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Year, Category and Project (default) start full opacity; the variants
   below restore the original visual hierarchy:
   • Year and Category at half intensity (Role stays full like Project)
   • Synopsis even dimmer for long-form text */
.meta-col:nth-child(2) .meta-value,
.meta-col:nth-child(2) .meta-stack,
.meta-col:nth-child(2) .meta-line,
.meta-col:nth-child(4) .meta-value,
.meta-col:nth-child(4) .meta-stack,
.meta-col:nth-child(4) .meta-line {
  color: rgba(255,255,255,0.68);
}
.meta-col:nth-child(5) .meta-body {
  color: rgba(255,255,255,0.48);
}

.meta-sub {
  font-family: var(--font);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin-top: 8px;
}

.meta-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-line {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.meta-line-dim {
  color: rgba(255,255,255,0.5);
  font-size: clamp(13px, 0.95vw, 15px);
  margin-top: 6px;
}

.meta-body {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.45;
  max-width: 42ch;
}

.expansion-video {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  margin: 0 0 clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expansion-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.expansion-video-empty {
  width: 100%;
  padding: clamp(28px, 4vw, 48px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expansion-video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expansion-video-label {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,0.7);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.expansion-yt-link {
  position: absolute;
  bottom: 14px;
  right: 18px;
  z-index: 5;
  color: rgba(255,255,255,0.78);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  pointer-events: auto;
}
.expansion-yt-link:hover { color: #fff; }
@media (max-width: 900px) {
  .expansion-inner { grid-template-columns: 1fr; }
}

.expansion-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.expansion-player .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 3;
  transition: opacity 240ms ease;
}

.expansion-player .play .btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.2);
  transition: transform 220ms ease, background 220ms ease;
}
.expansion-player:hover .play .btn { transform: scale(1.06); background: rgba(0,0,0,0.35); }

.expansion-player .play .btn svg { margin-left: 3px; }

.expansion-player .play .label {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.expansion-player.is-playing .play { opacity: 0; pointer-events: none; }

.expansion-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}

.expansion-info .title {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0;
}

.expansion-info .row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.expansion-info .row:last-of-type { border-bottom: 1px solid var(--line); }
.expansion-info .row .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.expansion-info .row .v { color: var(--fg); }

.expansion-info .body {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.55;
}
.expansion-info .body p { margin: 0 0 1em; }
.expansion-info .body p:last-child { margin: 0; }

.expansion-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 10;
}

.expansion-close button {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--bg);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.expansion-close button:hover { background: var(--fg); color: var(--bg); }

.expansion-stills {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
  padding: 0 var(--pad) clamp(28px, 4vw, 56px);
}
@media (max-width: 900px) {
  .expansion-stills { grid-template-columns: repeat(2, 1fr); }
}

.still {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #0e0e0d;
}

.still .lb { position: absolute; left:0; right:0; height: 4.2%; background:#000; z-index:3; pointer-events:none; }
.still .lb.t { top: 0; } .still .lb.b { bottom: 0; }
.still .grain-cell { position:absolute; inset:0; z-index:4; opacity:0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.still .tc { position:absolute; top:6px; right:8px; z-index:5; color: rgba(255,255,255,0.6); font-family: var(--mono); font-size: 9px; letter-spacing:0.04em; }

/* ── Art / Comics ──────────────────────────────────────── */

.comics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
@media (max-width: 900px) {
  .comics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .comics { grid-template-columns: 1fr; }
}

.comic {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #fff;
  border: 1px solid var(--line);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.comic:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.18); }
.comic .pg {
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}

/* ── Lightbox ──────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(13, 13, 12, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  backdrop-filter: blur(10px);
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox .stage {
  position: relative;
  max-width: min(720px, 90vw);
  max-height: 92vh;
  width: 100%;
  aspect-ratio: 3 / 4;
}

.lightbox button.nav-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}
.lightbox button.nav-btn:hover { background: rgba(255,255,255,0.14); }
.lightbox button.prev { left: -56px; }
.lightbox button.next { right: -56px; }
@media (max-width: 900px) {
  .lightbox button.prev { left: 8px; }
  .lightbox button.next { right: 8px; }
}

.lightbox button.close {
  position: fixed;
  top: 18px; right: 18px;
  width: auto; height: auto;
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.lightbox-counter {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
}

/* ── Contact ───────────────────────────────────────────── */

.contact {
  padding: clamp(80px, 14vh, 160px) var(--content-pad) clamp(120px, 20vh, 280px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.contact-title {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(80px, 12vh, 180px);
}

.contact-title .num {
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
  line-height: 1;
  opacity: 0.85;
  margin-bottom: clamp(40px, 6vh, 80px);
}

.contact-title h2 {
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
}

/* 3-column meta block (same structure as the expansion-meta inside
   the project desplegables, but in light theme — black on white). */
.contact-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 64px);
}

@media (max-width: 800px) {
  .contact-meta { grid-template-columns: 1fr; row-gap: 40px; }
}

.contact-meta-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--fg);
}

.contact-meta-label {
  font-family: var(--font);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}

.contact-meta-sep {
  font-family: var(--font);
  font-size: 14px;
  color: rgba(13,13,12,0.45);
  margin-top: 2px;
  margin-bottom: 4px;
}

.contact-meta-value {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.contact-meta-value a { display: inline-block; }

.contact-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-meta-stack a {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.4;
  transition: color 220ms ease;
}
.contact-meta-stack a:hover { color: var(--fg); }

.contact-meta-body {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.45;
  max-width: 42ch;
  white-space: pre-wrap;
  tab-size: 4;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  margin-bottom: clamp(80px, 14vh, 200px);
}

@media (max-width: 800px) {
  .contact-top { grid-template-columns: 1fr; gap: 48px; }
}

.contact-left h2 {
  /* Match the discipline section h2 size so "Hi there" reads the same scale */
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
  /* Big breath between "Hi there" and the descriptive paragraph */
  margin-bottom: clamp(40px, 7vh, 110px);
}

.contact-body {
  max-width: 52ch;
  color: var(--fg-2);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  margin: 0;
}

.contact-right { padding-top: 6px; }

.contact-write {
  margin-top: clamp(40px, 8vh, 96px);
}
.contact .big a {
  display: inline-block;
  position: relative;
}
.contact .big a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.04em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms ease;
}
.contact .big a:hover::after { transform: scaleX(1); }

.contact-social {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
}
.contact-social a {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  transition: padding-left 320ms ease, color 220ms ease;
}
.contact-social a:last-child { border-bottom: 1px solid var(--line); }
.contact-social a:hover { padding-left: 12px; color: var(--fg); }
.contact-social a .handle { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

.footer {
  padding: 24px var(--content-pad) 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: stretch;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer > :nth-child(1) { justify-self: start; }
.footer > :nth-child(2) { justify-self: center; }
.footer > :nth-child(3) { justify-self: end; }

/* ── Misc helpers ──────────────────────────────────────── */

.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.fade-in.is-in {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤1024) & mobile (≤720, iPhone 13 390×844)
   The desktop layout leans on a very wide --content-pad to make
   "caja" with the big side margins. On smaller screens we collapse
   that gutter so headings, logos, meta and the hero module breathe
   without overflowing, and swap the inline nav for a hamburger.
   ════════════════════════════════════════════════════════ */

/* ── Hamburger toggle (hidden on desktop) ──────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  margin-right: -8px;
  padding: 0 7px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.nav-toggle .bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 320ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}
/* three bars → X: middle fades, outer two converge & rotate */
.nav.menu-open .nav-toggle .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.menu-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* While the (light) drawer is open, the bar/brand sit on a light field —
   flip the nav to dark ink, dim the brand, keep the X quietly visible. */
.nav.menu-open {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--fg);
}
.nav.menu-open .brand-box { opacity: 0.22; }
.nav.menu-open .nav-toggle { color: var(--fg); opacity: 0.55; }

/* ── Full-screen drawer (mobile) — light, centred (altcinc-style) ── */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px var(--content-pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
  pointer-events: none;
}
.nav.menu-open .nav-drawer {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s;
  pointer-events: auto;
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5.2vh, 46px);
  text-align: center;
}
.nav-drawer-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.4,0,0.2,1);
  /* gentle staggered rise as the drawer opens */
  opacity: 0;
  transform: translateY(10px);
}
.nav-drawer-links a .dk-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 400;
}
.nav-drawer-links a .dk-label {
  font-size: clamp(32px, 9.5vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--fg-3);
  transition: color 200ms ease;
}
.nav.menu-open .nav-drawer-links a {
  opacity: 1;
  transform: translateY(0);
}
.nav.menu-open .nav-drawer-links a:nth-child(1) { transition-delay: 60ms; }
.nav.menu-open .nav-drawer-links a:nth-child(2) { transition-delay: 110ms; }
.nav.menu-open .nav-drawer-links a:nth-child(3) { transition-delay: 160ms; }
.nav.menu-open .nav-drawer-links a:nth-child(4) { transition-delay: 210ms; }
.nav.menu-open .nav-drawer-links a:nth-child(5) { transition-delay: 260ms; }
.nav-drawer-links a:active .dk-label,
.nav-drawer-links a.active .dk-label { color: var(--fg); font-weight: 600; }

/* ── Tablet ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --content-pad: clamp(40px, 8vw, 120px); }
}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --content-pad: 22px; }

  /* swap inline menu → hamburger */
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }

  /* hide the animated scroll cue on mobile */
  .hero-scroll { display: none; }

  /* Hero module sits tight to the edges */
  .hero-meta {
    gap: 14px;
    /* Lift the name/slogan + REC module clear of the animated scroll line
       (which lives ~114px off the bottom on a 844px screen). */
    bottom: clamp(132px, 19vh, 184px);
  }
  .hero-name { font-size: clamp(36px, 10.5vw, 46px); }
  .hero-slogan { font-size: clamp(15px, 4.4vw, 19px); }
  .hero-timecode { font-size: 10px; }

  /* Section titles a touch larger relative to the narrow column */
  .section-head h2,
  .contact-title h2,
  .contact-left h2 { font-size: clamp(44px, 13vw, 64px); }

  /* Anchor landings: leave white space between the fixed nav bar and the
     "/ 0X — Discipline" eyebrow instead of it sitting cramped under the bar. */
  .section,
  .contact { scroll-margin-top: 38px; }
  /* Match Contact's top padding to the sections so its anchor landing gap
     (nav → "/ 05 — Get in touch") is identical to the other anchors. */
  .contact { padding-top: clamp(60px, 8vh, 110px); }
  /* Tighten the gap between the "Just do it!" title and the Contact/Social/
     About columns — pull the whole block ~10px up on mobile. */
  .contact-title { margin-bottom: calc(clamp(80px, 12vh, 180px) - 10px); }

  /* Footer stacks instead of cramming 3 columns into ~350px */
  .footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 6px;
    text-align: left;
  }
  .footer > :nth-child(1),
  .footer > :nth-child(2),
  .footer > :nth-child(3) { justify-self: start; }
}

/* ── Logo strips on small screens ──────────────────────── */
/* On phones a flex-wrap strip leaves ragged rows (uneven counts + heights).
   Switch every variant to a tidy 3-column grid: each logo is centred in an
   equal cell, so they line up cleanly in rows AND columns. Heights are
   capped to one small uniform value (overrides the per-logo desktop clamps). */
@media (max-width: 720px) {
  .clients.has-images,
  .clients.has-images.even-gap,
  .clients.has-images.two-rows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 22px);
    /* Nudge right by the title glyph's left side-bearing (~3.7px @390,
       D/E/P) so the first logo "hace caja" with the discipline heading. */
    padding-left: clamp(3.2px, 0.96vw, 4.7px);
  }
  .clients.has-images .client-logo-img,
  .clients.has-images.even-gap .client-logo-img,
  .clients.has-images.two-rows .client-logo-img {
    flex: 0 0 auto;
    height: auto !important;
    max-height: 20px;
    max-width: none;     /* logos sit at their natural width, packed tight */
    min-width: 0;
    width: auto;
  }
}