/* A8: scoped header, film framing and actual-work preview corrections. */
header .nav-actions #motion-toggle {
  width: 46px; height: 46px; min-width: 46px; min-height: 46px;
  flex: 0 0 46px; padding: 10px; display: grid; place-items: center;
  border: 1px solid var(--foreground); border-radius: 50%;
  color: var(--foreground); background: var(--background);
}
#motion-toggle .motion-monogram { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }
#motion-toggle .motion-ribbon { transform-origin: 12px 12px; animation: holtzman-ribbon 3.6s ease-in-out infinite; }
#motion-toggle[aria-pressed="true"] { background: var(--foreground); color: var(--background); }
#motion-toggle[aria-pressed="true"] .motion-ribbon { animation: none; }
#motion-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
#motion-toggle .motion-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes holtzman-ribbon { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(-.65); } }
.approach-sticky::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--film-ink); opacity: var(--film-shade,0); pointer-events: none; }
.approach-plane .media-meta { background: var(--film-ink); color: var(--film-light); padding: 12px 14px; margin-top: 0; border-radius: 0 0 4px 4px; }
.approach-plane .media-status { color: var(--film-muted); }
.website-reel { position: relative; isolation: isolate; border-top: 0; padding: clamp(40px,5vw,80px) 0; color: var(--film-light); }
.website-reel::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--gutter) / .9); background: var(--film-ink); pointer-events: none; }
.website-reel .a8-kicker,.website-reel .media-meta,.website-reel .media-status { color: var(--film-muted); }
.website-reel .media-surface { outline: 1px solid var(--film-line); outline-offset: -1px; }
.geo-cinema { background: var(--film-ink); padding: clamp(12px,2vw,28px); border-radius: 5px; }
.geo-cinema .media-meta { color: var(--film-muted); }
/* Full images, no decorative crop or gradient concealing their disclosures. */
.operation-panel .workflow-full { overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable; }
.operation-panel .workflow-body { flex: 0 0 auto; min-height: auto; align-items: start; }
.operation-panel .workflow-narrative { min-width: 0; overflow: visible; padding: 12px 0 0; }
.operation-panel .product-evidence { position: relative; inset: auto; margin-top: 22px; padding: 0; width: 100%; max-width: 680px; flex: none; }
.operation-panel .product-evidence::after { display: none; }
.operation-panel .product-evidence img { display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: left center; opacity: 1; transform: none; border-radius: 3px; }
.operation-panel .proof-open { min-height: 44px; font-size: 13px; padding: 10px 0; }
.operation-panel .review-paper { min-height: 0; height: auto; }
.operation-panel .workflow-footer { flex-shrink: 0; }
.operation-panel .workflow-note { flex-shrink: 0; }
.motion-paused .operation-panel { height: auto!important; }
.motion-paused .operation-panel .workflow-full { position: relative; inset: auto; }
@media (min-width:701px) {
  .panel-target { bottom: auto; height: min(920px,calc(100svh - 48px)); }
  .operation-panel .workflow-full { padding: 28px 32px; }
  .operation-panel .chapter-number { margin-bottom: 16px; }
  .operation-panel .workflow-narrative>p { margin-top: 18px; max-width: 460px; }
  .operation-panel .review-paper { max-width: 760px; width: calc(100% - 8px); }
}
@media (min-width:701px) and (max-height:820px) {
  .operation-panel .workflow-header { padding-bottom: 12px; }
  .operation-panel .stage-controls { padding: 12px 0; }
  .operation-panel .workflow-narrative h3 { font-size: 46px; }
  .operation-panel .product-evidence { margin-top: 16px; }
  .operation-panel .product-evidence img { max-height: 230px; }
  .operation-panel .review-paper { padding: 20px 26px; }
  .operation-panel .review-paper h4 { margin: 16px 0 12px; font-size: 26px; }
  .operation-panel .document-topic { margin-top: 14px; }
  .operation-panel .source-list { margin: 16px 0; }
  .operation-panel .source-row { padding: 10px 0; }
}
@media (max-width:1000px) and (min-width:701px) { header .chapter-nav { margin-right: 24px; gap: 16px; } header .nav-actions { gap: 12px; } }
@media (max-width:700px) {
  header .nav-actions { gap: 6px; }
  .website-reel::before { inset-inline: calc(-1 * var(--gutter)); }
  .website-reel .media-meta,.geo-cinema .media-meta,.approach-plane .media-meta { flex-wrap: wrap; gap: 6px 16px; font-size: 10px; line-height: 1.6; }
  .operation-panel .product-evidence { margin-top: 18px; max-width: none; }
  .operation-panel .product-evidence img { max-height: none; }
  .operation-panel .workflow-narrative { padding: 2px 0 14px; }
  .panel-target { bottom: auto; height: calc(100svh - 24px); }
  .operation-panel .workflow-full { padding: 20px 17px; }
  .motion-paused .operation-panel .workflow-full { overflow: visible; }
}
@media (max-width:350px) {
  header { margin-inline: 12px; padding-inline: 0; }
  header .wordmark { font-size: 20px; letter-spacing: -1.1px; }
  header .brand-dot { width: 4px; height: 4px; margin-left: 3px; }
  header .nav-actions { gap: 4px; }
  header .contact-link { padding-inline: 11px; gap: 5px; }
  header .contact-link>span { display: none; }
  .operation-panel .workflow-full { padding: 18px 13px; }
}
@media (prefers-reduced-motion:reduce) {
  #motion-toggle .motion-ribbon { animation: none; }
  .approach-sticky::before { opacity: 0; }
  .operation-panel { height: auto!important; }
  .operation-panel .workflow-full { position: relative; inset: auto; }
}

/* Mobile: let the page own vertical scrolling through the entire workflow. */
@media (max-width:700px) {
  #operations { height:auto; padding-bottom:24px; }
  #operations .journey-sticky { position:relative; top:auto; height:auto; min-height:0; overflow:visible; }
  #operations .editorial { position:relative; inset:auto; padding:50px var(--gutter); opacity:1!important; transform:none!important; }
  #operations .panel-origin, #operations .panel-target, #operations .preview-face { display:none; }
  #operations .operation-panel { position:relative!important; inset:auto; width:calc(100% - 24px)!important; height:auto!important; max-height:none; margin:0 12px; transform:none!important; will-change:auto; overflow:visible; }
  #operations .workflow-full { position:relative; inset:auto; height:auto; max-height:none; opacity:1!important; visibility:visible; overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto; }
}