/* Shared navigation and mobile legibility layer.
   The archive keeps distinct chapter interactions, but cross-page motion follows
   one grammar: object flight for chapter entry, rainbow wipe for view changes,
   and a short paper aperture for ordinary navigation. */
:root {
  --site-motion-fast: 160ms;
  --site-motion-page: 360ms;
  --site-motion-flight: 420ms;
  --site-ease-out: cubic-bezier(.23, 1, .32, 1);
  --site-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --site-ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

html.site-is-navigating,
html.site-is-navigating body { cursor: progress; }

.site-transition {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  pointer-events: auto;
}

.site-transition--mode {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  background: transparent;
}

.site-transition--mode span {
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--site-ease-in-out) var(--delay);
}

.site-transition--mode span:nth-child(even) { transform-origin: right center; }
.site-transition--mode span:nth-child(1) { background: #f03e53; }
.site-transition--mode span:nth-child(2) { background: #f35d27; }
.site-transition--mode span:nth-child(3) { background: #fff100; }
.site-transition--mode span:nth-child(4) { background: #00fbff; }
.site-transition--mode span:nth-child(5) { background: #298b7f; }
.site-transition--mode span:nth-child(6) { background: #3657b8; }
.site-transition--mode span:nth-child(7) { background: #993370; }
.site-transition--mode.is-active span { transform: scaleX(1); }
.site-transition--mode.is-revealing span { transform: scaleX(0); }

@media (max-width: 700px) {
  /* Opening plate */
  .intro-meta { top: 16px; left: 16px; }
  .intro-index { top: 17px; right: 16px; }
  .intro-meta strong { font-size: 11px; }
  .intro-index span:last-child { font-size: 10px; }
  .intro-scroll {
    bottom: 18px;
    left: 16px;
    width: min(210px, 56vw);
    transform: none;
    font-size: 11px;
  }
  .intro-skip {
    right: 10px;
    bottom: 7px;
    display: inline-flex;
    min-width: 88px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 11px;
  }

  /* Four-chapter archive home */
  .home { min-height: 1080px; padding-inline: 16px; }
  .home-meta { top: 16px; left: 16px; max-width: 56vw; }
  .home-meta .project-wordmark { font-size: 11px; }
  .home-meta .project-subline { margin-top: 4px; font-size: 11px; line-height: 1.35; }
  .home-status { top: 17px; right: 16px; max-width: 39vw; }
  .home-status span:last-child { font-size: 11px; line-height: 1.3; }
  .home-artifact-mode {
    top: 62px;
    left: 50%;
    width: 190px;
    min-height: 48px;
    transform: translateX(-50%);
  }
  .home-artifact-mode > span,
  .home-artifact-mode small { font-size: 11px; line-height: 1.2; }
  .home-mode-switch {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  .home-mode-switch .rainbow-flag { width: 24px; height: 15px; }
  .cover-visual { top: 185px; }
  .concept-note,
  .concept-note--top,
  .concept-note--left,
  .concept-note--right,
  .concept-note--bottom {
    right: 16px;
    left: 16px;
    min-height: 94px;
    padding: 14px 0;
  }
  .concept-note--top { top: 570px; }
  .concept-note--left { top: 676px; }
  .concept-note--right { top: 782px; }
  .concept-note--bottom { top: 888px; }
  .concept-note .concept-number { font-size: 12px; }
  .concept-note strong { font-size: 24px; line-height: .96; }
  .concept-note small { margin-top: 7px; font-size: 12px; line-height: 1.3; }
  .concept-note em { top: 16px; font-size: 11px; line-height: 1.2; }
  .cover-visual figcaption,
  .preview-metadata,
  .home-footer { font-size: 11px; line-height: 1.35; }
  .preview-metadata dt,
  .preview-metadata dd { font-size: 11px; }
  .home-footer { right: 16px; bottom: 14px; left: 16px; }

  /* Shared headers and controls */
  .chapter-header__back,
  .c2-header__back,
  .c3-header__back,
  .reader-back,
  .chapter-header__tools a,
  .c2-header__tools a,
  .c3-header__tools a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    font-size: 11px;
  }
  .chapter-header__title strong,
  .c2-header__title strong,
  .c3-header__title strong { font-size: 11px; line-height: 1.25; }
  .chapter-header__level strong,
  .c2-header__level strong,
  .c3-header__level strong { font-size: 11px; }
  .mode-switch,
  .c2-mode-switch,
  .c3-mode-switch,
  .chapter-one-archive-mode .mode-switch {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .chapter-one-archive-mode,
  .c2-chapter-mode,
  .c3-chapter-mode { font-size: 10px; }
  .chapter-index-footer,
  .c2-footer,
  .c3-footer,
  .reader-footer { min-height: 44px; font-size: 11px; }

  .scene-card figcaption,
  .topic-record,
  .index-readout,
  .c4-stack-readout { font-size: 11px; }

  /* Participatory form */
  .artifact-header { min-height: 56px; }
  .artifact-header a { display: inline-flex; min-height: 44px; align-items: center; font-size: 11px; }
  .artifact-main label,
  .artifact-main button,
  .artifact-main input,
  .artifact-main textarea { font-size: max(12px, 1em); }
  .artifact-main input[type="text"],
  .artifact-main textarea { font-size: 16px; }
  .contribution-mode button,
  .voice-action,
  .submit-artifact,
  #addAnother,
  #removePhoto,
  #removeVoice { min-height: 44px; }

  /* No interface copy below 11px on a phone. Publication artwork remains untouched. */
  .intro-index span:last-child,
  .artifact-header,
  .artifact-main .artifact-intro > p,
  .artifact-main .form-topline > span,
  .artifact-main .action-number,
  .artifact-main .action-title span,
  .artifact-main .photo-action span,
  .artifact-main .photo-preview figcaption,
  .artifact-main .voice-action,
  .artifact-main .alias-field span,
  .artifact-main .consent-field span,
  .artifact-main .form-status,
  .artifact-main .submission-result > span,
  .artifact-footer,
  .index-introduction p,
  .index-introduction__subtitle,
  .index-readout,
  .index-readout > *,
  .index-readout dt,
  .index-readout dd,
  .chapter-one-archive-mode > span,
  .book-context > p,
  .book-context dl,
  .book-current figcaption,
  .book-instructions,
  .book-readout,
  .book-readout__counter,
  .book-readout dl,
  .book-readout > a,
  .c2-book__context > p,
  .c2-book__archive-mode > span,
  .c2-book__context dl,
  .c2-book__current figcaption,
  .c2-book__instructions,
  .c2-book__readout,
  .c2-book__counter,
  .c2-book__readout dl,
  .c2-book__readout > a,
  .c2-introduction__meta,
  .c2-introduction__archive-mode > span,
  .c2-introduction__note p,
  .c2-introduction__scroll,
  .archive-orbit__instruction,
  .archive-sphere__band span,
  .transcript-field__heading,
  .story-atlas__archive-mode > span,
  .chapter-three-original-link,
  .c4-stack-instruction,
  .c3-publication__heading,
  .c3-scene-meta,
  .c3-layer-readout,
  .c3-footer,
  .c3-archive-mode,
  .c3-header .project-wordmark,
  .publication-reader .spread figcaption,
  .c2-publication-reader .c2-spread figcaption,
  .c2-publication-reader .c2-spread figcaption span { font-size: 11px !important; }

  /* Touch controls: 44px minimum, including book and reader chrome. */
  .paper-sound-toggle,
  .book-step,
  .c2-book-step,
  .reader-controls button,
  .reader-controls a,
  .c2-reader-controls button,
  .c2-reader-controls a,
  .chapter-three-original-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .paper-sound-toggle { padding: 0; }
  .artifact-main .alias-field input,
  .artifact-main .reply-target select,
  .story-atlas__zoom input { min-height: 44px; }
  .artifact-main .consent-field { min-height: 44px; align-items: center; }

  /* The transcript number rail becomes swipeable instead of compressing 11 targets. */
  .transcript-index-page .archive-orbit__index {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44px;
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }
  .transcript-index-page .archive-orbit__index button {
    min-width: 44px;
    min-height: 44px;
    scroll-snap-align: start;
  }
  .transcript-index-page .archive-orbit__index button span { font-size: 11px; }
  .story-atlas__index button { min-width: 44px; min-height: 44px; }
  .story-atlas__index button span { font-size: 11px !important; }

  .transcript-index-page .c2-introduction__meta {
    display: block;
    min-height: 72px;
    text-align: center;
  }
  .transcript-index-page .c2-introduction__archive-mode {
    position: static;
    transform: none;
  }
  .transcript-index-page .c2-introduction__meta > span:last-child {
    display: block;
    margin-top: 6px;
    text-align: center;
  }
  .transcript-index-page .c2-introduction h1 { top: 112px; }
  .transcript-index-page .c2-introduction__secondary { top: 215px; }

  /* Reader navigation stays visible and finger-sized on narrow screens. */
  .reader-controls a,
  .c2-reader-controls a { display: inline-flex; padding-inline: 10px; }
  .reader-controls button,
  .reader-controls span,
  .reader-controls a,
  .c2-reader-controls button,
  .c2-reader-controls span,
  .c2-reader-controls a { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-transition { display: none !important; }
}