:root {
  --ink: #000;
  --cream: #e6d5bb;
  --card-w: 525px;
  --card-h: 300px;
  --gap: 10px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--cream);
}

html { overscroll-behavior: none; }

body {
  font-family: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a { color: inherit; font: inherit; }

a { text-decoration: none; }

button { -webkit-tap-highlight-color: transparent; }

/* ---------- Home ---------- */

.home-page {
  overflow: hidden;
  user-select: none;
}

.home {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

.brand {
  position: absolute;
  z-index: 20;
  /* Center the logo inside the black area above the carousel. */
  top: calc(25% - var(--card-h) / 4);
  left: 50%;
  width: 295px;
  height: 114px;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
}

.brand__logo {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--card-h);
  transform: translateY(-50%);
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  opacity: 1;
}

.carousel.is-dragging,
.carousel.is-dragging .carousel__slide { cursor: grabbing; }
.carousel.is-intro { cursor: default; pointer-events: none; }

.carousel__stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  will-change: transform;
}

.carousel__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  padding: 0;
  border: 0;
  margin: 0 0 0 calc(var(--card-w) / -2);
  background: #0a0a0a;
  overflow: hidden;
  cursor: pointer;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}

.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.002);
}

.edge-fade {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: min(19.85vw, 300px);
  pointer-events: none;
}

.edge-fade--left {
  left: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,0) 100%);
}

.edge-fade--right {
  right: 0;
  background: linear-gradient(270deg, #000 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,0) 100%);
}

.home__tagline {
  position: absolute;
  z-index: 20;
  /* Center the tagline inside the black area below the carousel. */
  top: calc(75% + var(--card-h) / 4);
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100vw - 40px);
  margin: 0;
  color: var(--cream);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  text-align: center;
  white-space: nowrap;
}

/* Intro is controlled by JS. These classes only set initial visibility. */
.home.is-preintro .brand,
.home.is-preintro .home__tagline { opacity: 0; }
.home.is-preintro .carousel { opacity: 0; }

/* ---------- Project ---------- */

.project-page { overflow: hidden; }

.project {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

.project__back {
  position: absolute;
  z-index: 20;
  top: 65px;
  left: 65px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: 16px;
  line-height: 22px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
}

.project__back-arrow {
  display: block;
  flex: 0 0 auto;
}

.project__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(59.524vw, 900px);
  /* The film itself, not the film+caption group, is centered in the viewport.
     Meta is 22px tall with 15px spacing, so shifting the whole group down by
     half of that 37px keeps the media's midpoint exactly at 50vh. */
  transform: translate(-50%, calc(-50% + 18.5px));
}

.project__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--video-ratio, 16 / 9);
  overflow: hidden;
  background: #080808;
}

.project__media img,
.project__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.project__media iframe {
  opacity: 0;
  transition: opacity 180ms ease;
}

.project__media.is-ready iframe { opacity: 1; }

.project__media img { object-fit: cover; }

.project__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 15px;
}

.project__title,
.project__year {
  margin: 0;
  color: var(--cream);
  font-size: 16px;
  line-height: 22px;
  font-weight: 300;
}

.project__title { text-align: left; }
.project__year { text-align: right; }

@media (max-width: 700px) {
  :root {
    /* Figma Home / Phone (440 × 956): center card is 340 × 194,
       leaving 50 px on each side and ~40 px of the neighbours visible. */
    --card-w: min(77.2727vw, 340px);
    --card-h: calc(var(--card-w) * 194 / 340);
    --gap: 10px;
  }

  .home,
  .project { min-height: 560px; }

  .brand {
    top: calc(25% - var(--card-h) / 4);
    width: min(67.045vw, 295px);
    height: auto;
    aspect-ratio: 295 / 114;
  }

  .carousel {
    top: 50%;
    height: var(--card-h);
    transform: translateY(-50%);
    touch-action: pan-y;
  }

  .edge-fade { display: none; }

  .home__tagline {
    top: calc(75% + var(--card-h) / 4);
    width: 260px;
    max-width: calc(100vw - 60px);
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
  }

  .project__back {
    top: 40px;
    left: 10px;
  }

  .project__content {
    width: calc(100vw - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel { scroll-behavior: auto; }
}