/* Pigeonhole — a post room. Wood cabinet, paper letters, brass plates, ink stamps. */
:root {
  --wood: #2a1b12;
  --wood-hi: #4a3020;
  --wood-lo: #1b110b;
  --void: #120a05;
  --paper: #f3e8d0;
  --paper-2: #e4d4ae;
  --ink: #1d1712;
  --muted: #6a5a46;
  --dim: #cdbb9a;
  --brass: #d6b04a;
  --brass-lo: #a8842c;
  --brass-ink: #2a1d0a;
  --st-todo: #3d342b;
  --st-in-progress: #1f4a94;
  --st-blocked: #a82d12;
  --st-done: #3f6420;
  --focus-wood: #ffd36b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 3.4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,200,140,.035) 0 3px, transparent 3px 23px),
    linear-gradient(180deg, #33221602, #1b110b 90%);
  color: var(--paper);
  font: 400 16px/1.6 var(--sans);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--brass); color: var(--brass-ink); padding: 12px 20px; font-weight: 700; }
.skip:focus { top: 12px; outline: 3px solid var(--paper); outline-offset: 2px; }

.kicker { margin: 0; font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: var(--pad);
  padding: clamp(32px, 5vw, 64px) var(--pad) clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.hero-main { display: flex; flex-direction: column; min-width: 0; }
h1 {
  margin: 12px 0 0;
  font: 800 clamp(52px, 9.6vw, 148px)/.92 var(--serif);
  letter-spacing: -.035em;
  color: var(--paper);
  text-shadow: 0 3px 0 var(--wood-lo), 0 0 1px #000;
  animation: drop .7s var(--ease) both;
}
.lede { margin: 20px 0 0; max-width: 34ch; font: 400 clamp(18px, 1.7vw, 22px)/1.5 var(--serif); color: var(--paper); animation: rise .6s .12s var(--ease) both; }
.ledge { position: relative; margin-top: auto; padding-top: 28px; height: 120px; }
.ledge-line { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(var(--brass), var(--brass-lo)); box-shadow: 0 4px 0 var(--wood-lo); }
.pigeon { position: absolute; left: 0; bottom: 6px; width: 124px; height: 92px; animation: stroll 26s linear infinite; }
.pg-head { transform-box: fill-box; animation: bob .8s steps(2, end) infinite; }

.tally {
  border: 2px solid var(--brass);
  outline: 1px solid var(--brass-lo);
  outline-offset: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.5));
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  animation: rise .6s .2s var(--ease) both;
}
.tally-row { display: flex; align-items: flex-end; gap: 16px; }
.tally-num {
  margin: 0;
  font: 800 clamp(130px, 12.5vw, 190px)/.78 var(--serif);
  letter-spacing: -.06em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.tally-num.tick { animation: tick .45s var(--ease); }
.tally-cap { margin: 0 0 6px; display: flex; flex-direction: column; gap: 4px; font: 400 15px/1.35 var(--sans); color: var(--dim); }
.tally-cap strong { font: 700 20px/1.15 var(--serif); color: var(--paper); }
.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.chip:nth-child(1) { grid-column: span 2; }
.chip {
  --c: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  background: var(--paper); color: var(--c);
  border: 3px double var(--c); border-radius: 3px;
  font: 700 12px/1.1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.chip .count { font: 800 16px/1 var(--serif); letter-spacing: 0; }
.chip[aria-pressed="true"] { background: var(--c); color: var(--paper); }
.chip[aria-pressed="true"] .count { color: var(--paper); }
.chip:nth-child(1) { --c: var(--ink); }
.chip:focus-visible { outline: 3px solid var(--focus-wood); outline-offset: 3px; }
.chip:active { transform: scale(.97); }

[data-status="todo"] { --c: var(--st-todo); }
[data-status="in-progress"] { --c: var(--st-in-progress); }
[data-status="blocked"] { --c: var(--st-blocked); }
[data-status="done"] { --c: var(--st-done); }

/* ---------- brass control plate ---------- */
.plate {
  margin: 8px var(--pad) 0;
  padding: 16px 20px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px auto;
  gap: 8px 20px;
  align-items: end;
  background: linear-gradient(180deg, #e5c566, var(--brass) 40%, var(--brass-lo));
  color: var(--brass-ink);
  border-radius: 3px;
  box-shadow: 0 6px 0 var(--wood-lo), inset 0 1px 0 rgba(255,255,255,.5);
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font: 700 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.field input, .field select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--brass-ink); border-radius: 2px;
  font: 500 16px/1.3 var(--sans);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.12);
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:hover, .field select:hover { border-color: #000; }
.field input:focus, .field select:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.result { margin: 0; align-self: center; font: 700 13px/1.3 var(--mono); letter-spacing: .04em; min-width: 14ch; text-align: right; }

/* ---------- the rack ---------- */
.rack-wrap { padding: 28px var(--pad) 24px; }
.rack {
  list-style: none; margin: 0; padding: 14px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px;
  background: var(--wood-hi);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 7px);
  border: 8px solid #5d3c24;
  border-image: linear-gradient(135deg, #7a4f2e, #4a3020 50%, #7a4f2e) 1;
  box-shadow: 0 14px 0 var(--wood-lo), inset 0 0 0 2px rgba(0,0,0,.35);
}
.hole:nth-child(6n+1) { grid-column: span 5; }
.hole:nth-child(6n+2) { grid-column: span 4; }
.hole:nth-child(6n+3) { grid-column: span 3; }
.hole:nth-child(6n+4) { grid-column: span 3; }
.hole:nth-child(6n+5) { grid-column: span 4; }
.hole:nth-child(6n+6) { grid-column: span 5; }
.hole {
  position: relative; display: flex;
  padding: 22px 12px 0;
  background: var(--void);
  box-shadow: inset 0 10px 14px rgba(0,0,0,.7), inset 0 0 0 1px #000;
  min-height: 262px;
}
.rack.intro .hole { animation: slot .55s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }

.env {
  --flap: var(--paper-2);
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 44px 16px 14px;
  background:
    linear-gradient(to top right, transparent 47%, rgba(60,40,20,.35) 48.5%, var(--flap) 49.5%) left top / 50% 32px no-repeat,
    linear-gradient(to top left, transparent 47%, rgba(60,40,20,.35) 48.5%, var(--flap) 49.5%) right top / 50% 32px no-repeat,
    var(--paper);
  color: var(--ink);
  box-shadow: 0 -3px 8px rgba(0,0,0,.45);
  border-radius: 2px 2px 0 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.env[data-priority="high"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: repeating-linear-gradient(135deg, #b8321a 0 12px, var(--paper) 12px 18px, #24509a 18px 30px, var(--paper) 30px 36px);
}
.env-meta { margin: 0; display: flex; gap: 8px; align-items: baseline; font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.env-meta b { color: var(--ink); }
.stamp {
  position: absolute; top: 6px; right: 12px; z-index: 2;
  padding: 4px 8px; border: 3px double var(--c); border-radius: 3px;
  color: var(--c); background: rgba(243,232,208,.7);
  font: 800 12px/1.1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-5deg);
  pointer-events: none;
}
.env-title { margin: 0; font: 700 clamp(20px, 1.6vw, 24px)/1.15 var(--serif); letter-spacing: -.01em; }
.open {
  all: unset; display: inline; cursor: pointer;
}
.open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.open:focus-visible::after { outline: 4px solid var(--ink); outline-offset: -6px; }
.env-to { margin: 0; font: 500 14px/1.4 var(--sans); color: var(--ink); }
.env-to span { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.env-sum {
  margin: 0; font: 400 14px/1.45 var(--sans); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.env-foot { margin-top: auto; padding-top: 6px; padding-bottom: 6px; display: flex; align-items: center; gap: 12px; }
.postmark {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--muted); outline: 1px solid var(--muted); outline-offset: -6px;
  display: grid; place-content: center; text-align: center;
  font: 700 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted);
  transform: rotate(-9deg);
}
.postmark b { font: 800 17px/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.cancel {
  flex: none; width: 36px; height: 24px; margin-left: -10px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='24' viewBox='0 0 36 24'%3E%3Cpath d='M0 4 q4.5-5 9 0 t9 0 t9 0 t9 0 M0 12 q4.5-5 9 0 t9 0 t9 0 t9 0 M0 20 q4.5-5 9 0 t9 0 t9 0 t9 0' fill='none' stroke='%236a5a46' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.env-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; font: 500 12.5px/1.35 var(--sans); color: var(--muted); }
.env-info b { font-weight: 700; color: var(--ink); }
.go {
  flex: none; align-self: flex-end;
  padding: 8px 12px; min-height: 36px; display: inline-flex; align-items: center;
  background: var(--brass); color: var(--brass-ink); border-radius: 2px;
  font: 800 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 2px 0 var(--brass-lo);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.hole:has(.open:active) .go { transform: scale(.95); }

/* ---------- empty ---------- */
.empty { max-width: 560px; margin: 8px auto 0; padding: 40px 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty h3 { margin: 12px 0 0; font: 800 clamp(28px, 4vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; }
.empty p { margin: 0 0 16px; color: var(--dim); font-size: 17px; }

.btn {
  min-height: 48px; padding: 12px 24px;
  background: var(--brass); color: var(--brass-ink);
  border: 0; border-radius: 2px; box-shadow: 0 4px 0 var(--brass-lo);
  font: 800 14px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--focus-wood); outline-offset: 3px; }
.btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 1px 0 var(--brass-lo); }

.foot { padding: 12px var(--pad) 48px; max-width: 76ch; }
.foot p { margin: 0; color: var(--dim); font-size: 14px; }

/* ---------- detail letter (dialog) ---------- */
dialog {
  padding: 0; border: 0; background: transparent; color: var(--ink);
  width: min(960px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); margin: auto; overflow: visible;
}
dialog::backdrop { background: rgba(10, 5, 2, .82); }
dialog[open] .sheet { animation: pull .28s var(--ease) both; }
.sheet {
  position: relative; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 24px clamp(20px, 3vw, 40px) 32px;
  background:
    linear-gradient(90deg, transparent 0 calc(clamp(20px, 3vw, 40px) - 12px), rgba(176,47,18,.25) 0 calc(clamp(20px, 3vw, 40px) - 11px), transparent 0),
    var(--paper);
  border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sheet-head .kicker { color: var(--muted); }
.close {
  flex: none; min-height: 44px; min-width: 44px; padding: 8px 16px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 2px;
  font: 800 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.close:focus-visible { outline: 3px solid var(--st-in-progress); outline-offset: 3px; }
.close:active { transform: scale(.96); }
.sheet h2 { margin: 16px 0 0; max-width: 20ch; font: 800 clamp(32px, 4.6vw, 56px)/1.02 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; margin-top: 28px; align-items: start; }
.letter { grid-column: 1; grid-row: 1; min-width: 0; }
.desk { grid-column: 2; grid-row: 1; }

.ledger { margin: 0 0 24px; border-top: 2px solid var(--ink); }
.ledger div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(29,23,18,.3); }
.ledger dt { font: 600 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ledger dd { margin: 0; font: 500 16px/1.5 var(--sans); }
.tag { display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border: 1px solid var(--ink); border-radius: 2px; font: 600 13px/1.5 var(--mono); }
.body p { margin: 0 0 1em; max-width: 62ch; font: 400 18px/1.65 var(--serif); }
.body p:first-child::first-letter { font-weight: 800; }
.body strong { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--st-in-progress); }

.desk {
  position: sticky; top: 0;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  background: var(--wood); color: var(--paper);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 8px);
  border: 4px solid #5d3c24; border-radius: 3px;
}
.desk .kicker { color: var(--brass); }
.tile { background: var(--paper); min-height: 112px; display: grid; place-items: center; overflow: hidden; border-radius: 2px; position: relative; box-shadow: inset 0 2px 8px rgba(0,0,0,.25); }
.bigstamp {
  position: relative;
  padding: 10px 16px; border: 5px double var(--c); border-radius: 4px; color: var(--c);
  font: 800 clamp(22px, 2.4vw, 30px)/1.05 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center;
  transform: rotate(-6deg);
}
.bigstamp.slam { animation: slam .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.bigstamp.slam::after {
  content: ""; position: absolute; inset: -6px; border: 3px solid var(--c); border-radius: 8px;
  animation: ring .6s .16s ease-out both;
}
.desk label { font: 700 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.desk select {
  width: 100%; min-height: 52px; padding: 10px 14px;
  background: var(--brass); color: var(--brass-ink);
  border: 0; border-radius: 2px; box-shadow: 0 4px 0 var(--brass-lo);
  font: 700 17px/1.3 var(--sans); cursor: pointer;
}
.desk select:focus { outline: 3px solid var(--focus-wood); outline-offset: 3px; }
.feedback { margin: 0; min-height: 3.2em; font: 500 15px/1.45 var(--sans); color: var(--paper); }
.feedback strong { color: var(--brass); }
.undo {
  align-self: flex-start; min-height: 44px; padding: 8px 16px;
  background: transparent; color: var(--paper); border: 2px solid var(--paper); border-radius: 2px;
  font: 800 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.undo:focus-visible { outline: 3px solid var(--focus-wood); outline-offset: 3px; }
.undo:active { transform: scale(.96); }
.route { margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--dim); display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 var(--mono); color: var(--dim); }
.route li b { color: var(--paper); font-weight: 700; }

/* ---------- hover (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .chip:hover { transform: translateY(-2px); background: var(--paper-2); }
  .chip[aria-pressed="true"]:hover { background: var(--c); }
  .hole:hover .env { transform: translateY(-10px); box-shadow: 0 -8px 16px rgba(0,0,0,.5); }
  .hole:hover .go { background: var(--paper); box-shadow: 0 2px 0 var(--brass-lo), inset 0 0 0 2px var(--brass-ink); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--brass-lo); }
  .close:hover { background: var(--st-blocked); }
  .undo:hover { background: var(--paper); color: var(--ink); }
  .desk select:hover { background: #e5c566; }
  .tag:hover { background: var(--ink); color: var(--paper); }
  .ledger div:hover dd { text-decoration: underline dotted; }
}
.hole:has(.open:focus-visible) .env { transform: translateY(-10px); box-shadow: 0 -8px 16px rgba(0,0,0,.5); }
.hole:has(.open:focus-visible) .go { background: var(--paper); box-shadow: inset 0 0 0 2px var(--brass-ink); }

/* ---------- motion ---------- */
@keyframes drop { from { opacity: 0; transform: translateY(-28px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slot { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes pull { from { opacity: 0; transform: translateY(36px) rotate(-.8deg); } to { opacity: 1; transform: none; } }
@keyframes tick { 0% { transform: translateY(-18%) scale(1.06); opacity: .2; } 100% { transform: none; opacity: 1; } }
@keyframes bob { from { transform: translate(0, 0); } to { transform: translate(5px, 2px); } }
@keyframes stroll {
  0% { left: 0; transform: scaleX(1); }
  46% { left: calc(100% - 124px); transform: scaleX(1); }
  50% { left: calc(100% - 124px); transform: scaleX(-1); }
  96% { left: 0; transform: scaleX(-1); }
  100% { left: 0; transform: scaleX(1); }
}
@keyframes slam {
  0% { opacity: 0; transform: translateY(-110px) scale(2.6) rotate(-16deg); }
  55% { opacity: 1; transform: translateY(0) scale(.9) rotate(-6deg); }
  72% { transform: scale(1.07) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes ring { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.5); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- tablet / mobile ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .tally { max-width: 560px; }
  .ledge { height: 110px; margin-top: 24px; }
  .rack { grid-template-columns: repeat(2, 1fr); }
  .hole:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 860px) {
  .plate { grid-template-columns: minmax(0, 1fr); }
  .result { text-align: left; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .desk { grid-column: 1; grid-row: 1; position: static; }
  .letter { grid-column: 1; grid-row: 2; }
}
@media (max-width: 720px) {
  .rack { grid-template-columns: minmax(0, 1fr); padding: 10px; border-width: 6px; }
  .hole { min-height: 0; padding-top: 18px; }
  .env-sum { display: none; }
  .hero { padding-top: 28px; }
  .tally-row { gap: 12px; }
  .tally-num { font-size: 120px; }
  .ledge { height: 100px; }
  .pigeon { width: 100px; height: 74px; }
  @keyframes stroll {
    0% { left: 0; transform: scaleX(1); }
    46% { left: calc(100% - 100px); transform: scaleX(1); }
    50% { left: calc(100% - 100px); transform: scaleX(-1); }
    96% { left: 0; transform: scaleX(-1); }
    100% { left: 0; transform: scaleX(1); }
  }
  dialog { width: 100%; height: 100%; max-height: 100%; margin: 0; }
  dialog[open] .sheet { height: 100%; max-height: 100dvh; border-radius: 0; }
  .sheet { padding-top: 16px; max-height: 100dvh; }
  .ledger div { grid-template-columns: 92px minmax(0, 1fr); }
  .body p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pigeon, .pg-head { animation: none; }
  h1, .lede, .tally, .rack.intro .hole, dialog[open] .sheet, .tally-num.tick { animation: fade .3s both; animation-delay: 0s; }
  .bigstamp.slam { animation: fade .3s both; }
  .bigstamp.slam::after { animation: none; opacity: 0; }
  .hole:hover .env, .hole:has(.open:focus-visible) .env { transform: none; }
  .chip:hover, .btn:hover { transform: none; }
}