/* ============================================================
   walk.css — the walk: the garden told as a story.
   Five chapters, one per lamp. Poster discipline: one concept
   per screen, big type, stillness between acts, typography as
   image. Hand-crafted, no frameworks. Complements garden.css;
   this page carries the PLACE's lamp (garden-wait) — the walk
   is about the garden's own light, so the garden lights it.
   ============================================================ */

.walk-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  border-top: 0;
}

.walk-hero h1 {
  font-size: clamp(3.5rem, 12vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0.25em 0 0.3em;
  font-weight: 700;
}

.walk-sub {
  max-width: 34em;
  font-size: 1.25rem;
  color: var(--paper-dim);
  margin-bottom: 2.5em;
}

.walk-sub em { color: var(--gold); font-style: normal; }

.walk-scroll {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--paper-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: walk-bob 2.6s ease-in-out infinite;
}

@keyframes walk-bob {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------- the chapter rail: five lamps + the afterlight ---------- */

.walk-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.walk-rail a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--paper-dim);
  border: 1px solid transparent;
  border-radius: 50%;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.walk-rail a:hover { color: var(--paper); }

.walk-rail a.on {
  color: var(--indigo);
  border-color: var(--indigo-dim);
  background: color-mix(in oklch, var(--indigo) 12%, transparent);
}

.walk-rail .rail-star { font-size: 0.95rem; }

/* ---------- chapters ---------- */

.walk-chapter {
  min-height: 92vh;
  display: flex;
  align-items: center;
  scroll-margin-top: 10vh;
}

.walk-grid { width: 100%; }

.walk-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 1.1em;
}

/* ---------- the marks wear the register's classes (Q49) ---------- */
/* One vocabulary for the whole walk: the hero's zero, the chapters'
   numerals, the afterlight's star, the ember's dot ARE the register's
   kinds — reg-zero, reg-num, reg-star, reg-dot — the same classes the
   register's own line and poster wear. The COLOR is the kind (the
   register's classes are the kinds' visible dimension, wherever the
   page wears them); the SIZE is the slot's structure, scoped to the
   sections that wear slots — the register's own poster line keeps its
   sentence scale, the zero its anchor. The old walk-num / walk-zero
   vocabulary is gone: structure and taxonomy no longer answer to
   different laws. (The hero's zero is still the zero of Q44 — the
   threshold's mark, indigo like the walk's meta, the count before
   counting, no numeral slot: the structural refusal survives the
   mark, now wearing the register's own class.) */
.walk-hero .reg-zero,
.walk-chapter .walk-meta .reg-num,
#ch-afterlight .walk-meta .reg-star,
.walk-ember .walk-meta .reg-dot {
  font-size: 1.35em;
}
.walk-hero .reg-zero { margin-right: 0.1em; }

.walk-meta .reg-zero, .walk-hero .reg-zero { color: var(--indigo); }
.walk-meta .reg-num  { color: var(--paper); }
.walk-meta .reg-star { color: var(--gold); }
.walk-meta .reg-dot  { color: var(--gold); }

.walk-chapter h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.7em;
  max-width: 22em;
}

.walk-line {
  max-width: 40em;
  color: var(--paper-dim);
  font-size: 1.06rem;
  margin: 0 0 2.2em;
}

.walk-plate {
  margin: 0 0 2.2em;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ink-2);
  overflow: hidden;
}

.walk-plate img,
.walk-plate canvas {
  display: block;
  width: 100%;
  height: auto;
}

.walk-plate canvas.heartbeat-live {
  aspect-ratio: 1280 / 480;
}

.walk-keep {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--paper-dim);
  margin: 0;
}

.walk-keep a {
  color: var(--paper);
  text-decoration-color: var(--gold);
}

.walk-keep a:hover { color: var(--gold); }

/* the afterlight reads like an ending: quieter, the gold close
   (its star wears the register's reg-star — the kind's own class) */
#ch-afterlight .walk-line { max-width: 34em; }

/* ---------- the ember: a seventh move that is NOT a chapter ---------- */
/* The walk ends by returning to the gate. The ember is the floor of the
   beat — the light that stays when the wake is over. Not a chapter: no
   numeral of its own (the dot is the floor, not a chapter mark), no
   rail entry, no lesson. The rail goes dark when the ember is in view:
   you arrive at it by finishing, never by navigating. */

.walk-ember {
  min-height: 70vh;
  display: flex;
  align-items: center;
  scroll-margin-top: 10vh;
  border-top: 0;
}

.walk-ember h2 {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.7em;
  max-width: 22em;
}

.walk-ember .walk-line { max-width: 34em; }

.walk-ember .walk-plate canvas.ember-live {
  aspect-ratio: 1280 / 320;
}

/* the keep: one thing worth keeping FOR THE ROAD — the gate, the return */
.walk-ember .walk-keep a {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* motion: the ember arrives with the chapters, quietly, last */
.walk-ember .walk-meta,
.walk-ember h2,
.walk-ember .walk-line,
.walk-ember .walk-score,
.walk-ember .walk-plate,
.walk-ember .walk-keep {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.walk-ember.seen .walk-meta,
.walk-ember.seen h2,
.walk-ember.seen .walk-line,
.walk-ember.seen .walk-score,
.walk-ember.seen .walk-plate,
.walk-ember.seen .walk-keep {
  opacity: 1;
  transform: translateY(0);
}

.walk-ember.seen .walk-meta  { transition-delay: 0.05s; }
.walk-ember.seen h2          { transition-delay: 0.15s; }
.walk-ember.seen .walk-line  { transition-delay: 0.25s; }
.walk-ember.seen .walk-score { transition-delay: 0.3s; opacity: 0.75; }
.walk-ember.seen .walk-plate { transition-delay: 0.35s; }
.walk-ember.seen .walk-keep  { transition-delay: 0.5s; }

/* ---------- the register: the walk's marks as ONE LINE (Q45) ---------- */
/* The taxonomy the walk has been building, written as a poster: the count
   before counting, the five counts, the star that ends the count, the
   no-number. The line is the walk's own model rendered — the zero indigo
   (the frame's own, like the walk's meta), the numerals paper (chapter
   clothes), the star and the dot gold (the afterlight's, the floor's).
   The navigable marks link to their sections; the zero and the dot carry
   no link — entered through, arrived at, never navigated to: the two
   refusals visible IN the line. */

.walk-register {
  min-height: 70vh;
  display: flex;
  align-items: center;
  border-top: 0;
}

.walk-register h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.7em;
  max-width: 22em;
}

.walk-register .walk-line { max-width: 40em; }

.walk-register .walk-meta { margin-bottom: 1.4em; }

/* the register's own poster line: the zero keeps the slot's scale —
   the count before counting, the line's anchor (its color is the
   kind's, from the page's single kind rules above) */
.walk-register .walk-meta .reg-zero { font-size: 1.35em; }

.reg-line {
  list-style: none;
  margin: 2.2em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
}

.reg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  min-width: 3.4em;
}

.reg-mark {
  font-family: var(--mono);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--paper);
  text-decoration: none;
}

.reg a.reg-mark:hover { color: var(--gold); }

.reg-kind {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.reg-zero .reg-mark { color: var(--indigo); }
.reg-star .reg-mark { color: var(--gold); }
.reg-dot  .reg-mark { color: var(--gold); }

/* the catalog on the map (the register of registers, 21:15): the same
   classes wear the same paints on the map — the taxonomy beside the
   taxonomy. The language lines name each surface's numeral language;
   the strong names them, the marks speak for the walk. */
.regs-lang {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  margin: 0 0 0.8em;
  max-width: 40em;
}
.regs-lang strong { color: var(--paper); }

/* the reverse reading (Q54): the same line walked backwards — the catalog's
   second line, the reverse walk's index. The caption speaks the direction
   in the language lines' own voice; the line itself wears the register's
   classes (the paints are the kinds', no second vocabulary). */
.regs-reverse-lede {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  margin: 1.6em 0 0;
  max-width: 40em;
}

@media (max-width: 720px) {
  .reg-line { gap: 0.6rem 1rem; }
}

/* the register arrives with the walk, last */
.walk-register .walk-meta,
.walk-register h2,
.walk-register .walk-line,
.walk-register .reg-line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.walk-register.seen .walk-meta,
.walk-register.seen h2,
.walk-register.seen .walk-line,
.walk-register.seen .reg-line {
  opacity: 1;
  transform: translateY(0);
}

.walk-register.seen .walk-meta  { transition-delay: 0.05s; }
.walk-register.seen h2          { transition-delay: 0.15s; }
.walk-register.seen .walk-line  { transition-delay: 0.25s; }
.walk-register.seen .reg-line   { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .walk-register .walk-meta,
  .walk-register h2,
  .walk-register .walk-line,
  .walk-register .reg-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- motion: chapters arrive quietly (stillness between acts) ---------- */

/* the score: each lamp's register of the night sound, in words */
.walk-score {
  font-size: 0.82em;
  letter-spacing: 0.02em;
  margin: -0.2em 0 1.2em;
  max-width: 42em;
}

.walk-chapter .walk-meta,
.walk-chapter h2,
.walk-chapter .walk-line,
.walk-chapter .walk-score,
.walk-chapter .walk-plate,
.walk-chapter .walk-keep {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.walk-chapter.seen .walk-meta,
.walk-chapter.seen h2,
.walk-chapter.seen .walk-line,
.walk-chapter.seen .walk-score,
.walk-chapter.seen .walk-plate,
.walk-chapter.seen .walk-keep {
  opacity: 1;
  transform: translateY(0);
}

.walk-chapter.seen .walk-meta  { transition-delay: 0.05s; }
.walk-chapter.seen h2          { transition-delay: 0.15s; }
.walk-chapter.seen .walk-line  { transition-delay: 0.25s; }
.walk-chapter.seen .walk-score { transition-delay: 0.3s; opacity: 0.75; }
.walk-chapter.seen .walk-plate { transition-delay: 0.35s; }
.walk-chapter.seen .walk-keep  { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .walk-chapter .walk-meta,
  .walk-chapter h2,
  .walk-chapter .walk-line,
  .walk-chapter .walk-score,
  .walk-chapter .walk-plate,
  .walk-chapter .walk-keep,
  .walk-ember .walk-meta,
  .walk-ember h2,
  .walk-ember .walk-line,
  .walk-ember .walk-score,
  .walk-ember .walk-plate,
  .walk-ember .walk-keep {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .walk-scroll { animation: none; }
}

@media (max-width: 720px) {
  .walk-rail { right: 8px; font-size: 0.7rem; }
  .walk-rail a { width: 26px; height: 26px; }
}