/* ───────────────────────────────────────────────────────────────────────────
   Toy Story in the Parks — a scroll-driven night-sky timeline.

   Built in the house "Nightfall" theme (deep indigo paper, candlelight cream
   ink, gold accents). No photography: the wow is a parallax starfield canvas,
   oversized editorial numerals, and a hand-built motif per era. Everything
   renders complete and readable with no JS and with reduced motion; the
   starfield and scroll choreography in toy-story-timeline.js are additive.

   Local z-index scale for this page:
     sky canvas .......... 0
     beat content ........ 1
     timeline rail ....... 5
   ─────────────────────────────────────────────────────────────────────────── */

.guide--toystory {
  --ts-edge: clamp(20px, 5vw, 96px);     /* horizontal breathing room */
  --ts-measure: 38rem;                   /* readable text column */
  --ts-gold-faint: oklch(84% 0.13 86 / 0.16);
  --ts-gold-line: oklch(84% 0.13 86 / 0.34);

  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: clip;
  scroll-margin-top: 72px;
}

/* The base .guide gives links a gold underline; the immersive area styles its
   own links, so neutralise it here and opt back in inside the coda. */
.guide--toystory a { border-bottom: 0; }

/* ── Starfield ──────────────────────────────────────────────────────────── */
.ts-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* A faint vertical lift so the sky is darkest at the horizon, brighter aloft. */
  background:
    radial-gradient(120% 70% at 50% 4%, oklch(31% 0.06 280 / 0.55), transparent 60%),
    radial-gradient(100% 60% at 50% 120%, oklch(20% 0.04 277 / 0.65), transparent 55%);
}

.ts-hero,
.ts-track,
.ts-coda { position: relative; z-index: 1; }

/* ── Timeline rail (desktop orientation device) ─────────────────────────── */
.ts-rail {
  position: fixed;
  left: clamp(14px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 3vh, 34px);
  padding: 10px 0;
}
.ts-rail-track {
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--hair);
  border-radius: 2px;
  overflow: hidden;
}
.ts-rail-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0%;
  background: linear-gradient(var(--gold), var(--gold-deep));
  border-radius: 2px;
}
.ts-rail-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.ts-rail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule);
  flex: none;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.ts-rail-yr {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ts-rail-node:hover .ts-rail-yr,
.ts-rail-node:focus-visible .ts-rail-yr { opacity: 1; transform: none; }
.ts-rail-node:hover,
.ts-rail-node:focus-visible { color: var(--ink); }
.ts-rail-node.is-active { color: var(--gold); }
.ts-rail-node.is-active .ts-rail-dot {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.15);
  box-shadow: 0 0 14px oklch(84% 0.13 86 / 0.5);
}
.ts-rail-node.is-active .ts-rail-yr { opacity: 1; transform: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ts-hero {
  min-height: 92svh;
  display: grid;
  align-items: center;
  padding: clamp(96px, 16vh, 180px) var(--ts-edge) clamp(48px, 9vh, 96px);
}
.ts-hero-inner { max-width: 46rem; }
/* These label/year rules are scoped to .guide--toystory so they outrank the
   site-wide `.guide p` rule (0,0,1,1); without the prefix every <p> here is
   flattened to 17px and loses its color and family. */
.guide--toystory .ts-kicker {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 var(--space-lg);
}
.ts-hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 8.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.ts-hero-title-2 { color: var(--gold); }
.guide--toystory .ts-hero-standfirst {
  font-family: var(--text);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: var(--space-lg) 0 0;
  text-wrap: pretty;
}
.ts-hero-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 5vh, 48px);
  color: var(--ink);
  font-family: var(--label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.ts-hero-cue:hover { color: var(--gold); }
.ts-hero-cue-arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ts-gold-line);
  border-radius: 50%;
  color: var(--gold);
  animation: ts-bob 2.4s ease-in-out infinite;
}
@keyframes ts-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* The "to infinity" arc, drawn on load. Sits behind the copy on wide screens. */
.ts-hero-arc {
  position: absolute;
  right: clamp(-40px, 2vw, 80px);
  top: 50%;
  transform: translateY(-46%);
  width: min(52vw, 640px);
  max-width: 640px;
  pointer-events: none;
  z-index: -1;
}
.ts-hero-arc svg { width: 100%; height: auto; overflow: visible; }
.ts-arc-path {
  fill: none;
  stroke: var(--ts-gold-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ts-draw 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
@keyframes ts-draw { to { stroke-dashoffset: 0; } }
.ts-arc-star { opacity: 0; animation: ts-pop 0.6s ease-out 1.7s forwards; transform-box: fill-box; transform-origin: center; }
@keyframes ts-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
.ts-arc-star-core { fill: var(--gold); }
.ts-arc-star-halo { fill: oklch(84% 0.13 86 / 0.18); }

/* ── The track of beats ─────────────────────────────────────────────────── */
.ts-beat {
  position: relative;
  padding: clamp(64px, 13vh, 128px) var(--ts-edge);
  scroll-margin-top: 72px;
}
.ts-beat-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* Oversized faint year, pure texture behind the column. */
.ts-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(160px, 42vw, 460px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: oklch(84% 0.13 86 / 0.05);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.guide--toystory .ts-place {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.ts-place-i { color: var(--gold-deep); font-variant-numeric: tabular-nums; }

.guide--toystory .ts-year {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(60px, 10vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: var(--space-sm) 0 0;
}
.ts-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--space-sm) 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.guide--toystory .ts-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-md) 0 0;
  padding: 6px 14px;
  border: 1px solid var(--ts-gold-line);
  border-radius: 999px;
  background: var(--ts-gold-faint);
  color: var(--gold);
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ts-marker::before {
  content: "✦";
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
}
.ts-body { margin-top: var(--space-lg); max-width: var(--ts-measure); }
.ts-body p {
  font-family: var(--text);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0 0 var(--space-md);
  text-wrap: pretty;
}
.ts-body p:last-child { margin-bottom: 0; }

/* ── Motif column ───────────────────────────────────────────────────────── */
.ts-motif {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
}
/* A faint pool of light grounds every motif on the starfield, so all five read
   with the same visual weight rather than some glowing and some floating bare. */
.ts-motif::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 80%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, oklch(50% 0.10 300 / 0.18), transparent 64%);
  z-index: 0;
  pointer-events: none;
}
.ts-art { position: relative; z-index: 1; width: min(100%, 380px); height: auto; overflow: visible; }

/* origin — a genesis star */
.ts-art--origin .ts-rays { stroke: var(--ts-gold-line); stroke-width: 2; stroke-linecap: round; transform-origin: 110px 110px; animation: ts-spin 60s linear infinite; }
.ts-art--origin .ts-rays line:nth-child(odd) { opacity: 0.5; }
.ts-art--origin .ts-orb { fill: var(--gold); filter: drop-shadow(0 0 16px oklch(84% 0.13 86 / 0.6)); animation: ts-twinkle 3.4s ease-in-out infinite; }
.ts-art--origin .ts-orb-halo { fill: oklch(84% 0.13 86 / 0.12); transform-box: fill-box; transform-origin: center; animation: ts-breathe 3.4s ease-in-out infinite; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@keyframes ts-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
@keyframes ts-breathe { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 0.85; } }

/* blaster — a targeting reticle that locks on */
.ts-art--blaster { filter: drop-shadow(0 0 14px oklch(84% 0.13 86 / 0.16)); }
.ts-art--blaster .ts-ret { fill: none; stroke: var(--ts-gold-line); stroke-width: 2.5; }
.ts-art--blaster .ts-ret-1 { stroke: oklch(84% 0.13 86 / 0.5); }
.ts-art--blaster .ts-ret-2 { stroke-dasharray: 4 10; animation: ts-spin 26s linear infinite; transform-origin: 110px 110px; }
.ts-art--blaster .ts-ret-tick { stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.ts-art--blaster .ts-target { fill: oklch(67% 0.205 8 / 0.5); stroke: var(--red); stroke-width: 2.5; transition: fill 0.35s ease, stroke 0.35s ease; animation: ts-twinkle 2.6s ease-in-out infinite; }
.ts-art--blaster .ts-target[data-i="1"] { animation-delay: 0.5s; }
.ts-art--blaster .ts-target[data-i="2"] { animation-delay: 1s; }
.ts-art--blaster .ts-target.is-hit { fill: var(--gold); stroke: var(--gold); animation: none; filter: drop-shadow(0 0 12px oklch(84% 0.13 86 / 0.8)); }
.ts-art--blaster .ts-cross { stroke: var(--ink); stroke-width: 2.5; opacity: 0.95; transform: translate(110px, 110px); }
.ts-art--blaster .ts-cross circle { fill: none; }

/* midway — a 3-D anaglyph star */
.ts-art--midway .ts-ana { stroke-width: 0; }
.ts-art--midway .ts-ana-cyan { fill: oklch(80% 0.12 200 / 0.85); animation: ts-ana-x 4.2s ease-in-out infinite; }
.ts-art--midway .ts-ana-red { fill: oklch(67% 0.2 22 / 0.85); animation: ts-ana-x 4.2s ease-in-out infinite reverse; }
.ts-art--midway .ts-ana-core { fill: var(--ink); }
@keyframes ts-ana-x { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

/* land — Slinky Dog Dash, a track that draws itself */
.ts-art--land .ts-track-base { fill: none; stroke: var(--hair); stroke-width: 4; stroke-linecap: round; }
.ts-art--land .ts-track-draw { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 1px 6px oklch(84% 0.13 86 / 0.35)); }
.ts-art--land .ts-track-car { fill: var(--gold); display: none; }

/* today — the open end of the line */
.ts-art--today .ts-now-line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ts-art--today .ts-now-line--open { stroke: var(--ts-gold-line); stroke-dasharray: 2 10; }
.ts-art--today .ts-now-dot { fill: var(--gold); filter: drop-shadow(0 0 14px oklch(84% 0.13 86 / 0.7)); }
.ts-art--today .ts-now-halo { fill: oklch(84% 0.13 86 / 0.12); animation: ts-breathe 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 150px 110px; }

/* ── Aimable reticle (1998): aim with the pointer, fire to pop targets ──── */
.ts-art--blaster[data-ts-aim] { cursor: crosshair; touch-action: none; }
.ts-aim-hit { fill: transparent; pointer-events: all; }
.ts-art--blaster .ts-cross,
.ts-art--blaster .ts-targets,
.ts-art--blaster .ts-fire { pointer-events: none; }
.ts-art--blaster .ts-target { transform-box: fill-box; transform-origin: center; }
.ts-art--blaster .ts-target.is-pop {
  fill: var(--gold); stroke: var(--gold);
  filter: drop-shadow(0 0 12px oklch(84% 0.13 86 / 0.85));
  animation: ts-pop-hit 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ts-pop-hit { 0% { transform: scale(1); } 35% { transform: scale(2); } 100% { transform: scale(1); } }
.ts-fire {
  fill: none; stroke: var(--gold); stroke-width: 2; r: 22;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.ts-fire.is-firing { animation: ts-muzzle 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ts-muzzle { 0% { opacity: 0.9; transform: scale(0.08); } 100% { opacity: 0; transform: scale(1); } }
.ts-aim-hint {
  display: block; margin-top: var(--space-md);
  font-family: var(--label); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep);
  transition: opacity 0.4s ease;
}
.ts-aim-hint[hidden] { display: none; }

/* ── 3-D glasses toggle (2008): flip the beat into red/cyan anaglyph ────── */
.ts-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ts-3d-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: var(--space-lg); padding: 9px 16px;
  border: 1px solid var(--ts-gold-line); border-radius: 999px;
  background: transparent; color: var(--gold);
  font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ts-3d-toggle[hidden] { display: none; }
.ts-3d-toggle:hover { background: var(--ts-gold-faint); }
.ts-3d-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ts-3d-toggle[aria-pressed="true"] { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.ts-3d-lens { position: relative; width: 28px; height: 13px; flex: none; }
.ts-3d-lens::before, .ts-3d-lens::after {
  content: ""; position: absolute; top: 0; width: 12px; height: 13px; border-radius: 3px;
}
.ts-3d-lens::before { left: 0; background: oklch(67% 0.2 22 / 0.9); }
.ts-3d-lens::after { right: 0; background: oklch(80% 0.12 200 / 0.9); }

.ts-beat--midway.is-3d .ts-year,
.ts-beat--midway.is-3d .ts-headline,
.ts-beat--midway.is-3d .ts-marker,
.ts-beat--midway.is-3d .ts-place,
.ts-beat--midway.is-3d .ts-body { filter: url(#ts-anaglyph); }
.ts-beat--midway.is-3d .ts-beat-text { animation: ts-3d-snap 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ts-3d-snap { 0% { transform: scale(0.985); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ts-target.is-pop, .ts-fire.is-firing, .ts-beat--midway.is-3d .ts-beat-text { animation: none; }
}

/* Where the land spread — a small inline mini-timeline (land beat only) */
.ts-spread {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 40px);
}
.ts-spread-stop { display: grid; gap: 2px; position: relative; }
.ts-spread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-bottom: 6px; box-shadow: 0 0 0 4px oklch(84% 0.13 86 / 0.14); }
.ts-spread-name { font-family: var(--text); font-weight: 600; font-size: 15px; color: var(--ink); }
.ts-spread-yr { font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }

/* ── Coda: plan + FAQ ───────────────────────────────────────────────────── */
.ts-coda {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) var(--ts-edge) clamp(64px, 12vh, 120px);
}
.ts-plan h2,
.ts-faq h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.guide--toystory .ts-plan-sub {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: var(--space-sm) 0 var(--space-xl);
  max-width: 52ch;
}
.ts-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
}
.ts-plan-link {
  display: grid;
  gap: 6px;
  padding: var(--space-lg);
  background: var(--paper);
  text-decoration: none;
  transition: background 0.25s ease;
}
.ts-plan-link:hover { background: var(--paper-2); }
.ts-plan-link-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ts-plan-arrow { transition: transform 0.25s ease; }
.ts-plan-link:hover .ts-plan-arrow { transform: translateX(4px); }
.ts-plan-link-d { font-family: var(--text); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.ts-faq { margin-top: clamp(48px, 8vh, 88px); }
.ts-faq-list { margin-top: var(--space-lg); border-top: 1px solid var(--hair); }
.ts-faq-item { border-bottom: 1px solid var(--hair); }
.ts-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg) 40px var(--space-lg) 0;
  position: relative;
  font-family: var(--text);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.ts-faq-item summary::-webkit-details-marker { display: none; }
.ts-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.3s ease;
}
.ts-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ts-faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.ts-faq-item p {
  margin: 0;
  padding: 0 0 var(--space-lg);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
}
.guide--toystory .ts-foot {
  margin-top: clamp(48px, 8vh, 80px);
  text-align: center;
  font-family: var(--label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ── Back to top: only where the timeline rail is hidden (under 1100px) ──── */
.ts-totop {
  position: fixed;
  left: clamp(14px, 4vw, 28px);
  bottom: clamp(14px, 4vw, 28px);
  z-index: 5;
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--ts-gold-line);
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.ts-totop:hover { background: var(--paper); transform: translateY(-2px); }
.ts-totop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1099px) {
  .ts-totop { display: grid; }
  /* JS tucks it away near the very top; with no JS it simply stays available. */
  .ts-totop.is-tucked { opacity: 0; transform: translateY(8px); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .ts-totop { transition: none; } }

/* ── Layout up at wide widths ───────────────────────────────────────────── */
@media (min-width: 900px) {
  .ts-beat { min-height: 100svh; display: flex; align-items: center; }
  .ts-beat-inner { width: 100%; grid-template-columns: 1.1fr 0.9fr; }
  /* Alternate which side the motif sits on, for rhythm. */
  .ts-beat:nth-of-type(even) .ts-beat-text { order: 2; }
  .ts-beat:nth-of-type(even) .ts-motif { order: 1; }
}
@media (min-width: 1100px) {
  .ts-rail { display: flex; }
}

/* On narrow screens the motif rides above the copy (order:-1), smaller, so the
   bespoke per-era art leads the beat instead of being buried below the text. */
@media (max-width: 899px) {
  .ts-motif { order: -1; min-height: 0; margin-bottom: var(--space-sm); }
  .ts-art { width: min(62%, 220px); }
  .ts-art--land { width: min(88%, 320px); }
  .ts-beat-inner { grid-template-columns: 1fr; }
}

/* ── Reduced motion: hold every loop on its resting frame ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .ts-arc-path { animation: none; stroke-dashoffset: 0; }
  .ts-arc-star { animation: none; opacity: 1; }
  .ts-hero-cue-arrow,
  .ts-art--origin .ts-rays,
  .ts-art--origin .ts-orb,
  .ts-art--origin .ts-orb-halo,
  .ts-art--blaster .ts-ret-2,
  .ts-art--blaster .ts-target,
  .ts-art--midway .ts-ana-cyan,
  .ts-art--midway .ts-ana-red,
  .ts-art--today .ts-now-halo { animation: none; }
  /* Keep the anaglyph offset visible (the 3-D read) even when static. */
  .ts-art--midway .ts-ana-cyan { transform: translateX(-3px); }
  .ts-art--midway .ts-ana-red { transform: translateX(3px); }
}