/* An architectural illustration on the page canvas, never a media-player card.
   Colour and type tokens are owned by styles.css / DESIGN.md. */
.process-video {
  padding-block: var(--section) 0;
  color: var(--kiln);
  background: var(--porcelain);
}

.process-video-heading { display: grid; grid-template-columns: 2fr 5fr 2fr; align-items: start; gap: 2rem; padding-bottom: 3rem; }
.process-video-heading h2 { max-width: 16ch; margin: 0; font-size: clamp(2.5rem, 4.4vw, 4.7rem); }
.process-video-intro { align-self: end; margin: 0; color: var(--muted); font-size: 1rem; }
.process-video-player { padding-block: 3rem; }
.process-story-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.process-story-topline p { margin: 0; }
.process-story-skip { display: inline-flex; min-height: 44px; align-items: center; gap: 1rem; font-size: .85rem; color: var(--muted); text-decoration: none; }
.process-story-skip:hover { color: var(--kiln-soft); text-decoration: underline; text-underline-offset: .3em; }
.process-story-skip:active { transform: translateY(1px); }
.process-story-body { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2fr); align-items: center; gap: 1.5rem; }
.process-video-media { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; }
.process-video-media img, .process-video-media canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.process-video-media canvas { position: absolute; inset: 0; opacity: 0; }
.process-video.has-frame.is-scrollable .process-video-media canvas { opacity: 1; }
.process-video.has-frame.is-scrollable .process-story-poster { opacity: 0; }
.process-video-media figcaption { position: absolute; right: 2%; bottom: 1%; color: var(--muted); font-family: var(--mono); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
.process-annotation-leader { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.process-annotation-leader path { fill: none; stroke: var(--kiln-soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.process-annotation-leader circle { fill: var(--kiln-soft); stroke: var(--porcelain); stroke-width: 3; }
.process-video-stages { display: grid; gap: 2rem; padding: 0; margin: 0; list-style: none; }
.process-annotation-number { display: block; margin-bottom: 1rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; color: var(--kiln-soft); }
.process-video-stages h3 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 4.3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; overflow-wrap: anywhere; }
.process-video-stages p { max-width: 24ch; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.45; }
.process-story-chapters { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.process-story-chapters::before { content: ""; position: absolute; inset: -1px auto auto 0; width: 100%; height: 2px; background: var(--kiln-soft); transform: scaleX(var(--process-progress, 0)); transform-origin: left; }
.process-story-chapters[hidden] { display: none; }
.process-story-chapters a { display: flex; align-items: center; gap: 1rem; min-height: 52px; padding: .8rem 0; color: var(--muted); text-align: left; text-decoration: none; cursor: pointer; }
.process-story-chapters a span:first-child { font-family: var(--mono); font-size: .65rem; }
.process-story-chapters a span:last-child { font-size: 1.05rem; }
.process-story-chapters a:hover, .process-story-chapters a[aria-current="step"] { color: var(--kiln-soft); }
.process-story-chapters a[aria-current="step"] span:last-child { text-decoration: underline; text-underline-offset: .35em; }
.process-story-chapters a:active { transform: translateY(1px); }
.process-video-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: .8rem; }
.process-video.is-scrollable .process-video-track { height: 480svh; }
.process-video.is-scrollable .process-video-player { position: sticky; top: 0; display: flex; height: 100svh; flex-direction: column; padding-block: max(6.5rem, env(safe-area-inset-top)) 1.25rem; }
.process-video.is-scrollable .process-story-body { flex: 1; min-height: 0; }
.process-video.is-scrollable .process-video-media { max-width: min(100%, calc((100svh - 15rem) * 4 / 3)); justify-self: center; }
.process-video.is-scrollable .process-video-stages { display: grid; gap: 0; }
.process-video.is-scrollable .process-video-stages li { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(.6rem); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.process-video.is-scrollable .process-video-stages li.is-current { opacity: 1; transform: none; }
.process-video.has-frame.is-scrollable .process-annotation-leader { display: block; }

@media (max-width: 61.2rem) {
  .process-video-heading { grid-template-columns: 1fr 2fr; }
  .process-video-intro { grid-column: 2; }
  .process-story-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: .5rem; }
  .process-story-chapters a { gap: .5rem; }
}
@media (max-width: 43.75rem) {
  .process-video-heading { display: block; padding-bottom: 1rem; }
  .process-video-intro { margin-top: 1.5rem; }
  .process-story-topline .micro-label { max-width: 17ch; font-size: .58rem; }
  .process-story-skip { max-width: 15ch; font-size: .75rem; gap: .4rem; text-align: right; }
  .process-story-body { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
  .process-video-stages { order: 2; }
  .process-video-stages h3 { font-size: 2.6rem; }
  .process-video-stages p { max-width: 30ch; font-size: 1.07rem; }
  .process-annotation-number { margin-bottom: .6rem; }
  .process-video.is-scrollable .process-video-player { padding-top: 6rem; }
  .process-video.is-scrollable .process-story-body { justify-content: center; gap: 0; }
  .process-video.is-scrollable .process-video-stages { order: 0; min-height: 9.5rem; padding-top: 1rem; }
  .process-video.is-scrollable .process-video-media { width: calc(100% + 2rem); max-width: calc((100svh - 26rem) * 4 / 3); align-self: center; margin-inline: -1rem; }
  .process-video-media figcaption { right: 1rem; font-size: .5rem; }
  .process-story-chapters a { flex-direction: column; justify-content: center; gap: .35rem; min-height: 60px; }
  .process-story-chapters a span:last-child { font-size: clamp(.58rem, 2.8vw, .74rem); }
  .process-story-chapters a span:first-child { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce), (max-height: 600px) {
  .process-video.is-scrollable .process-video-track { height: auto; }
  .process-video.is-scrollable .process-video-player { position: static; height: auto; }
  .process-video-stages li { transition: none !important; }
  .process-story-skip { display: none; }
}
@media print {
  .process-video.is-scrollable .process-video-track { height: auto; }
  .process-video.is-scrollable .process-video-player { position: static; height: auto; }
  .process-video.is-scrollable .process-video-stages { display: block; }
  .process-video.is-scrollable .process-video-stages li { opacity: 1; transform: none; margin-block: 1rem; }
  .process-story-chapters, .process-annotation-leader, .process-story-skip { display: none !important; }
}