/* =====================
   Evanescent — case study page
   Base styles come from styles.css; this file adds the case-study layout.
===================== */

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

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

/* =====================
   Sticky section nav
===================== */
.ev-sidenav {
  position: fixed;
  left: var(--col-margin);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
}

.ev-sidenav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ev-sidenav__link {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #989898;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.ev-sidenav__link.is-active,
.ev-sidenav__link:hover {
  color: #000;
}

:root.dark-mode .ev-sidenav__link {
  color: #6a6a6a;
}

:root.dark-mode .ev-sidenav__link.is-active,
:root.dark-mode .ev-sidenav__link:hover {
  color: #fff;
}

/* =====================
   Main layout
===================== */
.ev-main {
  display: block;
  padding-bottom: 16px;
  position: relative;
  z-index: 1;
}

/* Each section is its own 12-col subgrid so children can be placed by
   grid-column without juggling absolute coordinates. */
.ev-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gutter);
  padding: 0 var(--col-margin);
  align-items: start;
}

/* =====================
   Section: Overview
===================== */
.ev-section--overview {
  padding-top: clamp(180px, 26vh, 300px);
  row-gap: 0;
}

.ev-year {
  grid-column: 3 / 11;
  font-size: 12px;
  font-weight: 400;
  color: #727272;
  line-height: 1.5;
  margin: 0;
}

.ev-title {
  grid-column: 3 / 11;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 2px 0 0;
}

.ev-title__draft {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.ev-lede {
  grid-column: 3 / 11;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: #1e1e1e;
  margin: 32px 0 0;
  max-width: 981px;
}

/* Meta row — Role / Tools / Timeline / Client, each 2-col wide */
.ev-meta {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gutter);
  margin: 160px 0 0;
}

.ev-meta__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ev-meta__item--role     { grid-column: 3 / 5; }
.ev-meta__item--tools    { grid-column: 5 / 7; }
.ev-meta__item--timeline { grid-column: 7 / 9; }
.ev-meta__item--client   { grid-column: 9 / 11; }

.ev-meta dt {
  font-size: 14px;
  font-weight: 400;
  color: #727272;
  line-height: 1.5;
  margin: 0;
}

.ev-meta dd {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 1.5;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Hero brand frame — centred logo inside a white-bordered box */
.ev-hero {
  grid-column: 3 / 11;
  margin: 100px 0 0;
}

.ev-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1124 / 718;
  background: #fff;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ev-hero__frame img {
  width: 28%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =====================
   Section: Problem
===================== */
.ev-section--problem {
  margin-top: clamp(180px, 22vh, 260px);
  row-gap: 40px;
}

.ev-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ev-block__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  margin: 0 0 4px;
}

.ev-block__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

.ev-block__body + .ev-block__body {
  margin-top: 16px;
}

.ev-block__body--muted {
  color: #717171;
}

.ev-block--brief     { grid-column: 7 / 11; max-width: 538px; }
.ev-block--statement { grid-column: 7 / 11; max-width: 528px; margin-top: 60px; }
.ev-block--question  { grid-column: 7 / 11; max-width: 489px; margin-top: 60px; }
.ev-block--research  { grid-column: 7 / 11; max-width: 489px; margin-top: 60px; }

/* Field review row: map at cols 4-6, text at cols 7-10 */
.ev-field {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gutter);
  margin-top: 100px;
  align-items: start;
}

.ev-field__map {
  grid-column: 4 / 7;
  width: 100%;
  max-width: 406px;
  aspect-ratio: 406 / 356;
  object-fit: cover;
  display: block;
}

.ev-field__text {
  grid-column: 7 / 11;
  max-width: 489px;
}

.ev-field__text .ev-block__label {
  margin-bottom: 12px;
}

/* =====================
   Section: Approach
===================== */
.ev-section--approach {
  margin-top: clamp(180px, 22vh, 260px);
  row-gap: 0;
}

/* Ideation row — image left, text right (mirrors field-review pattern) */
.ev-ideation {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gutter);
  align-items: start;
}

.ev-ideation__img {
  grid-column: 4 / 7;
  width: 100%;
  max-width: 553px;
  aspect-ratio: 553 / 443;
  display: block;
  object-fit: cover;
}

.ev-block--ideation-intro {
  grid-column: 7 / 11;
  max-width: 525px;
}

/* Generic image+text pair (text-left, image-right). Mirrors .ev-ideation
   but with the orientation flipped — used for the Severance reference. */
.ev-pair {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gutter);
  align-items: start;
}

.ev-pair--severance { margin-top: 100px; }

.ev-block--severance {
  grid-column: 3 / 7;
  max-width: 525px;
}

.ev-pair__img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.ev-pair__img--severance {
  grid-column: 7 / 12;
  max-width: 695px;
  aspect-ratio: 695 / 530;
}

/* Feedback pair — image left, text right (mirror of severance). Lives in
   the Process section between Iterations and Final version. */
.ev-pair--feedback { margin-top: 60px; }

.ev-pair__img--feedback {
  grid-column: 3 / 7;
  max-width: 695px;
  aspect-ratio: 695 / 427;
}

.ev-block--feedback {
  grid-column: 7 / 11;
  max-width: 552px;
}

.ev-h2 {
  grid-column: 3 / 11;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

.ev-body {
  grid-column: 3 / 11;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #717171;
  margin: 0;
}

.ev-h2--installations { margin-top: 200px; }
.ev-body--installations { margin-top: 24px; max-width: 681px; }

.ev-image {
  display: block;
  width: 100%;
  object-fit: cover;
}

.ev-image--installations {
  grid-column: 3 / 11;
  max-width: 1128px;
  aspect-ratio: 1128 / 527;
  margin-top: 60px;
}

.ev-h2--process { margin-top: 140px; }
.ev-body--process { margin-top: 24px; max-width: 803px; }

.ev-image--process {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: auto;
  margin-top: 60px;
}

.ev-h2--iterations { margin-top: 140px; }
.ev-image--iteration {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 574;
  margin-top: 24px;
}
.ev-body--iterations {
  grid-column: 3 / 11;
  max-width: 940px;
  margin-top: 24px;
}

.ev-h2--final-capture { margin-top: 140px; }
.ev-image--final-capture {
  grid-column: 3 / 11;
  max-width: 1144px;
  aspect-ratio: 1144 / 583;
  margin-top: 24px;
}
.ev-body--final-capture {
  grid-column: 3 / 11;
  max-width: 882px;
  margin-top: 24px;
}

.ev-h2--eye-follow { margin-top: 140px; }
.ev-image--eye-follow {
  grid-column: 3 / 11;
  max-width: 1125px;
  aspect-ratio: 1125 / 577;
  margin-top: 24px;
}
.ev-body--eye-follow {
  grid-column: 3 / 11;
  max-width: 882px;
  margin-top: 24px;
}

.ev-h2--final-follow { margin-top: 140px; }
.ev-image--final-follow {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 569;
  margin-top: 24px;
}
.ev-body--final-follow {
  grid-column: 3 / 11;
  max-width: 882px;
  margin-top: 24px;
}

/* Website wireframes + Final website — still under Approach per the
   Figma annotation, but visually wrap up the design phase. Grey
   placeholder rectangles stand in for screenshots until those assets
   land. */
.ev-h2--wireframes { margin-top: 140px; }
.ev-h2--final-website { margin-top: 140px; }
.ev-body--wireframes { margin-top: 24px; max-width: 1121px; }
.ev-body--final-website { margin-top: 24px; max-width: 989px; }

.ev-placeholder {
  grid-column: 3 / 11;
  width: 100%;
  max-width: 1123px;
  aspect-ratio: 1123 / 568;
  background: #d9d9d9;
  margin-top: 24px;
}

/* =====================
   Section: Process
   ─────────────────────
   Build/iteration phase. Sub-blocks reuse the .ev-h2 / .ev-body / .ev-image
   pattern; new modifiers cover the spacing + image proportions specific to
   each sub-block.
===================== */
.ev-section--process {
  margin-top: clamp(180px, 22vh, 260px);
  row-gap: 0;
}

/* Caption — small label above an image (16px regular, black). Used for
   "Interactive prototypes" (black) and "First version, experiment in a frame
   retro TV." (muted, via --muted modifier) */
.ev-caption {
  grid-column: 3 / 11;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

.ev-caption--muted { color: #717171; }

/* Experiments — section opener, no extra top margin */
.ev-h2--experiments { margin-top: 0; }
.ev-body--experiments { margin-top: 24px; max-width: 681px; }
.ev-image--experiments {
  grid-column: 3 / 11;
  max-width: 629px;
  aspect-ratio: 629 / 404;
  margin-top: 40px;
}

.ev-caption--interactive { margin-top: 100px; }
.ev-image--interactive {
  grid-column: 3 / 11;
  max-width: 1115px;
  aspect-ratio: 1115 / 457;
  margin-top: 24px;
}

/* Eye being the focus — h2 + body block + image + extra body */
.ev-h2--eye-focus { margin-top: 140px; }
.ev-block--eye-focus {
  grid-column: 3 / 11;
  max-width: 681px;
  margin-top: 24px;
}
.ev-image--eye-focus {
  grid-column: 3 / 11;
  max-width: 668px;
  aspect-ratio: 668 / 593;
  margin-top: 40px;
}
.ev-body--eye-focus-extra {
  grid-column: 3 / 11;
  max-width: 681px;
  margin-top: 24px;
}

/* Retro TV first-version caption + image */
.ev-caption--retro-tv { margin-top: 100px; }
.ev-image--retro-tv {
  grid-column: 3 / 11;
  max-width: 1115px;
  aspect-ratio: 1115 / 827;
  margin-top: 24px;
}

/* Multi-paragraph body blocks under iterations / eye-follow / final-follow
   (these replace the single-paragraph .ev-body--* variants with .ev-block
   so each <p> renders on its own line with the muted body styling) */
.ev-block--iterations,
.ev-block--eye-follow,
.ev-block--final-follow {
  grid-column: 3 / 11;
  max-width: 940px;
  margin-top: 24px;
}

/* Visual direction */
.ev-h2--visual-direction { margin-top: 140px; }
.ev-body--visual-direction { margin-top: 24px; max-width: 882px; }
.ev-image--visual-direction {
  grid-column: 3 / 11;
  max-width: 1124px;
  aspect-ratio: 1124 / 544;
  margin-top: 40px;
}

/* =====================
   Section: Outcome
===================== */
.ev-section--outcome {
  margin-top: clamp(180px, 22vh, 260px);
  row-gap: 0;
}

.ev-h2--outcome { margin-top: 0; }

.ev-placeholder--outcome-1,
.ev-placeholder--outcome-2,
.ev-placeholder--outcome-3,
.ev-placeholder--outcome-4 {
  margin-top: 24px;
}

/* =====================
   Footer CTA + copyright
===================== */
.ev-next {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  margin: clamp(140px, 18vh, 220px) 0 0;
}

.ev-next a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.ev-next a:hover {
  opacity: 0.6;
}

.ev-footer {
  text-align: center;
  margin-top: 200px;
}

.ev-footer p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

/* =====================
   Dark mode
===================== */
:root.dark-mode .ev-year,
:root.dark-mode .ev-meta dt {
  color: #909090;
}

:root.dark-mode .ev-title,
:root.dark-mode .ev-lede,
:root.dark-mode .ev-meta dd,
:root.dark-mode .ev-block__label,
:root.dark-mode .ev-block__body,
:root.dark-mode .ev-h2,
:root.dark-mode .ev-next,
:root.dark-mode .ev-footer p {
  color: #fff;
}

:root.dark-mode .ev-placeholder {
  background: #2a2a2a;
}

:root.dark-mode .ev-block__body--muted,
:root.dark-mode .ev-body {
  color: #909090;
}

:root.dark-mode .ev-hero__frame {
  background: #fff;
  border-color: #fff;
}

/* =====================
   Responsive — narrow viewports
===================== */
@media (max-width: 900px) {
  .ev-sidenav {
    display: none;
  }

  .ev-section {
    grid-template-columns: repeat(6, 1fr);
  }

  .ev-year,
  .ev-title,
  .ev-lede,
  .ev-hero,
  .ev-block,
  .ev-h2,
  .ev-body,
  .ev-image,
  .ev-placeholder,
  .ev-caption {
    grid-column: 1 / 7;
    max-width: none;
  }

  .ev-meta {
    grid-template-columns: repeat(6, 1fr);
  }
  .ev-meta__item--role     { grid-column: 1 / 4; }
  .ev-meta__item--tools    { grid-column: 4 / 7; }
  .ev-meta__item--timeline { grid-column: 1 / 4; margin-top: 32px; }
  .ev-meta__item--client   { grid-column: 4 / 7; margin-top: 32px; }

  .ev-field,
  .ev-ideation,
  .ev-pair {
    grid-template-columns: repeat(6, 1fr);
  }
  .ev-field__map { grid-column: 1 / 4; }
  .ev-field__text { grid-column: 1 / 7; margin-top: 40px; }
  .ev-ideation__img { grid-column: 1 / 4; }
  .ev-ideation .ev-block--ideation-intro { grid-column: 1 / 7; margin-top: 40px; }

  /* Severance pair stacks (text first, image second) */
  .ev-block--severance { grid-column: 1 / 7; }
  .ev-pair__img--severance { grid-column: 1 / 7; margin-top: 40px; max-width: none; }

  /* Feedback pair stacks (image first, text second — matches DOM order) */
  .ev-pair__img--feedback { grid-column: 1 / 7; max-width: none; }
  .ev-block--feedback { grid-column: 1 / 7; margin-top: 40px; }
}

/* =====================
   Responsive — Mobile (≤640px)
   ─────────────────────
   4-col grid / 12px margin / 10px gutter — matches the Figma mobile grid
   (designed at 393px). Scoped via .page-evanescent so the rest of the
   site's mobile breakpoint stays untouched.
===================== */
@media (max-width: 640px) {
  .page-evanescent {
    --col-margin: 12px;
    --col-gutter: 10px;
  }

  .ev-section {
    grid-template-columns: repeat(4, 1fr);
  }

  /* All single-column blocks span the full 4-col grid */
  .ev-year,
  .ev-title,
  .ev-lede,
  .ev-hero,
  .ev-block,
  .ev-h2,
  .ev-body,
  .ev-image,
  .ev-placeholder,
  .ev-caption {
    grid-column: 1 / 5;
    max-width: none;
  }

  /* Meta items — 2-col pairs across the 4-col grid */
  .ev-meta { grid-template-columns: repeat(4, 1fr); }
  .ev-meta__item--role     { grid-column: 1 / 3; }
  .ev-meta__item--tools    { grid-column: 3 / 5; }
  .ev-meta__item--timeline { grid-column: 1 / 3; margin-top: 32px; }
  .ev-meta__item--client   { grid-column: 3 / 5; margin-top: 32px; }

  /* Image+text rows collapse to a single column */
  .ev-field,
  .ev-ideation,
  .ev-pair {
    grid-template-columns: repeat(4, 1fr);
  }
  .ev-field__map,
  .ev-field__text,
  .ev-ideation__img,
  .ev-ideation .ev-block--ideation-intro,
  .ev-block--severance,
  .ev-pair__img--severance,
  .ev-pair__img--feedback,
  .ev-block--feedback {
    grid-column: 1 / 5;
    max-width: none;
  }
  .ev-ideation .ev-block--ideation-intro,
  .ev-pair__img--severance,
  .ev-block--feedback {
    margin-top: 32px;
  }
}