/* The Black Ledger: "Boiler Room" theme. Spec and decisions: docs/ui-theme-plan.md */

:root {
  --bg: #111311;
  --surface: #191B18;
  --sunk: #0B0C0A;
  --fg: #DDD8CB;
  --muted: #8F8C80;
  --line: #2D302B;
  --line-strong: #474A43;
  --edge: rgba(255, 255, 255, 0.04);
  --accent: #E38A2F;
  --accent-fg: #111311;
  --accent-soft: rgba(227, 138, 47, 0.09);
  --up: #9CB27B;
  --down: #C9553E;
  --redact: #030303;
  --glow: rgba(227, 138, 47, 0.16);
  --vignette: rgba(0, 0, 0, 0.55);
  --tape: #CDBF9C;
  --tape-fg: #2A251C;
  --side-a: #E38A2F;
  --side-b: #86AFC0;
  --keeper: #A98BFF; /* Bookkeepers' tags and names: a violet no alias colour (web.SIG_COLORS) comes near */
  --keeper-fg: #111311;

  /* Sealed envelope (B2 "Dead Drop") */
  --kraft: #B08A57;
  --kraft-fg: #221A10;
  --fold: rgba(40, 25, 10, 0.35);
  --env-tape: #D9CDAF;
  --ink: #8E2418;
  --misreg: rgba(40, 40, 120, 0.45);

  /* Neon sign (B3 "Night Market"), login only */
  --neon-tube: #FFE1EA;
  --neon: #FF5C8A;

  --stencil: "Saira Stencil One", Impact, "Arial Narrow", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --neon-font: "Tilt Neon", "Arial Rounded MT Bold", Arial, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --chalk-font: "Cabin Sketch", "Comic Sans MS", cursive;

  /* Things in the room: paper, folders, posters, index cards, the bookie's slate */
  --paper: #E8E2D2;
  --paper-fg: #26221B;
  --carbon: #BEBBB1;
  --carbon-fg: #3A4160;
  --manila: #C4A46C;
  --manila-dk: #A9874F;
  --manila-fg: #2A2215;
  --label: #F1EEE6;
  --poster: #D9D0B8;
  --poster-fg: #2A2318;
  --card: #F2EFE7;
  --notice: #E7DDB6;
  --notice-fg: #2A2416;
  --rule-blue: rgba(70, 110, 170, 0.32);
  --rule-red: rgba(200, 60, 50, 0.55);
  --slate: #272C28;
  --chalk: #ECE9DF;
  --wood: #5B3F26;
  --flap: #161816;
  --cold: #86AFC0;

  color-scheme: dark;
}

/* ---------- Room: concrete, sodium lamp, vignette, grain ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  position: relative; margin: 0; min-height: 100vh;
  color: var(--fg); background: transparent;
  font: 15px/1.55 var(--sans);
}
/* The lamp: hangs over the top of the page and scrolls away with it. */
body::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 720px; pointer-events: none;
  background: radial-gradient(ellipse 60% 75% at 28% -12%, var(--glow), transparent 70%);
  animation: lamp-fail 47s infinite;
}
.room::before {
  content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, var(--vignette) 100%);
}
.room::after {
  content: ""; position: fixed; z-index: 100; inset: 0; pointer-events: none;
  opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A failing bulb: one short stutter roughly every 47 seconds. */
@keyframes lamp-fail {
  0%, 95.6%, 96.4%, 97.2%, 100% { opacity: 1; }
  95.9% { opacity: 0.3; }
  96.1% { opacity: 0.85; }
  96.8% { opacity: 0.45; }
}

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
main.wrap { padding-block: 28px 72px; }

/* ---------- Type ---------- */

h1, h2, h3, h4 { text-wrap: balance; }
h1 { font: 700 clamp(26px, 4vw, 34px)/1.15 var(--mono); margin: 4px 0 12px; letter-spacing: -0.01em; }
h2 {
  font: 400 18px/1.3 var(--stencil); text-transform: uppercase; letter-spacing: 0.09em;
  margin: 40px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
h3 { font: 700 18px/1.3 var(--mono); margin: 0 0 8px; }
h4 { font: 700 15px/1.3 var(--mono); margin: 14px 0 6px; }
p { margin: 0 0 12px; }
h1 + p.muted, .lede { max-width: 72ch; font-size: 15px; margin-bottom: 20px; }
a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(227, 138, 47, 0.5); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
strong, b { font-weight: 700; }
code { font-family: var(--mono); font-size: 0.95em; background: var(--sunk); padding: 1px 5px; border: 1px solid var(--line); word-break: break-all; }
ul { padding-left: 20px; }
li { margin-bottom: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.muted { color: var(--muted); font-size: 0.93em; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.content { white-space: pre-wrap; overflow-wrap: anywhere; }
.stencil { font-family: var(--stencil); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.pos { color: var(--up); }
.neg { color: var(--down); }
.side-a { color: var(--side-a); }
.side-b { color: var(--side-b); }
.verified { color: var(--up); }

/* ---------- Top bar and navigation ---------- */

.topbar { position: relative; z-index: 20; background: linear-gradient(rgba(11, 12, 10, 0.75), rgba(11, 12, 10, 0.35)); border-bottom: 1px solid var(--line); }
.topbar-row { display: flex; align-items: center; gap: 8px 26px; min-height: 60px; }
.wordmark {
  font: 400 22px/1 var(--stencil); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--accent); filter: brightness(1.1); }

/* If the links ever don't fit, they scroll sideways rather than run under the clock and stash. */
.primary-nav { display: flex; gap: 2px 20px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a, .sub-nav a {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; padding-block: 6px 4px;
}
.primary-nav a { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.primary-nav a:hover, .sub-nav a:hover { color: var(--fg); }
.primary-nav a[aria-current], .sub-nav a[aria-current] { color: var(--fg); border-color: var(--accent); }
.alias-menu .menu a.bookkeeper { color: var(--down); font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 10px; }

.me { display: flex; align-items: center; gap: 6px 18px; margin-left: auto; }
.tct { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tct b { font: 700 15px var(--mono); letter-spacing: 0; color: var(--fg); margin-left: 4px; }
.whispers { position: relative; display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; padding: 4px; }
.whispers svg { width: 20px; height: 20px; }
.whispers:hover, .whispers[aria-current] { color: var(--fg); }
.whispers .count {
  position: absolute; top: -3px; right: -9px; min-width: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: var(--accent-fg); font: 700 11px/18px var(--mono); text-align: center;
}
.stash-link { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-decoration: none; padding-block: 4px 2px; }
.stash-link .num { font-weight: 700; font-size: 15px; white-space: nowrap; }
.whispers .count.bump { animation: count-bump 0.45s 1.5s; }
@keyframes count-bump { 50% { transform: scale(1.35); } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The stash as a tally counter: cream figures on black drums in a steel plate. Rolling drums (base.html) hold a reel of
   symbols, one 1.3em row each. */
.tally { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tally .drums { display: inline-flex; gap: 1px; padding: 2px 3px; background: linear-gradient(180deg, #3A3D39, #232522); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.tally .drum {
  display: inline-block; min-width: 0.7em; height: 1.3em; overflow: hidden; text-align: center;
  font: 700 14px/1.3em var(--mono); color: #ECE6D6; background: linear-gradient(180deg, #000, #1C1C1A 22%, #2A2A27 50%, #1C1C1A 78%, #000);
}
.tally .drum.lead { color: #57544C; }
.tally .reel { display: block; transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1); }
.tally .reel > span { display: block; height: 1.3em; }
.tally .unit { font: 400 12px var(--sans); color: var(--muted); }
.tally-slip { position: absolute; right: 0; top: 100%; font: 700 13px var(--mono); pointer-events: none; opacity: 0; animation: slip-in 1.6s ease-out forwards; }
.tally-slip.in { color: var(--up); }
.tally-slip.out { color: var(--down); animation-name: slip-out; }
@keyframes slip-in { 0% { opacity: 0; transform: translateY(14px); } 20%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes slip-out { 0% { opacity: 0; transform: translateY(-4px); } 20%, 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

.alias-menu { position: relative; }
.alias-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; padding: 6px 0; white-space: nowrap;
}
.alias-menu > summary .name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.alias-menu > summary::-webkit-details-marker { display: none; }
.alias-menu > summary::after { content: ""; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.alias-menu .menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  display: grid; padding: 6px 0;
}
.alias-menu .menu a, .alias-menu .menu button {
  display: block; width: 100%; text-align: left; padding: 8px 14px; border: 0; background: none;
  color: var(--fg); font: 14px var(--sans); text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer;
}
.alias-menu .menu a:hover, .alias-menu .menu button:hover { background: var(--accent-soft); color: var(--accent); }
.alias-menu .menu form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

.subbar { border-top: 1px solid var(--line); background: rgba(11, 12, 10, 0.45); }
.subbar .wrap { display: flex; align-items: center; gap: 8px 20px; min-height: 46px; }
.sub-nav { display: flex; gap: 2px 20px; flex: 1; min-width: 0; font-size: 14px; }
.subbar .button { padding: 6px 12px; flex: none; }

@media (max-width: 1100px) {
  .topbar-row { flex-wrap: wrap; padding-top: 10px; gap: 4px 16px; }
  .primary-nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .sub-nav { overflow-x: auto; scrollbar-width: none; }
  .primary-nav::-webkit-scrollbar, .sub-nav::-webkit-scrollbar { display: none; }
  .wordmark { font-size: 19px; }
}
@media (max-width: 520px) {
  .subbar .wrap { flex-wrap: wrap; padding-block: 6px; }
  .sub-nav { flex: 1 0 100%; }
  .tct .lbl { display: none; }
  .wordmark { font-size: 16px; }
  .me { gap: 6px 12px; }
  .primary-nav, .sub-nav { mask-image: linear-gradient(to right, #000 88%, transparent); }
}

/* ---------- Panels ---------- */

.box, fieldset.box {
  background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge);
  padding: 18px 20px; margin: 16px 0; min-width: 0;
}
.box > :last-child { margin-bottom: 0; }
fieldset.box legend { font: 400 14px var(--stencil); letter-spacing: 0.1em; text-transform: uppercase; padding: 0 8px; margin-left: -8px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.panel-label { font: 400 14px/1.2 var(--stencil); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.panel-label .muted { font-family: var(--sans); letter-spacing: 0; text-transform: none; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.grid-2 > .box { margin: 0; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.flash, .banner { padding: 10px 14px; margin: 12px 0; background: var(--sunk); border: 1px solid var(--line); border-left: 3px solid var(--up); }
.flash.error { border-left-color: var(--down); }
.banner { background: var(--accent-soft); border-color: rgba(227, 138, 47, 0.3); border-left-color: var(--accent); }
.banner.bad { background: rgba(201, 85, 62, 0.08); border-color: rgba(201, 85, 62, 0.35); border-left-color: var(--down); }
.flashes { margin-top: 16px; }

/* Stat strip: label over figure. */
.stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 6px 0 18px; }
.stat { display: grid; gap: 2px; }
.stat .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.stat .val { font: 700 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.stat .val.big { font-size: 30px; }

/* ---------- Buttons ---------- */

button, a.button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 12px/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--fg); cursor: pointer; vertical-align: middle;
}
button:hover, a.button:hover { border-color: var(--accent); color: var(--accent); }
button.primary, a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button.primary:hover, a.button.primary:hover { filter: brightness(1.1); color: var(--accent-fg); }
button.danger { color: var(--down); border-color: rgba(201, 85, 62, 0.55); }
button.danger:hover { background: rgba(201, 85, 62, 0.12); color: var(--down); border-color: var(--down); }
button.link { padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font: inherit; color: var(--muted); text-decoration: underline; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0; }
.actions form { margin: 0; }

/* ---------- Forms ---------- */

label { display: block; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=datetime-local], input[type=file], textarea, select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  background: var(--sunk); color: var(--fg); border: 1px solid var(--line); border-radius: 0;
  font: 15px/1.4 var(--sans);
}
input[type=file] { padding: 7px; font-size: 13px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input::placeholder, textarea::placeholder { color: #66655C; }
textarea { min-height: 110px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; vertical-align: -3px; }
label.check { display: inline-flex; align-items: flex-start; gap: 8px; margin-right: 18px; color: var(--fg); font-size: 14px; }
label.check input { margin-top: 3px; flex: none; }
fieldset { border: 1px solid var(--line); padding: 12px 16px; margin: 0 0 14px; }
fieldset legend { color: var(--muted); font-size: 13px; padding: 0 6px; }
form.inline { display: inline; }
form.inline input[type=text] { display: inline-block; width: auto; margin: 0 6px 0 0; }

/* A row of filters or a one-line form: inputs side by side, wrapping on small screens. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 0 0 18px; }
.filters input, .filters select { margin: 0; width: auto; }
.filters input[type=text] { flex: 1 1 240px; }
.filters select { flex: 0 1 200px; }
.filters label { margin: 0; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.row-form label { margin: 0; flex: 1 1 200px; }
.row-form input, .row-form select { margin-bottom: 0; }

/* ---------- Ledger tables ---------- */

table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 14px; }
th {
  text-align: left; vertical-align: bottom; padding: 7px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
  border-bottom: 3px double var(--fg);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
tr:last-child > td { border-bottom: 0; }
tbody tr:hover > td, table tr:hover > td { background: rgba(255, 255, 255, 0.015); }
/* Money columns: right-aligned figures behind a double red rule. */
th.money, td.money {
  text-align: right; white-space: nowrap; border-left: 3px double var(--down);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
th.money { font-family: var(--sans); }
td.money .muted { font-family: var(--sans); white-space: normal; }
td.num, th.num { text-align: right; white-space: nowrap; }
th.num { font-family: var(--sans); }
td.when { white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: 13px; }
td.empty { color: var(--muted); padding-block: 18px; }
tr.unread > td { font-weight: 600; }
tr.unread > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.mine > td { background: var(--accent-soft); }
/* Key/value tables (the API key terms, a message header). */
table.terms th { width: 30%; border-bottom: 1px solid var(--line); vertical-align: top; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--muted); font-weight: 600; padding-block: 9px; }
table.terms tr:last-child > th { border-bottom: 0; }

/* Small action forms inside table cells (Bookkeeper queues, watch lists). */
td form:not(.inline) { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
td form:not(.inline):last-child { margin-bottom: 0; }
td form input[type=text], td form input[type=number] { flex: 1 1 110px; width: auto; margin: 0; padding: 6px 8px; font-size: 14px; }
td button { padding: 6px 10px; }
td form.inline { display: inline-flex; }

@media (max-width: 700px) {
  table { display: block; overflow-x: auto; }
  table.terms th { width: auto; min-width: 120px; }
}

/* ---------- Chips, tape, live dots ---------- */

.tag, .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; margin: 2px 4px 2px 0;
  border: 1px solid currentColor; border-radius: 2px; color: var(--muted);
  font: 600 11px/1.5 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.tag.verified, .chip.up { color: var(--up); }
.chip.down, .tag.down { color: var(--down); }
.chip.accent { color: var(--accent); }
/* Torn-verified evidence chips carry long text; let them wrap. */
.evidence-teaser .tag { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 12px; }

.tape {
  display: inline-block; padding: 3px 11px; margin: 0 4px 0 0; transform: rotate(-2deg);
  background: var(--tape); color: var(--tape-fg);
  font: 700 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  clip-path: polygon(3% 0, 97% 6%, 100% 30%, 98% 55%, 100% 80%, 96% 100%, 4% 94%, 0 70%, 2% 45%, 0 20%);
}

.live { color: var(--up); }
.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 6px currentColor; animation: live-flicker 5.3s infinite;
}
@keyframes live-flicker {
  0%, 40%, 44%, 71%, 100% { opacity: 1; }
  42% { opacity: 0.25; }
  72.5% { opacity: 0.5; }
  74% { opacity: 1; }
}

/* ---------- Bars and charts ---------- */

.bar { display: inline-block; width: 120px; height: 6px; background: var(--sunk); border: 1px solid var(--line); vertical-align: middle; }
.bar span { display: block; height: 100%; background: var(--accent); }
.bar.wide { width: 100%; height: 10px; margin: 6px 0 10px; }
svg.chart { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--sunk); margin: 6px 0 14px; }
svg.chart polyline { fill: none; stroke-width: 2; }
svg.chart .line-a { stroke: var(--side-a); }
svg.chart .line-b { stroke: var(--side-b); }
svg.chart .line-lead { stroke: var(--fg); }
svg.chart .line-target { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 4; }

/* ---------- In-page tabs ---------- */

nav.tabs { display: flex; gap: 2px 22px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; overflow-x: auto; scrollbar-width: none; }
nav.tabs a {
  padding: 8px 0 7px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap;
  color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
nav.tabs a:hover { color: var(--fg); }
nav.tabs a.current { color: var(--fg); border-color: var(--accent); }
.periods { display: flex; gap: 6px; margin: 0 0 14px; }
.periods a, .periods strong { padding: 4px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.periods strong { color: var(--accent-fg); background: var(--fg); border-color: var(--fg); }

/* ---------- Dossier cards ---------- */

.card-list { display: grid; gap: 12px; margin: 0 0 18px; }
.card { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge); padding: 16px 18px; }
.card:hover { border-color: var(--line-strong); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.card h3 { font-size: 18px; margin: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .meta { color: var(--muted); font-size: 13px; }
.card .teaser { color: var(--fg); opacity: 0.85; font-size: 14px; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.price { font: 700 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.price.big { font-size: 24px; }

/* ---------- Sealed envelope ---------- */

.envelope {
  position: relative; display: grid; place-items: center; min-height: 128px; margin: 10px 0 12px; overflow: hidden;
  color: var(--kraft-fg);
  background:
    linear-gradient(to bottom right, transparent 49.4%, var(--fold) 50%, transparent 50.8%) top left / 50.2% 55% no-repeat,
    linear-gradient(to bottom left, transparent 49.4%, var(--fold) 50%, transparent 50.8%) top right / 50.2% 55% no-repeat,
    var(--kraft);
  box-shadow: inset 0 0 40px rgba(40, 25, 10, 0.35);
}
.envelope::before {
  content: ""; position: absolute; width: 96px; height: 22px; top: 10px; right: -16px; transform: rotate(32deg);
  background: var(--env-tape); opacity: 0.9;
}
.stamp {
  position: relative; top: 14%; transform: rotate(-7deg);
  border: 3px double var(--ink); color: var(--ink); padding: 3px 14px;
  font: 700 15px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 1.5px 1px 0 var(--misreg);
}
.envelope.small { min-height: 84px; }
.envelope.small .stamp { font-size: 13px; }

.unlocked-tag { color: var(--up); }
.sealed-body { display: grid; gap: 10px; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.buy-row .price { margin-right: auto; }

/* ---------- Evidence ---------- */

.evidence { border-top: 1px dashed var(--line-strong); margin-top: 14px; padding-top: 14px; }
.evidence img { max-width: 100%; height: auto; border: 1px solid var(--line); display: block; }
.evidence table.header { width: auto; }
.evidence table.header th { padding-right: 18px; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
blockquote.event { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--up); background: var(--sunk); }
.withheld { display: inline-block; padding: 0 6px; background: var(--redact); color: var(--muted); font: 600 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; vertical-align: 1px; }
label.name-pick { display: inline; margin: 0; padding: 0 4px; border: 1px dotted var(--line-strong); color: var(--fg); font-size: inherit; white-space: nowrap; }
/* Picking evidence from a long list: the options sit above it and stay in view, each row has its own Attach. */
.attach-options { position: sticky; top: 0; z-index: 5; padding: 12px 0 4px; margin-bottom: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.attach-options label:last-child { margin-bottom: 8px; }
table.pick-list tr:hover > td { background: var(--accent-soft); }
table.pick-list td:last-child { width: 1%; }
.attach { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line-strong); background: var(--sunk); }
.attach h4 { margin: 0 0 10px; font-family: var(--stencil); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }

details > summary { cursor: pointer; }
details.report { margin-top: 10px; }
details.report summary { font-size: 12px; }
details.report form { margin-top: 8px; }
details.panel { background: var(--surface); border: 1px solid var(--line); padding: 12px 18px; margin: 14px 0; }
details.panel[open] > summary { margin-bottom: 12px; }

/* ---------- Drop code ---------- */

.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 14px; }
code.big {
  font: 700 clamp(22px, 5vw, 30px)/1.2 var(--mono); letter-spacing: 0.08em; word-break: normal;
  padding: 8px 16px; background: var(--sunk); color: var(--accent); border: 1px dashed var(--line-strong);
}

/* The drop code in a matchbook (deposit.html): matches above a striker strip, and a cover hinged at its foot that
   flips down towards you to show the code written on its inside. The box keeps room for the open cover. */
.matchbook-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 26px; margin: 8px 0 4px; }
.matchbook-side { flex: 1 1 180px; min-width: 0; padding-top: 6px; }
.matchbook { position: relative; flex: none; width: 170px; height: 300px; perspective: 900px; }
.mb-matches { position: absolute; left: 0; top: 0; width: 170px; height: 150px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 9px 6px; background: #3A2717; }
.mb-matches i { width: 12px; height: 74px; background: linear-gradient(90deg, #CFC2A2, #E9DFC6 50%, #BFB190); }
.mb-matches i::before { content: ""; display: block; width: 14px; height: 14px; margin: -6px 0 0 -1px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 40% 35%, #B83A2E, #6E1610); }
.mb-striker { position: absolute; left: 0; top: 150px; width: 170px; height: 56px; background: radial-gradient(rgba(0, 0, 0, 0.35) 1px, transparent 1.5px) 0 0 / 4px 4px, #4A3A2A; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); }
.mb-striker::after { content: ""; position: absolute; left: 79px; top: 14px; width: 12px; height: 4px; background: #B9BDB8; box-shadow: 0 22px 0 #B9BDB8; }
.matchbook .mb-cover {
  position: absolute; left: 0; top: 0; width: 170px; height: 150px; padding: 0; border: 0; background: none;
  transform-origin: 50% 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.3, 0.05, 0.2, 1);
}
.matchbook .mb-cover:hover { border: 0; }
.matchbook.open .mb-cover { transform: rotateX(-180deg); }
.matchbook.instant .mb-cover { transition: none; }
.mb-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-transform: none; letter-spacing: 0; }
.mb-front { gap: 5px; background: #4E1714; color: #E9DCC0; box-shadow: inset 0 0 0 6px #4E1714, inset 0 0 0 7px rgba(233, 220, 192, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5); }
.mb-front .mb-the { font: 400 11px var(--stencil); letter-spacing: 0.3em; text-transform: uppercase; }
.mb-front .mb-name { font: 400 23px/1 var(--stencil); letter-spacing: 0.08em; text-transform: uppercase; }
.mb-front .mb-rule { width: 80px; height: 1px; margin: 3px 0; background: rgba(233, 220, 192, 0.5); }
.mb-front .mb-members { font: 600 9px var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.mb-back { gap: 8px; padding: 12px; background: #E6DCC4; color: #1E1A14; transform: rotateX(180deg); }
.mb-back code.big { padding: 0; border: 0; background: none; color: #1E1A14; font: 400 21px var(--marker); letter-spacing: 0.02em; white-space: nowrap; transform: rotate(-4deg); word-break: normal; }
.mb-back .mb-note { font: 400 11px/1.4 var(--mono); text-align: center; }

/* ---------- Login: the door ---------- */
/* Concept A of the "Ledger Login Concepts" canvas. A concrete wall lit by the neon sign and a caged lamp, and a steel
   door: its peephole slides open while the key field has focus, Knock sends the key in the background (login.html),
   the voice behind the door answers in a speech bubble, and on a right key the door swings inward before the
   Ledger loads. */

.door { max-width: 560px; margin: 0 auto; padding-top: clamp(24px, 8vh, 72px); }
.door .lede { text-align: center; margin-inline: auto; color: var(--muted); }

/* Cast concrete: formwork seams and tie holes, lit from above. The other pages' sodium lamp is off here. */
body.at-door {
  background:
    radial-gradient(ellipse 520px 220px at 50% 60px, rgba(255, 92, 138, 0.09), transparent 70%),
    radial-gradient(ellipse 380px 560px at 50% 380px, rgba(255, 214, 160, 0.12), transparent 72%),
    radial-gradient(circle, rgba(0, 0, 0, 0.5) 0 2.5px, rgba(255, 255, 255, 0.03) 3.5px, transparent 4.5px) 60px 50px / 240px 160px,
    linear-gradient(180deg, transparent 0 159px, rgba(0, 0, 0, 0.35) 159px 160px) 0 0 / 100% 160px,
    linear-gradient(90deg, transparent 0 239px, rgba(0, 0, 0, 0.25) 239px 240px) 0 0 / 240px 100%,
    linear-gradient(180deg, #1c1e1c, #141614);
}
body.at-door::before { display: none; }

.neon-sign { text-align: center; margin: 0 0 22px; }
.neon {
  display: inline-block; margin: 0; padding: 8px 18px;
  font: 400 clamp(32px, 8.4vw, 66px)/1.05 var(--neon-font); letter-spacing: 0.02em;
  color: var(--neon-tube);
  text-shadow: 0 0 2px var(--neon), 0 0 9px rgba(255, 92, 138, 0.85), 0 0 22px rgba(255, 92, 138, 0.35);
  animation: neon-on 2.4s ease-out both, neon-buzz 17s 2.4s infinite;
}
.neon-sign .under { display: block; margin-top: 8px; font: 600 11px var(--sans); letter-spacing: 0.42em; text-transform: uppercase; color: #77746A; }
/* The sign strikes up once when the page opens, then buzzes (~0.85s) every 17s. */
@keyframes neon-on { 0%, 8%, 11%, 14% { opacity: 0.2; } 9%, 12.5%, 15%, 100% { opacity: 1; } }
@keyframes neon-buzz { 0%, 95%, 97.5%, 100% { opacity: 1; } 96.25% { opacity: 0.45; } 98.75% { opacity: 0.7; } }

.alley { padding: clamp(20px, 5vh, 48px) 0 40px; }
.alley-scene {
  display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 100%) minmax(0, 1fr);
  grid-template-areas: "notice door rules"; gap: 40px 48px; align-items: start;
}
.door-col { grid-area: door; width: min(420px, 100%); }
.alley .house-rules.sheet { grid-area: rules; justify-self: start; max-width: 300px; margin: 120px 0 0; transform: none; padding: 30px 24px 20px; font-size: 13px; line-height: 1.55; }
.pinned-notice { grid-area: notice; justify-self: end; max-width: 300px; margin-top: 210px; }
@media (max-width: 860px) {
  .alley-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "door" "rules" "notice"; justify-items: center; }
  .alley .house-rules.sheet, .pinned-notice { justify-self: center; width: 100%; max-width: 420px; margin-top: 0; }
}

.wall-lamp { display: flex; justify-content: center; height: 54px; }
.wall-lamp i { position: relative; width: 74px; height: 34px; margin-top: 10px; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, #2A2C2A, #171817); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); }
.wall-lamp i::before, .wall-lamp i::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 14px; border-radius: 3px 3px 9px 9px; }
.wall-lamp i::before { background: linear-gradient(180deg, #FFF1D2, #F2C587); box-shadow: 0 0 14px 4px rgba(255, 205, 140, 0.55), 0 18px 60px 20px rgba(255, 196, 120, 0.12); animation: lamp-fail 61s infinite; }
.wall-lamp i::after { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(20, 20, 20, 0.7) 9px 11px); }

.door-frame { padding: 12px 12px 0; background: linear-gradient(90deg, #0B0C0B, #1A1C1A 50%, #0B0C0B); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
/* What's behind the door, only seen once it swings open: a landing and stairs down to the cellar (login.html). */
.doorway { position: relative; perspective: 1400px; background: #0A0604; }
.stairwell { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A 2-inch steel slab, hinged on its inside face: as it swings in, its hinge-side edge (::before) turns to face you,
   and its face turns away from the lamp (::after darkens it). Heavy: the latch gives, a beat, then a slow swing. */
.door-leaf {
  --thick: 18px;
  position: relative; height: 620px; transform-style: preserve-3d; transform-origin: 0 50% calc(-1 * var(--thick));
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.06), transparent 35%), linear-gradient(90deg, #1D201E, #262A27 50%, #1F2220);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 0 50px rgba(0, 0, 0, 0.55);
}
.door-leaf::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--thick); transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(90deg, #4A4F4A, #343834 30%, #262926 70%, #151715);
}
.door-leaf::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75)); transition: opacity 2s 0.5s;
}
.door-frame.open .door-leaf { animation: door-swing 2.6s forwards; }
.door-frame.open .door-leaf::after { opacity: 1; }
@keyframes door-swing {
  0% { transform: rotateY(0); animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
  9%, 22% { transform: rotateY(2.5deg); animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1); }
  100% { transform: rotateY(80deg); }
}

/* Whoever opens it: a backlit figure in a hat on the landing, to one side, his arm out to the door, warm light catching
   his edges. Sized and placed for standing 1.15m back (feet 62px above the threshold). The grin comes as the door swings. */
.greeter { position: absolute; left: calc(36% - 106px); bottom: 62px; width: 213px; height: 462px; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 196, 120, 0.45)); }
.greeter .figure { fill: #0A0807; }
.greeter .grin { fill: #EFE9DC; opacity: 0; transition: opacity 0.6s; }
.greeter .teeth { fill: none; stroke: #0A0807; stroke-width: 0.9; }
.door-frame.open .greeter .grin { opacity: 1; transition-delay: 1.5s; }
/* What he says once the door is open: a speech bubble from his mouth, over the stairwell, like the peephole's voice. */
.greeter-voice {
  position: absolute; left: calc(36% + 32px); top: 128px; width: max-content; max-width: min(180px, calc(64% - 44px)); margin: 0;
  padding: 8px 12px 9px; background: #E3DCCB; color: var(--paper-fg); border-radius: 3px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
  font: 400 13px/1.4 var(--mono); opacity: 0; transform: translateY(4px);
}
.greeter-voice::before { content: ""; position: absolute; left: -7px; top: 22px; border: 7px solid transparent; border-left: 0; border-right-color: #E3DCCB; }
.door-frame.open .greeter-voice { opacity: 1; transform: none; transition: opacity 0.35s 2.2s, transform 0.35s 2.2s; }
.door-leaf .panel { position: absolute; left: 28px; right: 28px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(255, 255, 255, 0.05); }
.door-leaf .panel.upper { top: 28px; height: 150px; }
.door-leaf .panel.lower { top: 410px; bottom: 28px; }
.door-leaf .hinge { position: absolute; left: -4px; width: 7px; height: 64px; border-radius: 2px; background: linear-gradient(90deg, #3A3D3A, #535853, #2C2F2C); }
.door-leaf .hinge.upper { top: 70px; }
.door-leaf .hinge.lower { bottom: 70px; }
.door-leaf .lever { position: absolute; right: 26px; top: 436px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6C706B, #2B2E2B); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.door-leaf .lever::after { content: ""; position: absolute; right: 10px; top: 6px; width: 56px; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #7A7E78, #3A3D39); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.55); }

/* The peephole: a sliding cover over a face, backlit by the bulb inside (the brim of his hat, two faint glints; the
   same man as .greeter, leaning in to the slot, so his size matches), and one word. Open while the key field has focus. */
.peep { position: absolute; left: 50%; top: 84px; width: min(220px, 64%); height: 46px; transform: translateX(-50%); overflow: hidden; border: 4px solid #2E322F; background: #030303; box-shadow: inset 0 4px 10px #000, 0 1px 0 rgba(255, 255, 255, 0.06); }
.peep-dark { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 140% at 50% 0%, #D9A262, #8A5428 55%, #2E1A0C); box-shadow: inset 0 4px 10px #000; }
.peep-dark::before, .peep-dark::after { content: ""; position: absolute; left: 50%; background: #0A0807; border-radius: 50%; }
.peep-dark::before { top: -4px; width: 43px; height: 60px; margin-left: -21.5px; box-shadow: 0 0 4px 1px rgba(255, 190, 120, 0.35); }
.peep-dark::after { top: 1px; width: 82px; height: 10px; margin-left: -41px; }
.peep-dark i { position: absolute; top: 18px; width: 3px; height: 2px; border-radius: 1px; background: rgba(230, 215, 185, 0.75); box-shadow: 0 0 4px rgba(230, 215, 185, 0.6); opacity: 0; transition: opacity 0.15s; }
.peep-dark i:first-child { left: calc(50% - 10px); }
.peep-dark i:last-child { left: calc(50% + 7px); }
.peep-cover { position: absolute; inset: 0; background: linear-gradient(180deg, #343834, #252825); transition: transform 0.35s cubic-bezier(0.5, 0, 0.2, 1); }
.peep-cover::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 4px; margin-top: -2px; border-radius: 2px; background: #151715; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
/* The voice behind the door: a speech bubble from the slot. It asks for the key while the field has focus, and
   answers a knock ("Not tonight." with the reason, or "Come in, …"), which holds the slot open (.speaking). It sits
   over the door, so nothing on the page moves when it speaks. */
.peep-voice {
  position: absolute; z-index: 2; left: 50%; top: 142px; width: max-content; max-width: min(260px, calc(100% - 40px)); margin: 0;
  padding: 8px 14px 9px; background: #E3DCCB; color: var(--paper-fg); border-radius: 3px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
  font: 400 13.5px/1.4 var(--mono); text-align: center;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity 0.15s, transform 0.15s; pointer-events: none;
}
.peep-voice::before { content: ""; position: absolute; left: 50%; top: -7px; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #E3DCCB; }
.peep-voice strong { display: block; font-size: 14.5px; font-weight: 400; }
.door-leaf:focus-within .peep-cover, .door-leaf.speaking .peep-cover { transform: translateX(100%); }
.door-leaf:focus-within .peep-dark i, .door-leaf.speaking .peep-dark i { opacity: 1; transition: opacity 0.3s 0.4s; }
.door-leaf:focus-within .peep-voice, .door-leaf.speaking .peep-voice { opacity: 1; transform: translate(-50%, 0); transition: opacity 0.3s 0.55s, transform 0.3s 0.55s; }

/* The plate: a bronze escutcheon holding the key field and Knock. */
.door-plate {
  position: absolute; left: 50%; top: 196px; width: min(300px, calc(100% - 40px)); transform: translateX(-50%);
  margin: 0; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #4B3C28, #33281A); border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 225, 170, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.door-plate label { margin: 0; font: 600 10.5px var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: #C9AD7C; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.door-plate input[type=password] { height: 46px; padding: 0 14px; border: 1px solid #120D07; border-radius: 1px; background: #060606; color: var(--paper); font: 700 16px var(--mono); letter-spacing: 0.12em; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9); }
.door-plate input[type=password]::placeholder { color: #5D584E; letter-spacing: 0.06em; }
.door-plate input[type=password]:focus { border-color: var(--accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--accent); }
.door-plate .knock { height: 46px; border: 1px solid #1E160B; border-radius: 1px; background: linear-gradient(180deg, #A07C46, #6F5430); color: #1B1309; font: 700 13px var(--sans); letter-spacing: 0.34em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.45), 0 2px 4px rgba(0, 0, 0, 0.5); }
.door-plate .knock:hover { filter: brightness(1.12); color: #1B1309; border-color: #1E160B; }
.door-plate .knock:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door-plate .knock:disabled { opacity: 1; cursor: wait; }
.door-plate .hint { font-size: 11.5px; color: #A8916A; }

/* The steel sill under the door. */
.threshold { height: 3px; margin: 0 -12px; background: #1E201E; }

/* House rules: a typed sheet clipped to the wall, set straight. */
.house-rules h2 { margin: 0; font: 400 22px/1 var(--stencil); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-fg); border: 0; }
.house-rules .sheet-label { margin: 5px 0 14px; }
.house-rules .rules p { margin: 0 0 9px; }
.house-rules .rules-foot { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed rgba(38, 34, 27, 0.35); }

/* A printed notice pinned to the wall. */
.pinned-notice { position: relative; padding: 20px 20px 18px; background: #D2CBB9; color: var(--poster-fg); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6); font: 400 13.5px/1.5 var(--mono); }
.pinned-notice::before { content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9A9D98, #3D403C); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.45); }
.pinned-notice .notice-label { display: block; margin-top: 8px; font: 700 12px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.pinned-notice h2 { margin: 6px 0 8px; font: 700 18px/1.25 var(--mono); letter-spacing: 0; text-transform: none; color: inherit; border: 0; }
.pinned-notice p { margin: 0 0 12px; }
.pinned-notice a { font-weight: 700; color: var(--ink); }

.alley .dev-login { max-width: 560px; margin: 48px auto 0; }

/* ---------- Membership card: handed over once, right after choosing an alias (/welcome) ---------- */

.welcome h1 { text-align: center; }
.member-card {
  position: relative; max-width: 470px; margin: 26px auto 28px; border-radius: 12px; overflow: hidden;
  background: var(--card); color: var(--paper-fg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65);
  transform: rotate(1.2deg); animation: card-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mc-band { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 22px; background: var(--bg); color: var(--accent); font: 400 15px var(--stencil); letter-spacing: 0.16em; text-transform: uppercase; }
.mc-band .mc-kind { color: var(--muted); font-size: 12px; }
.mc-body { display: flex; gap: 22px; align-items: center; padding: 24px 24px 92px; }
.mc-body .sig.lg { width: 92px; height: 92px; font-size: 32px; }
.mc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 400 14px var(--mono); }
.mc-lbl { font: 700 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.mc-alias { font: 700 30px/1.1 var(--mono); overflow-wrap: anywhere; }
.mc-stamp {
  position: absolute; right: 22px; bottom: 50px; padding: 4px 12px; border: 3px double var(--ink); color: var(--ink);
  font: 700 15px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 1.5px 1px 0 var(--misreg);
  transform: rotate(-9deg); opacity: 0.9; animation: mc-stamp 0.22s ease-in 0.7s both;
}
.mc-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 24px; border-top: 1px dashed rgba(38, 34, 27, 0.3); font: 400 12px var(--mono); opacity: 0.7; }
.welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) rotate(1.2deg); } }
@keyframes mc-stamp { from { opacity: 0; transform: rotate(-9deg) scale(2.4); } }

/* ---------- Profile ---------- */

.alias-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 6px; }
.alias-head h1 { margin: 0; }
.alias-head .actions { margin: 0; }
.quote { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 14px; margin: 0 0 16px; }

/* ---------- Alias tags: initials sprayed through a stencil ---------- */

.alias { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; vertical-align: middle; }
.sig {
  --c: var(--accent); position: relative; display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; font: 400 10px/1 var(--stencil); letter-spacing: 0.03em;
  color: var(--c); text-shadow: 0 0 5px var(--c);
}
.sig::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 30%, transparent 68%); opacity: 0.2; filter: blur(1.5px); }
.sig::after { content: ""; position: absolute; inset: 2px; border-radius: 46% 54% 50% 50%; border: 1.5px solid var(--c); opacity: 0.7; transform: rotate(-12deg); }
.sig.lg { width: 74px; height: 74px; font-size: 26px; }
.sig.lg::after { inset: 3px; border-width: 3px; }
.sig.md { width: 30px; height: 30px; font-size: 12px; }
/* A Bookkeeper: a filled violet office stamp with dark initials, where everyone else has an outlined spray-paint ring;
   the name in violet too, with "(Bookkeeper)" after it. */
.sig.keeper { --c: var(--keeper); color: var(--keeper-fg); text-shadow: none; isolation: isolate; }
.sig.keeper::before { inset: 1px; z-index: -1; border-radius: 3px; background: var(--c); opacity: 1; filter: none; transform: rotate(-4deg); }
.sig.keeper::after { inset: -2px; border-radius: 4px; border: 1px solid var(--c); opacity: 0.6; transform: rotate(-4deg); }
.alias.keeper a { color: var(--keeper); font-weight: 700; }
.keeper-tag { color: var(--keeper); font-size: 0.85em; font-weight: 600; margin-left: 0.3em; white-space: nowrap; }
h1.keeper { color: var(--keeper); }
h1 .keeper-tag { font-size: 0.5em; vertical-align: middle; }
/* An erased user: a tombstone, no colour and no link. */
.alias.erased { color: var(--muted); font-style: italic; }
.sig.erased { --c: var(--muted); }
details.erase { margin-top: 6px; }
details.erase summary { font-size: 12px; color: var(--muted); }
details.erase form { margin-top: 6px; }

/* ---------- Paper: unsealed pages, with the free cover page as a carbon copy ---------- */

.sheet {
  position: relative; margin: 6px 4px 14px; padding: 24px 24px 20px;
  background: var(--paper); color: var(--paper-fg); transform: rotate(-0.5deg);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), inset 0 0 50px rgba(120, 100, 60, 0.12);
  font: 15px/1.65 var(--mono);
}
.sheet:nth-of-type(even) { transform: rotate(0.4deg); }
.sheet a { color: var(--paper-fg); }
.sheet .clip { position: absolute; top: -14px; left: 26px; width: 15px; height: 44px; border: 2px solid #A7A9A4; border-radius: 8px; }
.sheet .clip::after { content: ""; position: absolute; inset: 5px 2px 9px; border: 2px solid #A7A9A4; border-radius: 6px; }
.sheet.carbon { background: var(--carbon); color: var(--carbon-fg); transform: rotate(0.4deg); text-shadow: 0 0 0.7px var(--carbon-fg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); }
.sheet .wm { position: absolute; top: 8px; right: 14px; font: 400 26px var(--stencil); letter-spacing: 0.12em; color: rgba(58, 65, 96, 0.22); transform: rotate(-8deg); pointer-events: none; }
.sheet .opened {
  position: absolute; top: 10px; right: 12px; padding: 2px 9px; border: 3px double var(--ink); color: var(--ink);
  font: 700 12px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 1.5px 1px 0 var(--misreg); transform: rotate(8deg);
}
.sheet .opened + h3, .sheet .opened + .sheet-label { padding-right: 96px; }
.sheet h3 { margin-bottom: 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sheet .sheet-label { display: block; margin-bottom: 6px; font: 700 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }

/* The unsealing, played once right after a purchase (base.html; _macros unseal_cover). Until it's done the page sits
   hidden under its envelope. A letter opener runs along the top edge (.cutting) and the slit opens behind its tip; the
   cut strip drops away and the page's top edge comes up out of the slit (.pulling); the page is drawn out into the
   reading view (.lifted); while it's put back the envelope fades (.emptied); once it lands the envelope is gone and the
   OPENED stamp slams down (.done). Without scripts, or under reduced motion, it's simply done. */
.opening { position: relative; }
.opening:not(.done) > .sheet { visibility: hidden; }
.opening.done .env-cover { display: none; }
.env-cover { position: absolute; inset: 0; pointer-events: none; }
.env-sliver, .env-body { position: absolute; left: 0; right: 0; background: var(--kraft); }
.env-sliver { top: 0; height: 14px; box-shadow: inset 0 0 12px rgba(40, 25, 10, 0.3); }
.env-body {
  top: 14px; bottom: 0; display: grid; place-items: center; color: var(--kraft-fg);
  background:
    linear-gradient(to bottom right, transparent 49.4%, var(--fold) 50%, transparent 50.8%) top left / 50.2% 55% no-repeat,
    linear-gradient(to bottom left, transparent 49.4%, var(--fold) 50%, transparent 50.8%) top right / 50.2% 55% no-repeat,
    var(--kraft);
  box-shadow: inset 0 0 40px rgba(40, 25, 10, 0.35), 0 12px 26px rgba(0, 0, 0, 0.55);
}
.env-slit { position: absolute; left: 0; right: 0; top: 13px; height: 3px; background: linear-gradient(#2A1A0A, #5A3E20); clip-path: inset(0 0 0 100%); }
.cutting .env-slit { animation: slit 1.2s linear forwards; }
.pulling .env-slit, .lifted .env-slit { clip-path: inset(0); }
@keyframes slit { 12% { clip-path: inset(0 0 0 96%); } 78%, 100% { clip-path: inset(0); } }
.opener { position: absolute; left: 0; top: 2px; width: 184px; height: 24px; opacity: 0; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6)); }
.cutting .opener { animation: opener 1.2s cubic-bezier(0.4, 0, 0.3, 1) forwards; }
@keyframes opener {
  0% { transform: translateX(calc(var(--w, 600px) + 30px)); opacity: 0; }
  12% { transform: translateX(calc(var(--w, 600px) - 40px)); opacity: 1; }
  78% { transform: translateX(6px); opacity: 1; }
  100% { transform: translate(-20px, -16px) rotate(-8deg); opacity: 0; }
}
.pulling .env-sliver { animation: sliver-drop 0.55s ease-in forwards; }
.lifted .env-sliver, .emptied .env-sliver { visibility: hidden; }
@keyframes sliver-drop { to { transform: translate(-14px, 46px) rotate(-4deg); opacity: 0; } }
.env-peek { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 14px); height: 150px; overflow: hidden; visibility: hidden; }
.pulling .env-peek { visibility: visible; }
.lifted .env-peek { visibility: hidden; }
.env-peek i {
  position: absolute; left: 0; right: 0; top: 100%; height: 300px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.35);
  background: repeating-linear-gradient(180deg, transparent 0 20px, rgba(38, 34, 27, 0.13) 20px 23px) 24px 40px / calc(100% - 70px) 100% no-repeat, var(--paper);
}
.pulling .env-peek i { animation: peek 0.8s 0.15s cubic-bezier(0.25, 0.6, 0.3, 1) forwards; }
@keyframes peek { to { transform: translateY(-130px); } }
.emptied .env-cover { animation: env-away 0.4s ease-in forwards; }
@keyframes env-away { to { opacity: 0; } }
.opening.done .opened { animation: stamp-slam 0.22s ease-in 0.1s backwards; }
/* Its evidence stays out of sight until the page is back in its place, then comes in. */
.opening:not(.done) ~ .evidence { visibility: hidden; }
.opening.done ~ .evidence { animation: evidence-in 0.5s 0.2s ease-out backwards; }
@keyframes evidence-in { from { opacity: 0; transform: translateY(6px); } }
section[id], .box[id] { scroll-margin-top: 20px; }

/* Reading up close (base.html readUpClose): a copy of the page over a dark shade, bigger and straight. */
html.reading { overflow: hidden; }
.reader-shade { position: fixed; inset: 0; z-index: 89; background: rgba(8, 8, 6, 0.8); }
.reader { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; pointer-events: none; }
.reader > * { pointer-events: auto; }
.reader .reader-sheet { width: min(720px, 100%); max-height: calc(100vh - 120px); overflow: auto; margin: 0; transform: none; transform-origin: 0 0; font-size: 16px; cursor: auto; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7); }
.sheet.readable { cursor: zoom-in; }
.sheet .read-close {
  position: absolute; right: 10px; bottom: 6px; padding: 3px 6px; border: 0; background: none; color: inherit; opacity: 0.55;
  font: 600 10.5px var(--sans); letter-spacing: 0.1em;
}
.sheet .read-close:hover { opacity: 1; color: inherit; border: 0; }
.sheet:has(> .read-close:not([hidden])) { padding-bottom: 34px; }
@keyframes stamp-slam { from { opacity: 0; transform: rotate(8deg) scale(2.4); } to { opacity: 1; transform: rotate(8deg) scale(1); } }

/* ---------- Manila folders for dossiers ---------- */

.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px 20px; margin: 8px 0 22px; }
.folder { position: relative; display: flex; flex-direction: column; padding-top: 25px; min-width: 0; }
.folder .ftab {
  position: absolute; top: 0; left: 14px; padding: 4px 18px 6px; background: var(--manila-dk); color: var(--manila-fg);
  font: 400 14px var(--stencil); letter-spacing: 0.08em; text-decoration: none; clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}
.folder .fbody {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 14px; color: var(--manila-fg);
  background: linear-gradient(180deg, var(--manila), #B6955D); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.folder:hover .fbody { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.folder .fbody .tape { position: absolute; top: -10px; right: 10px; transform: rotate(6deg); }
/* Title and teaser hold a fixed number of lines (2 and 3), so every folder in the grid is the same shape. */
.folder h3 { font: 700 17px/1.3 var(--mono); margin: 0; height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.folder h3 a, .folder a { color: var(--manila-fg); text-decoration-color: rgba(42, 34, 21, 0.4); }
.folder h3 a { text-decoration: none; }
/* The whole folder opens the dossier; the alias label and the tab stay their own links on top. */
.folder h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.folder .ftab, .folder .flabel { z-index: 2; }
.folder .flabel { position: relative; }
.folder h3 a:focus-visible { outline: none; }
.folder:has(h3 a:focus-visible) .fbody { outline: 2px solid var(--accent); outline-offset: 3px; }
.folder h3 a:hover { text-decoration: underline; }
.folder .teaser { font-size: 13.5px; line-height: 1.5; opacity: 0.85; height: 4.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.flabel { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 8px; background: var(--label); color: #1E1E1E; transform: rotate(-1.5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.flabel a { font: 400 16px var(--marker); color: #1E1E1E; text-decoration: none; }
.flabel .sig { width: 20px; height: 20px; font-size: 9px; text-shadow: none; filter: saturate(1.4) brightness(0.75); }
.folder .ffoot { margin-top: auto; display: grid; gap: 4px; padding-top: 8px; border-top: 1px dashed rgba(42, 34, 21, 0.35); font-size: 13px; }
.folder .fmeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder .fprice { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; white-space: nowrap; }
.folder .fprice .lbl { font: 400 11px var(--stencil); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }

/* ---------- Home: the three pillars ---------- */

.home-head h1 { margin-top: 10px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 22px 0 26px; }
@media (max-width: 900px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillar { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge); }
.pillar:hover { border-color: var(--line-strong); }
.pillar:hover .art { filter: brightness(1.08); }
.pillar .art {
  position: relative; height: 230px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 70% at 30% 0%, var(--glow), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, var(--vignette) 100%), var(--sunk);
}
.pillar .pbody { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.pillar h2 { margin: 0; padding: 0; border: 0; font-size: 22px; }
.pillar p { margin: 0; }
.pillar .live-line { font-size: 13px; color: var(--muted); }
.pillar .go { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--accent); text-decoration: none; }
.pillar .go::after { content: ""; position: absolute; inset: 0; }
.pillar .go:focus-visible { outline: none; }
.pillar:has(.go:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.mini-folder {
  position: absolute; width: 160px; height: 116px; padding: 26px 12px 10px; color: var(--manila-fg);
  background: linear-gradient(180deg, var(--manila), #B6955D); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}
.mini-folder.f1 { left: 8%; top: 70px; transform: rotate(-7deg); }
.mini-folder.f2 { left: 34%; top: 46px; transform: rotate(5deg); }
.mini-folder .mtab { position: absolute; top: -17px; left: 10px; padding: 2px 12px 4px; background: var(--manila-dk); font: 400 11px var(--stencil); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
.mini-folder .mlabel { display: inline-block; padding: 0 8px; background: var(--label); color: #1E1E1E; font: 400 12px var(--marker); transform: rotate(-2deg); }
.mini-folder i { display: block; height: 6px; margin-top: 9px; background: rgba(42, 34, 21, 0.35); }
.mini-folder i:nth-of-type(2) { width: 80%; }
.mini-folder i:nth-of-type(3) { width: 55%; }
.mini-notice {
  position: absolute; right: 7%; bottom: 22px; width: 116px; padding: 20px 10px 10px; display: grid; gap: 2px; text-align: center;
  background: var(--notice); color: var(--notice-fg); transform: rotate(5deg); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}
.mini-notice .pin { position: absolute; top: 5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F08A7A 0 18%, #B3261E 45%, #6E120D 100%); }
.mini-notice b { font: 400 12px var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; }
.mini-notice span { font: 700 15px var(--mono); }

.mini-slate {
  position: absolute; inset: 28px 9%; display: grid; align-content: center; gap: 10px; padding: 12px 16px;
  border: 8px solid var(--wood); color: var(--chalk); background: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255, 255, 255, 0.05), transparent 70%), var(--slate);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), 0 10px 20px rgba(0, 0, 0, 0.5);
}
.mini-slate .chalk { font: 700 17px var(--chalk-font); }
.mini-slate > .chalk { text-align: center; font-size: 20px; }
.mini-slate .mrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mini-slate .flap { width: 20px; height: 30px; font-size: 18px; }
.mini-slate .flap.sep { width: 8px; }

.mini-poster { position: absolute; left: 50%; top: 18px; width: 158px; transform: translateX(-50%) rotate(-3deg); color: var(--poster-fg); text-align: center; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55)); }
.mini-poster .poster-body { display: grid; justify-items: center; padding: 12px 10px 8px; background: var(--p); clip-path: polygon(0 3%, 12% 0, 30% 2%, 50% 0, 70% 2%, 88% 0, 100% 2%, 100% 100%, 0 100%); }
.mini-poster .w { font: 400 26px/1 var(--stencil); letter-spacing: 0.04em; text-transform: uppercase; color: var(--i); }
.mini-poster .band { justify-self: stretch; margin: 4px -10px 0; padding: 3px 0 2px; background: var(--i); color: var(--p); font: 400 11px/1 var(--stencil); letter-spacing: 0.16em; text-transform: uppercase; }
.mini-poster svg { width: 60px; height: 60px; margin: 6px 0 2px; }
.mini-poster .r { font: 700 15px var(--mono); color: var(--i); }
.mini-poster .slips { display: flex; align-items: flex-start; border-top: 1px dashed #6E6450; }
.mini-poster .slips span { flex: 1; height: 30px; background: var(--p); box-shadow: inset -1px 0 0 rgba(110, 100, 80, 0.55); }
.mini-poster .slips span.gone { height: 7px; clip-path: polygon(0 0, 100% 0, 100% 45%, 75% 100%, 50% 40%, 25% 90%, 0 50%); }

.home-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.home-more .box { display: grid; gap: 4px; margin: 0; text-decoration: none; color: var(--fg); }
.home-more .box:hover { border-color: var(--accent); }

/* ---------- How it works ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin: 18px 0 8px; }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split .box { margin: 0; }
.split ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.split .by-hand { border-color: rgba(227, 138, 47, 0.45); }
.faq { border-bottom: 1px solid var(--line); }
.faq > summary { list-style: none; display: flex; justify-content: space-between; gap: 14px; padding: 14px 2px; font-weight: 600; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; font: 700 18px/1 var(--mono); color: var(--accent); flex: none; }
.faq[open] > summary::after { content: "−"; }
.faq > div { padding: 0 2px 16px; max-width: 75ch; color: var(--fg); }
.faq > div p:last-child { margin-bottom: 0; }

/* ---------- Bounties: notices pinned to the wall ---------- */

.notices { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 32px 22px; margin: 10px 0 22px; }
.notice {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 28px 18px 16px;
  background: var(--notice); color: var(--notice-fg); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55); transform: rotate(-0.8deg);
}
.notices .notice:nth-child(even) { transform: rotate(0.7deg); }
.notices .notice:hover { box-shadow: 0 16px 30px rgba(0, 0, 0, 0.65); }
.notice .pin {
  position: absolute; top: 8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #F08A7A 0 18%, #B3261E 45%, #6E120D 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
}
.notice .tape { position: absolute; top: -9px; right: 10px; transform: rotate(5deg); }
.notice .kicker { font: 400 13px var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.notice h3 { font: 700 18px/1.3 var(--mono); margin: 0; }
.notice a { color: var(--notice-fg); text-decoration-color: rgba(42, 36, 22, 0.4); }
.notice h3 a { text-decoration: none; }
.notice h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.notice h3 a:focus-visible { outline: none; }
.notice:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.notice .alias { position: relative; z-index: 2; }
.notice .sig { filter: saturate(1.4) brightness(0.7); text-shadow: none; }
.notice .desc { font-size: 13.5px; line-height: 1.5; opacity: 0.85; }
.notice .reward-line { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding-top: 8px; border-top: 2px solid rgba(42, 36, 22, 0.55); }
.notice .lbl { font: 700 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.notice .fig { font: 700 22px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.notice .nfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.notice .nfoot .muted, .notice .muted { color: rgba(42, 36, 22, 0.7); }
.notice .rstamp { position: absolute; right: 14px; top: 34%; z-index: 2; margin: 0; background: rgba(231, 221, 182, 0.4); }
.notice .rstamp.closed { color: #3E5F75; }
.notice .rstamp.burned { color: var(--ink); }
.notice.big { transform: rotate(-0.4deg); padding: 34px 26px 20px; margin: 8px 0 24px; gap: 12px; }
.notice.big h1 { font-size: clamp(24px, 4vw, 32px); margin: 0; padding-right: 0; }
.notice.big .content { font: 15px/1.6 var(--sans); max-width: 75ch; }
.notice .nstats { display: flex; flex-wrap: wrap; gap: 10px 32px; padding-top: 12px; border-top: 2px solid rgba(42, 36, 22, 0.55); }
.notice .nstats .stat .lbl { color: rgba(42, 36, 22, 0.7); }
.notice.big .rstamp { top: 26px; right: 22px; }
.notice.big .kicker { padding-right: 120px; }

/* ---------- Rubber stamps for finished outcomes ---------- */

.title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 24px; }
.title-row h1 { flex: 1 1 320px; min-width: 0; }
.rstamp {
  display: inline-block; flex: none; margin: 6px 6px 10px; padding: 4px 14px; border: 3px double currentColor;
  font: 700 20px/1.2 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 1.5px 1px 0 var(--misreg); opacity: 0.92; transform: rotate(-8deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}
.rstamp.burned, .rstamp.called-off { color: var(--down); }
.rstamp.settled { color: var(--up); transform: rotate(5deg); }
.rstamp.found { color: var(--accent); transform: rotate(-11deg); }
.rstamp.cold, .rstamp.closed { color: var(--cold); transform: rotate(-4deg); }
.rstamp.small { font-size: 14px; padding: 2px 10px; margin: 0; }
.box.scorched, .scorched {
  border-color: #3A1A0A;
  background: radial-gradient(ellipse 90% 85% at 50% 45%, var(--surface) 55%, #2A1408 85%, #0E0603 100%);
  box-shadow: inset 0 0 26px rgba(227, 100, 30, 0.2);
  clip-path: polygon(0 1%, 6% 0, 14% 0.6%, 22% 0, 35% 0.4%, 48% 0, 60% 0.7%, 73% 0, 86% 0.4%, 95% 0, 100% 1.2%, 99.6% 30%, 100% 55%, 99.4% 80%, 100% 99%, 92% 100%, 80% 99.4%, 66% 100%, 52% 99.2%, 38% 100%, 24% 99.4%, 10% 100%, 0 99%, 0.6% 70%, 0 45%, 0.4% 20%);
}

/* ---------- Manhunt: the wanted poster and the clue wall ---------- */

.hunt-head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 36px; align-items: start; margin: 8px 0 10px; }
@media (max-width: 720px) { .hunt-head { grid-template-columns: minmax(0, 1fr); } .hunt-head .poster-wrap { justify-self: center; width: min(100%, 300px); } }
/* Weight classes: the paper ages from fresh cream (I) to old kraft (VIII) and the ink runs from faded sepia to oxblood,
   so heavier cases look heavier. The class band carries the exact class; this is the overall feel. */
.poster, .mini-poster { --p: var(--poster); --i: var(--poster-fg); }
.class-0 { --p: #E2DAC4; --i: #5A5040; }
.class-1 { --p: #DCD1B4; --i: #63503A; }
.class-2 { --p: #D5C7A3; --i: #6E4E33; }
.class-3 { --p: #CDBC92; --i: #7A4A2C; }
.class-4 { --p: #C5B083; --i: #864426; }
.class-5 { --p: #BCA475; --i: #8E3A20; }
.class-6 { --p: #B39668; --i: #8A2C1A; }
.class-7 { --p: #A8895A; --i: #7A1C14; }
/* The paper is on the body and on each slip, not on the poster itself: a torn-off slip leaves a gap that shows the wall. */
.poster {
  position: relative; display: block; color: var(--poster-fg); text-align: center; text-decoration: none;
  transform: rotate(-1.2deg); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55));
}
.poster .poster-body {
  padding: 22px 20px 14px; background: var(--p);
  clip-path: polygon(0 2%, 8% 0, 17% 1.2%, 29% 0, 41% 1%, 55% 0, 68% 1.5%, 80% 0, 91% 1%, 100% 0, 100% 100%, 0 100%);
}
.poster .kicker { font: 400 13px var(--stencil); letter-spacing: 0.18em; text-transform: uppercase; }
.poster .wanted { font: 400 44px/1 var(--stencil); letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0 2px; color: var(--i); }
.poster .band {
  display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 6px -20px 2px; padding: 6px 8px 5px;
  background: var(--i); color: var(--p); font: 400 19px/1 var(--stencil); letter-spacing: 0.14em; text-transform: uppercase;
}
.poster .band i { font: 700 14px/1 var(--mono); font-style: normal; letter-spacing: 0.04em; opacity: 0.85; }
.posters .poster .tagline { display: none; }
.poster svg { width: 112px; height: 112px; display: block; margin: 8px auto; }
.poster .lbl { font: 700 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.poster .reward { font: 700 28px/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--i); }
.poster .small { font: 13px/1.45 var(--mono); margin: 6px 0 14px; }
.poster .rstamp { position: absolute; left: 50%; top: 38%; margin: 0; transform: translateX(-50%) rotate(-12deg); font-size: 24px; background: rgba(217, 208, 184, 0.35); }
.poster .rstamp.found { color: #A2520F; }
.poster .rstamp.cold { color: #3E5F75; }
.poster .rstamp.called-off { color: var(--ink); }
/* Tear-off slips: one per hunter slot. Taken ones are torn off, leaving a ragged stub. */
.poster .tabs-row { display: flex; align-items: flex-start; border-top: 1px dashed #6E6450; }
.poster .tabs-row span {
  flex: 1 1 0; min-width: 0; height: 58px; display: grid; place-items: center; background: var(--p);
  box-shadow: inset -1px 0 0 rgba(110, 100, 80, 0.55);
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--poster-fg);
}
.poster .tabs-row span.closed { color: rgba(42, 35, 24, 0.45); }
.poster .tabs-row span.gone {
  height: 12px; transform: none;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 84% 90%, 66% 40%, 50% 100%, 33% 45%, 16% 85%, 0 50%);
}
.poster-cap { margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.hunt-side { display: grid; gap: 4px; min-width: 0; }
.hunt-side h1 { margin-bottom: 6px; }

/* Small posters on the Manhunt list */
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 22px; margin: 10px 0 22px; }
.posters .poster .poster-body { padding-top: 16px; }
.posters .poster:nth-child(even) { transform: rotate(1deg); }
.posters .poster .wanted { font-size: 32px; }
.posters .poster .band { gap: 8px; padding: 5px 8px 4px; font-size: 15px; }
.posters .poster .band i { font-size: 12px; }
.posters .poster svg { width: 70px; height: 70px; margin: 4px auto; }
.posters .poster .reward { font-size: 22px; }
.posters .poster:hover { filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.7)); }
.posters .poster .tabs-row span:not(.gone) { height: 40px; font-size: 7.5px; letter-spacing: 0.08em; }
.poster .tabs-row span:not(.gone):not(.closed) { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Clue cards */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 18px; margin: 18px 0 22px; }
.icard {
  position: relative; min-height: 130px; padding: 28px 16px 14px; background: var(--card); color: #222;
  background-image: linear-gradient(var(--rule-red), var(--rule-red)), repeating-linear-gradient(transparent 0 21px, var(--rule-blue) 21px 22px);
  background-size: 100% 1.5px, 100% 100%; background-position: 0 25px, 0 27px; background-repeat: no-repeat, repeat;
  font: 14px/22px var(--mono); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); transform: rotate(-1.2deg);
}
.icard:nth-child(2n) { transform: rotate(1deg); }
.icard:nth-child(3n) { transform: rotate(-0.4deg); }
.icard::before { content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: var(--env-tape); opacity: 0.85; }
.icard .ihead { position: absolute; top: 3px; left: 16px; right: 12px; display: flex; justify-content: space-between; gap: 8px; font: 700 12px/20px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.icard .ihead span { font: 400 11px/20px var(--mono); letter-spacing: 0; text-transform: none; color: #5d5a52; }
.icard .ihead .new { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.icard.sighting { background-image: linear-gradient(var(--ink), var(--ink)), repeating-linear-gradient(transparent 0 21px, var(--rule-blue) 21px 22px); }
.icard details { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.icard details summary { color: #5d5a52; }
.icard details dl { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
.icard details dt { color: #5d5a52; }
.icard details dd { margin: 0; overflow-wrap: anywhere; }
.caret::after { content: "▌"; animation: blink 0.8s steps(1) infinite; }

/* The evidence board (hunts/case.html): cork in a dark wooden frame, the sealed envelope pinned at the top, the clue cards
   pinned below it, and red string (an SVG drawn by the page's script) running behind the cards from the envelope to each. */
.ev-board {
  position: relative; margin: 18px 0 22px; padding: 24px 22px 30px; border: 10px solid #3E2A19;
  background: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(rgba(255, 230, 190, 0.13) 1px, transparent 1.6px) 3px 4px / 9px 9px, #8A6843;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55), 0 12px 26px rgba(0, 0, 0, 0.5);
}
.ev-board .strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.4)); }
.ev-board .strings path { fill: none; stroke: #A3231B; stroke-width: 1.7; transition: opacity 0.25s, stroke 0.25s, stroke-width 0.25s; }
.ev-board.focus .strings path { opacity: 0.25; }
.ev-board.focus .strings path.hot { opacity: 1; stroke: #D8382B; stroke-width: 2.4; }
.ev-board .wall { position: relative; margin: 0; }
.ev-board .icard::before, .ev-target::before {
  top: -6px; width: 13px; height: 13px; border-radius: 50%; transform: translateX(-50%); opacity: 1;
  background: radial-gradient(circle at 35% 35%, #E0574A, #7D1710); box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5);
}
.ev-target {
  position: relative; width: 180px; margin: 2px auto 40px; padding: 18px 12px 14px; text-align: center;
  background: var(--kraft); color: var(--kraft-fg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
.ev-target::before { content: ""; position: absolute; left: 50%; background: radial-gradient(circle at 35% 35%, #ECE6D6, #8F8C80); }
.ev-target .ev-label { display: block; font: 400 15px var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.ev-target code { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--kraft-fg); font-size: 11.5px; word-break: normal; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- The bookie's slate ---------- */

.slate {
  padding: 18px 22px; margin: 12px 0 18px; border: 10px solid var(--wood); color: var(--chalk);
  background: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255, 255, 255, 0.05), transparent 70%),
              radial-gradient(ellipse 50% 40% at 75% 70%, rgba(255, 255, 255, 0.04), transparent 70%), var(--slate);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 12px 26px rgba(0, 0, 0, 0.5);
}
.slate .slate-title { display: block; font: 700 22px/1.2 var(--chalk-font); text-align: center; margin-bottom: 12px; }
.slate table { margin: 0; font-size: 15px; }
.slate th { font: 400 14px var(--chalk-font); letter-spacing: 0.02em; text-transform: none; color: rgba(236, 233, 223, 0.75); border-bottom: 2px solid rgba(236, 233, 223, 0.35); }
.slate td { border-bottom: 1px solid rgba(236, 233, 223, 0.16); color: var(--chalk); }
.slate td.chalk, .slate .chalk { font: 400 18px var(--chalk-font); }
.slate td.money, .slate .fig { font: 700 17px var(--mono); font-variant-numeric: tabular-nums; border-left: 0; text-shadow: 0 0 1px rgba(236, 233, 223, 0.8), 0 0 4px rgba(236, 233, 223, 0.15); }
.slate th.money { border-left: 0; }
.slate .muted { color: rgba(236, 233, 223, 0.6); }
.slate a { color: var(--chalk); text-decoration-color: rgba(236, 233, 223, 0.4); }
.slate tr:hover > td { background: rgba(255, 255, 255, 0.02); }
.slate .side-a { color: #F0B072; }
.slate .side-b { color: #A9CBD8; }
.slate .bar { background: rgba(0, 0, 0, 0.35); border-color: rgba(236, 233, 223, 0.25); }
.slate .tag { color: var(--chalk); }

/* Split-flap score */
.flaps { display: grid; gap: 10px; }
.flaprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.flapset { display: inline-flex; gap: 3px; perspective: 300px; }
.flap {
  position: relative; display: inline-grid; place-items: center; width: 28px; height: 40px; border-radius: 3px;
  background: var(--flap); color: #F3F0E7; font: 700 25px var(--mono); box-shadow: inset 0 -1px 0 #000, 0 2px 3px rgba(0, 0, 0, 0.5);
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.85); }
.flap.sep { width: 10px; background: transparent; box-shadow: none; }
.flap.sep::after { display: none; }
.flap.flip { animation: flip 0.32s ease-in-out; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(88deg); } 100% { transform: rotateX(0); } }

/* ---------- Empty states ---------- */

.empty-state { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center; color: var(--muted); }
svg.drawing { width: 56px; height: 66px; stroke: var(--muted); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.drawing .lit { stroke: var(--accent); }
td.empty { text-align: center; padding-block: 22px; }
td.empty svg.drawing { display: block; margin: 0 auto 8px; }
.empty-state p { margin: 0; max-width: 46ch; }
td .empty-state { padding-block: 18px; }

/* ---------- Ledger-page footer ---------- */

.ledger-foot { position: relative; overflow: hidden; margin-top: 48px; border-top: 3px double var(--line-strong); }
.ledger-foot .wrap { position: relative; display: grid; gap: 8px; padding-block: 22px 40px; padding-right: 280px; }
.ledger-foot .mark { font: 400 16px var(--stencil); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ledger-foot ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.ledger-foot li { margin: 0; }
.ledger-foot b { color: var(--fg); font: 700 13px var(--mono); }
.ledger-foot .foot-stamp {
  position: absolute; right: 24px; top: 50%; margin: 0; transform: translateY(-50%) rotate(-8deg);
  font-size: 26px; border-width: 4px; opacity: 0.6; pointer-events: none;
}
@media (max-width: 700px) {
  .ledger-foot .wrap { padding-right: 20px; padding-bottom: 96px; }
  .ledger-foot .foot-stamp { top: auto; bottom: 26px; right: 20px; transform: rotate(-8deg); font-size: 20px; }
}

/* ---------- The stash as a ledger book ---------- */

table.book { border-left: 3px double var(--rule-red); }
.book td.no, .book th.no { width: 44px; text-align: right; color: var(--muted); font: 12px var(--mono); }
.book th.no { font-family: var(--sans); font-size: 11px; }
.book tr.fwd td { font-style: italic; color: var(--muted); }
.book tr.fwd td.money { font-style: normal; color: var(--fg); }
.book tr.carry td { border-top: 3px double var(--fg); border-bottom: 0; font-weight: 700; }
.book td.money.out { color: var(--down); }
.book td.money.in { color: var(--up); }

/* ---------- Motion off on request ---------- */

/* ---------- The wire (base.html, services/wire.py) ---------- */
/* A ticker tape under the top bar: cream paper with sprocket holes along both edges, the news in the clear band
   between. Two copies run end to end; the script sets --wire-time for an even pace. Stops while hovered or focused. */
.wire { position: relative; z-index: 19; border-bottom: 1px solid var(--line); background: rgba(11, 12, 10, 0.8); }
.wire-row { display: flex; align-items: center; gap: 12px; padding-block: 7px; }
.wire-label { flex: none; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); font: 400 12px var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; }
.wire-live { width: 7px; height: 7px; border-radius: 50%; background: var(--down); animation: wire-live 2.4s ease-in-out infinite; }
@keyframes wire-live { 50% { opacity: 0.3; } }
.wire-tape {
  position: relative; flex: 1; min-width: 0; height: 34px; overflow: hidden;
  background: radial-gradient(circle, #0B0C0A 1.4px, transparent 1.9px) 0 1px / 13px 6px repeat-x,
    radial-gradient(circle, #0B0C0A 1.4px, transparent 1.9px) 0 calc(100% - 1px) / 13px 6px repeat-x, #ECE6D6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.wire-track { display: flex; width: max-content; height: 100%; animation: wire-feed var(--wire-time, 60s) linear infinite; }
.wire-tape:hover .wire-track, .wire-tape:focus-within .wire-track { animation-play-state: paused; }
@keyframes wire-feed { to { transform: translateX(-50%); } }
.wire-run { display: flex; align-items: center; }
.wire-item { display: inline-flex; align-items: baseline; gap: 9px; padding: 0 22px; border-right: 1px dashed rgba(38, 34, 27, 0.35); white-space: nowrap; font: 400 14px var(--mono); color: var(--paper-fg); text-decoration: none; }
.wire-item:hover, .wire-item:focus-visible { color: var(--ink); text-decoration: underline; }
.wire-item .w-tag { font: 400 10.5px var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.wire-item .w-time { font-weight: 700; }
@media (max-width: 600px) { .wire-label span { display: none; } }

/* ---------- On the counter in the footer (base.html) ---------- */
/* A rocks glass of whiskey and a cigarette in a glass ashtray, standing on the footer's floor right of the NO NAMES
   stamp. The paper burns down over 10 minutes (the script carries it on across pages with a negative delay). */
.ledger-foot .wrap { padding-right: 520px; }
.ledger-foot .foot-stamp { right: 300px; }
.foot-props { position: absolute; right: 24px; bottom: 16px; display: flex; align-items: flex-end; gap: 18px; }
.foot-props > button { position: relative; padding: 0; border: 0; background: none; }
.foot-props > button:hover { border: 0; }
.foot-props .ashtray { width: 150px; height: 86px; }
.foot-props .ashtray > svg { position: absolute; left: 0; top: 0; }
.foot-props .cig { position: absolute; left: 4px; top: 18px; width: 120px; height: 8px; display: flex; justify-content: flex-end; transform: rotate(-9deg); transform-origin: 100% 50%; transition: transform 0.4s; }
.foot-props .ember { position: relative; width: 5px; border-radius: 2px 0 0 2px; background: #FF8A3C; box-shadow: 0 0 6px 2px rgba(255, 120, 40, 0.6); animation: cig-glow 3.2s ease-in-out infinite; }
@keyframes cig-glow { 50% { background: #C9502A; box-shadow: 0 0 3px 1px rgba(255, 120, 40, 0.35); } }
.foot-props .ash { width: 9px; background: repeating-linear-gradient(90deg, #8C8A84 0 2px, #6E6C67 2px 3px); }
.foot-props .paper { width: 64px; background: linear-gradient(180deg, #F4F1EA, #D9D4C8); animation: cig-burn 600s linear forwards; }
@keyframes cig-burn { to { width: 14px; } }
.foot-props .filt { width: 24px; background: radial-gradient(rgba(120, 70, 30, 0.4) 1px, transparent 1.5px) 0 0 / 4px 4px, #C99A5C; }
.foot-props .out .ember { animation: none; background: #4A4642; box-shadow: none; }
.foot-props .out .paper { animation: none; width: 10px; }
.foot-props .out .cig { transform: rotate(-9deg) translate(20px, 8px) scaleX(0.92); }
.foot-props .out.burnt .cig { transform: rotate(-9deg) translate(30px, 6px); }
.foot-props .out .wisp { display: none; }
.foot-props .smoke { position: absolute; left: 0; bottom: 4px; width: 2px; height: 2px; transform: rotate(9deg); }
.foot-props .wisp { position: absolute; left: -30px; bottom: 0; width: 60px; height: 120px; opacity: 0; filter: blur(1.6px); fill: none; stroke: rgba(225, 220, 205, 0.5); stroke-width: 2; animation: cig-smoke 7s ease-out infinite; }
.foot-props .wisp:nth-child(2) { animation-delay: 2.3s; }
.foot-props .wisp:nth-child(3) { animation-delay: 4.6s; }
@keyframes cig-smoke { 0% { opacity: 0; transform: scale(0.6); } 15% { opacity: 0.6; } 100% { opacity: 0; transform: translate(-26px, -130px) scale(2.1, 1.6); } }
.foot-props .puff { position: absolute; left: -40px; bottom: 0; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 215, 200, 0.35), transparent 65%); filter: blur(4px); animation: cig-puff 1.6s ease-out forwards; }
@keyframes cig-puff { from { transform: scale(0.3); opacity: 1; } to { transform: translateY(-50px) scale(1.8); opacity: 0; } }
.foot-props .rocks { width: 56px; height: 62px; transform-origin: 50% 100%; }
.foot-props .rocks.sip { animation: whisky-sip 0.7s ease-in-out; }
@keyframes whisky-sip { 40% { transform: rotate(-16deg) translateY(-8px); } }
.foot-props .rocks > svg { position: absolute; left: 0; top: 0; }
.foot-props .bowl { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); background: linear-gradient(90deg, rgba(200, 220, 215, 0.16), rgba(200, 220, 215, 0.05) 40%, rgba(200, 220, 215, 0.12)); }
.foot-props .whisky { position: absolute; left: 0; right: 0; bottom: 9px; height: var(--level, 62%); background: linear-gradient(180deg, #D99440, #9A5518); opacity: 0.92; transition: height 1.2s cubic-bezier(0.3, 0.6, 0.3, 1); }
.foot-props .whisky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 220, 160, 0.6); }
.foot-props .ice { position: absolute; width: 15px; height: 14px; border-radius: 2px; background: rgba(235, 245, 245, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: bottom 1.2s; }
.foot-props .ice:nth-of-type(1) { left: 10px; bottom: 14px; transform: rotate(-12deg); }
.foot-props .ice:nth-of-type(2) { left: 28px; bottom: 22px; transform: rotate(18deg); }
.foot-props .empty .ice:nth-of-type(2) { bottom: 13px; }
.foot-props .base { position: absolute; left: 7%; right: 7%; bottom: 0; height: 9px; background: linear-gradient(180deg, rgba(220, 235, 230, 0.35), rgba(220, 235, 230, 0.15)); }
@media (max-width: 900px) { .ledger-foot .wrap { padding-right: 280px; } .ledger-foot .foot-stamp { right: 24px; } .foot-props { display: none; } }
@media (max-width: 700px) { .ledger-foot .wrap { padding-right: 20px; } }

/* ---------- A whisper slid under the door (base.html) ---------- */
/* A folded note slides in at the foot of the screen on the page after a new whisper arrives; a click unfolds it. */
.whisper-note { position: fixed; z-index: 60; left: 50%; bottom: 16px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); }
.whisper-note > summary {
  display: grid; place-items: center; width: 168px; height: 76px; margin: 0 auto; list-style: none; cursor: pointer;
  background: linear-gradient(180deg, var(--paper) 0 49%, #D6CFBD 50%, #E2DCCB 100%); color: #5A5244;
  font: 400 12px var(--stencil); letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.65); transform: rotate(-5deg); animation: note-slide 1.1s 0.5s cubic-bezier(0.15, 0.75, 0.25, 1) both;
}
.whisper-note > summary::-webkit-details-marker { display: none; }
.whisper-note > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.whisper-note[open] > summary { display: none; }
@keyframes note-slide { from { transform: translate(120px, 160px) rotate(-14deg); } }
.whisper-sheet {
  width: 380px; max-width: 100%; padding: 16px 18px 14px; background: var(--paper); color: var(--paper-fg);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7); transform-origin: 50% 100%; animation: note-unfold 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes note-unfold { from { transform: scaleY(0.35) rotate(-5deg); opacity: 0.6; } }
.whisper-head { display: flex; justify-content: space-between; gap: 12px; font: 400 11px var(--stencil); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.whisper-sheet p { margin: 10px 0 14px; font: 400 14px/1.5 var(--mono); overflow-wrap: anywhere; }
.whisper-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.whisper-actions a { color: var(--paper-fg); }
.whisper-actions form { margin: 0; }
.whisper-actions button { background: transparent; color: var(--paper-fg); border: 1px solid var(--paper-fg); }
.whisper-actions button.primary { background: var(--paper-fg); color: var(--paper); }
.whisper-note.gone { animation: note-away 0.45s ease-in forwards; }
@keyframes note-away { to { transform: translate(-50%, 180px); opacity: 0; } }

/* ---------- Hold to burn (base.html) ---------- */
/* Burn buttons fill while held down; when full, what is being burned chars before the form goes. */
button[data-hold-burn] { position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
button[data-hold-burn]::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 0; background: rgba(201, 85, 62, 0.3); }
button[data-hold-burn].holding::before { animation: hold-fill 1.4s linear forwards; }
@keyframes hold-fill { to { width: 100%; } }
.charring { animation: char 2.2s ease-in forwards; }
/* The fire (base.html setAlight): char rises from the bottom with a front of flames on its edge; the flames flicker
   (screen-blended, so they glow over the page), embers drift up off the front. */
.fire { position: fixed; z-index: 80; overflow: hidden; pointer-events: none; }
.fire::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(to top, #050302 0%, #120804 70%, #3A1606 90%, rgba(255, 120, 40, 0.8) 99%, rgba(255, 200, 120, 0));
  animation: char-rise 2.2s cubic-bezier(0.45, 0, 0.6, 1) forwards;
}
.fire-front { position: absolute; left: 0; right: 0; bottom: -50px; height: 100px; animation: front-rise 2.2s cubic-bezier(0.45, 0, 0.6, 1) forwards; }
.fire-front::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 20px; height: 70px; background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 140, 40, 0.5), transparent); filter: blur(10px); }
@keyframes char-rise { to { height: 115%; } }
@keyframes front-rise { to { bottom: calc(115% - 50px); } }
.fire-front i {
  position: absolute; z-index: 1; bottom: 30px; width: 46px; height: calc(84px * var(--h, 1)); margin-left: -23px;
  border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%; transform-origin: 50% 100%; mix-blend-mode: screen; filter: blur(1.5px);
  background: radial-gradient(ellipse 45% 55% at 50% 78%, #FFF4C2 0%, #FFC25A 28%, #F2701E 55%, rgba(200, 50, 10, 0.6) 72%, transparent 76%);
  animation: flicker 0.32s ease-in-out infinite alternate;
}
@keyframes flicker {
  0% { transform: scale(1, 1) skewX(-3deg); opacity: 0.85; }
  50% { transform: scale(0.86, 1.18) skewX(4deg); }
  100% { transform: scale(1.06, 0.9) skewX(-2deg); opacity: 1; }
}
.fire-front b {
  position: absolute; z-index: 2; bottom: 50px; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #FFB060; box-shadow: 0 0 6px 2px rgba(255, 140, 50, 0.7); animation: ember 1.4s ease-out infinite;
}
@keyframes ember { 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -160px); } }
@keyframes char {
  35% { filter: sepia(0.5) saturate(1.4) brightness(0.9); box-shadow: inset 0 0 50px 12px rgba(120, 45, 10, 0.55); }
  100% { filter: sepia(0.9) brightness(0.3) contrast(1.15); box-shadow: inset 0 0 90px 40px rgba(10, 5, 2, 0.9); }
}

/* ---------- Reserves (reserves.html) ---------- */
/* Two dark rooms of the same height under a caged lamp: the vault with the pile of Xanax, and the dispatch desk. */

.reserves { align-items: stretch; }
.vault, .dispatch {
  position: relative; height: 270px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse 55% 75% at 50% -8%, rgba(255, 214, 160, 0.13), transparent 72%), linear-gradient(180deg, #0E0F0D, var(--sunk));
}
.room-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px; border-top: 1px solid rgba(255, 230, 190, 0.08);
  background: radial-gradient(ellipse 50% 90% at 50% 0%, rgba(255, 214, 160, 0.07), transparent 75%), linear-gradient(180deg, #1A1B18, #121311 60%, #0E0F0D);
}
.room-lamp { position: absolute; left: 50%; top: 0; width: 2px; height: 22px; margin-left: -1px; background: #2A2C2A; }
.room-lamp i { position: absolute; left: -29px; top: 20px; width: 60px; height: 16px; border-radius: 3px 3px 12px 12px; background: linear-gradient(180deg, #2A2C2A, #171817); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); }
.room-lamp i::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 5px; border-radius: 0 0 6px 6px; background: #F6DDB0; box-shadow: 0 0 12px 3px rgba(255, 205, 140, 0.5); animation: lamp-fail 53s infinite; }

/* The pile: bars placed by the page's script; a dark mound behind them, so gaps read as more Xanax in shadow. */
.pile-shadow { position: absolute; bottom: 40px; height: 22px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); }
.pile-mound { position: absolute; bottom: 50px; transform: translateX(-50%); background: radial-gradient(ellipse 60% 80% at 50% 0%, #5A564C, #2E2C27 70%, #1E1D1A); }
/* A Xanax bar: off-white, scored into four. */
.pile-bar, .drop-bar {
  position: absolute; width: 17px; height: 7px; margin-left: -8.5px; border-radius: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(90deg, transparent 3.9px, rgba(40, 35, 25, 0.32) 3.9px 4.5px, transparent 4.5px 8.2px, rgba(40, 35, 25, 0.32) 8.2px 8.8px, transparent 8.8px 12.4px, rgba(40, 35, 25, 0.32) 12.4px 13px, transparent 13px);
}
.pile-cap { position: absolute; z-index: 2; right: 10px; bottom: 8px; font: 600 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #77746A; }

.reserve-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 14px; }
.reserve-count .what { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tally.big .drums { gap: 2px; padding: 4px 5px; }
.tally.big .drum { font-size: 30px; }
table.reserve-sum tr.total > td { border-top: 3px double var(--fg); font-weight: 700; }
table.reserve-sum tr.total .muted { font-weight: 400; }
table.reserve-sum, table.reserve-recent { margin-bottom: 0; }
.reserve-stats { margin: 16px 0 10px; }
.reserve-stats .val.median { color: var(--accent); }

/* Request to sent on a 0-24h strip: one tick per smuggle-out, the spread from fastest to slowest, the median. */
.took-strip { position: relative; height: 30px; margin: 4px 0; background: var(--sunk); border: 1px solid var(--line); }
.took-strip i { position: absolute; top: 8px; bottom: 8px; width: 1px; background: rgba(221, 216, 203, 0.32); }
.took-strip .spread { position: absolute; top: 6px; bottom: 6px; background: rgba(221, 216, 203, 0.06); border-inline: 1px solid var(--muted); }
.took-strip .mid { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--accent); }
.took-strip .promise { position: absolute; right: 0; top: -4px; bottom: -4px; border-right: 1px dashed var(--up); }
.took-axis { position: relative; height: 16px; margin-bottom: 18px; font: 11px var(--mono); color: #77746A; }
.took-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.took-axis span:first-child { transform: none; }
.took-axis span:last-child { transform: translateX(-100%); color: var(--up); }

/* The dispatch desk, 300px wide whatever the panel's width. One 9s loop: three bars drop into the canister, the lid
   goes on, it slides into the receiver and shoots up the glass tube, the bulb lights and the request slip is
   stamped Sent. The slip and the canister stand on the desk; the receiver hides the canister on its way to the tube. */
.desk { position: absolute; top: 0; bottom: 0; left: 50%; width: 300px; margin-left: -150px; }
.request-slip {
  position: absolute; z-index: 2; left: 8px; bottom: 10px; width: 78px; height: 46px; padding: 6px 7px;
  background: var(--paper); color: var(--paper-fg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); transform: rotate(-4deg);
  font: 700 7.5px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.request-slip u { display: block; height: 1px; margin: 3px 0; background: var(--rule-blue); }
.request-slip .stamped {
  position: absolute; right: 4px; bottom: 3px; padding: 0 4px; border: 2px double var(--ink); color: var(--ink);
  font: 700 9px/1.3 var(--mono); letter-spacing: 0.14em; opacity: 0; transform: rotate(-9deg); animation: slip-stamp 9s infinite;
}
.drop-bar { left: 104px; bottom: 70px; background-color: #E6E2D6; opacity: 0; animation: bar-drop 9s infinite both; }
.drop-bar.d1 { --spin: 200deg; }
.drop-bar.d2 { --spin: -150deg; animation-delay: 0.6s; }
.drop-bar.d3 { --spin: 260deg; animation-delay: 1.2s; }
.canister { position: absolute; z-index: 2; left: 92px; bottom: 36px; width: 24px; height: 44px; border-radius: 2px; background: linear-gradient(90deg, #2E312E, #8C918B 35%, #5A5E59 62%, #272A27); animation: canister-go 9s infinite; }
.canister .band { position: absolute; left: -1px; right: -1px; height: 5px; background: linear-gradient(90deg, #4A3A1E, #B08A4A 35%, #7A5F33 62%, #3A2D17); }
.canister .band.top { top: 2px; }
.canister .band.bottom { bottom: 2px; }
.canister .lid { position: absolute; left: -2px; top: -7px; width: 28px; height: 8px; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #4A3A1E, #C29A57 35%, #7A5F33 62%, #3A2D17); animation: canister-lid 9s infinite; }
.tube {
  position: absolute; z-index: 3; left: 228px; bottom: 96px; top: -10px; width: 28px; overflow: hidden;
  border-left: 1px solid rgba(220, 235, 230, 0.35); border-right: 1px solid rgba(220, 235, 230, 0.25);
  background: linear-gradient(90deg, rgba(200, 220, 215, 0.10), rgba(255, 255, 255, 0.16) 28%, rgba(200, 220, 215, 0.04) 55%, rgba(255, 255, 255, 0.09) 85%, rgba(200, 220, 215, 0.12));
}
.tube .ring { position: absolute; left: -2px; right: -2px; height: 6px; background: linear-gradient(90deg, #3A2D17, #9E7C42 35%, #6A5229 65%, #2E2412); }
.tube .rush { position: absolute; left: 4px; right: 4px; bottom: -70px; height: 60px; opacity: 0; background: linear-gradient(180deg, transparent, rgba(255, 235, 200, 0.22), transparent); animation: tube-rush 9s infinite; }
.receiver { position: absolute; z-index: 4; left: 214px; bottom: 30px; width: 56px; height: 66px; border: 1px solid #000; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); background: linear-gradient(90deg, #2A2418, #5E4C2D 30%, #46391F 70%, #231D12); }
.receiver .mouth { position: absolute; left: 0; bottom: 5px; width: 5px; height: 52px; background: #040404; }
.receiver .bulb { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #33301F; animation: receiver-bulb 9s infinite; }
.receiver .plate { position: absolute; left: 10px; right: 6px; bottom: 10px; padding: 2px 0; text-align: center; background: #B39667; color: #1E180E; font: 700 6.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
@keyframes bar-drop {
  0% { opacity: 0; transform: translateY(-210px) rotate(0); }
  1% { opacity: 1; }
  7% { opacity: 1; transform: translateY(0) rotate(var(--spin)); animation-timing-function: linear; }
  7.6%, 100% { opacity: 0; transform: translateY(6px) rotate(var(--spin)); }
}
@keyframes canister-lid {
  0%, 24% { transform: translate(-18px, -38px) rotate(-28deg); }
  31% { transform: none; animation-timing-function: ease-out; }
  32%, 87% { transform: none; }
  88%, 100% { transform: translate(-18px, -38px) rotate(-28deg); }
}
@keyframes canister-go {
  0%, 33% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  46%, 51% { transform: translate(138px, 0); }
  53% { transform: translate(138px, -6px); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); }
  60% { transform: translate(138px, -300px); opacity: 1; }
  60.5%, 87% { transform: translate(138px, -300px); opacity: 0; }
  88% { transform: none; opacity: 0; }
  95%, 100% { transform: none; opacity: 1; }
}
@keyframes receiver-bulb {
  0%, 54%, 88%, 100% { background: #33301F; box-shadow: none; }
  56%, 84% { background: #B5D08F; box-shadow: 0 0 8px 2px rgba(156, 178, 123, 0.7); }
}
@keyframes tube-rush {
  0%, 53% { transform: none; opacity: 0; }
  54% { opacity: 1; }
  60% { transform: translateY(-300px); opacity: 1; }
  61%, 100% { transform: translateY(-300px); opacity: 0; }
}
@keyframes slip-stamp {
  0%, 62% { opacity: 0; transform: rotate(-9deg) scale(1.7); }
  64%, 86% { opacity: 1; transform: rotate(-9deg) scale(1); }
  90%, 100% { opacity: 0; transform: rotate(-9deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .opening .env-cover { display: none; }
  .opening > .sheet, .opening ~ .evidence { visibility: visible !important; }
  .wire-tape { overflow-x: auto; }
  .opening .opened { opacity: 1; }
}

/* --- The Trail ------------------------------------------------------------------------------------------------- */

/* The Stranger: the man from the door, walking slowly along the foot of the page and gone after ~16 s. Small, dark,
   a faint warm rim. He moves by transform (smooth), fades in and out at the ends, and bobs very slightly in step. */
.stranger { position: fixed; z-index: 40; bottom: 0; left: 0; width: 56px; height: 122px; display: block; opacity: 0;
  will-change: transform, opacity; animation: stranger-walk 16s linear forwards;
  filter: drop-shadow(0 0 3px rgba(255, 196, 120, 0.25)); }
.stranger .stranger-figure { width: 100%; height: 100%; overflow: visible; animation: stranger-bob 0.55s ease-in-out infinite alternate; }
.stranger .stranger-figure .figure { fill: #070605; }
.stranger:focus-visible { outline: 1px dashed var(--accent); outline-offset: 4px; }
@keyframes stranger-walk {
  0% { transform: translateX(-70px); opacity: 0; }
  10% { opacity: 0.85; }
  86% { opacity: 0.85; }
  100% { transform: translateX(min(42vw, 560px)); opacity: 0; visibility: hidden; }
}
@keyframes stranger-bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) {
  .stranger { transform: translateX(24px); animation: stranger-stand 10s ease forwards; }
  .stranger .stranger-figure { animation: none; }
  @keyframes stranger-stand { 0% { opacity: 0; } 15% { opacity: 0.85; } 85% { opacity: 0.85; } 100% { opacity: 0; visibility: hidden; } }
}
@media (max-width: 600px) { .stranger { width: 42px; height: 92px; } }

/* Omens: the 30 minutes before a sighting. The light over the top bar falters now and then. Nothing else. */
.omens .topbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 140% at 30% 0%, rgba(255, 214, 160, 0.10), transparent 70%);
  animation: lamp-falter 9s steps(1, end) infinite; }
@keyframes lamp-falter { 0%, 61%, 64%, 66%, 100% { opacity: 1; } 62%, 65% { opacity: 0.15; } 63% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .omens .topbar::after { animation: none; } }

/* The case file: the board, a map of the detective's own road (services/trail_map.py, trails/_map.html), and its
   pages, each a typed sheet that comes out of its envelope the first time it's read. */
.trail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin-bottom: 8px; }
.trail-head h1 { margin: 4px 0 0; }
.trail-head .stats { margin: 0; align-items: flex-end; }
.stat .val.accent { color: var(--accent); }
.share-line { margin: 0 0 16px; }

.route-scroll { overflow-x: auto; border: 1px solid var(--line); margin: 0 0 10px; }
.route { position: relative; min-width: 640px; background: #151714; overflow: hidden; }
.route-plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.route-defs { position: absolute; }
.route .water { fill: #0F1517; }
.route .shore { fill: none; stroke: #223033; stroke-width: 2; }
.route .streets path { fill: none; stroke: #0D0F0D; stroke-width: 12; }
.route .lanes path { fill: none; stroke: #1C1F1B; stroke-width: 1; }
.route .names text { font: 12px var(--mono); letter-spacing: 3px; fill: #353A34; }
.route .harbor { font: 12px var(--mono); letter-spacing: 6px; fill: #2B3A3D; }
.route .road, .route .road-shade { fill: none; stroke-linecap: round; stroke-dasharray: 1 11; }
.route .road { stroke: #E9D9B8; stroke-opacity: 0.8; stroke-width: 3.2; }
.route .road-shade { stroke: #000; stroke-opacity: 0.5; stroke-width: 4; transform: translate(1px, 2px); }
.route .road.back { stroke-opacity: 0.38; stroke-width: 2.6; stroke-dasharray: 1 9; }
.route .road.fade { stroke: url(#route-fade); stroke-opacity: 1; }
.route .pin { fill: #9A7A3C; stroke: #E9D29A; stroke-width: 2; }
.route .pin.hollow { fill: #151714; }
.route .pin.prologue { fill: var(--paper); stroke: var(--paper-fg); }
.route .pin.current { fill: var(--accent); stroke: #111311; }
.route .pin-pulse { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.4s ease-out infinite; }
@keyframes pin-pulse { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }
/* The road just walked draws itself in, once, when the board opens on a new page. */
.route .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: road-draw 1.6s 0.4s ease-in-out forwards; }
@keyframes road-draw { to { stroke-dashoffset: 0; } }

.stop-tag {
  position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 11px 9px; transform: translate(18px, -50%);
  background: var(--paper); color: var(--paper-fg); text-decoration: none; font: 13px/1.3 var(--mono); white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}
.stop-tag.left { transform: translate(calc(-100% - 18px), -50%); }
.stop-tag:hover, .stop-tag:focus-visible { color: var(--paper-fg); outline: 2px solid var(--accent); outline-offset: 2px; }
.stop-tag .ch { font: 400 11px var(--stencil); letter-spacing: 0.14em; text-transform: uppercase; color: #6A6152; }
.stop-tag .note { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6A6152; }
.stop-tag.stamped .note { color: var(--ink); font-weight: 700; letter-spacing: 0.14em; }
.stop-tag.current, .stop-tag.sealed {
  background: var(--kraft); color: var(--kraft-fg);
  box-shadow: 0 0 0 1px rgba(227, 138, 47, 0.6), 0 0 40px rgba(227, 138, 47, 0.3), 0 8px 18px rgba(0, 0, 0, 0.6);
}
.stop-tag.current:hover, .stop-tag.sealed:hover { color: var(--kraft-fg); }
.stop-tag.current .ch, .stop-tag.sealed .ch, .stop-tag.current .note, .stop-tag.sealed .note { color: #3A2C17; }
.stop-tag .chips { display: flex; gap: 5px; margin-top: 4px; }
.count-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; background: var(--env-tape); color: var(--tape-fg); font: 700 13px/1 var(--mono); }
.count-chip svg { width: 7px; height: 15px; fill: currentColor; }
.count-chip.you { background: var(--accent); color: var(--accent-fg); }
.count-chip.big { height: 34px; padding: 0 12px; gap: 8px; font-size: 22px; }
.count-chip.big svg { width: 10px; height: 22px; }

/* The Shadow: a blackened coin with his mark, lying on the page he's at (or on "ahead of you"). */
.coin {
  position: absolute; top: -15px; right: -15px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  transform: rotate(-14deg);
  background: radial-gradient(circle at 34% 28%, #4A4D46 0%, #1A1B18 38%, #060706 72%, #000 100%);
  box-shadow: inset 0 0 0 2px #0B0C0A, inset 0 0 0 3px #3A3D37, inset 0 -3px 6px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.7);
}
.coin svg { position: relative; z-index: 1; width: 20px; height: 20px; }
.coin::after {
  content: ""; position: absolute; inset: -40%; transform: translateX(-70%); animation: coin-sheen 6s ease-in-out infinite;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
}
@keyframes coin-sheen { 0%, 70% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.coin.flat { position: relative; top: auto; right: auto; width: 24px; height: 24px; transform: none; flex: none; }
.coin.flat svg { width: 14px; height: 14px; }

.route-ahead { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.route-ahead .lbl { font: 400 12px var(--stencil); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.route-ahead .ahead-row { display: flex; align-items: center; gap: 10px; }
.route-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 22px; font-size: 12px; color: var(--muted); }
.route-key > span { display: inline-flex; align-items: center; gap: 7px; }
.key-pin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #9A7A3C; border: 2px solid #E9D29A; }
.key-pin.current { background: var(--accent); border-color: #111311; box-shadow: 0 0 0 2px rgba(227, 138, 47, 0.4); }
@media (max-width: 700px) { .route { min-width: 600px; } .stop-tag { padding: 6px 9px 7px; font-size: 12px; } }

/* A page of the story, and the desk beside it with what to do about it. */
.trail-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.trail-nav .panel-label { color: var(--muted); font-size: 13px; }
.trail-page-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px; }
.trail-letter { flex: 999 1 560px; min-width: 0; }
.trail-desk { flex: 1 1 290px; min-width: 0; display: grid; gap: 14px; }
.trail-desk > .box, .trail-desk > .banner { margin: 0; }
.trail-desk button.wide { width: 100%; min-height: 44px; }
.trail-desk .desk-move { border-color: rgba(227, 138, 47, 0.5); }
.trail-sheet { padding: 40px 48px 48px; transform: rotate(-0.3deg); font-size: 16.5px; line-height: 1.75; }
.trail-sheet:has(> .stamped) { padding-bottom: 84px; }
.trail-sheet .sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid rgba(38, 34, 27, 0.3); }
.trail-sheet h1 { margin: 0; font: 400 30px/1.1 var(--stencil); letter-spacing: 0.06em; color: var(--paper-fg); }
.trail-sheet .place { font-size: 14px; color: #6A6152; }
.trail-sheet .story { max-width: 64ch; }
.trail-sheet .story p { margin: 0 0 1em; }
.trail-sheet .opened.stamped { top: auto; bottom: 24px; right: 28px; font-size: 15px; }
.trail-sheet .exhibit { background: rgba(0, 0, 0, 0.05); border-color: rgba(38, 34, 27, 0.35); color: var(--paper-fg); }
.slip { margin: 0 0 10px; padding: 9px 12px; background: var(--notice); color: var(--notice-fg); font: 14px/1.45 var(--mono); transform: rotate(-0.4deg); }
.pool-figure { display: flex; justify-content: space-between; font: 15px var(--mono); }
.pool-bar { height: 8px; margin: 6px 0; background: var(--sunk); border: 1px solid var(--line); }
.pool-bar i { display: block; height: 100%; background: var(--manila-dk); }
@media (max-width: 600px) { .trail-sheet { padding: 28px 22px 40px; } .trail-sheet:has(> .stamped) { padding-bottom: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .route .pin-pulse, .coin::after { animation: none; }
  .route .pin-pulse { opacity: 0.5; }
  .route .draw { animation: none; stroke-dashoffset: 0; }
}
.exhibit { font-family: var(--mono); background: var(--sunk); border: 1px dashed var(--line-strong); padding: 10px 14px; margin: 10px 0; max-width: 68ch; white-space: pre-wrap; }
.exhibit .lbl { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.docket { font-family: var(--mono); font-size: 22px; letter-spacing: 0.18em; }
.locked-file { position: relative; }
.locked-file .lock-note { border: 1px solid var(--down); background: rgba(201, 85, 62, 0.08); padding: 18px; margin: 0 0 22px; }
.footprints { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.footprints .step { min-width: 46px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.footprints .step b { display: block; font-size: 18px; color: var(--fg); }
.footprints .step.shadow b { color: var(--muted); }
.share-table td, .share-table th { text-align: right; }
.share-table td:first-child, .share-table th:first-child { text-align: left; }
.excerpt { white-space: pre-wrap; font-family: var(--mono); background: var(--sunk); border-left: 2px solid var(--tape); padding: 12px 16px; max-width: 72ch; }

/* The dead drop's suitcase: bundles left since the last visit drop in, once. */
.drop-case { margin: 4px auto 14px; max-width: 380px; }
.drop-case svg { display: block; width: 100%; height: auto; }
.drop-case .bundle.falling { animation: bundle-drop 0.6s cubic-bezier(0.35, 0, 0.6, 1) var(--d, 0ms) both; }
@keyframes bundle-drop {
  0% { transform: translateY(-120px); opacity: 0; }
  25% { opacity: 1; }
  90% { transform: translateY(1px); }
  100% { transform: none; }
}