/* The film leads the hero. Copy and entry stay in document flow. */
.genesis {
  height:auto;min-height:0;padding:112px 3vw 42px;display:flex;
  flex-direction:column;gap:0;overflow:clip;
}
.genesis > .hero-copy {
  position:relative;inset:auto;width:auto;margin:0 2.5vw 26px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  text-align:left;
}
.genesis > .hero-copy h1 {
  font-size:clamp(48px,5.2vw,84px);line-height:1;white-space:nowrap;
}
.genesis > .hero-copy h1 > span {vertical-align:baseline;line-height:1;font-size:.48em}
.genesis > .hero-copy h1 > em {margin-left:.1em}
.genesis > .hero-copy .hero-line {
  margin:0;font-size:clamp(20px,1.75vw,28px);line-height:1.12;
}
.genesis > .hero-journey {
  position:relative;inset:auto;transform:none;aspect-ratio:auto;
  width:100%;height:auto;min-width:0;margin:0;flex:none;
  background:transparent;scroll-margin-top:16px;
}
.hero-journey .galaxy-viewport:not(:fullscreen) {
  position:relative;container-type:inline-size;aspect-ratio:16/9;height:auto;width:100%;overflow:hidden;
}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-theater {
  position:absolute;inset:0;height:100%;width:100%;overflow:hidden;
}
/* A dedicated reading strip leaves the entire film unobstructed. */
.hero-journey > .galaxy-scene-heading {
  position:relative;inset:auto;display:grid;grid-template-columns:145px 1fr 1.2fr;
  align-items:center;gap:24px;min-height:104px;padding:20px 2.5vw;
  color:#2b2620;border-bottom:1px solid #bda77138;
}
.hero-journey > .galaxy-scene-heading .galaxy-overline {margin:0!important;font-size:9px!important;color:#a58343}
.hero-journey > .galaxy-scene-heading h2 {font-size:clamp(27px,2.25vw,38px);margin:0;line-height:1.1}
.hero-journey > .galaxy-scene-heading > p:last-child {max-width:none;margin:0;font-size:14px;line-height:1.5}
.hero-journey:has(.has-future) > .galaxy-scene-heading {visibility:hidden}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future {
  padding:5% 5% 0;display:flex;flex-direction:column;align-items:center;
}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future[hidden] {display:none}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future h2 {
  font-size:clamp(46px,6.3cqw,104px);margin:18px 0;line-height:1.02;
}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future-purpose {
  font-size:clamp(16px,1.9cqw,28px);line-height:1.45;max-width:90%;margin-bottom:16px;
}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future-belief {display:none}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-warm {font-size:clamp(23px,2.8cqw,40px);margin:16px 0 20px}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-invitation {gap:16px;align-items:center}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-invitation .gold-button {
  font-size:clamp(13px,1.3cqw,18px);min-height:48px;padding:14px 24px;min-width:270px;
}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-poleis {font-size:clamp(11px,1.2cqw,15px)}
/* The molecular horizon leaves the upper third open; Unit 0 occupies the
   lower center. Keep the invitation above that raised surface. */
@media(min-width:701px) {
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future {
    display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto auto auto;
    align-content:start;align-items:start;column-gap:7%;padding:3.5% 7% 0;text-align:left;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future > .galaxy-overline {
    grid-column:1;grid-row:1;margin-bottom:12px!important;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future h2 {
    grid-column:1;grid-row:2/4;font-size:clamp(34px,4.2cqw,72px);margin:0;line-height:1.02;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future-purpose {
    grid-column:2;grid-row:1;font-size:clamp(13px,1.4cqw,22px);max-width:none;margin:0 0 10px;line-height:1.4;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-warm {
    grid-column:2;grid-row:2;font-size:clamp(20px,2.1cqw,32px);margin:0 0 12px;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-invitation {
    grid-column:2;grid-row:3;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:10px 18px;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-invitation .gold-button {
    min-width:220px;min-height:44px;padding:12px 18px;font-size:clamp(12px,1.1cqw,16px);
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-poleis {font-size:clamp(10px,.9cqw,13px)}
}
.hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-controls {bottom:16px;left:3%;right:3%}
.genesis > .mint-dock.antimirror-entry {
  position:relative;inset:auto;width:auto;margin:0 2.5vw;padding:30px 0;
  display:grid;grid-template-columns:minmax(220px,.9fr) minmax(270px,1.1fr) minmax(240px,.65fr);
  gap:8px 30px;align-items:center;background:none;border:0;box-shadow:none;backdrop-filter:none;
}
.genesis > .mint-dock.antimirror-entry h2 {grid-column:1;grid-row:1/3;font-size:34px;margin:0;max-width:310px}
.genesis > .mint-dock .entry-purpose {grid-column:2;grid-row:1;margin:0;font-size:18px;line-height:1.35}
.genesis > .mint-dock .entry-vow {grid-column:2;grid-row:2;margin:0;font-size:12px;line-height:1.5}
.genesis > .mint-dock .gold-button {grid-column:3;grid-row:1;margin:0;min-height:48px}
.genesis > .mint-dock .entry-install {grid-column:3;grid-row:2;margin:0;justify-self:stretch}
.genesis > .genesis-controls {
  position:relative;inset:auto;width:auto;margin:0 2.5vw;padding-top:18px;
}
.genesis > .genesis-controls .hero-sub {margin:0;font-size:11px;line-height:1.5;text-align:right}
.oath-sphere {
  position:relative;isolation:isolate;background:radial-gradient(ellipse at 53% 46%,#fffefa,#f7f5ed 55%,#faf9f5 80%);
  color:#535b4c;color-scheme:light;padding:0 5.5% 34px;
}
/* THE PATHOS FIRST (Oct 14 2026 07:19 WEST): in the hero the sphere stands on the hero's own light, so its box leaves no seam. */
.genesis > .oath-sphere { background:none }
.oath-sphere .sphere-stage {
  position:relative;inset:auto;width:100%;height:clamp(520px,65vw,900px);
  max-width:1440px;margin:0 auto;
}
.oath-sphere .sphere-label {top:5%;right:5%}
.oath-sphere .genesis-controls {
  position:relative;inset:auto;max-width:1280px;margin:0 auto;padding-top:18px;
}
.oath-sphere .face-note {right:7%;bottom:12%}
.oath-sphere + .film-oath {padding-top:clamp(54px,7vw,112px)}


@media(max-width:1000px) {
  .genesis > .hero-copy {gap:20px}
  .genesis > .hero-copy h1 {font-size:5.5vw}
  .genesis > .hero-copy .hero-line {font-size:20px}
  .hero-journey > .galaxy-scene-heading {grid-template-columns:110px 1fr 1fr;gap:16px}
  .genesis > .mint-dock.antimirror-entry {grid-template-columns:1fr 240px;gap:12px 28px}
  .genesis > .mint-dock.antimirror-entry h2 {grid-column:1;grid-row:1;max-width:none;font-size:32px}
  .genesis > .mint-dock .entry-purpose {grid-column:1;grid-row:2}
  .genesis > .mint-dock .entry-vow {grid-column:1;grid-row:3}
  .genesis > .mint-dock .gold-button {grid-column:2;grid-row:1/3}
  .genesis > .mint-dock .entry-install {grid-column:2;grid-row:3}
  .oath-sphere .genesis-controls {flex-wrap:wrap}
  .oath-sphere .stage-select {order:3;flex-basis:100%;justify-content:space-between}
}
@media(max-width:700px) {
  .genesis {padding:92px 0 30px}
  .genesis > .hero-copy {margin:0 6% 20px;display:block;text-align:left}
  .genesis > .hero-copy h1 {font-size:clamp(34px,10.6vw,62px)}
  .genesis > .hero-copy .hero-line {font-size:18px;line-height:1.2;margin-top:12px;max-width:330px}
  .hero-journey .galaxy-viewport:not(:fullscreen) {aspect-ratio:9/16}
  .hero-journey > .galaxy-scene-heading {grid-template-columns:1fr;gap:8px;min-height:150px;padding:20px 6%}
  .hero-journey > .galaxy-scene-heading h2 {font-size:28px}
  .hero-journey > .galaxy-scene-heading > p:last-child {font-size:13px}
  /* The ending's Human hexagon begins halfway down the portrait film.
     Keep its invitation in the clear upper area, with both links touchable. */
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future {padding:2% 7% 0}
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future > .galaxy-overline {
    font-size:8px!important;line-height:1.4;margin:0 0 4px!important;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future h2 {
    font-size:clamp(28px,9cqw,44px);margin:4px 0 6px;line-height:1.02;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-future-purpose {
    font-size:clamp(13px,3.8cqw,17px);line-height:1.3;max-width:100%;margin:0 0 6px;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-warm {
    font-size:clamp(20px,5.6cqw,26px);line-height:1.2;margin:2px 0 6px;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-invitation {gap:4px}
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-invitation .gold-button {
    font-size:12px;line-height:1.2;min-height:44px;min-width:min(260px,100%);padding:10px 16px;
  }
  .hero-journey .galaxy-viewport:not(:fullscreen) .galaxy-poleis {
    display:flex;align-items:center;min-height:44px;padding:8px 10px;font-size:11px;line-height:1.3;
  }
  .genesis > .mint-dock.antimirror-entry {display:flex;flex-direction:column;align-items:stretch;margin:0 6%;gap:12px;padding:26px 0}
  .genesis > .mint-dock.antimirror-entry h2 {font-size:32px}
  .genesis > .mint-dock .gold-button {margin-top:8px}
  .genesis > .genesis-controls {margin:0 6%;align-items:flex-start;gap:16px}
  .genesis > .genesis-controls .hero-sub {text-align:left;font-size:10px;max-width:240px}
  .oath-sphere {padding-inline:7%}
  .oath-sphere .sphere-stage {height:500px;width:calc(100% + 14vw);margin-left:-7vw}
  .oath-sphere .sphere-label {right:8%;top:7%;font-size:7px}
  .oath-sphere .face-note {right:8%;bottom:15%}
}
/* PAGE BREAKS (his Oct 30 2026, over her scene with the hero's light and its Restart / Sound off / Pause above the world: "there is no proper page break, i cant
   have the previous hero above it breaking mid way"; then "dude please i was clear"): the page is pages. The hero, his governance film with its world are one screen each, and the scroll stops only at a page's top, never with one page cut over the next. The film was 80 % of a screen less an 82 px
   mast the page no longer shows, so the hero always showed above the film. The hero keeps its sphere's own height (a whole screen under its
   header): made one screen less its header, it pushed the hero's sound button under the fold, where the snap and ON TRACK hold it (rule 8's proof). (#purpose sits inside
   #genesis in the markup: the hero section itself keeps its height, or the film is clipped out.) */
html{scroll-snap-type:y mandatory;scroll-padding-top:0}   /* a page's top is the screen's: the 82 px kept for the old mast put every page under it */
#genesis .hero-copy,#purpose{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0}   /* the hero's page is its header and sphere: #genesis holds the film too */
#genesis{padding-bottom:0}
.warm-galaxy{--galaxy-height:100svh}
#purpose .galaxy-viewport:not(:fullscreen){height:100svh}   /* the film and its world one whole screen (it was 80 % of one, and the hero showed above it) */