/* Our Story — vertical chapter timeline (Eames / Figma).
   Loaded after site.css. Reuses site tokens. No inline styles (CSP style-src 'self').
   Chapters 1–6: scroll-drawn line overlay, then the published full-colour still
   (no cream / greyscale / sepia on the photograph). Unpublished drafts are omitted.
   A photo-less "To be continued" beat closes the rail while drafts remain. */

.story-timeline {
  --rail: var(--gold-rule); --rail-ink: var(--gold);
  --sketch-ink: #2c2414; --sketch-w: 1.85; --sketch-a: .62;
  --ease-draw: cubic-bezier(.45, .05, .25, 1);
  border-top: 1px solid var(--gold-rule);
}
.story-hero { text-align: center; padding: clamp(8px, 2vw, 16px) var(--gutter) clamp(32px, 5vw, 56px); max-width: 920px; margin: 0 auto; }
.story-kicker { margin-bottom: 0.8em; }
.story-kicker::before,
.story-kicker::after { content: '·'; color: var(--gold); margin: 0 0.45em; }
.story-title {
  font-family: var(--font-script); font-weight: 400; color: var(--gold-text);
  font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.05; margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.story-sub {
  font-family: var(--font-sc); font-weight: 600; letter-spacing: 0.1em;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--ink); margin: 0.7em 0 0;
}
.story-byline { font-style: italic; color: var(--ink-soft); font-size: 1.15rem; margin: 0.4em 0 0; }

.timeline { position: relative; max-width: 1080px; margin: 0 auto; padding: 24px var(--gutter) 8px; list-style: none; }
.timeline::before,
.timeline::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + 15px); width: 2px; background: var(--rail); }
.timeline::after { background: var(--rail-ink); transform-origin: top; transform: scaleY(var(--tp, 1)); }

.chapter { position: relative; display: grid; gap: 16px; padding: 0 0 clamp(56px, 9vw, 112px) 52px; }
.chapter-marker {
  position: absolute; left: 0; top: 4px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); border: 2px solid var(--rail);
  font-family: var(--font-sc); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--gold-text);
  transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.chapter.is-seen .chapter-marker { background: var(--gold-text); border-color: var(--gold-text); color: var(--paper-light); }
.chapter-text h2,
.chapter-text h3 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--gold-text); font-weight: 600; line-height: 1.15; margin: 0 0 0.25em; }
.chapter-head .chapter-when { margin-bottom: 0.2em; }
.chapter-when { font-family: var(--font-sc); font-weight: 600; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1em; }
.chapter-text p { font-size: 1.18rem; line-height: 1.6; margin: 0 0 0.75em; max-width: 60ch; }
.chapter-text .scripture { font-family: var(--font-sc); font-weight: 600; letter-spacing: 0.1em; color: var(--gold-text); }
.chapter-text .coda { font-family: var(--font-script); font-size: 1.9rem; color: var(--gold-text); line-height: 1.2; margin-top: 0.6em; }
/* Closing mark is the last item inside the rail. Copy sits after the <ol>, so
   the gold line ends at this dot and never runs through the title or verse. */
.chapter.is-continued-mark {
  padding: 0 0 8px 52px; min-height: 36px; display: block;
}
.story-continued {
  display: block; max-width: 1080px; margin: 0 auto; text-align: center;
  padding: 8px var(--gutter) clamp(40px, 7vw, 80px);
}
.story-continued .chapter-text { max-width: 36rem; margin-inline: auto; }
.chapter-text .story-continued-title,
h3.story-continued-title {
  font-family: var(--font-script); font-weight: 400; color: var(--gold-text);
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0;
}
.story-continued-verse {
  font-style: italic; color: var(--ink); margin: 0.55em 0 0.35em;
}

.chapter-figure { margin: 0; }
.chapter-figure figcaption { font-size: 0.95rem; color: var(--ink-soft); font-style: italic; margin-top: 8px; }

.photo-frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px;
  background: var(--paper-light); box-shadow: var(--shadow-card);
  outline: 1px solid var(--gold-rule); outline-offset: -1px;
}
.photo-frame.is-portrait { aspect-ratio: 3 / 4; max-width: 440px; margin-inline: auto; }
.photo-frame.is-square { aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; }
.photo-el, .photo-el img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame.is-real-photo .photo-el img { filter: none; object-position: center 20%; }
.photo-frame.is-portrait.is-real-photo .photo-el img { object-position: center 15%; }

/* RN monogram / coming-soon artwork already includes the gold rings — show the full square, no crop. */
.photo-frame.is-monogram,
.photo-frame.is-placeholder-img {
  aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto;
  background: transparent; box-shadow: none; outline: none; overflow: visible;
}
.photo-frame.is-monogram .photo-el,
.photo-frame.is-monogram .photo-el img,
.photo-frame.is-placeholder-img .photo-el,
.photo-frame.is-placeholder-img .photo-el img {
  position: static; width: 100%; height: auto; object-fit: contain; filter: none;
}

/* Scroll-sketch frame: same card as PR #11 (16px radius, gold hairline, soft shadow). */
.sketch {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px;
  background: var(--paper-light); box-shadow: var(--shadow-card);
  outline: 1px solid var(--gold-rule); outline-offset: -1px; view-timeline: --sketch block;
}
.sketch.is-portrait { aspect-ratio: 3 / 4; max-width: 440px; margin-inline: auto; }
.sketch.is-square { aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; }
.sketch-photo, .sketch-photo .photo-el, .sketch-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.sketch-photo img { filter: none; object-position: center 20%; }
.sketch.is-portrait .sketch-photo img { object-position: center 15%; }
.sketch.is-landscape .sketch-photo img { object-position: center 30%; }
.sketch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sketch-svg path {
  fill: none; stroke: var(--sketch-ink); stroke-width: var(--sketch-w);
  stroke-opacity: var(--sketch-a); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Resting / no-JS / reduced-motion / print: full-colour still, no half-drawn lines. */
.sketch-photo { opacity: 1; }
.sketch-svg { opacity: 0; mix-blend-mode: multiply; }
.l1 { --s: .10; --d: .22; } .l2 { --s: .15; --d: .21; } .l3 { --s: .20; --d: .20; }
.l4 { --s: .25; --d: .19; } .l5 { --s: .28; --d: .18; }

@media (prefers-reduced-motion: no-preference) {
  .chapter-text > * { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1); }
  .reveal .chapter:not(.is-seen) .chapter-text > * { opacity: 0; transform: translateY(14px); }

  @supports (animation-timeline: view()) {
    .draw-scrub:not(.js-progress) .sketch.is-ready .sketch-svg path { stroke-dasharray: 1 2; animation: sk-draw linear both; animation-timeline: --sketch; }
    .draw-scrub:not(.js-progress) .sketch.is-ready .l1 path { animation-range: cover 10% cover 32%; }
    .draw-scrub:not(.js-progress) .sketch.is-ready .l2 path { animation-range: cover 15% cover 36%; }
    .draw-scrub:not(.js-progress) .sketch.is-ready .l3 path { animation-range: cover 20% cover 40%; }
    .draw-scrub:not(.js-progress) .sketch.is-ready .l4 path { animation-range: cover 25% cover 44%; }
    .draw-scrub:not(.js-progress) .sketch.is-ready .l5 path { animation-range: cover 28% cover 46%; }
    /* Colour start/end are rewritten by story.js (animation-range + --colour-*). These
       spans are the fallback before that measure: the photo fades over 12% of the sketch's
       cover travel and the line overlay over the last 8%, ending together. */
    .draw-scrub:not(.js-progress) .sketch.is-ready .sketch-photo { animation: sk-fade linear both; animation-timeline: --sketch; animation-range: cover 46% cover 58%; }
    .draw-scrub:not(.js-progress) .sketch.is-ready .sketch-svg { animation: sk-settle linear both; animation-timeline: --sketch; animation-range: cover 50% cover 58%; }
    .draw-scrub:not(.js-progress) .timeline { view-timeline: --tl block; }
    .draw-scrub:not(.js-progress) .timeline::after { animation: tl-grow linear both; animation-timeline: --tl; }
  }
  .draw-scrub.js-progress .sketch.is-ready .sketch-svg path {
    stroke-dasharray: 1 2;
    stroke-dashoffset: clamp(0, calc(1.02 * (1 - (var(--p, 0) - var(--s)) / var(--d))), 1.02);
  }
  .draw-scrub.js-progress .sketch.is-ready .sketch-photo { opacity: clamp(0, calc((var(--p, 0) - var(--colour-start, .46)) / (var(--colour-end, .58) - var(--colour-start, .46))), 1); }
  .draw-scrub.js-progress .sketch.is-ready .sketch-svg { opacity: clamp(0, calc(1 - (var(--p, 0) - var(--ink-start, .50)) / (var(--colour-end, .58) - var(--ink-start, .50))), 1); }
  .draw-once .sketch.is-ready .sketch-svg path {
    stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
    transition: stroke-dashoffset 1.5s var(--ease-draw) calc((var(--s) - .10) * 4s);
  }
  .draw-once .sketch.is-ready .sketch-photo { opacity: 0; transition: opacity 1.1s ease calc(2.3s); }
  .draw-once .sketch.is-ready .sketch-svg { opacity: 1; transition: opacity 1s ease 2.9s; }
  .draw-once .is-drawn .sketch.is-ready .sketch-svg path { stroke-dashoffset: 0; }
  .draw-once .is-drawn .sketch.is-ready .sketch-photo { opacity: 1; }
  .draw-once .is-drawn .sketch.is-ready .sketch-svg { opacity: 0; }
}

@keyframes sk-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sk-settle { from { opacity: 1; } to { opacity: 0; } }
@keyframes tl-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Chapter 1 pair: Robert left of the rail, Natalie right, same frame, tops aligned.
   On a narrow phone the row wraps and Robert (first) stacks above Natalie. */
.chapter.is-pair .chapter-portraits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; min-width: 0;
}
.chapter.is-pair .chapter-portraits .chapter-figure { min-width: 0; margin: 0; }
.chapter.is-pair .sketch.is-portrait,
.chapter.is-pair .photo-frame.is-portrait { max-width: none; width: 100%; margin-inline: 0; }
@media (max-width: 339.98px) {
  .chapter.is-pair .chapter-portraits { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .timeline::before,
  .timeline::after { left: 50%; margin-left: -1px; }
  .chapter { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 96px; row-gap: 0; padding-left: 0; align-items: start; }
  .chapter-marker { left: 50%; margin-left: -18px; width: 36px; height: 36px; top: 0; }
  .chapter-figure { grid-column: 1; grid-row: 1 / span 2; }
  .chapter-head { grid-column: 2; grid-row: 1; }
  .chapter-body { grid-column: 2; grid-row: 2; }
  .chapter:nth-child(even) .chapter-figure { grid-column: 2; }
  .chapter:nth-child(even) .chapter-head,
  .chapter:nth-child(even) .chapter-body { grid-column: 1; }
  .chapter.is-pair { grid-template-rows: auto auto auto; row-gap: 28px; }
  /* The rail runs through the middle. Keep the heading on the paper so the line
     does not cut the title, and keep the story in the left column, clear of the rail. */
  .chapter.is-pair .chapter-marker { z-index: 2; }
  .chapter.is-pair .chapter-head {
    grid-column: 1 / -1; grid-row: 1; justify-self: center; width: fit-content; max-width: min(40rem, 100%);
    margin-top: 40px; padding: 0 14px; text-align: center; background: var(--paper); position: relative; z-index: 1;
  }
  .chapter.is-pair .chapter-portraits { grid-column: 1 / -1; grid-row: 2; column-gap: 96px; align-items: start; }
  .chapter.is-pair .chapter-portraits .chapter-figure,
  .chapter.is-pair:nth-child(even) .chapter-portraits .chapter-figure { grid-column: auto; grid-row: auto; }
  .chapter.is-pair .chapter-body { grid-column: 1; grid-row: 3; max-width: none; margin-inline: 0; }
  .chapter.is-pair:nth-child(even) .chapter-head,
  .chapter.is-pair:nth-child(even) .chapter-body { grid-column: 1 / -1; }
  .chapter.is-continued-mark { padding: 0; min-height: 40px; }
  .story-continued { display: block; padding: 12px var(--gutter) clamp(40px, 7vw, 80px); text-align: center; }
  .story-continued .chapter-text { margin-inline: auto; }
}

@media print {
  .timeline::after { display: none; }
  .sketch-svg { display: none; }
  .sketch-photo { opacity: 1; }
  .reveal .chapter .chapter-text > * { opacity: 1; transform: none; }
}