/* Who Petrified the Mayor? — shared foundation: tokens, fonts, paper, sky, buttons. */
@font-face { font-family: "Henny Penny"; src: url(/assets/fonts/henny-penny-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Metamorphous"; src: url(/assets/fonts/metamorphous-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url(/assets/fonts/special-elite-latin-400-normal.woff2) format("woff2"); font-display: swap; }
:root {
  --night: #140c1c; --night-2: #22142f; --night-3: #2f1d40; --night-4: #3d2852; --haze: #8e7aa6;
  --paper: #f3e6cf; --paper-2: #e9d9ba; --paper-3: #dcc9a3; --paper-dim: #c9b79a; --paper-rule: #b9a584;
  --ink: #2a1a16; --ink-soft: #6f5b41; --heading-ink: #5a2d0c;
  --pumpkin: #ff8a2a; --pumpkin-deep: #c8611a; --pumpkin-glow: rgba(255,138,42,.45);
  --moss: #7fb069; --blood: #c8323c; --blood-deep: #8f1f27; --blood-ink: #a8232c; --gold: #d9a441;
  --receipt: #fbf6ea;
  --display: "Henny Penny", "Metamorphous", Georgia, serif;
  --heading: "Metamorphous", Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
  --body: "Lora", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--paper); font-family: var(--body); font-size: 17px; line-height: 1.55; min-height: 100vh; overflow-x: hidden; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 400; }
h1 { font-family: var(--display); color: var(--pumpkin); text-shadow: 0 2px 0 var(--pumpkin-deep), 0 0 24px var(--pumpkin-glow); }
h2, h3 { font-family: var(--heading); }
p { margin: 0; }
a { color: var(--pumpkin); }
ol, ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--haze); font-weight: 600; }
.muted { color: var(--paper-dim); }
button { font: inherit; font-size: 15px; background: var(--pumpkin); color: var(--night); border: 0; border-radius: 6px; padding: 10px 16px; cursor: pointer; min-height: 44px; box-shadow: 0 3px 0 var(--pumpkin-deep); transition: transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color: transparent; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pumpkin-deep); }
button.ghost { background: transparent; color: var(--paper-dim); border: 1px solid var(--night-4); box-shadow: none; }
button.ghost:active { transform: none; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* sky backdrop (guest + mc) */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse 120% 70% at 50% -10%, var(--night-3), var(--night) 60%); }
.sky::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .35; mix-blend-mode: overlay; }
.sky::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(ellipse 50% 30% at 30% 110%, rgba(142,122,166,.18), transparent 70%), radial-gradient(ellipse 60% 30% at 80% 100%, rgba(142,122,166,.12), transparent 70%); animation: fogdrift 40s ease-in-out infinite alternate; }
@keyframes fogdrift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.sky .moon { position: absolute; right: -36px; top: -40px; width: 170px; opacity: .95; filter: drop-shadow(0 0 40px rgba(243,230,207,.35)); }
.sky .web { position: absolute; left: 0; top: 0; width: 190px; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .sky::after { animation: none; } }
/* paper surface */
.paper { position: relative; color: var(--ink); background: var(--paper); border-radius: 4px 12px 4px 14px;
  box-shadow: 0 1px 0 #fff8 inset, 0 0 0 1px var(--paper-rule), 0 18px 32px -18px rgba(0,0,0,.95); }
.paper::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.paper > * { position: relative; }
.paper .eyebrow { color: #8a6a3f; }
.paper h2, .paper h3 { color: var(--heading-ink); }
.paper .muted { color: var(--ink-soft); }
.paper a { color: var(--pumpkin-deep); }
.quote { border-left: 3px solid var(--pumpkin); padding: 6px 14px; font-style: italic; }
.warn { font-size: 13px; color: var(--blood-ink); font-weight: 600; }
.stamp { display: inline-block; align-self: start; border: 2px solid var(--blood-ink); color: var(--blood-ink); font-family: var(--heading); font-size: 13px; letter-spacing: .1em; padding: 3px 8px; transform: rotate(-3deg); border-radius: 3px; opacity: .9; mix-blend-mode: multiply; }
/* Benny's dispatches: cab receipts */
.dispatch { background: var(--receipt); color: #1f1a16; font-family: var(--type); font-size: 15px; line-height: 1.5; padding: 16px 18px 22px; border-radius: 2px; position: relative; box-shadow: 0 8px 18px -12px rgba(0,0,0,.8); border: 1px solid #d9c7a6; border-bottom: 0; display: grid; gap: 8px; }
.dispatch::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 7px; background: radial-gradient(circle at 6px 0, var(--receipt) 5px, transparent 5.5px) 0 0/12px 7px repeat-x; }
.dispatch .hd { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--paper-rule); padding-bottom: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dispatch .hd img { width: 26px; }
.dispatch .lead { font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.dispatch ul { gap: 4px; }
.missing { text-align: center; display: grid; gap: 14px; padding: 60px 20px; justify-items: center; position: relative; z-index: 1; }
.missing img { width: 90px; }
.missing h1 { font-size: clamp(30px, 8vw, 44px); }
.loading { text-align: center; color: var(--haze); padding-block: 60px; font-style: italic; position: relative; z-index: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--receipt); color: #1f1a16; font-family: var(--type); font-size: 14px; padding: 12px 16px; border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.6); max-width: min(90vw, 420px); text-align: center; animation: toast 5s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 8% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }
.emblem { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night-3); box-shadow: 0 0 0 2px var(--pumpkin-deep) inset; }
.emblem img { max-width: 30px; max-height: 32px; }