/* =========================================================
   AfterLife Ink: scroll-driven artist stories (artists.html)
   Beats --s1..--s4 come from stories.js. They default to 1, so without JS
   (or with motion turned off) every chapter simply shows in full.
   ========================================================= */
.stories { position: relative; }
.story { --s1: 1; --s3: 1; --s4: 1; --p: 0; position: relative; }
.acc-mag { --acc: var(--mag); --acc-rgb: 255, 43, 214; }
.acc-grn { --acc: var(--grn); --acc-rgb: 57, 255, 136; }

.story-pin {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-rows: auto 1fr; align-content: start;
  padding: 72px var(--gutter) 28px;
}
.story-pin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgba(var(--acc-rgb), calc(.16 * var(--s1))), transparent 70%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,.6));
}
.story-num {
  position: absolute; right: 2vw; top: 54px; z-index: 0; pointer-events: none;
  font: 400 min(46vw, 360px)/.8 var(--f-brush); color: rgba(var(--acc-rgb), .08);
  transform: translateY(calc(var(--p) * -16vh));
}

/* visual: portrait rising out of the ground, work flying in */
.story-visual { position: relative; z-index: 1; height: 42vh; min-height: 300px; display: grid; place-items: end center; overflow: hidden; }
.story-portrait { width: min(56vw, 250px); transform: translateY(calc((1 - var(--s1)) * 105%)); opacity: calc(1 - var(--s4) * .55); }
.story-portrait .artist { width: 100%; }
.story-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 2;
  background: linear-gradient(transparent, #060606 80%); }
.story-ground::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--acc-rgb), .8), transparent); box-shadow: 0 0 14px rgba(var(--acc-rgb), .8);
  opacity: var(--s1); }
.story-work { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sw {
  position: absolute; width: 42%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; pointer-events: auto;
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .75), 0 0 30px rgba(var(--acc-rgb), .35), 0 20px 40px rgba(0,0,0,.7);
  opacity: var(--s4);
}
.sw img { width: 100%; height: 100%; object-fit: cover; }
.sw-1 { left: 3%; bottom: 10%; transform: translateX(calc((1 - var(--s4)) * -130%)) rotate(calc(-10deg + var(--s4) * 5deg)); }
.sw-2 { right: 3%; bottom: 20%; transform: translateX(calc((1 - var(--s4)) * 130%)) rotate(calc(10deg - var(--s4) * 4deg)); }

/* text beats */
.story-text { position: relative; z-index: 4; padding-top: 12px; }
.story .eyebrow { color: var(--acc); text-shadow: 0 0 10px rgba(var(--acc-rgb), .5); opacity: var(--s1); }
.story-name {
  margin: 4px 0 10px; font: 400 clamp(52px, 15vw, 130px)/.9 var(--f-brush); text-transform: uppercase;
  opacity: var(--s1); transform: translateX(calc((1 - var(--s1)) * -50px));
}
.story-quote {
  margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--acc);
  font: italic 500 clamp(17px, 4.4vw, 28px)/1.4 Georgia, "Times New Roman", serif; color: #f1ecf4;
}
.story-quote .w { transition: opacity .25s; }
.story-bio { opacity: var(--s3); transform: translateY(calc((1 - var(--s3)) * 26px)); }
.story-bio p { margin: 0; color: #d6cfdc; font-size: 15px; line-height: 1.55; }
.story-bio .tags { margin: 12px 0; }
.story-cta { margin-top: 14px; opacity: var(--s4); transform: translateY(calc((1 - var(--s4)) * 20px)); }

/* chapter rail (desktop) */
.story-rail { display: none; }

/* live mode: tall chapters with a pinned stage */
.stories-live .story { height: 290vh; }
.stories-live .story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.stories-live .story-quote .w { opacity: .1; }

/* phones: keep it to one screen */
@media (max-width: 899px) {
  .story-bio p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  .story-bio .tags, .story-bio .facts { display: none; }
  .story-cta .btn { min-height: 44px; padding: 0 16px; font-size: 12px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .story-visual { height: 36vh; min-height: 230px; }
  .story-quote { font-size: 16px; }
  .story-bio p { -webkit-line-clamp: 3; }
}

/* desktop: side by side, chapters alternate sides, rail on the left */
@media (min-width: 900px) {
  .story-pin {
    grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; align-content: center;
    gap: 5vw; padding: 90px max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))) 40px max(120px, calc((100vw - 1240px) / 2 + 90px));
  }
  .story:nth-of-type(even) .story-visual { order: 2; }
  .story-visual { height: 74vh; min-height: 480px; }
  .story-portrait { width: min(27vw, 360px); opacity: 1; }
  .sw { width: 38%; }
  .sw-1 { left: -2%; bottom: 8%; }
  .sw-2 { right: -2%; bottom: 30%; }
  .story-text { padding-top: 0; max-width: 580px; }
  .story-name { font-size: clamp(80px, 8vw, 132px); }
  .story-bio p { font-size: 16px; }
  .story-rail {
    position: fixed; left: max(18px, calc((100vw - 1240px) / 2 - 40px)); top: 50%; z-index: 30; transform: translateY(-50%);
    display: grid; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .story-rail.show { opacity: 1; pointer-events: auto; }
  .story-rail a { display: grid; gap: 2px; font: 700 11px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #6f6878; transition: color .25s; }
  .story-rail a span { font: 900 10px/1 var(--f-head); color: #4b4652; }
  .story-rail a.on { color: var(--text); }
  .story-rail a.on span { color: var(--mag); text-shadow: 0 0 8px var(--mag); }
}

/* static mode (motion turned off): plain stacked chapters */
.stories-static .story-pin { padding-top: 40px; }

/* names glow in the artist accent on every screen size */
.story-name { color: var(--acc); text-shadow: 0 0 16px rgba(var(--acc-rgb), .6); }

/* phones: the same pinned scroll story as desktop, sized to one phone screen */
@media (max-width: 899px) {
  .stories-live .story { height: 220vh; }
  .stories-live .story-pin { padding: 64px var(--gutter) 92px; }  /* clear the header and the floating Book Now bar */
  .stories-live .story-visual { height: 50vh; height: 50svh; min-height: 0; perspective: 900px; }
  .story-portrait {
    width: min(74vw, 33svh); transform-origin: 50% 100%;
    transform: translateY(calc((1 - var(--s1)) * 105%)) rotateX(calc(var(--s4) * 28deg)) scale(calc(1 - var(--s4) * .1));
    opacity: calc(1 - var(--s4) * .4);
    filter: brightness(calc(1 - var(--s4) * .3));
  }
  .stories-static .story-portrait { width: min(80vw, 340px); }
  .sw { width: 44%; }
  .sw-1 { bottom: 6%; }
  .sw-2 { bottom: 16%; }
  .stories-live .story-name { font-size: clamp(46px, 13vw, 80px); margin-bottom: 6px; }
  .stories-live .story-quote { font-size: clamp(16px, 4.2vw, 22px); margin-bottom: 8px; }
  .stories-live .story-bio p { -webkit-line-clamp: 3; }
  .stories-live .story-cta { margin-top: 10px; }
}