/* Story page. One authored moment: the world section, a pinned basin whose day goes down as you read.
   Without JS (or with reduced motion) the same markup reads as a night horizon followed by three stacked beats. */

.p-story .story-open-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
@media (min-width: 52rem) { .p-story .story-open-grid { grid-template-columns: 1.3fr 1fr; } }
.p-story .story-open .ph { max-width: 26rem; }
.p-story .story-scroll-hint { font-size: .95rem; margin-top: 2rem; display: none; } /* only true when the world is live */
.p-story .story-scroll-hint.is-on { display: block; }
.p-story .story-scroll-hint::before { content: ""; display: inline-block; width: 2.2rem; height: 2px; background: var(--copper); vertical-align: middle; margin-right: .7rem; }

/* ---- the world ---- */
.p-story.world {
  position: relative; background: var(--night); color: var(--bone);
  /* final state by default: night, sun down, stars out */
  --gold: 1; --nightp: 1; --sun-y: 1; --stars: 1; --glide: 0;
}
.p-story .world-sky { position: relative; height: 58vh; min-height: 380px; overflow: hidden; background: var(--sand); }
.p-story .sky { position: absolute; inset: 0; }
.p-story .sky-day { background: linear-gradient(180deg, var(--sand-deep) 0%, var(--bone) 70%, var(--bone) 100%); }
.p-story .sky-gold { background: linear-gradient(180deg, var(--rust) 0%, var(--copper) 45%, var(--sand) 92%); opacity: var(--gold); }
.p-story .sky-night { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 60%, #2a2328 100%); opacity: var(--nightp); }
.p-story .stars { position: absolute; inset: 0; width: 100%; height: 70%; color: var(--bone); opacity: var(--stars); }
.p-story .sun {
  position: absolute; left: 80%; top: calc(11% + var(--sun-y) * 84%);
  width: clamp(72px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--copper);
  background: color-mix(in srgb, var(--bone) calc((1 - var(--gold)) * 55%), var(--copper));
  box-shadow: 0 0 60px 20px color-mix(in srgb, var(--copper) 35%, transparent);
}
.p-story .world-ridges { position: absolute; inset: auto 0 0 0; height: 36%; min-height: 150px; pointer-events: none; overflow: hidden; }
.p-story .world-ridges svg { position: absolute; bottom: 0; left: 50%; width: 170%; min-width: 1400px; height: 100%; transform: translateX(-50%) translateY(calc(var(--glide) * var(--d) * -14%)); }
.p-story .world-ridges .ridge-far { --d: .4; fill: #2a1a12; fill: color-mix(in srgb, var(--rust) calc((1 - var(--nightp)) * 100%), #2a1a12); opacity: 1; }
.p-story .world-ridges .ridge-mid { --d: 1; fill: #3b2718; fill: color-mix(in srgb, var(--dune) calc((1 - var(--nightp)) * 100%), #3b2718); }
.p-story .world-ridges .ridge-near { --d: 0; fill: #4b3321; fill: color-mix(in srgb, var(--sand-deep) calc((1 - var(--nightp)) * 100%), #4b3321); }

/* beats: stacked by default */
.p-story .beats { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(4rem, 9vw, 7rem); }
.p-story .beat { max-width: 34rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.p-story .beat h3 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; font-stretch: 110%; letter-spacing: -.02em; margin-bottom: .45em; color: #fff; }
.p-story .beat p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; }
.p-story .beat p:last-child { margin-bottom: 0; }

/* beats: pinned world (JS adds .is-world when motion is allowed) */
.p-story.is-world { height: 100vh; height: 100svh; overflow: hidden; }
.p-story.is-world .world-sky { position: absolute; inset: 0; height: auto; min-height: 0; }
.p-story.is-world .world-ridges { height: 34%; min-height: 190px; }
.p-story.is-world .beats { position: absolute; inset: 0; padding: 0; max-width: none; }
.p-story.is-world .beat {
  position: absolute; left: 0; right: 0; top: clamp(5.5rem, 13vh, 9rem); margin: 0 auto;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.p-story.is-world .beat > * { max-width: 34rem; }
.p-story.is-world .beat-dust { color: var(--ink); }
.p-story.is-world .beat-dust h3 { color: var(--ink); }
.p-story.is-world .beat-shift, .p-story.is-world .beat-fuel { color: var(--bone); }
@media (min-width: 52rem) { .p-story.is-world .beat { top: 18vh; } .p-story .sun { left: 64%; } }
@media (max-height: 700px) { .p-story.is-world .beat h3 { font-size: 1.9rem; } .p-story.is-world .beat p { font-size: 1rem; } }

/* ---- after the world ---- */
.p-story.sober p { font-size: 1.15rem; }
.p-story.creed { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.p-story .creed-quote { margin: 0; border-left: 4px solid var(--copper); padding-left: clamp(1rem, 3vw, 2rem); max-width: 52rem; }
.p-story .creed-quote p { font-family: var(--display); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(2rem, 5.6vw, 4.4rem); max-width: none; margin-bottom: .6em; }
.p-story .creed-quote footer { color: var(--ink-soft); max-width: 36rem; }
.p-story.giving { overflow: hidden; padding-bottom: calc(max(46vh, 260px) + 2.5rem); }
.p-story .giving-list { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 34rem; }
.p-story .giving-list li { font-size: clamp(1.15rem, 2vw, 1.4rem); padding: .55em 0; border-top: 1px solid var(--sand-deep); }
.p-story .giving-list li:last-child { border-bottom: 1px solid var(--sand-deep); }

/* page-foot ridges: the shared parallax lifts each layer; extra height keeps the gap covered */
.p-story.giving .ridges svg { overflow: visible; } /* paths run to y=800: the fill continues below the box so the parallax lift never shows a gap */