/* /why/: "Proof I was right" (VOICE.md 8.12). Builds on home.css: same wall, floor, door, tiles and motion.
   The page itself is generated by scripts/build-why.py from Evidence.json. */

/* ---------- Hero: the post has come ---------- */
.whyhero { --fh: 96px; position: relative; overflow: hidden; background-color: var(--wall); background-image: repeating-linear-gradient(90deg, rgba(20,20,22,0.035) 0 28px, transparent 28px 56px); border-bottom: var(--line); }
.whyhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fh); background-color: var(--floor); background-image: repeating-linear-gradient(90deg, transparent 0 180px, rgba(20,20,22,0.18) 180px 183px); border-top: var(--line); }
.whyhero .skirt { position: absolute; left: 0; right: 0; bottom: var(--fh); height: 16px; background: var(--paper); border-top: var(--line); }
.whyhero > .wrap { position: relative; z-index: 1; }
.whyhero-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 48px; }
.whyhero-copy { flex: 1 1 400px; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 18px; padding: 24px 0 calc(var(--fh) + 48px); }
.whyhero h1 { font-size: clamp(50px, 7vw, 100px); line-height: 0.95; letter-spacing: -0.035em; max-width: 8ch; }
.whyhero h1 .w { display: inline-block; }

.stage { flex: 1 1 460px; min-width: 0; max-width: 620px; position: relative; aspect-ratio: 6 / 5; }
.stage > * { position: absolute; }
.stage .door { right: 3%; bottom: var(--fh); width: 30%; height: 72%; }
.stage .door .letter { left: 30%; right: 30%; top: 55%; height: 15%; background: var(--paper); border-width: 3px; border-radius: 3px; transform: rotate(7deg); transform-origin: 50% 0; }
.stage .mat { right: 0; bottom: 22px; width: 38%; height: 40px; font-size: 13px; }
.stage .pile { right: 7%; bottom: 58px; width: 24%; }
.stage .gary-spot { left: 0; right: auto; bottom: 22px; width: 58%; }
.stage .bubble { left: 8%; right: -12%; bottom: 82%; font-size: clamp(17px, 1.5vw, 20px); }
.stage .bubble::after { left: 30%; }
.smug { width: 100%; animation: sway 4s ease-in-out infinite; transform-origin: 50% 85%; }

/* ---------- The folder: a wall of clippings ---------- */
.folder { display: block; padding: 96px 0 104px; background-color: var(--wall); background-image: repeating-linear-gradient(90deg, rgba(20,20,22,0.035) 0 28px, transparent 28px 56px); }
.folder > .wrap { display: flex; flex-direction: column; gap: 56px; }
.folder-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.folder-head p { margin: 0; font-size: 19px; max-width: 40ch; color: var(--ink-2); }
.wall { columns: 3 300px; column-gap: 28px; padding-top: 12px; }
.wall .clip { break-inside: avoid; margin: 0 0 44px; }
.folder-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }

/* Load-in, as on the home page */
.js .whyhero h1 .w { animation: rise 600ms var(--spring) both; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .whyhero { --fh: 72px; }
  .whyhero-copy { padding: 8px 0 0; gap: 16px; }
  .stage { flex-basis: 100%; aspect-ratio: auto; height: 340px; }
  .stage .door { right: -4%; width: 34%; height: 64%; }
  .stage .mat { right: 2%; bottom: 14px; width: 42%; height: 34px; font-size: 12px; }
  .stage .pile { right: 8%; bottom: 44px; width: 30%; }
  .stage .gary-spot { left: -3%; bottom: 14px; width: 62%; }
  .stage .bubble { left: 30%; right: -46%; bottom: 84%; font-size: 17px; padding: 12px 16px; }
  .stage .bubble::after { left: 14%; }
  .folder { padding: 72px 0 80px; }
  .folder > .wrap { gap: 40px; }
  .wall .clip { margin-bottom: 40px; }
}