/* 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 · 13 the preview slab.
   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 reqwreck/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; } }


/* ---------------------------------------------------------------- 13. The preview slab: jackhammer through to today's preview */
.slab-section { padding: 72px 0 80px; }
.slab-wrap { position: relative; }
.slab-under { position: relative; min-height: clamp(320px, 42vw, 440px); display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; padding: clamp(28px, 5vw, 64px); background: var(--yellow); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 12px 12px 0 var(--ink); }
.slab-k { margin: 0 0 8px; font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.slab-title { margin: 0 0 12px; font-size: clamp(44px, 7vw, 88px); line-height: .95; }
.slab-sub { margin: 0 0 24px; font-size: clamp(16px, 1.6vw, 20px); max-width: 46ch; }
.slab-under .btn { background: var(--ink); color: var(--yellow); border-color: var(--ink); min-height: 56px; padding: 16px 28px; font-size: 17px; }
.slab-wrap.revealed .slab-under { animation: slab-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes slab-pop { 0% { transform: scale(.95); } 100% { transform: none; } }
.slab { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; padding: 0; overflow: hidden; text-align: left;
  border: 3px solid var(--ink); border-radius: var(--radius); color: var(--ink); font: inherit;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27170%27%20height%3D%27130%27%3E%3Cg%20fill%3D%27rgba%2820%2C22%2C26%2C.28%29%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2718%27%20r%3D%271.6%27/%3E%3Ccircle%20cx%3D%2761%27%20cy%3D%279%27%20r%3D%271.1%27/%3E%3Ccircle%20cx%3D%27103%27%20cy%3D%2741%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%27148%27%20cy%3D%2722%27%20r%3D%271.3%27/%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2777%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%2782%27%20cy%3D%2796%27%20r%3D%271.8%27/%3E%3Ccircle%20cx%3D%27131%27%20cy%3D%2788%27%20r%3D%271%27/%3E%3Ccircle%20cx%3D%27159%27%20cy%3D%27117%27%20r%3D%271.5%27/%3E%3Ccircle%20cx%3D%279%27%20cy%3D%27121%27%20r%3D%271.1%27/%3E%3Ccircle%20cx%3D%2757%27%20cy%3D%2752%27%20r%3D%27.9%27/%3E%3C/g%3E%3Cg%20fill%3D%27rgba%28255%2C255%2C255%2C.4%29%27%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2732%27%20r%3D%271%27/%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2764%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%2774%27%20cy%3D%27118%27%20r%3D%27.9%27/%3E%3Ccircle%20cx%3D%27152%27%20cy%3D%2752%27%20r%3D%271%27/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.08%200%200%200%200%20.08%200%200%200%200%20.09%200%200%200%20.6%20-.12%27/%3E%3C/filter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"),
              radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .28), transparent 55%),
              linear-gradient(165deg, #BDBAB2, #9D9A92 70%, #8F8C85);
  box-shadow: 12px 12px 0 var(--ink), inset 0 -20px 40px rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35);
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2240%22%20viewBox%3D%220%200%2032%2040%22%3E%3Crect%20x%3D%229%22%20y%3D%221%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%2314161A%22/%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2228%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%2314161A%22/%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%223%22%20fill%3D%22%23FCBB0C%22%20stroke%3D%22%2314161A%22%20stroke-width%3D%222.5%22/%3E%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%2314161A%22/%3E%3Crect%20x%3D%2214.5%22%20y%3D%2224%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%2314161A%22/%3E%3Cpath%20d%3D%22M14.5%2037l1.5%203%201.5-3z%22%20fill%3D%22%2314161A%22/%3E%3C/svg%3E") 16 39, pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; }
.slab[hidden], .slab-chunk[hidden] { display: none; }
.slab:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.slab-text { position: absolute; left: clamp(24px, 5vw, 64px); right: 22%; top: clamp(28px, 5vw, 60px); font-size: clamp(34px, 6vw, 76px);
  line-height: .98; color: rgba(20, 22, 26, .6); text-shadow: 0 2px 0 rgba(255, 255, 255, .38); letter-spacing: .02em; pointer-events: none; }
.slab-tape { position: absolute; right: -70px; top: 44px; width: 340px; height: 36px; transform: rotate(32deg); pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 22px, var(--ink) 22px 44px); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.slab-tape-2 { top: 112px; right: -120px; width: 300px; opacity: .9; }
.slab-hint { position: absolute; left: clamp(24px, 5vw, 64px); bottom: clamp(26px, 4vw, 48px); display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100% - 48px); padding: 11px 16px 10px; background: var(--ink); color: var(--paper); font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 700; border-radius: 4px; pointer-events: none; box-shadow: 4px 4px 0 rgba(0, 0, 0, .25); }
.slab-count { color: var(--yellow); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.slab:not(.holding):hover .slab-hint, .slab:not(.holding):focus-visible .slab-hint { animation: slab-nudge 1.2s ease-in-out infinite; }
@keyframes slab-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
.slab-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(20, 22, 26, .35); pointer-events: none; }
.slab-meter i { display: block; height: 100%; width: 0; background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); }
.slab-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.slab-cracks .ck { fill: #18191C; }  /* a crack: a tapered dark gap... */
.slab-cracks .ck-hl { fill: rgba(255, 255, 255, .42); transform: translate(.9px, 1.3px); }  /* ...with the light catching its lower edge */
.slab.shake { animation: slab-shake .2s linear; }
.slab.holding { animation: slab-shake .12s linear infinite; }
@keyframes slab-shake { 0%, 100% { transform: none; } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, 0); } }
.slab-jh { position: absolute; z-index: 3; width: 60px; height: 82px; margin: -80px 0 0 -30px; pointer-events: none; transform-origin: 50% 100%; }
.slab-jh.once { animation: slab-jh .38s ease-out forwards; }
.slab-jh.pound { animation: slab-pound .09s linear infinite; }
@keyframes slab-jh { 0% { transform: translateY(-16px); opacity: 0; } 15% { transform: translateY(0); opacity: 1; } 30% { transform: translateY(-7px); }
  45% { transform: translateY(0); } 60% { transform: translateY(-6px); } 75% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes slab-pound { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
.slab-chip { position: absolute; z-index: 3; width: 9px; height: 7px; background: #8F8C85; border: 1px solid rgba(20, 22, 26, .5); border-radius: 2px; pointer-events: none; }
.slab-dust { position: absolute; z-index: 3; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(rgba(190, 186, 178, .8), transparent 65%); }
.slab-chunk { position: absolute; inset: 0; z-index: 2; border: 3px solid var(--ink); border-radius: var(--radius); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27170%27%20height%3D%27130%27%3E%3Cg%20fill%3D%27rgba%2820%2C22%2C26%2C.28%29%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2718%27%20r%3D%271.6%27/%3E%3Ccircle%20cx%3D%2761%27%20cy%3D%279%27%20r%3D%271.1%27/%3E%3Ccircle%20cx%3D%27103%27%20cy%3D%2741%27%20r%3D%272%27/%3E%3Ccircle%20cx%3D%27148%27%20cy%3D%2722%27%20r%3D%271.3%27/%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2777%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%2782%27%20cy%3D%2796%27%20r%3D%271.8%27/%3E%3Ccircle%20cx%3D%27131%27%20cy%3D%2788%27%20r%3D%271%27/%3E%3Ccircle%20cx%3D%27159%27%20cy%3D%27117%27%20r%3D%271.5%27/%3E%3Ccircle%20cx%3D%279%27%20cy%3D%27121%27%20r%3D%271.1%27/%3E%3Ccircle%20cx%3D%2757%27%20cy%3D%2752%27%20r%3D%27.9%27/%3E%3C/g%3E%3Cg%20fill%3D%27rgba%28255%2C255%2C255%2C.4%29%27%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2732%27%20r%3D%271%27/%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2764%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%2774%27%20cy%3D%27118%27%20r%3D%27.9%27/%3E%3Ccircle%20cx%3D%27152%27%20cy%3D%2752%27%20r%3D%271%27/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.08%200%200%200%200%20.08%200%200%200%200%20.09%200%200%200%20.6%20-.12%27/%3E%3C/filter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"), linear-gradient(165deg, #BDBAB2, #9D9A92 70%, #8F8C85); }
.slab-skip { margin: 18px 0 0; font-size: 14px; }
.slab-skip a { color: var(--muted); text-underline-offset: 3px; }
.slab-wrap.revealed + .slab-skip { visibility: hidden; }
@media (max-width: 720px) {
  .slab-section { padding: 48px 0 56px; }
  .slab-under, .slab-wrap { min-height: 360px; }
  .slab-text { right: 24px; }
  .slab-tape { width: 220px; height: 26px; right: -70px; top: 22px; } .slab-tape-2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slab-wrap.revealed .slab-under, .slab.shake, .slab.holding, .slab-jh.pound, .slab:not(.holding):hover .slab-hint,
  .slab:not(.holding):focus-visible .slab-hint { animation: none; }
}