/* =====================
   Reminiscence — page overrides.
   Shares case-study layout with evanescent.css (loaded first).
   Each Experiment is its own .ev-section--approach so section padding
   handles between-section spacing; within a section, tight pairings
   (heading → image → description) sit at 16px, and a body that
   starts a new block under an image gets 384px above (matches Figma).
===================== */

/* Scrollable page — override base html,body { overflow: hidden } */
html:has(.page-project),
.page-project {
  overflow: auto;
  height: auto;
}

/* Grid lines span full page height, lowest z-index */
.page-project .col-grid {
  z-index: 0;
  position: fixed;
}

/* =====================
   Lede — 16px / max-width 1144px (Reminiscence's wider variant of
   evanescent's 16px / 981px). 4 paragraphs flow as one block.
===================== */
.page-reminiscence .ev-lede {
  max-width: 1144px;
  letter-spacing: -0.022em;
}

.page-reminiscence .ev-lede p {
  margin: 0;
}

/* =====================
   Hero — full-width photograph (no white-bordered frame).
===================== */
.page-reminiscence .ev-hero > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1124 / 632;
  object-fit: cover;
}

/* =====================
   Research Question section — Why? block sits between Question and
   the experiment-based intro paragraph, in the right column.
===================== */
.rm-block--why { grid-column: 7 / 11; max-width: 552px; margin-top: 60px; }

/* =====================
   Section heading + subtitle row (Experiment 1-4)
   Bold heading on the left, light grey descriptor next to it.
===================== */
.rm-h2-row {
  grid-column: 3 / 11;
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin: 0;
}

.rm-h2-row .ev-h2 {
  margin: 0;
}

.rm-h2-sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #717171;
  margin: 0;
}

/* =====================
   Inspiration section
===================== */
.rm-h2--inspiration { margin-top: 0; }

.rm-image--inspiration {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 804;
  margin-top: 16px;
}

.rm-body--inspiration {
  grid-column: 3 / 11;
  max-width: 1045px;
  margin-top: 16px;
}

/* =====================
   Experiment 1 — Concept development
===================== */
.rm-image--exp1-1,
.rm-image--exp1-2 {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

.rm-image--exp1-1 { aspect-ratio: 1124 / 593; }
.rm-image--exp1-2 { aspect-ratio: 1124 / 932; }

.rm-image--exp1-2 { margin-top: 384px; }

.rm-body--exp1-1,
.rm-body--exp1-2 {
  grid-column: 3 / 11;
  max-width: 1051px;
  margin-top: 16px;
}

/* =====================
   Experiment 2 — Visual design
===================== */
.rm-image--exp2-1,
.rm-image--exp2-2,
.rm-image--exp2-3 {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

.rm-image--exp2-1 { aspect-ratio: 1124 / 883; }
.rm-image--exp2-2 { aspect-ratio: 1106 / 485; max-width: 1106px; }
.rm-image--exp2-3 { aspect-ratio: 1100 / 479; max-width: 1100px; }

.rm-image--exp2-2,
.rm-image--exp2-3 { margin-top: 384px; }

.rm-body--exp2-1,
.rm-body--exp2-2 {
  grid-column: 3 / 11;
  max-width: 1051px;
  margin-top: 16px;
}

/* =====================
   Experiment 3 — Interaction design & User flow
===================== */
.rm-image--exp3-1,
.rm-image--exp3-2 {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 279;
  margin-top: 16px;
}

.rm-image--exp3-2 { margin-top: 384px; }

.rm-body--exp3-1,
.rm-body--exp3-2 {
  grid-column: 3 / 11;
  max-width: 1051px;
  margin-top: 16px;
}

/* =====================
   Experiment 4 — Connecting through individual memories
===================== */
.rm-body--exp4-intro {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

.rm-2up {
  grid-column: 3 / 11;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--col-gutter);
  align-items: start;
}

.rm-2up__item {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.rm-2up--exp4 { margin-top: 384px; }
.rm-2up--exp4 .rm-2up__item { aspect-ratio: 552 / 393; }

.rm-image--exp4-3 {
  grid-column: 3 / 11;
  max-width: 1144px;
  aspect-ratio: 1144 / 644;
  margin-top: 384px;
}

.rm-body--exp4-final {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

/* =====================
   Outcome — heading, body, then mixed video/image gallery
===================== */
.rm-h2--outcome { margin-top: 0; }

.rm-body--outcome {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 16px;
}

/* Generic video figure — no controls, scaled to full cell width. */
.rm-video {
  display: block;
  margin: 0;
}

.rm-video video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Outcome 2-up — pov-interaction video (left) + person-interacting photo (right) */
.rm-2up--outcome-pov {
  margin-top: 80px;
}

.rm-2up--outcome-pov .rm-video video,
.rm-2up--outcome-pov .rm-2up__item {
  aspect-ratio: 552 / 982;
}

/* Full-width Outcome video / image elements */
.rm-video--memories,
.rm-video--static,
.rm-image--installation {
  grid-column: 3 / 11;
  max-width: 1124px;
  margin-top: 96px;
}

.rm-video--memories video { aspect-ratio: 1124 / 709; }
.rm-video--static video   { aspect-ratio: 1124 / 632; }
.rm-image--installation   { aspect-ratio: 1124 / 632; }

/* Outcome 2x2 thumbnail grid */
.rm-grid {
  grid-column: 3 / 11;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--col-gutter);
  row-gap: 16px;
  margin-top: 96px;
}

.rm-grid__item {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 556 / 313;
  object-fit: cover;
}

/* =====================
   Reminiscence: tighten the "Next project" link
===================== */
.page-reminiscence .ev-next {
  margin-top: 200px;
}

/* =====================
   Dark mode
===================== */
:root.dark-mode .rm-h2-sub {
  color: #6a6a6a;
}

/* =====================
   Responsive — narrow viewports
===================== */
@media (max-width: 900px) {
  .rm-image--inspiration,
  .rm-image--exp1-1,
  .rm-image--exp1-2,
  .rm-image--exp2-1,
  .rm-image--exp2-2,
  .rm-image--exp2-3,
  .rm-image--exp3-1,
  .rm-image--exp3-2,
  .rm-image--exp4-3,
  .rm-image--installation,
  .rm-video--memories,
  .rm-video--static,
  .rm-body--inspiration,
  .rm-body--exp1-1,
  .rm-body--exp1-2,
  .rm-body--exp2-1,
  .rm-body--exp2-2,
  .rm-body--exp3-1,
  .rm-body--exp3-2,
  .rm-body--exp4-intro,
  .rm-body--exp4-final,
  .rm-body--outcome,
  .rm-2up,
  .rm-grid,
  .rm-h2-row,
  .rm-block--why {
    grid-column: 1 / 7;
    max-width: none;
  }

  .rm-2up,
  .rm-grid {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}