/* REQWRECK "fx": the playful pieces around the core page.
   1 Days Without a Hire board · 2 Wrecking Yard · 3+4 aging posting and the nervous wreck · 5 detonators ·
   8 skyline · 9 cracking metro tiles · 10 404 · 11 "WRECK" easter egg · 12 hard-hat sign.
   Everything here is decoration: with prefers-reduced-motion it rests in a still, readable state. */

/* ---------------------------------------------------------------- 1. Days Without a Hire */
.board { margin: 52px auto 0; max-width: 620px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink);
  box-shadow: 10px 10px 0 var(--yellow); text-align: center; }
.board-top { background: var(--yellow); border-bottom: 4px solid var(--ink); padding: 10px 14px; font-family: var(--display);
  text-transform: uppercase; font-size: 20px; letter-spacing: .06em; }
.board-body { padding: 22px 20px 18px; }
.board-line { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 3vw, 30px); line-height: 1.1; }
.flips { display: inline-flex; gap: 8px; margin: 14px 0; perspective: 400px; }
.flip { position: relative; width: 74px; height: 96px; background: var(--ink); color: var(--paper); border-radius: 6px;
  font-family: var(--display); font-size: 78px; line-height: 96px; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .08); }
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .55); }
.flip.go { animation: flip .5s cubic-bezier(.3, 0, .3, 1); }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
.board-job { margin: 14px 0 0; font-weight: 700; font-size: 17px; min-height: 1.4em; }
.board-job span { color: var(--muted); font-weight: 500; }
.board-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- 3 + 4. How a req turns into a wreck (scroll scene) */
.scene { position: relative; height: 260vh; background: var(--paper); }
.scene-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.scene-grid { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr; gap: 40px; align-items: center; }
.scene-day { margin: 6px 0 10px; font-size: clamp(52px, 6.4vw, 96px); line-height: .9; white-space: nowrap; }
.scene-day b { font-weight: 400; display: inline-block; min-width: 2ch; }
.scene-cap { font-size: 18px; min-height: 3.2em; max-width: 26ch; }
.scene.s30 .scene-day { color: #C8102E; }
.scene-final { font-size: clamp(22px, 2.4vw, 32px); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; margin-top: 8px; }
.scene.s47 .scene-final { opacity: 1; transform: none; }
.scene .hl-red { background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); }

.aging { position: relative; aspect-ratio: 4 / 5; max-width: 330px; justify-self: center; width: 100%;
  background: color-mix(in srgb, #E9D7A6 calc(var(--age, 0) * 100%), #FFFFFF); border: 2px solid var(--ink); padding: 22px;
  box-shadow: 8px 8px 0 var(--ink); transform: rotate(-2deg); transition: background .2s; }
.aging .hw { margin: 8px 0 8px; font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 3.4vw, 46px); line-height: .95; color: #C8102E;
  border-bottom: 3px solid #C8102E; padding-bottom: 8px; filter: saturate(calc(1 - var(--age, 0) * .55)); }
.aging .tag { display: inline-block; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 5px 7px; margin: 0; }
.aging .meta { font-size: 13px; color: #6B6455; margin: 0 0 12px; }
.aging .lines i { display: block; height: 8px; border-radius: 2px; margin: 0 0 8px; background: color-mix(in srgb, #CDBF9A calc(var(--age, 0) * 100%), #E6E2D8); }
.aging .lines i:nth-child(2) { width: 84%; } .aging .lines i:nth-child(3) { width: 60%; }
.aging .posted { position: absolute; left: 22px; bottom: 18px; margin: 0; font-weight: 700; font-size: 13px; color: #6B6455; }
.coffee { position: absolute; right: 26px; bottom: 70px; width: 72px; height: 72px; border-radius: 50%; opacity: 0; transition: opacity .5s;
  border: 6px solid rgba(120, 72, 28, .32); box-shadow: inset 0 0 0 3px rgba(120, 72, 28, .12); transform: rotate(20deg);
  -webkit-mask: radial-gradient(circle at 70% 20%, transparent 14px, #000 15px); mask: radial-gradient(circle at 70% 20%, transparent 14px, #000 15px); }
.scene.s23 .coffee { opacity: 1; }
.peel { position: absolute; right: -2px; bottom: -2px; width: 0; height: 0; transition: width .4s, height .4s;
  background: linear-gradient(135deg, var(--paper) 50%, #CDBF9A 50%, #F2E6C4 100%); box-shadow: -3px -3px 6px rgba(0, 0, 0, .12); }
.scene.s30 .peel { width: 54px; height: 54px; }
.note { position: absolute; right: -30px; top: -18px; width: 128px; padding: 16px 10px 12px; background: #FFF36B; color: var(--ink);
  font: 700 15px/1.15 "Comic Sans MS", "Marker Felt", "Segoe Print", var(--body); text-align: center; transform: rotate(9deg) translateY(-30px);
  opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 2px 3px 0 rgba(0, 0, 0, .18); }
.note::before { content: ""; position: absolute; left: 34px; top: -9px; width: 56px; height: 18px; background: rgba(255, 255, 255, .6); transform: rotate(-4deg); }
.scene.s41 .note { opacity: 1; transform: rotate(9deg); }
.ctape { position: absolute; left: -24px; right: -24px; height: 40px; background: repeating-linear-gradient(-45deg, var(--ink) 0 16px, var(--yellow) 16px 32px);
  border-block: 2px solid var(--ink); display: grid; place-items: center; opacity: 0; transition: opacity .15s, transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.ctape span { background: var(--yellow); color: var(--ink); font-family: var(--display); font-size: 20px; padding: 0 10px; border-inline: 2px solid var(--ink); }
.ctape.t1 { top: 34%; transform: rotate(-14deg) scale(1.4); }
.ctape.t2 { top: 52%; transform: rotate(9deg) scale(1.4); }
.scene.s47 .ctape { opacity: 1; }
.scene.s47 .ctape.t1 { transform: rotate(-14deg); }
.scene.s47 .ctape.t2 { transform: rotate(9deg); transition-delay: .12s; }

.manager { width: 100%; max-width: 380px; justify-self: center; overflow: visible; }
.manager .cup, .manager .sweat, .manager .sign, .manager .stress, .manager .m1, .manager .m2, .manager .m3 { opacity: 0; transition: opacity .3s; }
.manager .m1 { opacity: 1; }
.scene.s14 .manager .m1 { opacity: 0; } .scene.s14 .manager .m2 { opacity: 1; }
.scene.s30 .manager .m2 { opacity: 0; } .scene.s30 .manager .m3 { opacity: 1; }
.manager .cup.on { opacity: 1; }
.scene.s23 .manager .sweat { opacity: 1; animation: drip 1.4s ease-in infinite; }
.scene.s41 .manager .sign { opacity: 1; }
.scene.s47 .manager .stress { opacity: 1; animation: buzz .25s linear infinite alternate; }
.manager .tie { transform-box: fill-box; transform-origin: 50% 0; transform: rotate(calc(var(--age, 0) * 28deg)); }
.manager .brow-l { transform-box: fill-box; transform-origin: 100% 50%; transform: rotate(calc(var(--age, 0) * 24deg)); }
.manager .brow-r { transform-box: fill-box; transform-origin: 0 50%; transform: rotate(calc(var(--age, 0) * -24deg)); }
.manager .hair { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(1 + var(--age, 0) * .5)); }
@keyframes drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes buzz { from { transform: translate(-1px, 0); } to { transform: translate(1px, -1px); } }

/* ---------------------------------------------------------------- 2. The Wrecking Yard */
.yard { margin-top: 64px; }
.yard-title { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); }
.yard-sub { color: var(--muted); margin: 0 0 22px; }
.yard-stage { position: relative; height: 230px; border: 2px solid var(--ink); background: var(--white); overflow: hidden;
  background-image: radial-gradient(rgba(20, 22, 26, .08) 1px, transparent 1.4px); background-size: 18px 18px; }
.belt { position: absolute; left: 0; right: 0; bottom: 34px; height: 22px; background: var(--ink); }
.belt::before { content: ""; position: absolute; inset: 4px 0; background: repeating-linear-gradient(90deg, #3A3D44 0 18px, #23262C 18px 36px);
  animation: belt 1s linear infinite; }
@keyframes belt { to { background-position: 36px 0; } }
.belt-legs { position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: repeating-linear-gradient(90deg, transparent 0 46px, var(--ink) 46px 52px, transparent 52px 98px); }
.station { position: absolute; top: 12px; width: 120px; margin-left: -60px; text-align: center; }
.station svg { display: block; margin: 0 auto; }
.yard-stage { --pm: .27; --ps: .52; --pt: .75; --lift: -98px; }  /* station positions (fraction of the stage) */
.st-mag { left: calc(var(--pm) * 100%); } .st-shred { left: calc(var(--ps) * 100%); } .st-stamp { left: calc(var(--pt) * 100%); }
.station .lbl { margin: 2px 0 0; font-size: 11px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.shredder { position: absolute; left: calc(var(--ps) * 100%); bottom: 34px; width: 74px; height: 40px; margin-left: -37px; background: var(--ink); z-index: 3;
  clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%); }
.shredder::before { content: ""; position: absolute; left: 6px; right: 6px; top: 13px; height: 6px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 5px, transparent 5px 9px); }
.bin { position: absolute; right: 18px; bottom: 34px; width: 92px; height: 74px; border: 3px solid var(--ink); border-top: 0; background: var(--paper); z-index: 2; }
.bin b { position: absolute; left: 0; right: 0; bottom: 6px; font-family: var(--display); font-size: 14px; text-transform: uppercase; }
.item { position: absolute; left: -60px; bottom: 56px; width: 46px; height: 32px; border: 2px solid var(--ink); background: var(--white);
  font: 700 8px/1 var(--body); display: grid; place-items: center; text-transform: uppercase; letter-spacing: .02em; z-index: 1;
  animation: 6s linear infinite; animation-play-state: paused; }
.yard.live .item { animation-play-state: running; }
.item.agency { background: #DDE3EA; animation-name: to-magnet; }
.item.dupe { animation-name: to-shredder; }
.item.age { animation-name: to-stamp; }
.item.wreck { background: var(--yellow); animation-name: to-bin; }
.item.age::after { content: "NOPE"; position: absolute; inset: 6px 2px; border: 2px solid #C8102E; color: #C8102E; font-family: var(--display);
  font-size: 10px; display: grid; place-items: center; transform: rotate(-12deg); opacity: 0; animation: inherit; animation-name: nope; }
/* --w is the stage width in px (set by fx.js); items start 60px left of the stage, 46px wide */
@keyframes to-magnet { 0% { transform: translate(0, 0); } 30% { transform: translate(calc(var(--w, 900px) * var(--pm) + 37px), 0); }
  42%, 62% { transform: translate(calc(var(--w, 900px) * var(--pm) + 37px), var(--lift)) rotate(-8deg); opacity: 1; }
  76%, 100% { transform: translate(calc(var(--w, 900px) * var(--pm) + 37px), var(--lift)) rotate(-8deg) scale(.6); opacity: 0; } }
@keyframes to-shredder { 0% { transform: translate(0, 0); clip-path: inset(0); } 52% { transform: translate(calc(var(--w, 900px) * var(--ps) + 37px), 0); clip-path: inset(0); }
  70%, 100% { transform: translate(calc(var(--w, 900px) * var(--ps) + 37px), 46px); clip-path: inset(0 0 100% 0); } }
@keyframes to-stamp { 0% { transform: translate(0, 0); opacity: 1; } 72%, 80% { transform: translate(calc(var(--w, 900px) * var(--pt) + 37px), 0); opacity: 1; }
  100% { transform: translate(calc(var(--w, 900px) * var(--pt) + 37px), 120px) rotate(40deg); opacity: 0; } }
@keyframes nope { 0%, 74% { opacity: 0; transform: rotate(-12deg) scale(1.8); } 78%, 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes to-bin { 0% { transform: translate(0, 0); opacity: 1; } 88% { transform: translate(calc(var(--w, 900px) - 70px), 0); opacity: 1; }
  100% { transform: translate(calc(var(--w, 900px) - 30px), 46px) rotate(6deg); opacity: 0; } }
.st-stamp .arm { animation: stamp-arm 6s linear infinite; animation-play-state: paused; transform-box: fill-box; transform-origin: 50% 0; }
.yard.live .st-stamp .arm { animation-play-state: running; }
@keyframes stamp-arm { 0%, 70% { transform: translateY(0); } 74% { transform: translateY(22px); } 80%, 100% { transform: translateY(0); } }
.yard-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 2px solid var(--ink); border-top: 0; background: var(--paper); }
.yard-counts div { padding: 12px 14px; border-right: 1px solid var(--line); }
.yard-counts div:last-child { border-right: 0; background: var(--yellow); }
.yard-counts b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; }
.yard-counts span { font-size: 13px; color: var(--ink-2); }
.yard-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* ---------------------------------------------------------------- 5. Detonators */
.det-row { display: flex; align-items: flex-end; gap: 12px; }
.det-row .btn { flex: 1; }
.det { flex: none; width: 66px; height: 70px; cursor: pointer; background: none; border: 0; padding: 0; }
.det svg { overflow: visible; display: block; }
.det .handle { transition: transform .12s ease-in; }
.det.fire .handle { transform: translateY(15px); }
.det.fire .spark { animation: spark .5s ease-out; }
.det .spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes spark { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
.plan.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-4px, 2px) rotate(-.6deg); } 40% { transform: translate(4px, -2px) rotate(.6deg); }
  60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }

/* ---------------------------------------------------------------- 9. Cracking metro tiles  ·  8. Skyline */
.metro { position: relative; overflow: hidden; }
.metro .crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.metro .crack path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.2, .8, .3, 1); }
/* hover, before the click: the tile trembles */
.metro:hover:not(.on) { animation: tremble .16s linear infinite; }
@keyframes tremble { 0%, 100% { rotate: 0deg; } 25% { rotate: -.35deg; } 75% { rotate: .35deg; } }
.metro .crack .branch { stroke-width: 1; transition-delay: .12s; }
.metro .crack .ring { stroke-width: 1; transition-duration: .18s; }
.metro .crack.go path { stroke-dashoffset: 0; }
.metro.on .crack path { stroke: #7A1408; }
.metro.on::after { content: "Wrecked"; position: absolute; right: 8px; top: 8px; transform: rotate(-10deg);
  font-family: var(--display); text-transform: uppercase; font-size: 12px; color: #C8102E; border: 3px solid #C8102E; padding: 3px 7px;
  background: rgba(252, 187, 12, .9); animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { transform: rotate(-10deg) scale(2.4); opacity: 0; } }
.skyline { margin-top: 26px; border: 2px solid var(--ink); background: #1B1E24; color: var(--paper); overflow: hidden; }
.skyline[hidden] { display: none; }
.skyline svg { display: block; width: 100%; height: auto; }
.skyline .bld { fill: #2B2F37; stroke: #14161A; stroke-width: 1; }
.skyline .lm { fill: #343944; stroke: #14161A; stroke-width: 1; }
.skyline .win { fill: #3D424D; }
.skyline .gnd { fill: #14161A; }
.skyline .sign { opacity: 0; }
.skyline.go .sign { animation: sign-on .25s forwards, sign-blink 2.6s 1.2s infinite; }
@keyframes sign-on { to { opacity: 1; } }
@keyframes sign-blink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: .3; } }
.skyline .jib { transform-box: view-box; transform-origin: var(--ox) var(--oy); }
.skyline.go .jib { animation: jib 1.1s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes jib { from { transform: rotate(-58deg); } }
.skyline.go .ball { animation: ball-swing 1.8s 1s ease-in-out infinite alternate; transform-box: view-box; transform-origin: var(--bx) var(--by); }
@keyframes ball-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.sky-cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-top: 2px solid var(--ink);
  background: var(--ink); font-size: 14px; }
.sky-cap b { font-family: var(--display); font-weight: 400; color: var(--yellow); font-size: 20px; text-transform: uppercase; }

/* ---------------------------------------------------------------- 12. Hard-hat sign (switch: HARD_HAT_ZONE in reqradar/web/site.py) */
.hardhat-sign { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px; background: var(--yellow);
  border: 3px solid var(--ink); font-family: var(--display); text-transform: uppercase; font-size: 15px; letter-spacing: .03em; transform: rotate(-1deg); }

/* ---------------------------------------------------------------- 11. "WRECK" easter egg */
.egg-ball { position: fixed; left: 50%; top: -260px; width: 170px; margin-left: -85px; z-index: 60; pointer-events: none;
  animation: egg-drop .55s cubic-bezier(.55, 0, 1, .45) forwards; }
@keyframes egg-drop { to { transform: translateY(calc(50vh + 120px)); } }
.egg-fall { transition: transform .9s cubic-bezier(.5, 0, .9, .5), opacity .9s; }
.egg-back { transition: transform .6s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.egg-flash { position: fixed; inset: 0; z-index: 59; background: var(--yellow); pointer-events: none; animation: flash .35s forwards; }
@keyframes flash { from { opacity: .7; } to { opacity: 0; } }

/* ---------------------------------------------------------------- responsive + reduced motion */
@media (max-width: 960px) {
  .scene-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .scene-head { grid-column: 1 / -1; }
  .scene-day { font-size: 56px; margin: 0; }
  .scene-cap { max-width: none; min-height: 2.6em; font-size: 16px; }
}
@media (max-width: 720px) {
  .flip { width: 58px; height: 76px; font-size: 60px; line-height: 76px; }
  .board-top { font-size: 16px; }
  .scene-grid { gap: 12px; }
  .aging { padding: 14px; box-shadow: 5px 5px 0 var(--ink); }
  .aging .hw { font-size: 26px; }
  .note { width: 96px; right: -10px; top: -14px; font-size: 12px; }
  .ctape span { font-size: 14px; }
  .yard-stage { height: 200px; --pm: .2; --ps: .45; --pt: .66; --lift: -70px; }
  .bin { width: 64px; right: 8px; }
  .item:nth-of-type(even) { display: none; }  /* half as many on a narrow belt */
  .item { width: 40px; font-size: 7px; }
  .bin b { font-size: 11px; }
  .station { width: 84px; margin-left: -42px; }
  .station svg { width: 46px; height: auto; }
  .station .lbl { font-size: 9px; }
  .yard-counts { grid-template-columns: 1fr 1fr; }
  .yard-counts div:last-child { grid-column: 1 / -1; }
  .yard-counts div { border-bottom: 1px solid var(--line); }
  .metro.on::after { font-size: 10px; right: 5px; top: 5px; padding: 2px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene-sticky { position: static; height: auto; padding: 64px 0; }
  .item { display: none; }
}
.plan-best .det .handle rect { fill: #C9C6BE; }

/* ---------------------------------------------------------------- 6. Demolition permit  ·  7. the crew (order page) */
.permit { position: relative; padding: 0; margin: 32px 0 22px; background: #FFFDF6; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(20, 22, 26, .05) 27px 28px); }
.permit-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--yellow);
  border-bottom: 2px solid var(--ink); }
.permit-head .display { font-size: 22px; }
.permit-no { font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.permit-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.permit-grid div { padding: 12px 18px; border-bottom: 1px dashed #C9C2B0; }
.permit-grid div:nth-child(odd) { border-right: 1px dashed #C9C2B0; }
.permit-grid dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.permit-grid dd { margin: 3px 0 0; font-weight: 700; font-size: 16px; }
.permit-stamp { position: absolute; right: 22px; bottom: 18px; font-family: var(--display); text-transform: uppercase; font-size: 22px; line-height: 1;
  padding: 8px 12px; border: 4px solid currentColor; transform: rotate(-9deg); pointer-events: none; }
.permit-stamp.on { color: #C8102E; background: rgba(255, 253, 246, .85); animation: thump .5s .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.permit-stamp.wait { color: #B7AD94; border-style: dashed; font-size: 16px; }
@keyframes thump { from { transform: rotate(-9deg) scale(2.6); opacity: 0; } 70% { opacity: 1; } }
.crew { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; padding: 14px 16px; background: var(--paper); border: 2px dashed #C9C2B0; }
.crane { width: 190px; flex: none; overflow: visible; }
.crane-ball { transform-box: view-box; transform-origin: 70px 21px; animation: crane-sway 2.2s ease-in-out infinite alternate; }
@keyframes crane-sway { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.crew-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crew-line { margin: 4px 0 0; font-family: var(--display); text-transform: uppercase; font-size: 20px; line-height: 1.1; }
.crew-line.in { animation: line-in .35s ease-out; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 720px) {
  .permit-grid { grid-template-columns: 1fr; }
  .permit-grid div:nth-child(odd) { border-right: 0; }
  .permit-stamp { position: static; display: inline-block; margin: 14px 18px 16px; }
  .crew { flex-direction: column; align-items: flex-start; }
  .crane { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .crane-ball, .permit-stamp.on { animation: none; } }

/* ---------------------------------------------------------------- 10. 404: the ball knocks the digits over */
.lost { text-align: center; padding: 10px 0 30px; }
.lost .lede { margin: 12px auto 26px; }
.lost-stage { position: relative; height: 260px; max-width: 560px; margin: 0 auto 24px; }
.lost-ball { position: absolute; left: 4px; top: -10px; width: 150px; z-index: 2; overflow: visible; }
.lost-ball-swing { transform-box: view-box; transform-origin: 60px 40px; animation: lost-swing 1.1s cubic-bezier(.5, 0, .9, .6) both; }
@keyframes lost-swing { from { transform: rotate(48deg); } 62% { transform: rotate(-14deg); } 80% { transform: rotate(-8deg); } to { transform: rotate(-10deg); } }
.lost-digits { position: absolute; left: 120px; right: 0; bottom: 0; display: flex; justify-content: flex-start; gap: 6px; }
.lost-digits span { display: inline-block; font-size: 160px; line-height: .8; transform-origin: 100% 100%; animation: topple 1s cubic-bezier(.5, 0, .7, 1) both; }
.lost-digits span:nth-child(1) { --r: 90deg; --x: -10px; animation-delay: .62s; color: var(--ink); }
.lost-digits span:nth-child(2) { --r: 78deg; --x: 20px; animation-delay: .72s; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); }
.lost-digits span:nth-child(3) { --r: 90deg; --x: 40px; animation-delay: .82s; color: var(--ink); }
@keyframes topple { to { transform: translate(var(--x), 0) rotate(var(--r)); } }
.lost-digits.rebuilt span { animation: none; transform: none; transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
@media (max-width: 720px) {
  .lost-stage { height: 190px; }
  .lost-ball { width: 100px; }
  .lost-digits { left: 90px; }
  .lost-digits span { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce) { .lost-ball-swing, .lost-digits span { animation: none; } }