/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #ffffff;
  --ink: #111111;
  --red: #ff3b30;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- fixed project menu (top-left, always on top) ---------- */
.menu {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 100;
  max-width: 50vw;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.menu a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.menu a:hover { opacity: 0.55; }
.menu a.active { color: var(--red); }
.menu i {           /* the " / " separators */
  font-style: normal;
  color: var(--ink);
  margin: 0 6px;
}

/* ---------- project sections (long, simple scroll) ---------- */
.project {
  min-height: 100vh;
  padding: 15vh 0 9vh;
  color: var(--red);
}

/* 6-column grid — place items with grid-column to control size/position */
.spread {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: start;
  padding: 0 32px;   /* left/right edge gutters */
}

.text { grid-column: 4 / 7; }   /* description: right 3 columns */

.media { grid-column: 2 / 6; width: 100%; overflow: hidden; }  /* default: middle cols 2–5 */
.media img, .media video { width: 100%; height: auto; display: block; }
.media-cap { display: block; font-size: 15px; line-height: 1.3; margin-bottom: 6px; color: var(--red); }  /* [label] above media */
.video { grid-column: 2 / 6; }                                 /* video: cols 2–5 */
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.label {
  font-style: italic;
  font-size: 18px;
  text-align: center;
  margin-bottom: 18px;
  color: var(--red);
}
.body {
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.32;
  color: var(--red);
}
.credits {
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--red);
}

/* ---------- ME (intro) layout ---------- */
.project--me {
  min-height: 100vh;
  padding: 22vh 32px 6vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  color: var(--red);
}
.contact a { color: inherit; text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact {
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 16px;
  line-height: 1.5;
}
.intro-text {
  font-size: clamp(30px, 4.8vw, 64px);
  line-height: 1.14;
  font-weight: 400;
  max-width: 1250px;
}
.project--me b { font-weight: 800; font-style: italic; }
.tools {
  margin-top: 42px;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.4;
}
.tools u { font-weight: 700; text-underline-offset: 2px; }
.scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: 34px;
  animation: bounce-cue 1.5s ease-in-out infinite;
}
.scroll-cue i {
  display: block;
  width: 16px;
  height: 16px;
  border-right: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  transform: rotate(45deg);
}
@keyframes bounce-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .menu { font-size: 20px; left: 20px; right: 20px; max-width: none; }
  .spread { grid-template-columns: 1fr; gap: 32px; padding: 0; }
  .spread > * { grid-column: 1 / -1 !important; }   /* override inline grid-column on mobile */
  .project { padding: 13vh 7vw 6vh; }
  .contact { position: static; left: auto; margin-bottom: 10vh; }
  .project--me { padding-top: 26vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
}