/* Progressive enhancement: ordinary document flow remains the reading fallback. */
.education { padding-block: clamp(4rem, 8vw, 7rem); }
.education::before { content: ''; display: block; height: 1px; background: var(--rule); margin-bottom: 3rem; }
.section-controls { position: fixed; z-index: 35; bottom: 1.6rem; right: var(--frame-x); display: flex; align-items: center; gap: 1rem; padding: .45rem .6rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 3rem; color: var(--ink-dim); }
.section-controls button { color: inherit; background: none; border: 0; font: .72rem var(--font-body); cursor: pointer; }
.section-controls .section-step { width: 2rem; height: 2rem; border: 1px solid var(--rule); border-radius: 50%; font-size: 1rem; }
.section-controls button:hover { color: var(--ink); }
.section-controls button:disabled { opacity: .25; cursor: default; }
.section-position { font: .65rem var(--font-mono); min-width: 8.5rem; text-align: center; }
.section-controls .reading-toggle { padding: 0 .4rem; }
html.section-mode, .section-mode body { height: 100%; overflow: hidden; scroll-behavior: auto; }
.section-mode #top { position: fixed; inset: 0; overflow: hidden; }
.section-mode #top > section {
  position: absolute; inset: 0; min-height: 0; height: 100%;
  padding: 8.5rem var(--content-x) 6.5rem;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; background: var(--bg); scrollbar-width: thin;
  display: flex; flex-direction: column; scroll-behavior: auto;
}
.section-mode #top > section.is-current { visibility: visible; z-index: 1; }
.section-mode #top > section.is-entering { visibility: visible; z-index: 2; }
.section-mode #top > section.is-leaving { visibility: visible; z-index: 1; }
.section-mode #top > section > :first-child { margin-top: auto; }
.section-mode #top > section > :last-child { margin-bottom: auto; }
.section-mode #top > section::before { display: none; }
.section-mode #top > section > * { flex-shrink: 0; }
.section-mode .reveal { opacity: 1; transform: none; transition: none; }
.section-mode #top > section:focus { outline: none; }
:root.section-mode .work--hero .books-stage { width: 100%; margin-left: 0; overflow: visible; padding-block: .5rem; }
.section-mode .work--hero .bookshelf { --book-h: clamp(200px, 41svh, 410px); }
.section-mode .projects-note { margin-right: max(1rem, calc((100% - 690px) / 2)); }
.section-mode .section-title { font-size: clamp(2.8rem, 5vw, 4.5rem); margin-bottom: 2rem; }
.section-mode .history .entry { padding-block: 1rem; }
.section-mode .history .entry h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.section-mode .history .entry-org { font-size: .8rem; }
.section-mode .about-copy { padding-top: 0; }
.section-mode .about-grid { align-items: center; }
.section-mode .contact .section-title { font-size: clamp(3rem, 6vw, 5.5rem); }
.section-mode .contact-intro { margin-bottom: 1.5rem; }
.section-mode .to-top { display: none; }
.section-mode .contact-link { padding-block: .9rem; }
.section-mode .copyright { padding-top: 1.3rem; }
@media (max-width: 760px) {
  .section-mode #top > section { padding: 8rem 1.5rem 6.5rem; }
  .section-mode .work--hero .bookshelf { --book-h: clamp(130px, calc((100svh - 340px) / 2.2), 245px); gap: 1.5rem .8rem; }
  .section-mode .projects-note { margin-right: .25rem; font-size: 1.25rem; }
  .section-mode .projects-note svg { height: 36px; width: 70px; }
  .section-mode .work--hero .books-hint { font-size: .55rem; margin-top: .8rem; }
  .section-mode .section-title { font-size: 2.9rem; }
  .section-mode .about-sub { font-size: .95rem; }
  .section-controls { bottom: 1rem; gap: .45rem; right: 1rem; }
  .section-position { min-width: 6.7rem; font-size: .57rem; }
  .section-controls .reading-toggle { font-size: .65rem; }
  .section-controls .section-step { width: 1.8rem; height: 1.8rem; }
}
@media print {
  .section-controls { display: none; }
  html.section-mode, .section-mode body { height: auto; overflow: visible; }
  .section-mode #top { position: static; overflow: visible; }
  .section-mode #top > section { position: static; height: auto; visibility: visible; overflow: visible; break-before: page; }
}
@media (max-width: 360px) {
  .section-controls { gap: .2rem; }
  .section-controls .reading-toggle { max-width: 3.1rem; font-size: .6rem; line-height: 1.2; }
  .section-position { min-width: 5rem; font-size: .5rem; }
  .section-controls .section-step { width: 1.5rem; height: 1.5rem; }
}

.section-mode body::after { content: ""; position: fixed; inset: auto 0 0; height: 6rem; z-index: 29; pointer-events: none; background: linear-gradient(0deg, var(--bg) 65%, transparent); }

/* Each slide lands with its own choreography; reading view keeps the scroll reveals. */
.section-mode #top > section.is-choreo .reveal,
.section-mode #top > section.is-choreo .projects-note,
.section-mode #top > section.is-choreo .books-hint { animation: slide-reveal .95s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--choreo-delay, 0s) + .32s + var(--i, 0) * 85ms); }
/* The books fly in: gathered below the screen and tilted, they sweep up past their slots, then spread and settle. */
.section-mode #top > section.is-choreo .bookshelf .book { --fly-x: 100%; animation: book-fly 1.75s cubic-bezier(.3, .75, .25, 1) both; animation-delay: calc(var(--choreo-delay, 0s) + .1s + (var(--i, 1) - 1) * 95ms); }
.section-mode #top > section.is-choreo { overflow: hidden; }
@keyframes slide-reveal { from { opacity: 0; translate: 0 26px; } }
@keyframes book-fly {
  0% { opacity: 0; translate: calc((2 - var(--i, 1)) * var(--fly-x)) 75vh; rotate: calc((var(--i, 1) - 2) * -9deg); scale: .78; }
  12% { opacity: 1; }
  48% { translate: calc((2 - var(--i, 1)) * var(--fly-x) * .35) -4.5vh; rotate: calc((var(--i, 1) - 2) * 4deg); scale: 1.04; }
  78% { translate: 0 1.2vh; rotate: calc((var(--i, 1) - 2) * -1deg); scale: .995; }
  100% { translate: 0 0; rotate: 0deg; scale: 1; }
}
@media (max-width: 760px) { .section-mode #top > section.is-choreo .bookshelf .book { --fly-x: 0%; } }

/* A quiet progress line replaces the pill; the controls thin out to type and two arrows. */
.section-rail { position: fixed; top: 0; left: 0; z-index: 36; width: 100%; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--section-progress, 0)); transition: transform 1.1s cubic-bezier(.65,0,.25,1); pointer-events: none; }
html:not(.section-mode) .section-rail, html.portal-world .section-rail { display: none; }
.section-controls { background: none; border: 0; padding: 0; gap: .7rem; color: var(--ink-faint); }
.section-controls .section-step { width: 1.75rem; height: 1.75rem; font-size: .85rem; }
.section-controls .section-step:hover:not(:disabled) { border-color: var(--ink-dim); }
.section-position { font-size: .58rem; letter-spacing: .1em; min-width: 7.5rem; }
.section-controls .reading-toggle { font-size: .65rem; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .section-rail { transition: none; } }

@media (pointer:coarse) {
  .section-controls { bottom:calc(.6rem + env(safe-area-inset-bottom));max-width:calc(100vw - 1rem);right:.5rem;gap:.35rem; }
  .section-controls .section-step { width:44px;height:44px;flex-shrink:0; }
  .section-controls .reading-toggle { min-height:44px; }
  .section-mode #top > section { padding-bottom:calc(7rem + env(safe-area-inset-bottom)); }
}