/* Smethwick-only review refinements. Original media and mobile reading order stay intact. */
body[data-page=project] .stage-nav {
  background: rgba(250, 250, 247, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-page=project] .stage-nav[data-active-stage="2"],
body[data-page=project] .stage-nav[data-active-stage="4"] {
  background: rgba(240, 239, 233, .94);
}
body[data-page=project] .stage-nav a,
body[data-page=project] .stage-nav .stage-number {
  color: #51554d;
}
body[data-page=project] .stage-nav a[aria-current=step],
body[data-page=project] .stage-nav a[aria-current=step] .stage-number {
  color: #20221f;
}
.stage-progress {
  height: 2px;
  background: #b9bcb3;
  overflow: visible;
}
.stage-progress i { background: #20221f; }
.stage-progress::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--stage-progress, 0) * 100%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9d382e;
  transform: translate(-50%, -50%);
}

.project-stage { --smethwick-stage-paper: var(--paper); }
.concept-animation-pair .journal-figure,
.journal-comparison {
  background: var(--smethwick-stage-paper);
}
#development .journal-carousel .journal-image-frame {
  background: var(--smethwick-stage-paper);
}
#development .journal-carousel .journal-image-frame img {
  mix-blend-mode: multiply;
}
/* These are original presentation sheets, not transparent sketches. */
#documentation .journal-image-frame {
  background: #fff;
  box-shadow: 0 2px 14px #27282012;
}
#documentation .journal-image-frame img {
  background: #fff;
  mix-blend-mode: normal;
  box-shadow: none;
}

/* Same 70 310 1850 740 crop as the original SVG, now native lazy/async images. */
.interactive-comparison {
  aspect-ratio: 1850 / 740;
  contain: layout;
}
.interactive-comparison .comparison-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}
.interactive-comparison .comparison-layer img {
  position: absolute;
  width: calc(2000 / 1850 * 100%);
  max-width: none;
  height: auto;
  left: calc(-70 / 1850 * 100%);
  top: calc(-310 / 740 * 100%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.interactive-comparison .section-reveal-a {
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}
.interactive-comparison[data-dragging=true] .section-reveal-a {
  will-change: clip-path;
}
.interactive-comparison .comparison-range { user-select: none; }
.comparison-loading {
  position: absolute;
  inset: auto 0 14px;
  text-align: center;
  font-size: 11px;
  pointer-events: none;
}

@media (min-width: 701px) {
  /* Match the stage-band bleed so the sticky rail never leaves a stepped gutter. */
  body[data-page=project] .stage-nav {
    margin-inline: -28px;
    padding-inline: 28px;
  }
  .stage-progress { left: 28px; right: 28px; }
  .project-stage:nth-of-type(even) { --smethwick-stage-paper: #f0efe9; }
}
@media (min-width: 901px) {
  .journal-materials-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 6vw, 90px);
    align-items: start;
    margin-block: 65px 55px;
  }
  .journal-materials-layout .journal-materials-still {
    width: 100%;
    max-width: 440px;
    margin: 0;
  }
  .journal-materials-layout .journal-copy {
    max-width: none;
    margin: 0;
  }
  .journal-materials-layout .journal-copy p:last-child { margin-bottom: 0; }
}
@media (max-width: 700px) {
  /* Existing phone stage palette and single-column materials sequence are unchanged. */
  body[data-page=project] .stage-nav[data-active-stage="2"],
  body[data-page=project] .stage-nav[data-active-stage="4"] {
    background: var(--paper);
  }
  .stage-progress::after { width: 5px; height: 5px; }
}