/* Story — orbital treatment.
 *
 * Three points on one circuit. The ring rotates so the active chapter sits at
 * the top; its copy reads from beside the dial.
 *
 * The rule carried from the previous rebuild: the section is readable without
 * JavaScript. The first chapter and node carry .is-on in the markup, so
 * nothing here depends on a script running.
 */

/* The hero has no background of its own — it sits on the page, which is a
   radial glow over a --bg → --bg-2 gradient. This section previously painted
   a flat #0B0410 over that, which is why it read as a separate band.
   Transparent lets the same ground show through, so the two are continuous. */
.orbit{ position:relative; color:#FBF7FE; }

/* The title block alone takes the hero's ground.
 *
 * The rest of the section keeps its own dark surface — only the heading,
 * kicker and intro sit on the page gradient, so the story opens continuous
 * with the hero and then settles into its own band for the chapters.
 * The gradient is restated rather than inherited because #story paints an
 * opaque colour over it. */
.orbit-head--unused{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #331748 0%, transparent 60%),
    linear-gradient(180deg, var(--bg,#180A22) 0%, var(--bg-2,#28123A) 100%);
  background-attachment: scroll;
}

/* ---- Runway + sticky stage ------------------------------------------ */
/* One screen of scroll per chapter. svh, not vh: on iOS vh excludes the URL
   bar, which is what produced the dead space in the pinned version. */
.orbit-runway{ position:relative; height:calc(var(--chapters,3) * 100svh); }
@supports not (height: 100svh){ .orbit-runway{ height:calc(var(--chapters,3) * 100vh); } }

.orbit-stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; align-items:center;
}
@supports not (height: 100svh){ .orbit-stage{ height:100vh; } }

.orbit-bg{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .8s ease; z-index:0;
}
.orbit-bg.is-on{ opacity:.28; }
.orbit-stage::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11,4,16,.35), rgba(11,4,16,.9));
  z-index:1; pointer-events:none;
}

.orbit-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,72px);
  align-items:center;
}

/* ---- The dial -------------------------------------------------------- */
.orbit-dial{
  position:relative;
  width:min(38vmin,300px); height:min(38vmin,300px);
  flex:none;
}
.orbit-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(251,247,254,.16);
}
.orbit-ring--inner{
  inset:18%; border-style:dashed; border-color:rgba(251,247,254,.10);
}
.orbit-spin{
  position:absolute; inset:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
/* Each node is placed by rotating it to its angle, pushing it out to the
   rim, then counter-rotating so the number stays upright. */
.orbit-node{
  position:absolute; top:50%; left:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(11,4,16,.85);
  border:1px solid rgba(251,247,254,.22);
  transform:rotate(var(--a)) translate(0, calc(min(38vmin,300px) / -2)) rotate(calc(-1 * var(--a)));
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.orbit-node b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:rgba(251,247,254,.55); transition:color .4s;
}
.orbit-node.is-on{
  background:linear-gradient(140deg,#F64477,#FF9E6B);
  border-color:transparent;
  box-shadow:0 0 26px 6px rgba(246,68,119,.35);
}
.orbit-node.is-on b{ color:#fff; }

.orbit-core{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:#FF9E6B; box-shadow:0 0 20px 6px rgba(255,158,107,.5);
}

/* ---- Chapter copy ---------------------------------------------------- */
/* Chapters stack in one grid cell so switching does not reflow the page. */
.orbit-copy{ display:grid; }
.orbit-ch{
  grid-area:1/1;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.orbit-ch.is-on{ opacity:1; transform:none; pointer-events:auto; }

.orbit-stamp{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,247,254,.6); margin-bottom:16px;
}
.orbit-time{ color:#FF9E6B; font-size:15px; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.orbit-ch h3{
  font-size:clamp(1.8rem,4.4vw,3.2rem); line-height:1.06; letter-spacing:-.03em;
  margin:0 0 20px; max-width:15ch; color:#fff; font-weight:600; text-wrap:balance;
}
.orbit-lines{ max-width:44ch; border-left:2px solid rgba(246,68,119,.5); padding-left:18px; }
.orbit-lines p{
  margin:0 0 9px; line-height:1.6; font-size:clamp(15px,1.6vw,17px);
  color:rgba(251,247,254,.8);
}
.orbit-lines p:last-child{ margin-bottom:0; }

/* ---- Small screens --------------------------------------------------- */
@media (max-width:880px){
  .orbit-inner{ grid-template-columns:1fr; gap:26px; justify-items:center; text-align:center; }
  .orbit-dial{ width:min(46vmin,220px); height:min(46vmin,220px); }
  .orbit-node{
    width:36px; height:36px; margin:-18px 0 0 -18px;
    transform:rotate(var(--a)) translate(0, calc(min(46vmin,220px) / -2)) rotate(calc(-1 * var(--a)));
  }
  .orbit-ch h3{ max-width:none; }
  .orbit-lines{ max-width:none; text-align:left; border-left:0; padding-left:0; padding-top:14px;
                border-top:2px solid rgba(246,68,119,.5); }
  .orbit-stamp{ justify-content:center; }
}

/* No JS: show the first chapter statically and hold the dial still. */
.no-js .orbit-spin{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .orbit-spin, .orbit-ch, .orbit-bg{ transition:none; }
}

/* Chapter label — sits between the place/time stamp and the headline. */
.orbit-chapter{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(251,247,254,.5); margin:0 0 14px;
}
/* Longer body copy needs a slightly tighter measure to stay readable. */
.orbit-lines p{ max-width:52ch; }
@media (max-width:880px){
  .orbit-lines p{ max-width:none; }
}

/* Light theme: the story stays a dark band, as it was, so only the title
   block needs its gradient restated in light-theme tokens. */
body.theme-light .orbit-head--unused{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #331748 0%, transparent 60%),
    linear-gradient(180deg, #180A22 0%, #28123A 100%);
}

/* ── Title slide ─────────────────────────────────────────────────
   The premise sits in the same cell as the chapters, so switching to
   chapter one cannot reflow the stage. It is styled a step larger than
   a chapter heading because it introduces them. */
.orbit-ch--title{ pointer-events:auto; }
.orbit-title-in{
  font-family:var(--font-display,"Poppins",sans-serif); font-weight:600;
  letter-spacing:-.035em; line-height:1.06;
  font-size:clamp(1.9rem,5vw,3.4rem); margin:6px 0 0; max-width:16ch; color:#fff;
}
.orbit-title-in .accent{
  background:linear-gradient(100deg,var(--nc-magenta,#F64477),var(--nc-orange,#FF9E6B));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.orbit-intro-in{
  margin:18px 0 0; max-width:46ch; line-height:1.65;
  color:rgba(251,247,254,.66); font-size:clamp(14.5px,1.7vw,16.5px);
}
/* One more screen of runway, for the title's own slot. */
.orbit-runway{ height:calc((var(--chapters,3) + 1) * 100svh); }
@supports not (height:100svh){
  .orbit-runway{ height:calc((var(--chapters,3) + 1) * 100vh); }
}
@media (max-width:880px){
  .orbit-title-in{ max-width:none; }
  .orbit-intro-in{ max-width:none; }
}

/* The title slide shows the section surface only — every chapter background
   is held off until its own chapter is active. */
.orbit-bg{ opacity:0; }
.orbit-bg.is-on{ opacity:.28; }

/* Featured Image guidance is in the admin; if a chapter has none, the stage
   simply stays on the section surface rather than showing a broken panel. */

/* ── Mobile: the stage must cover when browser chrome retracts ────
   The stage is 100svh — the SMALL viewport, measured with the URL bar
   showing. That is the right unit for the runway, because it keeps the
   scroll length stable while the bar slides in and out.

   It is the wrong unit for the stage. Once the bar retracts the visible
   area grows to the LARGE viewport, and a stage sized to svh no longer
   reaches the bottom — leaving a band of section background below the
   chapter. That band is what appears after the last chapter on a phone
   and never on desktop, where there is no retracting chrome.

   min-height at 100lvh makes the stage cover the largest the viewport can
   become, while height:100svh keeps its layout box stable. The chapter art
   fills the stage, so covering is all that is needed. */
@supports (height: 100lvh){
  .orbit-stage{ min-height:100lvh; }
  .orbit-bg{ min-height:100lvh; }
}
/* Older engines without lvh: a small overshoot beats a visible gap. */
@supports not (height: 100lvh){
  @media (max-width:880px){
    .orbit-stage{ min-height:calc(100svh + 90px); }
    .orbit-bg{ min-height:calc(100svh + 90px); }
  }
}