/* Section-by-section presentation is enhanced only on roomy mouse-driven screens.
   Touch devices and short viewports retain the complete native document flow. */
.scene-nav, .scene-next { display: none; }

html.section-mode {
  scroll-behavior: auto;
  scroll-padding-top: 0;
  --scene-top: 122px;
  --scene-bottom: 54px;
  --closing-footer: 320px;
}
.section-mode .wrap { width: min(1240px, calc(100% - 136px)); }
.section-mode .header {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  margin: 0;
}
.section-mode .top-surface { overflow: visible; }
.section-mode .hero {
  min-height: calc(100svh - 82px);
  padding-block: 130px 36px;
  gap: 32px;
}
.section-mode .hero h1 { font-size: clamp(54px, 5.4vw, 80px); }
.section-mode .hero-visual { max-width: 560px; justify-self: end; }
.section-mode .principle-band { min-height: 82px; padding-block: 18px; }
.section-mode .console-section {
  min-height: 100svh;
  padding-block: var(--scene-top) var(--scene-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-mode .section-intro { margin-bottom: 28px; }
.section-mode .section-intro h2 { font-size: clamp(34px, 3vw, 43px); }
.section-mode .section-label { margin-bottom: 14px; }
.section-mode .console-workspace { padding-top: 22px; }
.section-mode .workspace-heading { margin-bottom: 16px; }
.section-mode .console-chrome { height: 40px; }
.section-mode .console-body { min-height: 0; }
.section-mode .preview-panel, .section-mode .evidence-pair { min-height: 280px; }
.section-mode .exploration-graph { height: 280px; }
.section-mode .node-root, .section-mode .node-evidence { top: 86px; }
.section-mode .node-recon { top: 12px; }
.section-mode .node-hypothesis { top: 99px; }
.section-mode .node-control { top: 190px; }
.section-mode .graph-proof { top: 211px; }
.section-mode .console-annotation { margin-top: 15px; }

.section-mode .approach {
  min-height: 100svh;
  padding-block: var(--scene-top) var(--scene-bottom);
  display: flex;
  align-items: center;
}
.section-mode .approach > .section-space { padding-block: 0; }
.section-mode .process-line { margin-top: 36px; gap: 30px; }
.section-mode .process-line article { padding-top: 22px; }
.section-mode .process-line h3 { margin-top: 14px; }
.section-mode .process-line p { font-size: 12px; }
.section-mode .step-meta { margin-top: 17px; }
.section-mode .dual-graph-story { margin-top: 35px; padding-top: 32px; gap: 65px; }
.section-mode .dual-graph-story h3 { font-size: 28px; }
.section-mode .dual-graph-story p { font-size: 12px; margin-top: 14px; }
.section-mode .dual-graph-visual { padding-block: 22px; }
.section-mode .mini-graph svg { max-height: 122px; margin-block: 16px; }

.section-mode .development-section { min-height: 100svh; display: flex; align-items: center; }
.section-mode .development-grid { padding-block: var(--scene-top) var(--scene-bottom); }
.section-mode .contact-section {
  min-height: max(0px, calc(100svh - var(--closing-footer)));
  padding-block: 126px 35px;
  display: flex;
  align-items: center;
}
.section-mode .contact-card { width: 100%; padding-block: 40px; }
.section-mode .footer-wordmark { font-size: clamp(100px, 10vw, 154px); padding-bottom: 20px; }
.section-mode .footer-bottom { padding-bottom: 25px; }

.section-mode .scene-nav {
  display: flex;
  position: fixed;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 9px;
  z-index: 45;
}
.scene-nav a { display: flex; align-items: center; justify-content: flex-end; position: relative; min-height: 39px; min-width: 39px; }
.scene-nav-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  font: 8px var(--mono);
  color: #8a9fbc;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: background .25s, border-color .25s, color .25s;
  background: #0a132066;
  backdrop-filter: blur(8px);
}
.scene-nav a[aria-current="location"] .scene-nav-mark { color: #e0eeff; border-color: #92bfff88; background: #183656bd; box-shadow: 0 0 14px #6ea7fc14; }
.scene-nav-label {
  position: absolute;
  right: 46px;
  padding: 8px 11px;
  background: #0d1a2ce8;
  border: 1px solid #8eb5e33b;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  color: #d7e6fc;
  opacity: 0;
  transform: translateX(5px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.scene-nav a:hover .scene-nav-label, .scene-nav a:focus-visible .scene-nav-label { opacity: 1; transform: none; }
.section-mode .scene-next {
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 4px;
  background: #0a1522c7;
  border: 1px solid #93b8e22a;
  color: #9fb8db;
  z-index: 45;
  font: 7px var(--mono);
  letter-spacing: .08em;
}
.scene-next .icon { width: 14px; height: 14px; transform: rotate(90deg); }
.section-mode .scene-next[hidden] { display: none; }
.section-mode .scene-nav a:focus-visible, .section-mode .scene-next:focus-visible { outline: 2px solid #a2caff; outline-offset: 4px; }

@media (max-height: 880px) {
  .section-mode { --scene-top: 116px; --scene-bottom: 36px; }
  .section-mode .hero { padding-top: 116px; }
  .section-mode .hero h1 { font-size: clamp(53px, 4.8vw, 69px); }
  .section-mode .hero-eyebrow { margin-bottom: 22px; }
  .section-mode .hero-description { margin-top: 23px; }
  .section-mode .hero-actions { margin-top: 25px; }
  .section-mode .hero-footnote { margin-top: 23px; }
  .section-mode .hero-visual { max-width: 480px; }
  .section-mode .section-intro h2 { font-size: 36px; }
  .section-mode .section-intro > p { font-size: 12px; }
  .section-mode .section-intro { margin-bottom: 24px; }
  .section-mode .process-line { margin-top: 28px; }
  .section-mode .step-index { font-size: 27px; }
  .section-mode .process-line p { font-size: 11px; }
  .section-mode .dual-graph-story { margin-top: 27px; padding-top: 25px; }
  .section-mode .dual-graph-visual { padding-block: 15px; }
  .section-mode .mini-graph svg { max-height: 102px; }
  .section-mode .development-copy h2 { font-size: 42px; }
  .section-mode .roadmap > article { padding-block: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-nav *, .scene-next { transition: none !important; }
}