/* v7 (5 Nov 2026): the reel (04 · Who I am) and the pulse (05 · Where I might fit).
   Stacked by default so phones, reduced motion and no-JS all read as a clean list.
   v7.js adds .is-pinned on wide screens and the chapters stack on one stage. */

/* ---------- the reel ---------- */
.reel { position: relative; margin-top: 2.5rem; }
.reel_track { position: relative; }
.reel_ch {
  position: relative; display: grid; grid-template-columns: 1fr; background: #fff;
  border: 1px solid var(--hx-rule); margin-bottom: 1.5rem; overflow: hidden;
}

/* plate: the archive photo, treated as one family (grey, then ink and blue) */
.reel_plate { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hx-ink); }
.reel_plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(.96); transform: scale(1.02);
}
.reel_plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(51, 96, 255, .62) 0%, rgba(20, 40, 83, .78) 100%);
  mix-blend-mode: multiply;
}
.reel_plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 40, 83, 0) 55%, rgba(20, 40, 83, .55) 100%);
}
.reel_plate.is-doc img { filter: none; transform: none; object-fit: contain; background: #fff; padding: 6%; }
.reel_plate.is-doc::before, .reel_plate.is-doc::after { display: none; }
.reel_plate.is-doc { background: #fff; border-bottom: 1px solid var(--hx-rule); }

.reel_stamp {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hx-ink); background: #fff; border: 2px solid var(--hx-ink); padding: .4rem .6rem;
  transform: rotate(-3deg); transform-origin: center; box-shadow: 3px 3px 0 var(--hx-ink);
}
.reel_cap {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; max-width: calc(100% - 2rem);
  font-family: var(--font-mono); font-size: .72rem; color: #fff; letter-spacing: .02em;
  background: rgba(20, 40, 83, .82); padding: .35rem .55rem; border-left: 3px solid #FEC84B;
}
.reel_plate.is-doc .reel_cap { color: var(--hx-ink); background: #FFF4DB; }
.reel_ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem;
  font-family: var(--font-mono); font-size: .78rem; color: #fff; background: repeating-linear-gradient(135deg, #142853 0 14px, #1B3A8A 14px 28px);
}

/* text column */
.reel_text { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .9rem; }
.reel_meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem;
  font-family: var(--font-mono); font-size: .75rem; color: var(--fg-muted, #475467);
}
.reel_num { font-size: 2.75rem; line-height: 1; font-weight: 600; color: var(--hx-blue); letter-spacing: -.02em; }
.reel_num small { font-size: 1rem; color: var(--fg-muted, #475467); font-weight: 500; margin-left: .25rem; }
.reel_years { font-weight: 600; color: var(--hx-ink); }
.reel_text h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.02em; color: var(--hx-ink); margin: 0; }
.reel_body { margin: 0; color: var(--fg-default, #1D2939); font-size: 1rem; line-height: 1.6; max-width: 48ch; }
.reel_lesson { margin: 0; background: #FFF4DB; border: 1px solid var(--hx-rule); border-left: 4px solid #FEC84B; padding: .8rem 1rem; }
.reel_lesson-label { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hx-blue); margin-bottom: .25rem; }
.reel_lesson-text { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--hx-ink); }

/* the one habit, ticked three times per chapter */
.reel_habit { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }
.reel_tick {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--fg-muted, #475467);
  border: 1px solid var(--hx-rule); padding: .3rem .55rem; display: inline-flex; align-items: center; gap: .4rem;
  transition: color .25s, border-color .25s, background-color .25s;
}
.reel_tick::before { content: ""; width: .5rem; height: .5rem; border: 1px solid currentColor; border-radius: 1px; }
.reel_tick.is-on, .reel:not(.is-pinned) .reel_tick { color: var(--hx-ink); border-color: var(--hx-ink); background: #fff; }
.reel_tick.is-on::before, .reel:not(.is-pinned) .reel_tick::before { background: var(--hx-blue); border-color: var(--hx-blue); }

.reel_left { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .74rem; color: var(--hx-ink); text-decoration: none; margin-top: .1rem; }
.reel_left b { font-weight: 600; color: var(--hx-blue); }
.reel_left[href]:hover b { text-decoration: underline; }

/* rail (only in pinned mode) */
.reel_rail { display: none; }

/* ---------- pinned stage (wide screens, motion allowed) ---------- */
.reel.is-pinned .reel_track { height: calc(100vh - 4rem); min-height: 560px; max-height: 860px; border: 1px solid var(--hx-rule); background: #fff; }
.reel.is-pinned .reel_ch { position: absolute; inset: 0; margin: 0; border: 0; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); grid-template-rows: 100%; background: transparent; overflow: hidden; }
.reel.is-pinned .reel_text { background: #fff; }
.reel.is-pinned .reel_ch:not(.is-on) { pointer-events: none; }
.reel.is-pinned .reel_plate { aspect-ratio: auto; height: 100%; order: 2; }
/* bottom padding leaves room for the rail; min-height 0 and overflow hidden stop a long chapter stretching the stage */
.reel.is-pinned .reel_text { order: 1; padding: 1.75rem 2rem 4.25rem; justify-content: center; gap: .85rem; border-right: 1px solid var(--hx-rule); min-height: 0; overflow: hidden; }
.reel.is-pinned .reel_num { font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
.reel.is-pinned .reel_text h3 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.reel.is-pinned .reel_body { font-size: .98rem; line-height: 1.55; max-width: 52ch; }
.reel.is-pinned .reel_lesson { padding: .65rem .9rem; }
/* the rail covers the bottom 2.75rem of the plate, so the caption and receipt thumbnail sit above it */
.reel.is-pinned .reel_cap, .reel.is-pinned .reel_doc { bottom: 3.75rem; }
/* short laptop screens: trim the type so every chapter fits without scrolling inside the panel */
@media (max-height: 720px) {
  .reel.is-pinned .reel_text { padding: 1.25rem 1.75rem 3.75rem; gap: .6rem; }
  .reel.is-pinned .reel_num { font-size: 2.25rem; }
  .reel.is-pinned .reel_text h3 { font-size: 1.45rem; }
  .reel.is-pinned .reel_body { font-size: .9rem; line-height: 1.5; }
  .reel.is-pinned .reel_lesson-text { font-size: .95rem; }
  .reel.is-pinned .reel_lesson { padding: .5rem .8rem; }
}
.reel.is-pinned .reel_rail {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: .6rem .75rem; background: #fff; border-top: 1px solid var(--hx-rule);
}
.reel_rail-seg {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: .66rem; color: var(--fg-muted, #475467); letter-spacing: .03em;
}
.reel_rail-seg span { display: block; height: 3px; background: var(--hx-rule); margin-bottom: .35rem; position: relative; overflow: hidden; }
.reel_rail-seg span::after { content: ""; position: absolute; inset: 0; background: var(--hx-blue); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.reel_rail-seg.is-on { color: var(--hx-ink); font-weight: 600; }
.reel_rail-seg:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }

@media (max-width: 899px) { .reel.is-pinned .reel_ch { grid-template-columns: 1fr; } }
/* stacked list on anything wider than a phone (tablets, reduced motion, no JS): text beside plate */
@media (min-width: 640px) {
  .reel:not(.is-pinned) .reel_ch { grid-template-columns: 1fr 1fr; }
  .reel:not(.is-pinned) .reel_plate { aspect-ratio: auto; height: 100%; min-height: 360px; order: 2; }
}

/* ---------- the pulse ---------- */
.pulse { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-bottom: 3rem; }
.pulse_copy h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; color: var(--hx-ink); margin: 0 0 1rem; }
.pulse_copy h2 em { font-style: normal; color: var(--hx-blue); }
.pulse_lede { font-size: 1.05rem; line-height: 1.6; color: var(--fg-default, #1D2939); max-width: 52ch; margin: 0 0 1.25rem; }
.pulse_actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.pulse_stage { position: relative; width: min(100%, 520px); margin: 0 auto; aspect-ratio: 640 / 400; }
.pulse_still { width: 100%; height: 100%; display: block; }
/* the canvas sits over the static SVG and replaces it once the physics is running */
.pulse_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pulse_stage.has-canvas .pulse_still { display: none; }

@media (min-width: 900px) {
  .pulse { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
}

/* receipt thumbnail and placeholder chip on a plate */
.reel_doc {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--hx-ink); padding: .3rem .5rem .3rem .3rem; cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--hx-ink);
}
.reel_doc img { width: 120px; height: 40px; object-fit: cover; object-position: left center; border: 1px solid var(--hx-rule); display: block; }
.reel_doc:hover { background: var(--hx-blush); }
.reel_ph-chip {
  position: absolute; right: 1rem; top: 4.2rem; z-index: 2; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em;
  color: #fff; border: 1px dashed rgba(255, 255, 255, .7); padding: .3rem .5rem; background: rgba(20, 40, 83, .5);
}