/* How it works: page-specific styles. Shared rooms, edges and sheets live in base.css. */

:root { --how-overlap: clamp(3rem, 8vw, 7rem); }

/* ---------- Hero art: drawn in the stroke the room provides ---------- */

.how-hero .a-line,
.how-hero .a-accent,
.how-hero .a-solid { fill: none; }
.how-hero .a-line { stroke: var(--art-stroke, var(--haze)); }
.how-hero .a-faint { stroke-width: 1.5; opacity: 0.35; }
.how-hero .a-accent { stroke: var(--art-accent, var(--brass-light)); }
.how-hero .a-solid { fill: var(--art-stroke, var(--haze)); }

/* ---------- The life of a ticket: timeline with a brass rail ---------- */

.lifecycle { padding-bottom: calc(var(--band) * 0.55 + var(--how-overlap)); }
.lifecycle > .wrap > .lede { margin-block: 1rem 3rem; }

.timeline {
  --p: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* The rail: a pale track and a brass fill that grows with the scroll. */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 1rem;
  width: 3px;
  margin-left: -1.5px;
}
.timeline::before { background: var(--empty); }
.timeline::after {
  background: var(--brass);
  transform-origin: top;
  transform: scaleY(var(--p));
}

.timeline li {
  position: relative;
  padding: 0 0 2.75rem 3.25rem;
}
.timeline li:last-child { padding-bottom: 0; }

.step h3 { position: relative; margin-bottom: 0.75rem; }
.step-no {
  position: absolute;
  left: -3.25rem;
  top: -0.15rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--brass);
  border-radius: 50%;
  background: var(--haze);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
}
/* Scroll-driven: markers light up once the rail reaches them. */
.timeline[data-live] .step-no { border-color: var(--empty); transition: background-color 0.2s, border-color 0.2s; }
.timeline[data-live] .is-reached .step-no { background: var(--brass); border-color: var(--brass); color: var(--house); }

.step p { max-width: 28rem; }
.step p + p { margin-top: 0.7rem; }
.tag {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.today { color: var(--muted); font-size: 1rem; }
.today .tag { color: var(--muted); font-weight: 700; }
.with { font-size: 1.15rem; font-weight: 500; }
.with .tag { color: var(--velvet); }

@media (min-width: 62rem) {
  .timeline::before,
  .timeline::after { left: 50%; }

  .timeline li {
    width: 50%;
    padding: 0 3.5rem 3rem 0;
  }
  .timeline li:nth-child(even) {
    margin-left: 50%;
    margin-top: -3rem;
    padding: 0 0 3rem 3.5rem;
  }
  .timeline li:last-child { padding-bottom: 0; }
  .step-no { left: auto; right: -4.5rem; }
  .timeline li:nth-child(even) .step-no { right: auto; left: -4.5rem; }
  /* Odd steps sit on the left; their text hugs the rail. */
  .timeline li:nth-child(odd) .step p,
  .timeline li:nth-child(odd) .step h3 { margin-left: auto; max-width: 28rem; }
}

/* ---------- Chart: the printed sheet that closes the timeline ---------- */

.chart {
  max-width: 50rem;
  margin-inline: auto;
  overflow-x: auto;
  color: var(--ink);
  --fg: var(--ink);
  --fg-muted: var(--muted);
}
.chart svg { display: block; width: 100%; min-width: 30rem; height: auto; }
.chart figcaption { margin-top: 0.75rem; color: var(--muted); }

/* ---------- Signals on velvet ---------- */

.signals { overflow: visible; }
.signals-grid { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 6vw, 5rem); }
.signal-list > div {
  padding-block: 1.1rem;
  border-top: 1.5px solid var(--brass-light);
}
.signal-list dt {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--haze);
}
.signal-list dd { max-width: 36rem; color: #D9C3C7; }

@media (min-width: 62rem) {
  .signals-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
  .signal-list > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: baseline; }
  .signal-list dt { margin: 0; }
}

/* ---------- What it won't do: statements in the dark house ---------- */

.wont { padding-top: calc(var(--band) + clamp(2rem, 6vw, 5rem)); }
.wont-grid { display: grid; gap: 2rem; }
.wont-list { margin-bottom: 2rem; max-width: 44rem; }
.wont-list li {
  padding-block: 1.25rem;
  border-top: 2px solid var(--brass-light);
  color: #D5D8EA;
}
.wont-list li:last-child { border-bottom: 2px solid var(--brass-light); }
.wont-head {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  line-height: 1;
  color: var(--haze);
  text-wrap: balance;
}
.wont-head:last-child { margin-bottom: 0; }
.wont .text-link:hover { text-decoration-color: var(--brass-light); }

@media (min-width: 62rem) {
  .wont-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}