/* ─────────────────────────────────────────
   SECTION — OUR STORY (story.html)
   Two layers on the same content:
   1. The list (.story-list): the real HTML. Shown as-is with JS off or
      reduced motion: taped photos and short texts, top to bottom.
   2. The timeline (.story.is-timeline): js/story-timeline.js builds a sticky
      stage on top of the list: photo above, a horizontal ruler with a fixed
      centre marker, the milestone's text below. Scrolling moves the ruler one
      milestone per screen. Milestones are evenly spaced; years are labels only.
   Text styles live in foundations/text-styles.css; this file sets layout + colour.
───────────────────────────────────────── */

.story { background: var(--bg); }  /* white */

/* ── 1. The list ───────────────────────────────── */

.story-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: grid;
  gap: 72px;
}

.story-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* the photo, taped in like the welcome photo on the home page */
.story-photo {
  position: relative;
  margin: 0 0 32px;
  width: min(100%, 420px);
  border: 8px solid var(--border);
  transform: rotate(-1.5deg);
}

.story-item:nth-child(even) .story-photo { transform: rotate(1.5deg); }

.story-photo::before {           /* the tape */
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  width: 96px;
  height: 36px;
  transform: translateX(-50%) rotate(-5deg);
  background: url('../../assets/images/Tape.png') center / contain no-repeat;
  z-index: 1;
}

.story-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.story-date {
  color: var(--text-muted);
}

.story-place { white-space: nowrap; }

.story-title {
  margin-top: 8px;
  color: var(--text-primary);
}

.story-text {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--text-secondary);
}


/* ── 2. The timeline (added by js/story-timeline.js) ── */

/* the page snaps to each milestone, so a scroll always comes to rest on a
   date: firmly on desktop (like the rest of the site), gently on touch */
html:has(.story.is-timeline) { scroll-snap-type: y proximity; }
@media (min-width: 1025px) {
  html:has(.story.is-timeline) { scroll-snap-type: y mandatory; }
}

/* the snap points (added by the JS): milestone i is i screens into the section */
.story-snap {
  position: absolute;
  left: 0;
  top: calc(var(--i) * 100svh);
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
}

.story.is-timeline {
  display: block;
  padding: 0;
  min-height: 0;
  height: calc(var(--story-n, 13) * 100svh);
  position: relative;
}

/* the list stays for screen readers and search, but is not shown */
.story.is-timeline > .container {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);   /* header · ruler · milestone */
  gap: clamp(16px, 3svh, 32px);
  padding: clamp(80px, 10svh, 96px) 0 clamp(24px, 5svh, 56px);
  overflow: hidden;
  background: var(--bg);        /* sticky makes its own layer: the texture must multiply onto ivory here */
}

/* texture.css gives the stage the paper texture (it never scrolls);
   the tall section itself has none, or it would slide behind the stage */
.story.is-timeline::before { content: none; }
.story-stage > * { position: relative; z-index: 2; }

/* ── the quiet header: small and centred on ivory. On desktop it sits inside
   the stage, so the first screen shows header + ruler + milestone at once;
   on phones it sits above the timeline and scrolls away first. ── */
.story-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--bg);
  position: relative;
  padding: 104px 20px 8px;      /* clears the fixed nav */
}

.story-header > * { position: relative; z-index: 2; }   /* above the texture */

.story-stage .story-header { padding: 0 48px; background: none; }

.story-header-eyebrow {
  color: var(--text-muted);
  text-align: center;
  padding-inline-start: var(--tracking-caps);   /* optical centring of tracked caps */
}

.story-header-title { color: var(--text-primary); }

/* ── the milestone: photo left, text right ── */
.story-stage-body {
  min-height: 0;
  width: 100%;
  max-width: 1300px;            /* same as .container (layout.css) */
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* photo (or, without one, the place in handwriting) */
.story-stage-photo {
  min-height: 0;
  height: 100%;
  max-height: 460px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;            /* room for the tape */
  transition: opacity 180ms var(--ease);   /* = FADE in js/story-timeline.js */
}

.story-stage-photo .story-photo {
  margin: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.story-stage-photo .story-photo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* a milestone without a photo: just its text, centred on the stage */
.story-stage-body.is-text-only {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.story-stage-body.is-text-only .story-stage-photo { display: none; }

.story-stage-body.is-text-only .story-stage-text {
  align-items: center;
  text-align: center;
}

.story-stage-body.is-text-only .story-stage-text > * { text-align: center; }   /* typography.css sets p left */

/* the ruler */
.story-ruler {
  --tick-gap: 220px;
  position: relative;
  width: 100%;
  height: 116px;
  overflow: hidden;
  touch-action: pan-y;          /* sideways drags are ours, vertical scroll is the page's */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* fade the ruler out at both edges */
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.story-ruler.is-dragging { cursor: grabbing; }

.story-ruler:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: -2px;
  mask-image: none;
  -webkit-mask-image: none;
}

/* the track moves; tick i sits at i × --tick-gap */
.story-ruler-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: calc((var(--story-n, 13) - 1) * var(--tick-gap));
  transform: translateX(calc(var(--story-pos, 0) * var(--tick-gap) * -1));
  transition: transform 450ms var(--ease);   /* glides to the next milestone */
  will-change: transform;                    /* own layer: the glide never repaints the ruler */
}

.story-ruler.is-dragging .story-ruler-track { transition: none; }

/* the baseline + small ticks between milestones */
.story-ruler-track::before {
  content: '';
  position: absolute;
  left: -50vw;
  right: -50vw;
  top: 72px;
  height: 10px;
  border-top: 1px solid var(--hairline);
  background: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px calc(var(--tick-gap) / 6));
  background-position: 50vw 0;
}

.story-tick {
  position: absolute;
  top: 0;
  left: calc(var(--i) * var(--tick-gap));
  width: calc(var(--tick-gap) - 24px);
  height: 100%;
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: 64px 24px auto;
  justify-items: center;
  align-items: end;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 300ms var(--ease), color 300ms var(--ease);
}

.story-tick::after {            /* the milestone's own tick, taller than the small ones */
  content: '';
  grid-row: 2;
  width: 1px;
  height: 18px;
  align-self: start;
  margin-top: 8px;
  background: currentColor;
}

.story-tick-label {
  grid-row: 1;
  white-space: nowrap;          /* short labels (data-short), one line each */
  margin-bottom: 30px;          /* room for the marker's flower */
}

.story-tick-year {
  grid-row: 3;
  align-self: start;
  margin-top: 6px;
}

.story-tick.is-active,
.story-tick:hover {
  opacity: 1;
  color: var(--text-primary);
}

.story-tick:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: 2px;
  opacity: 1;
}

/* the fixed centre marker: a clay line with the flower on top */
.story-marker {
  position: absolute;
  left: 50%;
  top: 64px;
  width: 2px;
  height: 34px;
  transform: translateX(-50%);
  background: var(--border);
  pointer-events: none;
}

.story-marker img {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 22px;
  max-width: none;              /* the marker is only 2px wide */
  height: 22px;
  transform: translate(-50%, -3px);
}

/* the active milestone's text */
.story-stage-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 56ch;
  transition: opacity 180ms var(--ease);   /* = FADE in js/story-timeline.js */
}

.story-stage-text .story-title { margin-top: 8px; }
.story-stage-text .story-text { margin-top: 12px; }

.story-stage.is-changing .story-stage-photo,
.story-stage.is-changing .story-stage-text { opacity: 0; }


/* ── The ending: where the story is heading ── */

.story-ending {
  background: var(--inverse);
  color: var(--on-inverse);
}

.story-ending-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story-ending-inner p { text-align: center; }   /* typography.css sets p left */

.story-ending-date {
  color: var(--on-inverse-muted);
  padding-inline-start: var(--tracking-caps);
}

.story-ending-title {
  margin-top: 16px;
  color: var(--on-inverse);
}

.story-ending-text {
  margin-top: 20px;
  color: var(--on-inverse-muted);
}

.story-ending-count {
  margin-top: 40px;
  display: flex;
  align-items: baseline;
  gap: 0.35em;
}

.story-ending-num {
  font-variant-numeric: tabular-nums;
}

.story-ending-label { color: var(--cream-200); }

.story-ending-btn {
  margin-top: 40px;
  align-self: center;
}

.story-ending-btn.is-soon { opacity: 0.6; }


/* responsive — tablet */
@media (max-width: 1024px) {
  .story-ruler { --tick-gap: 190px; }
  .story-stage-body { padding: 0 32px; }
}


/* responsive — mobile: header scrolls away first; ruler, then photo above text */
@media (max-width: 640px) {
  .story-list { gap: 56px; }

  .story-stage {
    grid-template-rows: auto minmax(0, 1fr);
    padding: 120px 0 20px;
    gap: 14px;
  }

  .story-ruler {
    --tick-gap: 150px;
    height: 96px;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .story-tick { grid-template-rows: 50px 22px auto; }
  .story-tick-label { margin-bottom: 24px; }
  .story-marker img { width: 18px; height: 18px; }
  .story-ruler-track::before { top: 58px; }
  .story-marker { top: 50px; height: 30px; }

  .story-stage-body {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .story-stage-photo { flex: 1 1 0; height: auto; justify-content: center; }
  .story-stage-text { flex: 1 1 0 var(--story-text-h, auto); justify-content: center; }
  .story-stage-body.is-text-only { justify-content: center; }
  .story-stage-body.is-text-only .story-stage-text { flex: 0 0 auto; }

  .story-ending-btn { width: auto; }
}