/* How a Page works (spec 37 · Decision 2026-10-05). The page is built from the
   homepage's sections (public-site-v6-home.css, scope .v6h); this file adds only
   what Home does not have: the longer story, the first move's colour, the
   address anatomy, the state columns and the next-step links. */
.v6h .loop.is-long { height: 800vh; }
.v6h .pl.is-sky { background: var(--sky); }
/* The inline links in a card footer are phone tap targets (44px), not 12px text. */
.v6how .pl .dp a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.v6how .pl p a { text-decoration: underline; }

.v6how .how-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.v6how .how-head > div { display: flex; flex-direction: column; gap: 16px; }
.v6how #address, .v6how #state { padding-bottom: 0; }

.v6how .how-addr { display: flex; flex-wrap: wrap; align-items: flex-end; font: 400 clamp(1.05rem, 2.6vw, 2.2rem)/1.2 var(--mono); letter-spacing: -.02em; background: var(--paper); border-radius: 14px; box-shadow: 0 0 0 1px var(--hair); padding: clamp(20px, 3vw, 36px); overflow-wrap: anywhere; }
.v6how .how-addr span { display: flex; flex-direction: column; gap: 10px; }
.v6how .how-addr small { font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 4px 8px; border-radius: 4px; align-self: flex-start; }
.v6how .how-col i.is-stone { background: var(--stone); }
.v6how .pl .how-cmd { font: .78rem/1.5 var(--mono); background: rgba(17, 18, 20, .08); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; max-width: none; color: var(--ink); }
.v6how .how-addr .is-lime, .v6how .how-col i.is-lime { background: var(--lime); }
.v6how .how-addr .is-violet, .v6how .how-col i.is-violet { background: var(--violet); }
.v6how .how-addr .is-amber, .v6how .how-col i.is-amber { background: var(--amber); }

.v6how .how-state { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; align-items: start; }
.v6how .how-col { border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.v6how .how-col[data-state="shipped"] { grid-column: span 2; }
.v6how .how-col[data-state="shipped"] ul { columns: 2; column-gap: 28px; }
.v6how .how-col .eb { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.v6how .how-col i { width: 10px; height: 10px; border-radius: 50%; }
.v6how .how-col ul { margin: 0; padding: 0; list-style: none; }
.v6how .how-col li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: .95rem; padding: 4px 0; break-inside: avoid; }
.v6how .how-col li::before { content: "→"; font: .8rem var(--mono); color: var(--at); padding-top: 3px; }
.v6how .how-col p { margin: 0; font-size: .875rem; color: var(--stone); }

.v6how .how-next { max-width: 1360px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0 var(--px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.v6how .how-next a { min-height: 44px; border-radius: 12px; padding: 20px; background: var(--bone); box-shadow: inset 0 0 0 1px var(--hair); display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.v6how .how-next b { font: 500 1.2rem var(--d); letter-spacing: -.02em; }
.v6how .how-next span { font-size: .875rem; color: var(--stone); }
.v6how .how-next u { margin-top: auto; text-decoration: none; font: .8rem var(--mono); color: var(--at); }

@media (max-width: 900px) {
  .v6h .loop.is-long { height: 560vh; }
  .v6how .how-col[data-state="shipped"] { grid-column: auto; }
  .v6how .how-col[data-state="shipped"] ul { columns: 1; }
}
.v6how .pl:not(.end) .mono { color: inherit; }
.v6h .pl.is-cyan { background: var(--cyan); }
.v6how .pl.end .b2 + .b2 { margin-top: -4px; }

/* Reduced motion: the longer story flattens too (see public-site-v6-home.css). */
@media (prefers-reduced-motion: reduce) {
  .v6h .loop.is-long { height: auto; }
}