:root {
  --ink: #0a0a0a;
  --carbon: #131311;
  --panel: #0e0e0d;
  --newsprint: #f2efe9;
  --bone: #d8d3c8;
  --ash: #a49f94;
  --smoke: #3a3a37;
  --stamp: #55534e;
  --bloodline: #c8102e;
  --focus: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 18px; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  background: var(--ink);
  color: var(--newsprint);
  font-family: Georgia, "Times New Roman", serif;
  /* Dapper Don pinstripe: charcoal-black cloth, a faint double pin every 26px.
     Texture when you look, invisible when you read. */
  background-image: repeating-linear-gradient(90deg,
    rgba(242,239,233,.05) 0 1px, transparent 1px 3px,
    rgba(242,239,233,.05) 3px 4px, transparent 4px 26px);
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--newsprint); color: var(--ink); padding: 12px 16px; font-family: "Courier New", monospace; }
.skip-link:focus { top: 12px; }
.typewriter { font-family: "Special Elite", "Courier New", monospace; }
.page-shell { width: min(100%, 1200px); margin: 0 auto; padding: 0 20px 58px; }

.wirebar {
  display: flex; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
  padding: 13px 2px 10px; color: var(--bone); border-bottom: 1px solid var(--smoke);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
}
.double-rule { border-top: 4px solid var(--newsprint); position: relative; margin-top: 6px; }
.double-rule::after { content: ""; display: block; border-top: 1px solid var(--newsprint); margin-top: 3px; }

.masthead { position: relative; padding-top: 24px; }
.hero-banner-wrap { margin: 10px 0 0; }
.hero-banner { display: block; width: 100%; height: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 12px 24px; border: 2px solid; text-align: center; text-decoration: none;
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.02rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.hero-btn-chrome { background: linear-gradient(180deg, #fdfcf8, #d6d3cb 52%, #a3a099); border-color: #efece5; color: var(--ink); }
.hero-btn-chrome:active { background: var(--ink); color: var(--newsprint); }
.hero-btn-red { background: linear-gradient(180deg, #d91436, var(--bloodline) 55%, #990b26); border-color: #7d0a20; color: var(--newsprint); }
.hero-btn-red:active { background: var(--newsprint); color: var(--bloodline); }
.dateline {
  display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 10px 118px 10px 2px; margin-top: 12px;
  border-bottom: 4px solid var(--newsprint); box-shadow: 0 5px 0 -3px var(--newsprint);
  color: var(--bone); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.round-seal { position: absolute; right: 0; bottom: -8px; width: 104px; height: 104px; border-radius: 50%; transform: rotate(5deg); }

.extra {
  margin-top: 42px; padding: 11px 8px; transform: rotate(-1.2deg);
  background: var(--newsprint); color: var(--ink); text-align: center;
  font-family: Impact, "Arial Narrow", sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.extra span { margin: 0 .55em; }

.headline { padding-top: 36px; }
.headline h2 {
  max-width: 980px; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 7vw, 4.1rem); line-height: 1.03; letter-spacing: .01em; text-transform: uppercase;
}
.hollow { color: var(--ink); text-shadow: -1px 0 var(--newsprint), 1px 0 var(--newsprint), 0 -1px var(--newsprint), 0 1px var(--newsprint); }
.deck { max-width: 48em; margin-top: 17px; color: var(--bone); font-size: 1.1rem; line-height: 1.58; }
.deck strong { color: var(--newsprint); }

.house-rule { position: relative; margin-top: 36px; padding: 24px 22px 17px; background: var(--carbon); border: 1px solid var(--newsprint); }
.house-rule::before {
  content: "THE HOUSE RULE"; position: absolute; top: -11px; left: 16px; padding: 0 10px;
  background: var(--ink); color: var(--bone); font-family: "Courier New", monospace; font-size: .7rem; letter-spacing: .28em;
}
.house-rule p { font-family: "Courier New", monospace; font-size: clamp(1.08rem, 4.4vw, 1.45rem); line-height: 1.5; }
.house-rule .attrib { margin-top: 10px; color: var(--ash); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; }

.finder { margin-top: 42px; padding: 22px; background: var(--panel); border: 1px solid var(--smoke); scroll-margin-top: 18px; }
.finder-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kicker { color: var(--ash); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; }
.finder h3, .wire-head h3, .rules h3 { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.finder h3 { margin-top: 5px; font-size: 1.65rem; }
.finder-form { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field span { color: var(--bone); font-family: "Courier New", monospace; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.field input, .field select {
  width: 100%; min-height: 54px; border: 1px solid var(--ash); border-radius: 0;
  background: #050505; color: var(--newsprint); padding: 12px 13px;
}
.field input::placeholder { color: #7d786d; }
.finder-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.button {
  min-height: 50px; border: 2px solid var(--newsprint); padding: 11px 18px;
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 1rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center;
}
.button-light { background: var(--newsprint); color: var(--ink); }
.button-light:active { background: var(--ink); color: var(--newsprint); }
.button-ghost { background: transparent; color: var(--newsprint); }
.button-ghost:active { background: var(--newsprint); color: var(--ink); }
.finder-note { margin-top: 14px; color: var(--ash); line-height: 1.45; font-size: .92rem; }

.wire { margin-top: 44px; scroll-margin-top: 18px; }
.wire-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 9px; border-bottom: 3px solid var(--newsprint); }
.wire-head h3 { display: flex; align-items: center; gap: 11px; font-size: clamp(1.35rem, 4.8vw, 1.75rem); }
.wire-mark { width: 42px; height: 42px; flex: none; }
.live { display: flex; align-items: center; gap: 8px; color: var(--bone); font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; }
.live-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bloodline); animation: blink 1.6s steps(1) infinite; box-shadow: 0 0 0 3px rgba(200,16,46,.16); }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .18; } }
.wire-count { margin-top: 9px; color: var(--ash); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.wire-state { margin-top: 18px; padding: 20px; border: 1px dashed var(--stamp); color: var(--bone); line-height: 1.55; }
.wire-state p + p { margin-top: 7px; }
.wire-state .button { margin-top: 15px; }
.wire-error { border-color: var(--bone); }

.case-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.case {
  position: relative; display: block; width: 100%; min-height: 218px; overflow: hidden;
  padding: 18px; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #111110, #0b0b0a); color: var(--newsprint);
  border: 1px solid var(--smoke); border-bottom: 3px solid var(--stamp);
}
.case:hover { border-color: var(--ash); }
.case-top { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.case-no { color: var(--ash); font-family: "Courier New", monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.case-verified { width: 56px; height: 56px; flex: none; transform: rotate(-5deg); }
.case-title { display: block; margin-top: 10px; padding-right: 4px; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.48rem; font-weight: 600; line-height: 1.12; letter-spacing: .015em; text-transform: uppercase; }
.case-when { display: block; margin-top: 10px; color: var(--bone); font-family: "Courier New", monospace; font-size: .98rem; line-height: 1.4; }
.case-where { display: block; margin-top: 4px; color: var(--ash); font-style: italic; line-height: 1.4; }
.case-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; color: var(--bone); font-family: "Courier New", monospace; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; }
.chip { display: inline-block; margin-left: 8px; padding: 2px 7px; border: 1px solid var(--bone); color: var(--bone); font-family: "Courier New", monospace; font-size: .68rem; letter-spacing: .18em; vertical-align: 2px; }
.cancel-stamp {
  position: absolute; right: 12px; top: 76px; z-index: 2; transform: rotate(-9deg);
  padding: 3px 11px; border: 3px solid var(--bone); background: rgba(10,10,10,.78);
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.case.is-cancelled .case-title, .case.is-cancelled .case-when { color: #85817a; }
.case.is-cancelled .case-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.wire-source { margin-top: 14px; color: var(--ash); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; }

.specimen { position: relative; margin-top: 42px; padding: 20px; overflow: hidden; background: var(--panel); border: 1px solid var(--smoke); }
.specimen .tag { max-width: calc(100% - 154px); color: var(--ash); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; }
.fake-title { margin-top: 10px; color: #77736b; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.35rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; text-decoration: line-through; }
.fake-when { margin-top: 5px; color: #77736b; font-size: .94rem; }
.specimen-copy > p:not(.tag):not(.fake-when) { max-width: 46em; margin-top: 15px; color: var(--bone); line-height: 1.58; }
.big-stamp {
  position: absolute; right: 14px; top: 38px; transform: rotate(-9deg); padding: 3px 12px;
  border: 3px solid var(--bone); background: rgba(10,10,10,.76); color: var(--bone);
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.18rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.spec-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 17px; padding-top: 13px; border-top: 1px dashed var(--stamp); }
.spec-foot span { color: var(--ash); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.spec-foot img { transform: rotate(-6deg); }

.rules { margin-top: 44px; }
.rules h3 { padding-bottom: 9px; border-bottom: 3px solid var(--newsprint); font-size: 1.6rem; }
.rule-grid { display: grid; grid-template-columns: 1fr; }
.rule { padding: 19px 2px 17px; border-bottom: 1px dashed var(--stamp); }
.rule-num { font-family: Georgia, serif; font-size: 2.15rem; font-weight: 900; line-height: 1; }
.rule h4 { margin-top: 6px; font-family: Impact, "Arial Narrow", sans-serif; font-size: 1.12rem; letter-spacing: .055em; text-transform: uppercase; }
.rule p { margin-top: 7px; color: var(--bone); line-height: 1.56; }

.door { margin-top: 48px; padding-top: 30px; border-top: 4px solid var(--newsprint); box-shadow: 0 -8px 0 -6px var(--newsprint); text-align: center; }
.door-button {
  display: block; max-width: 620px; margin: 17px auto 0; padding: 20px 18px;
  background: var(--newsprint); color: var(--ink); border: 2px solid var(--newsprint);
  font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.door-button:active { background: var(--ink); color: var(--newsprint); }
.door p:last-child { max-width: 39em; margin: 15px auto 0; color: var(--ash); line-height: 1.56; }

.footer-banner { margin-top: 56px; text-align: center; }
.footer-banner .double-rule { margin-top: 0; }
.fb-edition { margin-top: 15px; color: var(--bone); font-size: .74rem; letter-spacing: .22em; line-height: 1.9; text-transform: uppercase; }
.fb-coin {
  display: block; width: 132px; height: auto; margin: 22px auto 0; border-radius: 50%;
  box-shadow: 0 0 0 1px #2b2b28, 0 12px 30px rgba(0,0,0,.55);
}
.fb-domain {
  margin-top: 16px; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(1.45rem, 6vw, 2.25rem); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  background: linear-gradient(180deg, #fdfcf8 0%, #e9e6df 38%, #8f8b83 55%, #d6d3cb 74%, #a3a099 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .fb-domain { background: none; color: var(--bone); -webkit-text-fill-color: currentColor; }
}
.fb-rule { position: relative; max-width: 640px; margin: 32px auto 0; padding: 24px 20px 16px; background: var(--carbon); border: 1px solid var(--newsprint); }
.fb-rule::before {
  content: "THE HOUSE RULE"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 0 10px; background: var(--ink); color: var(--bone); white-space: nowrap;
  font-family: "Courier New", monospace; font-size: .7rem; letter-spacing: .28em;
}
.fb-rule p { font-family: "Courier New", monospace; font-size: clamp(1.02rem, 4.2vw, 1.3rem); line-height: 1.5; }
.fb-attrib { margin-top: 9px; color: var(--ash); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; }
.fb-credit { margin-top: 24px; color: var(--bone); font-size: .74rem; letter-spacing: .24em; line-height: 1.9; text-transform: uppercase; }
.fb-friendly-line { margin-top: 3px; color: var(--ash); font-size: .72rem; letter-spacing: .18em; line-height: 1.8; }

.detail-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 14px; background: rgba(0,0,0,.84); }
.detail-backdrop[hidden] { display: none; }
.detail-panel {
  position: relative; width: min(100%, 820px); max-height: min(92dvh, 980px); overflow-y: auto;
  padding: 28px; background: #101010; border: 1px solid var(--ash); box-shadow: 0 22px 70px rgba(0,0,0,.7);
}
.detail-close {
  position: absolute; top: 10px; right: 10px; width: 48px; height: 48px;
  border: 1px solid var(--ash); background: #050505; color: var(--newsprint); font-size: 2rem; line-height: 1; cursor: pointer;
}
.detail-stamp-wrap { display: flex; justify-content: center; }
.detail-stamp { width: 132px; height: 132px; transform: rotate(-4deg); }
.detail-case { margin-top: 12px; color: var(--ash); font-size: .78rem; letter-spacing: .24em; text-align: center; text-transform: uppercase; }
.detail-panel h2 { margin-top: 8px; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(1.85rem, 6vw, 3rem); line-height: 1.05; text-align: center; text-transform: uppercase; }
.detail-meta { margin-top: 10px; color: var(--bone); line-height: 1.5; text-align: center; }
.detail-cancelled { margin: 16px auto 0; width: fit-content; padding: 5px 12px; border: 3px solid var(--bone); transform: rotate(-2deg); font-family: Impact, "Arial Narrow", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.detail-flyer { display: block; width: 100%; max-height: 520px; object-fit: contain; margin-top: 20px; background: #050505; border: 1px solid var(--smoke); }
.detail-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 20px; border-top: 1px solid var(--smoke); }
.detail-row { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--smoke); }
.detail-row dt { color: var(--ash); font-family: "Courier New", monospace; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; }
.detail-row dd { color: var(--newsprint); line-height: 1.48; overflow-wrap: anywhere; }
.detail-description { margin-top: 20px; }
.detail-description h3 { font-family: Impact, "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.detail-description p { margin-top: 8px; color: var(--bone); line-height: 1.62; white-space: pre-wrap; }
.detail-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }
.detail-actions .button { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; }
.detail-note { margin-top: 14px; color: var(--ash); line-height: 1.5; font-size: .92rem; }
.noscript { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 99; padding: 14px; background: var(--newsprint); color: var(--ink); text-align: center; }

@media (min-width: 700px) {
  .page-shell { padding-inline: 28px; }
  .wirebar { padding-right: 174px; }
  .dateline { padding-right: 174px; }
  .round-seal { width: 148px; height: 148px; right: 8px; bottom: -12px; }
  .fb-coin { width: 150px; }
  .finder-form { grid-template-columns: minmax(0, 1.5fr) minmax(190px, .7fr) auto; align-items: end; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .rule-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .rule { border-bottom: 0; border-left: 1px solid var(--smoke); padding: 6px 0 6px 20px; }
  .rule:first-child { border-left: 0; padding-left: 2px; }
  .detail-list { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
@media (min-width: 1120px) {
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .page-shell { padding-inline: 16px; }
  .fb-domain { font-size: 1.06rem; letter-spacing: .18em; text-indent: .18em; }
  .dateline { padding-right: 104px; }
  .hero-actions { flex-direction: column; }
  .hero-btn { width: 100%; }
  .wirebar { letter-spacing: .14em; }
  .finder { padding: 17px; }
  .case { padding: 16px; }
  .detail-panel { padding: 22px 17px; }
  .detail-row { grid-template-columns: 104px 1fr; gap: 10px; }
  .specimen .tag { max-width: calc(100% - 142px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot { animation: none; }
}