/* ═══════════════════════════════════════════════════════════════════════
   THE FOUR MAJOR ROTATING SECTIONS — one stage component, four theaters.
   Spec: _brief/THE-SIX-THEATERS-spec-2026-10-03.md
   Loaded LAST. Everything here is new; nothing above is edited.
   ═══════════════════════════════════════════════════════════════════════ */

.stage{position:relative;isolation:isolate}
.stage + .stage{border-top:1px solid color-mix(in srgb, currentColor 10%, transparent)}

/* ── the head: number, title, dots ── */
.stage__head{
  max-width:var(--max,1280px);margin:0 auto;
  padding:clamp(3.2rem,5vw,5.4rem) var(--gut,2rem) clamp(1.6rem,2.6vw,2.6rem);
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num title" "num sub" "num nav";
  column-gap:clamp(1rem,2.2vw,2.2rem);align-items:start}
@media(max-width:700px){
  .stage__head{grid-template-columns:1fr;grid-template-areas:"num" "title" "sub" "nav"}}
.stage__num{grid-area:num;margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,1.2rem + 3vw,4rem);line-height:.9;letter-spacing:-.03em;
  color:var(--courage-sun,#E0A400);opacity:.85}
.stage__title{grid-area:title;margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,1.2rem + 4vw,4.4rem);line-height:.96;letter-spacing:-.02em}
.stage__sub{grid-area:sub;margin:.7rem 0 0;max-width:52ch;font-size:var(--t-body,1.08rem);
  line-height:1.55;opacity:.78}
.stage__nav{grid-area:nav;display:flex;align-items:center;gap:.7rem;margin-top:1.3rem}
.stage__dots{display:flex;gap:.5rem;flex-wrap:wrap}
.stage__dot{width:30px;height:4px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:color-mix(in srgb, currentColor 22%, transparent);
  transition:background .3s, transform .3s}
.stage__dot:hover{background:color-mix(in srgb, currentColor 44%, transparent)}
.stage__dot.is-on{background:var(--courage-blue,#1C5BA8);transform:scaleY(1.6)}
.stage__held{font-family:var(--body);font-size:.6rem;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;opacity:0;transition:opacity .35s;white-space:nowrap}
.stage.is-held .stage__held{opacity:.6}

/* ── the deck: scenes stack in ONE grid cell, so the deck is always as tall
      as its tallest scene. No JS measuring, so it can never collapse. ── */
.stage__deck{display:grid;position:relative;transform-style:preserve-3d;
  align-items:start;overflow:hidden;
  transition:height .62s cubic-bezier(.22,.7,.2,1)}
.scene{grid-area:1 / 1 / 2 / 2;opacity:0;pointer-events:none;
  transform:perspective(1200px) rotateY(16deg) translateZ(-120px) scale(.97);
  transform-origin:50% 50%;
  transition:opacity .5s ease, transform .66s cubic-bezier(.2,.75,.2,1);
  will-change:transform,opacity}
.scene.is-on{opacity:1;pointer-events:auto;
  transform:perspective(1200px) rotateY(0) translateZ(0) scale(1)}
.scene.is-out{transform:perspective(1200px) rotateY(-16deg) translateZ(-120px) scale(.97)}

/* a scene's own section keeps all its styling — the stage only sets its rhythm */
.scene > section{padding-block:clamp(1.4rem,2.4vw,2.8rem) !important;min-height:0 !important}
.scene > section.four{padding-block:clamp(1rem,2vw,2.2rem) !important}
.scene > .bookband,.scene > .state,.scene > .gal,.scene > .shelf{margin:0}

/* before the engine runs, the first scene must be visible and the rest out of the way */
html:not(.stages-on) .stage__deck{display:block}
html:not(.stages-on) .scene{opacity:1;transform:none;pointer-events:auto}
html:not(.stages-on) .stage__nav{display:none}

@media (prefers-reduced-motion: reduce){
  .scene{transition:opacity .2s;transform:none !important}
  .stage__deck{transition:none}
  .stage__held{opacity:.6}
}

/* ═══ THE MESSENGER WALKS ═══════════════════════════════════════════════
   The same ridge runner Tony likes, now jointed and travelling his own
   trail. Strategic, not decorative: the far messenger is the whole idea of
   the site — someone who crosses hard ground carrying what matters and
   arrives whole — so he crosses the ridge, continuously, in front of you.
   Pure transform/opacity. Fully off under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */
.walker{
  offset-path:path("M10 200 L90 140 L150 185 L225 105 L295 170 L370 135 L450 190 L550 160");
  offset-rotate:0deg;              /* he stays upright; the trail tilts, he does not */
  offset-distance:0%;
  animation:walker-cross 26s linear infinite;
}
.walker__body{animation:walker-bob .78s ease-in-out infinite}
.walker__leg,.walker__arm{transform-box:fill-box;transform-origin:top left}
.walker__leg--f{animation:swing-fwd .78s ease-in-out infinite}
.walker__leg--b{animation:swing-back .78s ease-in-out infinite}
.walker__arm--f{animation:swing-back .78s ease-in-out infinite}
.walker__arm--b{animation:swing-fwd .78s ease-in-out infinite}

@keyframes walker-cross{
  from{offset-distance:0%}
  to{offset-distance:100%}
}
@keyframes walker-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.6px)}
}
/* a walk, not a leap: a short swing, and a slower cadence */
@keyframes swing-fwd{
  0%,100%{transform:rotate(8deg)}
  50%{transform:rotate(-9deg)}
}
@keyframes swing-back{
  0%,100%{transform:rotate(-9deg)}
  50%{transform:rotate(8deg)}
}

/* a second, far messenger on the ridge behind — the ones who went before */
.cmotion__ridge .walker--distant{opacity:.34;animation-duration:38s;animation-delay:-14s}
.cmotion__ridge .walker--distant .walker__body{stroke-width:2.2}

@media (prefers-reduced-motion: reduce){
  .walker,.walker__body,.walker__leg,.walker__arm{animation:none !important}
  .walker{offset-distance:42%}
}

/* ── a stage is a stage, not a scroll: cap the full-bleed plates and the
      oversized plates inside scenes so one scene cannot inflate the deck ── */
.scene .bleed{max-height:clamp(300px,44vh,520px);overflow:hidden}
.scene .bleed img{width:100%;height:100%;object-fit:cover}
.scene .work-rows img,
.scene .wrow img,
.scene figure img{max-height:clamp(260px,38vh,440px);object-fit:cover}
/* book covers and spot art keep their natural size */
.scene .shelf__b img,.scene .sbcover img,.scene .reader__cov img,
.scene .amm img,.scene svg{max-height:none}

/* ═══ VIDEOS OF OUR COMMUNITIES ═══ carried over from the old site ═══ */
.cvids{background:linear-gradient(170deg,#F2F6EE 0%,#E9F0E4 100%);padding-block:clamp(2rem,3.4vw,3.4rem)}
.cvid__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.2vw,2rem);
  margin-top:clamp(1.6rem,3vw,2.6rem)}
@media(max-width:780px){.cvid__grid{grid-template-columns:1fr}}
.cvid{margin:0}
.cvid__frame{position:relative;padding-top:56.25%;background:#15301F;border-radius:3px;overflow:hidden;
  box-shadow:0 22px 48px -26px rgba(16,40,26,.55)}
.cvid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cvid figcaption{margin-top:.7rem;font-family:var(--display);font-size:1.02rem;line-height:1.3;color:#1E6E34}
.cvid__k{display:block;font-family:var(--body);font-size:.64rem;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:#B8512A;margin-bottom:.25rem}

/* the rotating deep dive inside each fire */
.dive{margin:0 0 1.3rem;min-height:4.4rem}
.dive a{text-decoration:none;display:block}
.dive .dk{font-family:var(--body);font-size:.62rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#2F7C72;display:block;margin-bottom:.35rem}
.dive .dt{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.24;
  color:#124279;display:block}
.dive .ds{font-family:var(--body);font-size:.9rem;line-height:1.5;color:#4A4039;
  display:block;margin-top:.24rem}
.dive a:hover .dt{color:#B8512A}
.dive.is-held .dk::after{content:" — paused";opacity:.6;letter-spacing:.08em}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE MEMORY — iOS Safari was killing the tab.
   Measured on the live homepage at phone width: 11.3 MB of media and about
   309 MB of decoded image memory across 24 stacked scenes. Safari drops a
   tab long before that, which is why the site "did not open" on a phone.
   Offscreen and inactive scenes must not paint or decode.
   ═══════════════════════════════════════════════════════════════════════ */
.scene:not(.is-on){
  visibility:hidden;              /* lets the engine skip paint entirely */
  content-visibility:hidden;      /* and skip layout + decode of its images */
}
.scene.is-on{visibility:visible;content-visibility:visible}
.scene.is-out{visibility:visible}  /* keep the outgoing one through its turn */

/* bands far down the page do not render until they are near */
.stage, .gal, .shelf, .amm, .cvids, .sec.listen, #watch{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}


/* the active dot breathes, so a visitor can see the band is live;
   it stops the moment they take the wheel */
@keyframes dot-live{0%,100%{opacity:1}50%{opacity:.45}}
.stage__dot.is-on{animation:dot-live 2.6s ease-in-out infinite}
.stage.is-held .stage__dot.is-on{animation:none}
@media (prefers-reduced-motion: reduce){ .stage__dot.is-on{animation:none} }

/* ═══ THE MINI MENU BESIDE A STAGE ═══════════════════════════════════════
   Tony, 10/4: "the 4 fires and the work and the life should have a mini menu
   on the side so someone knows what is in that section." A list of what is
   in there, not a row of dots to guess at. Built by js/stage-menu.js from
   the labels the dots already carry.                                      */
.stage__with-menu{display:block;max-width:var(--max,1280px);margin-inline:auto}
/* line up with the stage's own title, which sits inside the head's gutter */
.stage__menu{margin:0 0 1.4rem;padding-inline:var(--gut,2rem)}
.stage__menu-k{margin:0 0 .6rem;font-family:var(--body,system-ui);font-weight:700;
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:#8A7866}
.stage__menu ul{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:.2rem}
.stage__menu ul::-webkit-scrollbar{display:none}
.stage__menu li{flex:0 0 auto}
.stage__menu-i{display:inline-flex;align-items:baseline;gap:.46rem;
  font-family:var(--body,system-ui);font-size:.86rem;line-height:1.25;
  color:#5B4C3E;background:none;border:1px solid rgba(91,76,62,.22);
  border-radius:999px;padding:.44em .9em;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s}
.stage__menu-i i{font-style:normal;font-size:.68em;letter-spacing:.08em;
  font-weight:700;color:#A08A6E}
.stage__menu-i:hover{color:#8A3C1E;border-color:rgba(138,60,30,.45)}
.stage__menu-i.is-on{color:#FAF6EC;background:#6B4A2E;border-color:#6B4A2E}
.stage__menu-i.is-on i{color:rgba(250,246,236,.7)}

/* On a wide screen it stands in the margin, as a running list. */
@media (min-width:1040px){
  .stage__with-menu{display:grid;
    grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);
    gap:clamp(1.4rem,1rem + 1.6vw,2.6rem);align-items:start;
    padding-inline:var(--gut,2rem)}
  .stage__menu{position:sticky;top:5.5rem;margin:0;padding-inline:0}
  .stage__menu ul{flex-direction:column;gap:.18rem;overflow:visible}
  .stage__menu li{flex:none}
  .stage__menu-i{width:100%;justify-content:flex-start;white-space:normal;
    text-align:left;border:0;border-left:2px solid rgba(91,76,62,.18);
    border-radius:0;padding:.42em 0 .42em .8em;background:none}
  .stage__menu-i:hover{background:none;border-left-color:rgba(138,60,30,.5)}
  .stage__menu-i.is-on{background:none;color:#8A3C1E;font-weight:700;
    border-left-color:#8A3C1E}
  .stage__menu-i.is-on i{color:#8A3C1E}
}
@media (prefers-reduced-motion:reduce){ .stage__menu-i{transition:none} }

/* ═══ THE ARROWS MOVE ════════════════════════════════════════════════════
   Tony, 10/4: "i like the arrow on there but things are supposed to be
   animated." A slow travel on its own so the page is never quite still,
   and a decisive step forward under the cursor. Off under reduced motion. */
.arrow span,.btn span,a.arrow::after,.four__more span{display:inline-block}
.arrow span,.four__more span,.btn--primary span{
  animation:arrow-drift 3.4s ease-in-out infinite;will-change:transform}
a:hover .arrow span,a:hover .four__more span,
.btn:hover span,.arrow:hover span{animation:none;transform:translateX(5px);
  transition:transform .22s cubic-bezier(.22,.7,.2,1)}
@keyframes arrow-drift{
  0%,70%,100%{transform:translateX(0)}
  82%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .arrow span,.four__more span,.btn--primary span{animation:none}
}