.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: var(--forest-950);
  background: var(--gold-400);
}
.button-secondary {
  border-color: var(--line);
  background: rgba(255,255,255,.02);
}
.card {
  position: relative;
  min-height: 250px;
  padding: 1.6rem;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.card-index {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--gold-400);
  font-size: .72rem;
  letter-spacing: .14em;
}
.card p:last-child { margin-bottom: 0; color: var(--stone-300); }

.living-connector {
  --progress: 0;
  --arrival: 0;
  position: relative;
  z-index: 8;
  width: 100%;
  height: clamp(90px, 10vw, 130px);
  overflow: hidden;
  pointer-events: none;
}

.living-connector--reflective { height: clamp(112px, 13vw, 160px); }
.living-connector--compact { height: clamp(70px, 8vw, 92px); }
.living-connector--chapter { height: clamp(140px, 16vw, 190px); }
.living-connector--quiet { opacity: .62; }

.living-track {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(520px, 88vw);
  transform: translateX(-50%);
}

.living-line {
  position: absolute;
  left: 50%;
  width: 1px;
  background: rgba(214, 161, 75, .09);
  transform: translateX(-50%);
}

.living-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--progress) * 100%);
  background: linear-gradient(to bottom, rgba(226, 185, 111, .12), var(--gold-400), var(--gold-500));
  box-shadow: 0 0 12px rgba(214, 161, 75, .12);
}

.living-line--before { top: 0; height: 50%; }
.living-line--after { top: 50%; bottom: 0; }
.living-line--full { top: 0; bottom: 0; }

.living-pulse {
  position: absolute;
  left: 50%;
  top: calc(var(--progress) * 100%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 9px rgba(226, 185, 111, .78), 0 0 24px rgba(214, 161, 75, .22);
  opacity: clamp(0, calc(var(--progress) * 5), 1);
  transform: translate(-50%, -50%);
}

.living-bridge {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(310px, 38vw);
  height: 64%;
  border-top: 1px solid var(--gold-500);
  border-radius: 50% 50% 0 0;
  opacity: calc(.12 + var(--progress) * .52);
  filter: drop-shadow(0 0 calc(var(--arrival) * 8px) rgba(214, 161, 75, .24));
  transform: translateX(-50%) scaleX(calc(.12 + var(--progress) * .88));
  transform-origin: center;
}

.living-connector--chapter .living-bridge { width: min(378px, 46vw); }

.living-bridge::after {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 22%;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 184, .72), transparent);
  opacity: calc(var(--arrival) * .65);
  transform: translateX(calc(var(--progress) * 360%));
}

.living-node {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--forest-950);
  box-shadow: inset 0 0 0 2px var(--forest-950), 0 0 calc(var(--arrival) * 20px) rgba(214, 161, 75, .28);
  transform: translate(-50%, -50%) scale(calc(.9 + var(--arrival) * .16));
}

.living-node--left { left: calc(50% - min(155px, 19vw)); }
.living-node--right { left: calc(50% + min(155px, 19vw)); }
.living-connector--chapter .living-node--left { left: calc(50% - min(189px, 23vw)); }
.living-connector--chapter .living-node--right { left: calc(50% + min(189px, 23vw)); }
.living-node--centre { left: 50%; }
.living-connector.is-arrived .living-node { background: var(--gold-400); }

@media (max-width: 620px) {
  .living-connector--reflective { height: 96px; }
  .living-connector--compact { height: 62px; }
  .living-connector--chapter { height: 120px; }
  .living-bridge { width: min(240px, 64vw); }
  .living-connector--chapter .living-bridge { width: min(296px, 72vw); }
  .living-node--left { left: calc(50% - min(120px, 32vw)); }
  .living-node--right { left: calc(50% + min(120px, 32vw)); }
  .living-connector--chapter .living-node--left { left: calc(50% - min(148px, 36vw)); }
  .living-connector--chapter .living-node--right { left: calc(50% + min(148px, 36vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .living-connector { --progress: 1 !important; --arrival: 0 !important; }
  .living-pulse { display: none; }
}