/* Smethwick only: current graphic system, with a pinned heading for each chapter. */
html.smethwick-story-document {
  --smethwick-header-height: 77px;
  --smethwick-rail-height: 88px;
  --smethwick-heading-gap: 28px;
  --smethwick-sticky-top: calc(var(--smethwick-header-height) + var(--smethwick-rail-height) + var(--smethwick-heading-gap));
  scroll-padding-top: var(--smethwick-sticky-top);
}

body.smethwick-story .stage-nav {
  top: var(--smethwick-header-height);
}

/* Twice the original diameter, with a warmer red and a quiet red-grey trail. */
body.smethwick-story .stage-progress {
  background: #cbb8b4;
}
body.smethwick-story .stage-progress i {
  background: #a7756e;
}
body.smethwick-story .stage-progress::after {
  width: 12px;
  height: 12px;
  background: #b44336;
}
body.smethwick-story .smethwick-stage-body {
  min-width: 0;
}

@media (min-width: 901px) {
  body.smethwick-story .project-stage {
    display: grid;
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    column-gap: clamp(44px, 5.5vw, 80px);
    align-items: start;
  }
  body.smethwick-story .project-stage > .original-stage-title {
    position: sticky;
    top: var(--smethwick-sticky-top);
    align-self: start;
    display: block;
    min-width: 0;
    margin: 0;
  }
  body.smethwick-story .original-stage-title > .eyebrow {
    margin-bottom: 26px;
  }
  body.smethwick-story .original-stage-title h2 {
    margin-bottom: 24px;
  }
  body.smethwick-story .original-stage-title .stage-text p {
    max-width: 290px;
    margin: 0;
  }
  body.smethwick-story .smethwick-stage-body .journal-copy {
    margin-inline: 0;
  }
  body.smethwick-story .smethwick-stage-body > .journal-entry:first-child > :first-child {
    margin-top: 0;
  }
  body.smethwick-story .smethwick-stage-body > .journal-entry:last-child {
    margin-bottom: 0;
  }
  body.smethwick-story .smethwick-stage-body > .journal-entry:last-child > :last-child {
    margin-bottom: 0;
  }
  body.smethwick-story .concept-animation-pair {
    gap: 24px;
  }
  body.smethwick-story .journal-materials-layout {
    column-gap: 36px;
  }
  /* Reveal animation must not hide a heading that is already pinned on entry. */
  body.smethwick-story .original-stage-title > .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Short landscape windows and enlarged text get the same readable columns,
     without trapping the bottom of a tall heading above the viewport edge. */
  body.smethwick-story .project-stage > .original-stage-title.chapter-heading-static {
    position: static;
  }
}

@media (min-width: 901px) and (max-width: 1150px) {
  /* The content column is narrower than the old full-width page at these sizes. */
  body.smethwick-story .concept-animation-pair,
  body.smethwick-story .journal-materials-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body.smethwick-story .journal-materials-layout {
    row-gap: 35px;
  }
  body.smethwick-story .journal-materials-layout .journal-materials-still {
    max-width: 360px;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  /* Narrow tablets use the same natural heading-then-story reading order.
     The existing phone stack below 701px remains entirely unchanged. */
  body.smethwick-story .project-stage > .original-stage-title {
    position: static;
    display: block;
  }
  body.smethwick-story .original-stage-title > .eyebrow {
    margin-bottom: 22px;
  }
  body.smethwick-story .original-stage-title h2 {
    margin-bottom: 22px;
  }
}

@media (max-width: 700px) {
  html.smethwick-story-document {
    --smethwick-header-height: 69px;
    --smethwick-rail-height: 76px;
    --smethwick-heading-gap: 20px;
  }
  body.smethwick-story .stage-progress::after {
    width: 10px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.smethwick-story-document { scroll-behavior: auto; }
  body.smethwick-story .stage-nav,
  body.smethwick-story .stage-nav a,
  body.smethwick-story .stage-progress i,
  body.smethwick-story .stage-progress::after {
    transition: none;
    animation: none;
  }
}

/* Responsive chapter pinning: retain the phone's full-width story, not squeezed columns.
   Flatten only this non-semantic wrapper so its heading is bounded by the chapter. */
@media (max-width: 900px) {
  body.smethwick-story .project-stage > .original-stage-title { display: contents; }
  body.smethwick-story .original-stage-title > h2 {
    position: sticky;
    top: calc(var(--smethwick-header-height) + var(--smethwick-rail-height));
    z-index: 2;
    padding-block: 12px;
    margin: 0 0 20px;
    background: var(--smethwick-stage-paper, var(--paper));
    border-bottom: 1px solid var(--line);
  }
  body.smethwick-story .original-stage-title > .stage-text { margin-bottom: 35px; }
  body.smethwick-story .original-stage-title.chapter-heading-static > h2 { position: static; }
}
@media (max-width: 700px) {
  /* The numbered stage rail already provides this context. Keep one title. */
  body.smethwick-story .original-stage-title > .eyebrow { display: none; }
}
/* Pinning is orientation, not an entrance animation. Apply at every viewport. */
body.smethwick-story .original-stage-title > .scroll-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}