/* ================================================================
   CAMILA PEÑA — style.css
   Black-mounted cream panel, monospace throughout, single vertical
   filmstrip that snaps section-by-section on wheel/trackpad/arrow
   keys. Title, project index and about text are fixed overlays that
   stay on screen while the photo column scrolls underneath them.
   ================================================================ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --black: #000;
  --cream: #efeee7;
  --ink: #17160f;
  --ink-soft: #8b8a80;
  --line: rgba(23, 22, 15, 0.12);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, 'Courier New', monospace;
  --gutter: clamp(20px, 3.4vw, 44px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --player-h: 78vh;
}

/* ── Reset ────────────────────────────────────────────────────── */
* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

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

/* ── Panel — the mounted print ────────────────────────────────── */
.panel {
  position: fixed;
  inset: 0;
  background: var(--cream);
  overflow: hidden;
}

/* ── Fixed overlays ───────────────────────────────────────────────
   The title, the project index and the artist description stay put
   on screen at all times ("sobrepuesto siempre") while the photo
   column scrolls underneath them. They fade out while the lightbox
   is viewing a file (see .panel.is-viewing below). */
.overlay {
  position: absolute;
  z-index: 20;
  transition: opacity .55s var(--ease);
}

.overlay--top {
  top: clamp(16px, 2.6vh, 28px);
  left: var(--gutter);
  pointer-events: none;
}

.credit-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.credit-sub {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.overlay--center {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}

.overlay--bottom {
  left: var(--gutter);
  bottom: clamp(16px, 2.6vh, 28px);
  width: min(420px, 40%);
  pointer-events: none;
}

.panel.is-viewing .overlay { opacity: 0; }

/* ── Scroll column ────────────────────────────────────────────── */
.col {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.col::-webkit-scrollbar { display: none; }

/* Photos are centered on screen as a unit with their number — each
   image keeps its own natural aspect ratio ("cada una en su formato")
   rather than being forced into a uniform frame. Sized so exactly five
   sections sit in the viewport at once (padding + image height ≈ 20vh).

   Three-column grid rather than a flex row: the outer columns are
   equal (minmax(0,1fr)) so the auto-sized middle column — the image —
   always lands dead-center on the section regardless of how much
   marker/credit text sits in the side columns ("centra la imagen, que
   el texto vaya al lado" — the text must not pull the image off-center). */
.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 8px var(--gutter);
  scroll-snap-align: start;
}

.section:first-child { padding-top: 160px; }

/* Enough trailing space below the last photo that the browser can
   actually scroll far enough to center it. Centering the last section
   requires (content height + this padding) to be at least one full
   viewport tall — anything less and the target scroll position is
   unreachable, gets clamped short, and mandatory scroll-snap yanks it
   back to the nearest point it *can* reach (looked like the last
   index link "doing nothing"). 100vh always clears that bar. */
.section:last-child {
  padding-bottom: 100vh;
  scroll-snap-align: center;
}

.section:last-child .marker {
  align-self: center;
  margin-top: 0;
}

.marker {
  justify-self: start;
  align-self: start;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.media {
  justify-self: center;
  position: relative;
  z-index: 1;
}

.media:hover { z-index: 30; }

.media img {
  width: auto;
  height: auto;
  max-width: min(300px, 28vw);
  max-height: 18.2vh;
  cursor: pointer;
  transition: transform .9s var(--ease);
}

/* A near-imperceptible lift, not a jump — "casi un matiz". */
.media img:hover {
  transform: scale(1.03);
}

/* Client/project title + Camila's credit-role for each project — sits
   to the side of the thumbnail, vertically centered against it. Grid
   (not this side column) is what keeps the image itself centered. */
.credit-info {
  justify-self: start;
  align-self: center;
  max-width: 160px;
}

.credit-client {
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.credit-role {
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* ── Project index (fixed, center, full width, no backdrop) ──────
   "el texto de los proyectos ... sobrepuesto siempre" — overlaid on
   top of the scrolling photos at all times, no background box. Only
   the links themselves accept clicks; everything else lets clicks on
   the photos underneath pass through. One code per photo, no more. */
.index-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 9px;
  font-size: 10.5px;
  line-height: 1.8;
}

.index-grid a {
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}

.index-grid a:hover { border-color: var(--ink); }

/* ── About (fixed, bottom-left) ───────────────────────────────── */
.about {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
  background: rgba(239, 238, 231, 0.94);
  padding: 4px;
}

.about-link {
  display: inline-block;
  pointer-events: auto;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}

.about-link:hover { border-color: var(--ink); color: var(--ink); }

/* ── Lightbox ─────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}

.lightbox.open { opacity: 1; pointer-events: auto; }

/* Direct-child selectors throughout this block on purpose — the
   carousel below also contains <img>/<video> elements, and they must
   not inherit these single-item display rules. */
.lightbox > img {
  height: var(--player-h);
  max-width: 88vw;
  width: auto;
  object-fit: contain;
  cursor: zoom-out;
  transform: scale(.97);
  transition: transform .5s var(--ease);
}

.lightbox.open > img { transform: scale(1); }

/* Spotify / YouTube / Mixcloud — plays inline instead of opening the
   image. Width is shared; height comes from each item's own
   data-embed-height so a compact player and a 16:9 video both look
   right. */
.lightbox > iframe {
  display: none;
  width: min(720px, 90vw);
  border: none;
  background: transparent;
  transform: scale(.97);
  transition: transform .5s var(--ease);
}

.lightbox.open > iframe { transform: scale(1); }
.lightbox.has-embed > iframe { display: block; }
.lightbox.has-embed > img { display: none; }

/* Locally-hosted video files (e.g. a project reel) — played with the
   browser's own controls rather than an external platform's iframe. */
.lightbox > video {
  display: none;
  height: var(--player-h);
  max-width: 88vw;
  width: auto;
  object-fit: contain;
  transform: scale(.97);
  transition: transform .5s var(--ease);
}

.lightbox.open > video { transform: scale(1); }
.lightbox.has-video > video { display: block; }
.lightbox.has-video > img { display: none; }

/* Horizontal carousel — several images (and optionally one video)
   side by side; the item to open on ("el video en el centro") is
   scrolled into view via JS right after the carousel is built. */
.lightbox-carousel {
  display: none;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 8vw;
  -webkit-overflow-scrolling: touch;
}

.lightbox-carousel::-webkit-scrollbar { display: none; }
.lightbox-carousel { scrollbar-width: none; }

.lightbox.has-carousel .lightbox-carousel { display: flex; }
.lightbox.has-carousel > img,
.lightbox.has-carousel > iframe,
.lightbox.has-carousel > video { display: none; }

.carousel-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  height: var(--player-h);
  max-width: min(640px, 76vw);
  width: auto;
  object-fit: contain;
  cursor: default;
}

img.carousel-item { cursor: zoom-in; }

.lightbox-close {
  position: absolute;
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 32px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cream);
  cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 760px) {
  .section { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 70px 20px 40px; }

  .marker, .media, .credit-info { justify-self: start; }

  .marker { margin-top: 0; }

  .media img { max-width: 100%; max-height: 37.5vh; }

  .credit-info { width: 100%; max-width: 100%; }

  .overlay--center .index-grid { font-size: 10px; }

  .overlay--bottom { width: 80%; }

  .about { font-size: 10.5px; }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .col { scroll-behavior: auto; }
  .overlay, .media img, .about-link, .index-grid a, .lightbox, .lightbox img { transition: none; }
}