/* modules.css - layering only: the module grounds sit behind the page, at the viewport's own size, so a
   canvas's backing store and its CSS box always share one aspect (field.js sizes itself from this box). */
html { background: var(--black); }
body { background: transparent !important; }
.mod-ground { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; margin: 0; z-index: -1;
  pointer-events: none; display: block; }
html[data-mod-ground="bird"] .mod-magpie, html:not([data-mod-ground="bird"]) .mod-bird { visibility: hidden; }

/* Reading content has its own opaque plane; actual modules remain visible in the margins. */
.hero-inner, .section-inner { background: var(--black); }
.hero-inner { padding: 32px 24px; clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
html.pg-broken .hero-inner { clip-path: none; }
/* Inert rigs remain behind the reading planes until the full-stage third break. */
html.pg-broken:not([data-pg-break="3"]) :is(section, .hero-inner, .section-inner) { position: relative; z-index: 7001; }
html.pg-broken:not([data-pg-break="3"]) body > header { z-index: 7002; background: var(--black); }
.hero-byline, .imap-root-label { text-transform: none; }

.hero-sub, .hero-notice, .hero-epigraph, .hero-collab, .section-body { color: var(--text-primary); opacity: 1; }
.hero-notice, .hero-collab { font-size: 12px; }
.hero-epigraph { font-size: 11px; }
.section-inner { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 640px) { .hero-inner { gap: 24px; padding: 24px 16px; } }

/* Preserve legible phase labels instead of shrinking eleven touch targets onto a phone. */
.timeline-track { overflow-x: auto; }
#timeline-svg { display: block; min-width: 1200px; }
#timeline-svg text { fill: var(--text-primary) !important; }