/* v5 — the site as a walk through a house. Prototype, 2026-09-20.
   Sits on top of site.css and uses its tokens verbatim. v3.2 paper first (2026-10-01):
   captions are washi panels with no border, labels lowercase sans, display at 500,
   the accent once per stop (the way forward).

   Two layouts share this file. The FLAT page is the default and is complete on its
   own: one section per stop, each a picture and a caption. `html.is-walk` is set by
   js/v5/walk.js only when the scene is actually running, and turns the same
   sections into tall scroll-spans with their captions pinned over the canvas. */

.walk{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:none}
.v5 main{position:relative;z-index:1}

/* ── a stop, flat ─────────────────────────────────────────────────────────── */
.stop{padding:clamp(40px,8vh,96px) var(--pad);border-bottom:1px solid var(--rule);
  display:grid;gap:clamp(20px,4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.stop--guide,.stop--ask{grid-template-columns:minmax(0,640px)}
.stop__media video{width:100%;max-height:74vh;object-fit:contain;background:var(--bg-alt)}
.stop__media--row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.stop__cap{background:var(--bg-alt);padding:24px 24px 26px}
.stop__k{font:500 11.5px/1 var(--body);letter-spacing:.06em;text-transform:lowercase;color:var(--chrome);
  display:flex;gap:12px;align-items:center;margin-bottom:16px}
.stop__n{font-family:var(--mono);font-weight:500;letter-spacing:.08em;color:var(--chrome)}
.stop__k .is-client{color:var(--fg)}
.stop__cap h2{font:var(--w-display) clamp(26px,3.1vw,42px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
.stop__disc{font:500 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--dim);margin-top:12px}
.stop__p{color:var(--dim);font-size:15px;line-height:1.55;margin-top:14px;max-width:46ch}
/* the one human line at the street: the serif voice */
.stop__chip{font:italic 400 16px/1.35 var(--voice);color:var(--fg);
  border-top:1px solid var(--rule);margin-top:18px;padding-top:14px}
.stop__cap .btn{margin-top:20px}
.stop__sign{display:flex;gap:14px;align-items:center;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--rule);font-size:13.5px;line-height:1.45;color:var(--dim)}
.stop__sign img{width:56px;height:56px;object-fit:cover}
.stop__sign b{color:var(--fg);font-weight:600}
.stop__next{display:none}

/* ── after the walk ───────────────────────────────────────────────────────── */
.tail{position:relative;z-index:4;background:var(--bg);border-top:1px solid var(--rule)}
.is-walk .stop:last-of-type{height:100vh;height:100dvh}

/* ── the plan ─────────────────────────────────────────────────────────────── */
/* A strip of rooms, one cell each, joined by hairlines — read top to bottom it is
   the house in plan. The dot is the visitor. Without the walk it is still a
   working list of anchors. */
.plan{position:fixed;z-index:3;right:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--bg)}
.plan a{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:34px;border-top:1px solid var(--rule);
  font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--chrome);transition:background var(--quick),color var(--quick)}
.plan a:first-child{border-top:0}
.plan a i{font-style:normal}
.plan a span{position:absolute;right:calc(100% + 10px);white-space:nowrap;
  font:500 11.5px/1 var(--body);letter-spacing:.06em;text-transform:lowercase;
  background:var(--bg-alt);padding:7px 9px;color:var(--fg);
  opacity:0;pointer-events:none;transition:opacity var(--quick)}
.plan a:hover span,.plan a:focus-visible span{opacity:1}
.plan a:hover{background:var(--panel);color:var(--fg)}
.plan a[aria-current]{background:var(--accent);color:var(--ink)}
.plan__dot{display:none;position:absolute;left:-5px;width:9px;height:9px;background:var(--teal);
  top:calc(var(--at,0) * (100% - 34px) + 17px);transform:translateY(-50%)}

/* ── the sound switch ─────────────────────────────────────────────────────── */
.sound{display:none;align-items:center;gap:9px;height:100%;padding:0 14px 0 0;
  font:500 11.5px/1 var(--body);letter-spacing:.06em;text-transform:lowercase;color:var(--chrome)}
.sound:hover{color:var(--fg)}
.sound[aria-pressed=true]{color:#0A7F72}   /* live teal as text on paper */
.sound__eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound__eq i{width:3px;height:3px;background:currentColor}
.sound[aria-pressed=true] .sound__eq i{animation:eq 484ms steps(4) infinite alternate}   /* one beat at 124 BPM */
.sound[aria-pressed=true] .sound__eq i:nth-child(2){animation-delay:-160ms}
.sound[aria-pressed=true] .sound__eq i:nth-child(3){animation-delay:-320ms}
@keyframes eq{to{height:12px}}

/* ── the walk ─────────────────────────────────────────────────────────────── */
.is-walk .walk{display:block}
.is-walk .sound{display:flex}
.is-walk .plan__dot{display:block}
.is-walk body{background:transparent}
.is-walk .stop{display:block;padding:0;border:0;height:150vh}
/* Hidden with opacity, never display:none — a video that is not rendered stops
   decoding, and the texture in the scene freezes on its first frame. */
.is-walk .stop__media{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.is-walk .stop__cap{position:fixed;z-index:2;left:var(--pad);bottom:calc(var(--bar) + 30px);
  width:min(400px,34vw);opacity:0;visibility:hidden;will-change:opacity,transform}
.is-walk .stop__next{display:block;font:500 11.5px/1 var(--body);letter-spacing:.06em;text-transform:lowercase;
  color:var(--accent-text);margin-top:20px}

.plan{transition:opacity var(--med)}
@media (min-width:900px){.plan.is-away{opacity:0;pointer-events:none}}

@media (max-width:899px){
  .stop{grid-template-columns:1fr}
  .plan{top:var(--bar);right:0;left:0;transform:none;flex-direction:row;border-width:0 0 1px}
  .plan a{flex:1;width:auto;height:32px;border-top:0;border-left:1px solid var(--rule)}
  .plan a:first-child{border-left:0}
  .plan a span{display:none}
  .plan__dot{left:calc(var(--at,0) * (100% - 100%/var(--n,6)) + 50%/var(--n,6));top:auto;bottom:-5px;transform:translateX(-50%)}
  .v5 main{padding-top:32px}
  .is-walk .v5 main,.is-walk main{padding-top:0}
  .is-walk .stop__cap{left:12px;right:12px;width:auto;bottom:calc(var(--bar) + 10px);padding:16px 16px 18px}
  .is-walk .stop__cap h2{font-size:clamp(22px,6.4vw,30px)}
  .is-walk .stop__p{font-size:14px;margin-top:10px}
  .is-walk .stop__k{margin-bottom:12px}
  .is-walk .stop__disc{margin-top:9px}
  .is-walk .stop__chip{margin-top:12px;padding-top:10px}
  .is-walk .stop__next{margin-top:14px}
  .is-walk .stop__sign{margin-top:14px;padding-top:12px}
  .is-walk .stop__cap .btn{margin-top:14px}
}