:root {
  --wall: #221f1b;
  --wall-soft: #312d27;
  --paper: #f2e7cf;
  --paper-bright: #fbf5e8;
  --ink: #211f1b;
  --ink-soft: #655f54;
  --red: #a92a22;
  --red-dark: #731d18;
  --red-bright: #f06a5f;
  --green: #2f6b4f;
  --amber: #a36613;
  --gold: #c8a64c;
  --rule: rgba(33, 31, 27, 0.27);
  --display: "Anton", Impact, sans-serif;
  --poster: "Oswald", "Arial Narrow", sans-serif;
  --body: "Archivo", sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--body);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.045) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 72% 31%, rgba(255,255,255,.035) 0 1px, transparent 1px 100%),
    linear-gradient(115deg, var(--wall), #181613 52%, var(--wall-soft));
  background-size: 17px 19px, 23px 29px, auto;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  background: var(--paper-bright);
  color: var(--ink);
  padding: 10px 14px;
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

.marquee,
.demo-notice,
.mode-tabs,
.demo-controls,
#app,
.site-footer,
.noscript {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.marquee {
  min-height: 142px;
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(18px, 5vw, 72px);
  align-items: center;
  border-block: 3px solid var(--paper);
  padding: 18px 2px;
}

.marquee-brand { display: flex; flex-direction: column; line-height: .84; }
.brand-sams { font-family: var(--display); font-size: clamp(54px, 9vw, 112px); letter-spacing: .015em; }
.brand-sub { color: var(--gold); font-family: var(--poster); font-size: clamp(14px, 2vw, 23px); font-weight: 700; letter-spacing: .24em; margin-top: 10px; }

.demo-stamp {
  color: var(--red-bright);
  border: 3px double currentColor;
  font-family: var(--poster);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .12em;
  padding: 10px 12px;
  text-align: center;
  transform: rotate(-4deg);
}

.venue-address {
  font-family: var(--poster);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.45;
  text-align: right;
}

.demo-notice {
  background: var(--red);
  color: white;
  font-family: var(--poster);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .045em;
  margin-top: 16px;
  padding: 10px 18px;
  text-align: center;
  text-transform: uppercase;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #0e0d0b;
  border-bottom: 1px solid #4a453d;
}

.mode-tabs button {
  min-height: 64px;
  background: transparent;
  border: 0;
  border-right: 1px solid #4a453d;
  color: #bdb3a2;
  cursor: pointer;
  display: flex;
  gap: 11px;
  align-items: baseline;
  justify-content: center;
  padding: 13px 16px;
  font-family: var(--poster);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
}

.mode-tabs button:last-child { border-right: 0; }
.mode-tabs button[aria-current="page"] { color: var(--paper-bright); background: var(--red-dark); }
.mode-tabs button:not([aria-current="page"]):hover { color: white; }
.tab-number { color: var(--gold); font-family: var(--body); font-size: 10px; letter-spacing: .12em; }

.demo-controls {
  min-height: 50px;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 8px clamp(20px, 5vw, 64px);
}

.ink-link {
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--poster);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 4px 0 2px;
  text-transform: uppercase;
}

.ink-link:hover { color: var(--red); }

#app {
  min-height: 700px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 52px, rgba(200,50,40,.16) 52px 54px, transparent 54px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(47,107,79,.08) 31px 32px),
    var(--paper);
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}

.paper-view { min-height: 700px; animation: paper-feed .32s cubic-bezier(.2,.75,.35,1); }

@keyframes paper-feed {
  from { opacity: .55; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: clamp(36px, 7vw, 76px) clamp(24px, 7vw, 84px) 28px;
  border-bottom: 4px solid var(--ink);
}

.eyebrow {
  color: var(--red);
  font-family: var(--poster);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

.view-heading h1,
.detail-title,
.confirmation-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: .95;
  margin: 0;
  text-transform: uppercase;
}

.view-heading h1 { font-size: clamp(45px, 8vw, 88px); max-width: 820px; }
.view-heading p:last-child { color: var(--ink-soft); line-height: 1.6; margin: 15px 0 0; max-width: 700px; }

.edition-mark {
  align-self: start;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--poster);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 7px 0;
  text-align: right;
  text-transform: uppercase;
  width: 138px;
}

.offline-strip,
.error-strip {
  background: #fff1c8;
  border-bottom: 2px solid var(--amber);
  color: #5c390a;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(24px, 7vw, 84px);
}

.offline-strip strong,
.error-strip strong { font-family: var(--poster); text-transform: uppercase; }
.offline-strip p,
.error-strip p { margin: 3px 0 0; line-height: 1.45; }

.action-stamp,
.ticket-cta,
.danger-stamp,
.scan-choice,
.counter button,
.quiet-action {
  min-height: 48px;
  cursor: pointer;
  font-family: var(--poster);
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.action-stamp,
.ticket-cta {
  background: var(--red);
  border: 2px solid var(--red);
  color: white;
  padding: 12px 20px;
}

.action-stamp:hover,
.ticket-cta:hover { background: var(--red-dark); border-color: var(--red-dark); }
.action-stamp:disabled,
.ticket-cta:disabled,
.danger-stamp:disabled { cursor: not-allowed; opacity: .48; }

.quiet-action {
  background: transparent;
  border: 0;
  border-bottom: 2px solid currentColor;
  color: var(--ink);
  padding: 8px 2px 5px;
}

.quiet-action:hover { color: var(--red); }

.poster-list { padding: 0 clamp(24px, 7vw, 84px) 68px; }

.show-poster {
  display: grid;
  grid-template-columns: 132px 240px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  min-height: 178px;
  border-bottom: 2px solid var(--ink);
  padding: 26px 0;
  position: relative;
}

.show-poster::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: -2px;
  border-left: 1px dashed rgba(33,31,27,.28);
}

.show-date { text-align: center; border-right: 1px solid var(--ink); padding-right: 28px; }
.show-date .month { color: var(--red); display: block; font-family: var(--poster); font-size: 18px; font-weight: 700; letter-spacing: .18em; }
.show-date .day { display: block; font-family: var(--display); font-size: 76px; line-height: .92; }
.show-date .weekday { color: var(--ink-soft); display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-top: 7px; text-transform: uppercase; }

.show-photo { display: block; width: 240px; height: 160px; object-fit: cover; border: 2px solid var(--ink); background: var(--wall-soft); }
.share-link { background: transparent; border: 0; border-bottom: 1px solid currentColor; color: var(--ink); cursor: pointer; display: inline-block; font-family: var(--poster); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-top: 12px; min-height: 36px; padding: 0; text-transform: uppercase; }
.share-link:hover { color: var(--red); }
.share-card { margin: 34px 0 0; max-width: 560px; }
.share-card figcaption { color: var(--ink-soft); font-family: var(--poster); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.share-card img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.show-copy h2 { font-family: var(--poster); font-size: clamp(28px, 4vw, 48px); line-height: 1; margin: 0; text-transform: uppercase; }
.show-copy p { color: var(--ink-soft); line-height: 1.5; margin: 8px 0 0; }
.show-copy .show-meta { color: var(--ink); font-family: var(--poster); font-size: 13px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }

.price-block { min-width: 128px; text-align: right; }
.price-block span { color: var(--ink-soft); display: block; font-family: var(--poster); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.price-block strong { display: block; font-family: var(--display); font-size: 32px; font-weight: 400; margin: 3px 0 10px; }
.price-block .status-stamp { margin: 0 0 12px; }
.price-block .action-stamp { display: block; margin-left: auto; }

.status-stamp {
  display: inline-block;
  border: 3px double currentColor;
  color: var(--green);
  font-family: var(--poster);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 8px;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.status-stamp.cancelled { color: var(--red); }

.detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
  min-height: 700px;
}

.detail-poster { padding: clamp(38px, 7vw, 86px) clamp(28px, 7vw, 84px); border-right: 2px solid var(--ink); }
.back-link { background: transparent; border: 0; border-bottom: 1px solid currentColor; color: var(--ink-soft); cursor: pointer; font-family: var(--poster); font-size: 12px; font-weight: 700; letter-spacing: .08em; min-height: 44px; padding: 0; text-transform: uppercase; }
.back-link:hover { color: var(--red); }
.detail-date { color: var(--red); font-family: var(--poster); font-size: 16px; font-weight: 700; letter-spacing: .16em; margin: 54px 0 12px; text-transform: uppercase; }
.detail-title { font-size: clamp(54px, 9vw, 110px); }
.detail-meta { border-block: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; padding: 15px 0; font-family: var(--poster); font-weight: 600; text-transform: uppercase; }
.detail-note { color: var(--ink-soft); line-height: 1.65; margin: 26px 0 0; max-width: 680px; }

.ticket-roll { background: var(--paper-bright); padding: 32px 28px 40px; position: relative; }
.ticket-roll::before,
.ticket-roll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: radial-gradient(circle at 5px -1px, transparent 6px, var(--paper-bright) 6.5px) 0 0 / 20px 10px repeat-x;
}
.ticket-roll::before { top: -9px; }
.ticket-roll::after { bottom: -9px; transform: rotate(180deg); }
.ticket-roll h2 { font-family: var(--poster); font-size: 22px; margin: 0 0 6px; text-transform: uppercase; }
.ticket-roll > p { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0 0 22px; }

.tier-row { border-top: 2px dashed var(--rule); padding: 20px 0; }
.tier-row:last-of-type { border-bottom: 2px dashed var(--rule); }
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.tier-head strong { font-family: var(--poster); font-size: 18px; text-transform: uppercase; }
.tier-head span { font-family: var(--display); font-size: 23px; }
.tier-row p { color: var(--ink-soft); font-size: 12px; margin: 5px 0 13px; }

.counter { display: grid; grid-template-columns: 48px 48px 48px; align-items: center; width: max-content; border-block: 1px solid var(--ink); }
.counter button { background: transparent; border: 0; color: var(--ink); font-size: 22px; }
.counter button:hover { background: var(--ink); color: var(--paper-bright); }
.counter output { font-family: var(--poster); font-size: 17px; font-weight: 700; text-align: center; }

.roll-total { display: grid; grid-template-columns: 1fr auto; gap: 9px 18px; margin: 24px 0; font-size: 13px; }
.roll-total strong { font-family: var(--poster); font-size: 23px; text-transform: uppercase; }
.roll-total .grand { border-top: 2px solid var(--ink); margin-top: 5px; padding-top: 10px; }
.ticket-cta { width: 100%; }

.checkout-sheet { padding: clamp(36px, 7vw, 76px) clamp(24px, 8vw, 100px) 76px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: clamp(38px, 8vw, 108px); margin-top: 40px; }
.checkout-copy h2 { font-family: var(--poster); font-size: 28px; margin: 0 0 18px; text-transform: uppercase; }
.checkout-copy p { line-height: 1.65; }
.demo-identity { border-block: 1px solid var(--ink); margin-top: 30px; padding: 18px 0; }
.demo-identity span { color: var(--ink-soft); display: block; font-family: var(--poster); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.demo-identity strong { display: block; font-size: 18px; margin-top: 5px; }
.safety-copy { color: var(--red-dark); font-weight: 700; }

.receipt-ledger { align-self: start; border-top: 3px solid var(--ink); }
.receipt-line { border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 12px 0; }
.receipt-line span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.receipt-line.total { border-bottom: 3px double var(--ink); font-family: var(--poster); font-size: 24px; font-weight: 700; text-transform: uppercase; }
.receipt-ledger .ticket-cta { margin-top: 22px; }

.confirmation { padding: clamp(42px, 7vw, 80px) clamp(24px, 8vw, 100px) 90px; }
.confirmation-title { font-size: clamp(48px, 8vw, 92px); }
.confirmation-lead { color: var(--ink-soft); line-height: 1.6; max-width: 690px; }
.ticket-stack { display: grid; gap: 22px; margin-top: 38px; }

.demo-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 250px;
  background: var(--paper-bright);
  border: 3px solid var(--ink);
  position: relative;
  overflow: hidden;
}

.demo-ticket::before {
  content: "DEMO  NOT VALID FOR ENTRY";
  position: absolute;
  z-index: 0;
  left: 5%;
  top: 41%;
  color: rgba(200,50,40,.14);
  font-family: var(--display);
  font-size: clamp(34px, 7vw, 92px);
  letter-spacing: .02em;
  transform: rotate(-7deg);
  white-space: nowrap;
}

.ticket-main,
.ticket-code { position: relative; z-index: 1; }
.ticket-main { padding: 28px 34px; }
.ticket-main .ticket-brand { color: var(--red); font-family: var(--display); font-size: 27px; }
.ticket-main h2 { font-family: var(--poster); font-size: clamp(28px, 5vw, 50px); line-height: 1.02; margin: 32px 0 12px; text-transform: uppercase; }
.ticket-main p { font-family: var(--poster); font-weight: 600; letter-spacing: .04em; margin: 6px 0; text-transform: uppercase; }
.ticket-code { align-items: center; border-left: 2px dashed var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.ticket-code strong { font-family: var(--poster); font-size: 13px; letter-spacing: .07em; }

.qr-grid { background: white; border: 8px solid white; display: grid; grid-template-columns: repeat(9, 8px); grid-template-rows: repeat(9, 8px); width: max-content; }
.qr-grid span { background: white; }
.qr-grid span.on { background: var(--ink); }

.confirmation-actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 30px; }

.ledger { padding: 0 clamp(24px, 7vw, 84px) 76px; }

.ops-event-switcher {
  align-items: baseline;
  border-bottom: 2px solid var(--ink);
  display: flex;
  gap: 24px;
  margin: 0 clamp(24px, 7vw, 84px);
  padding: 16px 0 14px;
}

.ops-event-switcher > span {
  flex: 0 0 auto;
  font-family: var(--poster);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ops-event-switcher > div { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ops-event-switcher button { min-height: 44px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-soft); cursor: pointer; font-family: var(--poster); font-weight: 700; padding: 4px 0; text-align: left; text-transform: uppercase; }
.ops-event-switcher button small { display: block; font-family: var(--body); font-size: 9px; font-weight: 600; letter-spacing: .08em; margin-top: 2px; }
.ops-event-switcher button[aria-pressed="true"] { border-color: var(--red); color: var(--red-dark); }
.ledger-head { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(120px, .35fr)); gap: 20px; border-bottom: 2px solid var(--ink); color: var(--ink-soft); font-family: var(--poster); font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 13px 0; text-transform: uppercase; }
.align-right { text-align: right; }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(120px, .35fr)); gap: 20px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--rule); padding: 10px 0; }
.ledger-row .label strong { display: block; font-family: var(--poster); font-size: 17px; text-transform: uppercase; }
.ledger-row .label small { color: var(--ink-soft); display: block; margin-top: 3px; }
.ledger-row .amount { font-family: var(--poster); font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.ledger-row .state { color: var(--ink-soft); font-family: var(--poster); font-size: 12px; font-weight: 600; text-align: right; text-transform: uppercase; }
.ledger-row.total { border-block: 3px double var(--ink); margin-top: 10px; }
.ledger-row.total .label strong,
.ledger-row.total .amount { font-size: 25px; }

.ops-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--ink); margin-top: 34px; }
.ops-strip button { min-height: 90px; background: transparent; border: 0; border-right: 1px solid var(--ink); color: var(--ink); cursor: pointer; padding: 14px; font-family: var(--poster); font-weight: 700; text-transform: uppercase; }
.ops-strip button:last-child { border-right: 0; }
.ops-strip button:hover { background: rgba(33,31,27,.08); }
.ops-strip small { color: var(--ink-soft); display: block; font-family: var(--body); font-weight: 500; line-height: 1.35; margin-top: 6px; text-transform: none; }

.section-rule { border-top: 4px solid var(--ink); margin-top: 54px; padding-top: 20px; }
.section-rule h2 { font-family: var(--poster); font-size: 30px; margin: 0; text-transform: uppercase; }
.section-rule > p { color: var(--ink-soft); line-height: 1.55; max-width: 720px; }

.payout-timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; position: relative; }
.payout-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 2px solid var(--ink); }
.timeline-step { position: relative; padding: 25px 24px 0 0; }
.timeline-step::before { content: ""; position: absolute; width: 14px; height: 14px; top: 0; left: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; }
.timeline-step.done::before { background: var(--green); }
.timeline-step strong { display: block; font-family: var(--poster); text-transform: uppercase; }
.timeline-step small { color: var(--ink-soft); display: block; line-height: 1.45; margin-top: 5px; }

.danger-zone { align-items: start; display: grid; grid-template-columns: 1fr auto; gap: 28px; border-top: 2px solid var(--red); color: var(--red-dark); margin-top: 50px; padding-top: 22px; }
.danger-zone h2 { font-family: var(--poster); font-size: 25px; margin: 0; text-transform: uppercase; }
.danger-zone p { line-height: 1.55; margin: 6px 0 0; max-width: 650px; }
.danger-stamp { background: transparent; border: 3px double var(--red); color: var(--red-dark); padding: 11px 16px; transform: rotate(-1deg); }
.danger-stamp:hover { background: var(--red); color: white; }

.cancel-sheet {
  width: min(650px, calc(100% - 30px));
  max-height: calc(100svh - 40px);
  overflow: auto;
  background: var(--paper-bright);
  border: 3px solid var(--ink);
  color: var(--ink);
  padding: clamp(24px, 5vw, 48px);
}
.cancel-sheet::backdrop { background: rgba(15,13,11,.72); }
.cancel-sheet h2 { font-family: var(--display); font-size: clamp(38px, 8vw, 66px); font-weight: 400; line-height: 1; margin: 0; text-transform: uppercase; }
.cancel-sheet p { line-height: 1.55; }
.cancel-sheet label { display: block; font-family: var(--poster); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-top: 24px; text-transform: uppercase; }
.cancel-sheet select { width: 100%; min-height: 48px; background: transparent; border: 0; border-bottom: 2px solid var(--ink); color: var(--ink); margin-top: 6px; }
.cancel-summary { border-block: 2px solid var(--ink); display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; margin: 28px 0; padding: 18px 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 16px 22px; justify-content: flex-end; }

.door-view { background: #181714; color: var(--paper); min-height: 760px; }
.door-view .view-heading { border-color: var(--paper); }
.door-view .view-heading p:last-child { color: #c7bcaa; }
.door-view .eyebrow { color: var(--red-bright); }
.door-view .edition-mark { border-color: var(--paper); }
.door-view .ops-event-switcher { border-color: #817969; }
.door-view .ops-event-switcher > span { color: var(--paper); }
.door-view .ops-event-switcher button { color: #c7bcaa; }
.door-view .ops-event-switcher button[aria-pressed="true"] { border-color: var(--red-bright); color: var(--paper-bright); }
.door-workspace { display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(300px, .9fr); gap: clamp(34px, 8vw, 92px); padding: clamp(40px, 7vw, 84px); }

.scanner-area { text-align: center; }
.scanner-spotlight { width: min(390px, 82vw); aspect-ratio: 1; border: 3px solid #817969; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; position: relative; background: radial-gradient(circle, rgba(242,231,207,.12), transparent 64%); }
.scanner-spotlight::before,
.scanner-spotlight::after { content: ""; position: absolute; background: #817969; }
.scanner-spotlight::before { width: 52px; height: 2px; }
.scanner-spotlight::after { width: 2px; height: 52px; }
.scan-result { position: relative; z-index: 1; max-width: 80%; }
.scan-result strong { display: block; font-family: var(--display); font-size: clamp(38px, 6vw, 68px); font-weight: 400; line-height: .95; text-transform: uppercase; }
.scan-result p { color: #c7bcaa; line-height: 1.5; }
.scan-result.valid strong { color: #75c493; }
.scan-result.duplicate strong { color: #e1ad54; }
.scan-result.refunded strong,
.scan-result.invalid strong,
.scan-result.wrong-event strong { color: #ef655a; }

.scan-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #5a544a; margin-top: 30px; }
.scan-choice { background: #201e1a; border: 0; color: var(--paper); padding: 13px; }
.scan-choice:hover { background: var(--red-dark); }

.manual-lookup { border-top: 2px solid #817969; margin-top: 26px; padding-top: 20px; text-align: left; }
.manual-lookup label { display: block; color: #c7bcaa; font-family: var(--poster); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.manual-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-top: 9px; }
.manual-row input { min-height: 48px; background: transparent; border: 0; border-bottom: 2px solid var(--paper); color: var(--paper); min-width: 0; }
.manual-row .action-stamp { padding-inline: 16px; }

.door-ledger h2 { font-family: var(--poster); font-size: 25px; margin: 0; text-transform: uppercase; }
.attendance-count { border-block: 3px double var(--paper); margin: 16px 0 28px; padding: 16px 0; }
.attendance-count strong { display: block; font-family: var(--display); font-size: 76px; font-weight: 400; line-height: 1; }
.attendance-count span { color: #c7bcaa; font-family: var(--poster); text-transform: uppercase; }
.capacity-rule { appearance: none; display: block; width: 100%; height: 8px; border: 0; background: #4b463e; margin-top: 12px; }
.capacity-rule::-webkit-progress-bar { background: #4b463e; }
.capacity-rule::-webkit-progress-value { background: var(--green); }
.capacity-rule::-moz-progress-bar { background: var(--green); }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { display: grid; grid-template-columns: 1fr auto; gap: 16px; border-bottom: 1px solid #5a544a; padding: 13px 0; }
.recent-list strong { font-family: var(--poster); text-transform: uppercase; }
.recent-list small { color: #c7bcaa; }
.recent-list .result { font-family: var(--poster); font-weight: 700; text-transform: uppercase; }
.recent-list .result.valid { color: #75c493; }
.recent-list .result:not(.valid) { color: #e1ad54; }

.empty-state { border-block: 1px solid currentColor; color: var(--ink-soft); margin-top: 16px; padding: 22px 0; }
.door-view .empty-state { color: #c7bcaa; }
.empty-state strong { color: inherit; display: block; font-family: var(--poster); text-transform: uppercase; }
.empty-state p { line-height: 1.5; margin: 6px 0 0; }

.device-desk { border-top: 3px solid #817969; margin-top: 46px; padding-top: 18px; }
.device-row { align-items: center; display: grid; grid-template-columns: 1fr auto; gap: 18px; border-bottom: 1px solid #5a544a; padding: 14px 0; }
.device-row strong { display: block; font-family: var(--poster); text-transform: uppercase; }
.device-row small { color: #c7bcaa; display: block; margin-top: 3px; }
.device-state { color: #75c493; font-family: var(--poster); font-size: 12px; font-weight: 700; text-transform: uppercase; }

.toast { position: fixed; z-index: 80; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); max-width: 360px; background: var(--ink); border-left: 5px solid var(--gold); color: var(--paper); box-shadow: 0 12px 40px rgba(0,0,0,.34); padding: 16px 20px; line-height: 1.45; }

.loading-ledger { min-height: 700px; padding: 90px clamp(24px, 8vw, 100px); }
.loading-ledger p { color: var(--ink-soft); font-family: var(--poster); margin-top: 26px; text-transform: uppercase; }
.skeleton-line { display: block; height: 20px; width: 72%; background: linear-gradient(90deg, rgba(33,31,27,.08), rgba(33,31,27,.18), rgba(33,31,27,.08)); background-size: 200% 100%; margin: 20px 0; animation: skeleton 1.15s linear infinite; }
.skeleton-kicker { height: 12px; width: 20%; }
.skeleton-title { height: 70px; width: 84%; }
.skeleton-short { width: 48%; }

@keyframes skeleton { to { background-position: -200% 0; } }

.site-footer { color: #bdb3a2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 11px; line-height: 1.55; padding: 22px 2px 8px; }
.site-footer p { margin: 0; }
.site-footer p:last-child { text-align: right; }
.noscript { background: #fff1c8; color: #5c390a; padding: 18px; }

.not-found-page { display: grid; min-height: 100svh; place-items: center; }
.not-found-ticket { width: min(820px, calc(100% - 32px)); background: var(--paper); border: 3px solid var(--ink); color: var(--ink); padding: clamp(32px, 8vw, 86px); position: relative; }
.not-found-ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; border-bottom: 3px dashed var(--ink); }
.not-found-ticket h1 { font-family: var(--display); font-size: clamp(48px, 9vw, 96px); font-weight: 400; line-height: .96; margin: 0; text-transform: uppercase; }
.not-found-ticket p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.6; margin: 24px 0 30px; max-width: 650px; }
.not-found-ticket .action-stamp { display: inline-block; text-decoration: none; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

@media (max-width: 1080px) and (min-width: 821px) {
  .show-poster { grid-template-columns: 110px 180px minmax(0, 1fr) auto; }
  .show-photo { width: 180px; height: 130px; }
}

@media (max-width: 820px) {
  body { padding-inline: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .marquee { width: calc(100% - 32px); grid-template-columns: 1fr auto; min-height: 116px; }
  .venue-address { display: none; }
  .brand-sams { font-size: clamp(52px, 18vw, 82px); }
  .brand-sub { font-size: 12px; }
  .demo-stamp { font-size: 10px; padding: 8px; }
  .demo-notice { margin-top: 12px; font-size: 11px; }
  .mode-tabs { position: sticky; z-index: 50; top: 0; }
  .mode-tabs button { min-height: 58px; flex-direction: column; gap: 2px; font-size: 13px; padding: 8px 4px; }
  .demo-controls { justify-content: space-between; gap: 14px; padding-inline: 18px; }
  .ink-link { font-size: 10px; }
  .view-heading { grid-template-columns: 1fr; padding: 40px 24px 24px; }
  .view-heading h1 { font-size: clamp(42px, 14vw, 68px); }
  .edition-mark { text-align: left; width: 100%; }
  .poster-list { padding-inline: 24px; }
  .show-poster { grid-template-columns: 78px 1fr; gap: 18px; }
  .show-photo { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .show-date { padding-right: 14px; }
  .show-date .day { font-size: 54px; }
  .price-block { grid-column: 2; text-align: left; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
  .price-block strong { margin: 0; }
  .detail-shell { display: block; }
  .detail-poster { border-right: 0; border-bottom: 2px solid var(--ink); }
  .ticket-roll { padding: 32px 24px 42px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .demo-ticket { grid-template-columns: 1fr; }
  .ticket-code { border-left: 0; border-top: 2px dashed var(--ink); }
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-row .state { grid-column: 1 / -1; text-align: left; }
  .ops-strip { grid-template-columns: repeat(2, 1fr); }
  .ops-strip button:nth-child(2) { border-right: 0; }
  .ops-strip button:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .payout-timeline { grid-template-columns: 1fr; gap: 18px; }
  .payout-timeline::before { top: 0; bottom: 0; left: 7px; right: auto; border-top: 0; border-left: 2px solid var(--ink); }
  .timeline-step { padding: 0 0 0 34px; }
  .timeline-step::before { top: 2px; }
  .danger-zone { grid-template-columns: 1fr; }
  .danger-stamp { width: 100%; }
  .door-workspace { grid-template-columns: 1fr; padding-inline: 24px; }
  .ops-event-switcher { align-items: flex-start; flex-direction: column; gap: 8px; }
  .scan-choices { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; padding-inline: 18px; }
  .site-footer p:last-child { text-align: left; }
}

@media (max-width: 390px) {
  .marquee { width: calc(100% - 24px); gap: 10px; }
  .brand-sams { font-size: 50px; }
  .brand-sub { letter-spacing: .15em; }
  .demo-stamp { transform: rotate(-2deg); }
  .show-poster { grid-template-columns: 64px 1fr; }
  .show-date .day { font-size: 45px; }
  .show-copy h2 { font-size: 27px; }
  .checkout-sheet,
  .confirmation { padding-inline: 20px; }
  .scanner-spotlight { width: min(100%, 278px); }
  .manual-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body { background: white; padding: 0; }
  .marquee, .demo-notice, .mode-tabs, .demo-controls, .site-footer, .confirmation-actions { display: none !important; }
  #app { background: white; box-shadow: none; min-height: 0; }
  .confirmation { padding: 0; }
  .demo-ticket { break-inside: avoid; }
}

/* ---------- Run the show: one-screen board ---------- */
.vd { padding: clamp(12px, 2vh, 22px) clamp(18px, 2.4vw, 34px) clamp(12px, 2vh, 22px) 74px; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 18px); }
.vd i { font-style: normal; }
.vd-top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); grid-template-rows: auto auto; gap: 12px 22px; align-items: center; }
.vd-hero { grid-row: 1 / 3; position: relative; width: clamp(150px, 15vw, 230px); aspect-ratio: 3 / 2; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1.5deg); background: var(--wall-soft); overflow: hidden; }
.vd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-hero.is-cancelled img { filter: grayscale(1) contrast(.9); }
.vd-cancel-stamp { position: absolute; inset: auto 8px 10px 8px; text-align: center; color: var(--red); background: var(--paper-bright); border: 3px double var(--red); font-family: var(--poster); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-6deg); }
.vd-title .eyebrow { margin: 0 0 4px; }
.vd-title h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.6vh, 52px); line-height: .95; margin: 0; text-transform: uppercase; }
.vd-title p:last-child { color: var(--ink-soft); font-family: var(--poster); font-weight: 600; font-size: 14px; letter-spacing: .04em; margin: 6px 0 0; text-transform: uppercase; }
.vd-meter { border: 2px solid var(--ink); background: var(--paper-bright); padding: 10px 14px; }
.vd-meter-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--poster); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; }
.vd-meter-head b { font-family: var(--display); font-weight: 400; font-size: 26px; }
.vd-meter-head b small { font-size: 15px; color: var(--ink-soft); }
.vd-bar { height: 12px; border: 2px solid var(--ink); margin: 6px 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(33,31,27,.12) 9px 10px); }
.vd-bar span { display: block; height: 100%; background: var(--red); }
.vd-meter > small { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.vd-shows { grid-column: 2 / 4; display: flex; gap: 10px; }
.vd-show { flex: 1; display: flex; gap: 10px; align-items: center; text-align: left; background: transparent; border: 2px solid var(--rule); padding: 4px 10px 4px 4px; cursor: pointer; color: var(--ink); min-height: 44px; }
.vd-show img { height: 36px !important; }
.vd-show img { width: 64px; height: 42px; object-fit: cover; border: 1px solid var(--ink); flex: none; }
.vd-show b { display: block; font-family: var(--poster); font-size: 14px; text-transform: uppercase; line-height: 1.1; }
.vd-show small { color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.vd-show:hover { border-color: var(--ink); }
.vd-show[aria-pressed="true"] { border-color: var(--red); background: var(--paper-bright); box-shadow: inset 0 -4px 0 var(--red); }
.vd-show.is-cancelled img { filter: grayscale(1); }

.vd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); border: 2px solid var(--ink); background: var(--paper-bright); }
.vd-kpi { padding: clamp(8px, 1.4vh, 14px) 14px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.vd-kpi-label { font-family: var(--poster); font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
.vd-kpi-label i { font-size: 18px; }
.vd-kpi strong { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3.4vh, 34px); line-height: 1.05; }
.vd-kpi small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.vd-kpi.is-total { background: var(--ink); color: var(--paper-bright); border-right: 0; }
.vd-kpi.is-total .vd-kpi-label, .vd-kpi.is-total small { color: var(--gold); }
.vd-kpi.is-total strong { font-size: clamp(28px, 4.4vh, 46px); }

.vd-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.vd-panel { min-height: 0; display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: 10px; }
.vd-panel h2 { font-family: var(--poster); font-size: 17px; font-weight: 700; letter-spacing: .05em; margin: 0 0 6px; text-transform: uppercase; }
.vd-actions { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.vd-action { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; background: var(--paper-bright); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px 14px; cursor: pointer; color: var(--ink); text-align: left; transition: transform .08s, box-shadow .08s; }
.vd-action i { font-size: clamp(22px, 3.6vh, 34px); line-height: 1; }
.vd-action span { font-family: var(--poster); font-weight: 700; font-size: 16px; text-transform: uppercase; }
.vd-action small { color: var(--ink-soft); font-size: 12px; }
.vd-action:hover { background: #fff; }
.vd-action:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.vd-action:disabled { opacity: .6; cursor: progress; }
.vd-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.vd-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: clamp(3px, .8vh, 10px) 0; border-bottom: 1px solid var(--rule); }
.vd-list li > i { font-size: 22px; text-align: center; }
.vd-list strong { display: block; font-family: var(--poster); font-size: 15px; text-transform: uppercase; }
.vd-list small { color: var(--ink-soft); font-size: 12px; }
.vd-list li:not(.done) strong { color: var(--ink-soft); }
.vd-ok { font-family: var(--poster); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
.vd-fine { color: var(--ink-soft); font-size: 11px; margin: 8px 0 0; }
.vd-danger { margin-top: 12px; min-height: 48px; background: var(--red); color: var(--paper-bright); border: 2px solid var(--red-dark); box-shadow: 4px 4px 0 var(--red-dark); font-family: var(--poster); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.vd-danger:hover { background: var(--red-dark); }
.vd-danger:disabled { background: var(--green); border-color: var(--green); box-shadow: none; cursor: default; }

/* full-screen lock: laptops, desktops, landscape tablets */
@media (min-width: 900px) and (min-height: 560px) {
  body.venue-mode { height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-block: 10px; }
  body.venue-mode .marquee, body.venue-mode .demo-notice, body.venue-mode .mode-tabs, body.venue-mode .demo-controls, body.venue-mode #app { width: min(1640px, 100%); }
  body.venue-mode .marquee { min-height: 0; padding: 4px 2px; border-width: 2px; flex: none; }
  body.venue-mode .brand-sams { font-size: 30px; }
  body.venue-mode .marquee-brand { flex-direction: row; align-items: baseline; gap: 12px; }
  body.venue-mode .brand-sub { font-size: 12px; margin: 0; }
  body.venue-mode .demo-stamp { font-size: 9px; padding: 4px 6px; border-width: 2px; }
  body.venue-mode .venue-address { font-size: 10px; }
  body.venue-mode .demo-notice { margin-top: 6px; padding: 3px 12px; font-size: 10px; flex: none; }
  body.venue-mode .mode-tabs { flex: none; }
  body.venue-mode .mode-tabs button { min-height: 40px; padding: 6px 12px; font-size: 15px; }
  body.venue-mode { position: relative; }
  body.venue-mode .venue-address { display: none; }
  body.venue-mode .demo-controls { position: absolute; top: 14px; right: max(18px, calc((100vw - 1640px) / 2)); width: auto; min-height: 0; padding: 0; background: transparent; border: 0; gap: 18px; }
  body.venue-mode .demo-controls .ink-link { min-height: 28px; font-size: 11px; color: #d8cdb8; }
  body.venue-mode .demo-controls .ink-link:hover { color: #fff; }
  body.venue-mode .marquee { grid-template-columns: 1fr auto; padding-right: 300px; }
  body.venue-mode #app { flex: 1; min-height: 0; }
  body.venue-mode .paper-view.vd { min-height: 0; height: 100%; }
  body.venue-mode .site-footer { display: none; }
}

@media (max-width: 899px) {
  .vd { padding-left: 24px; }
  .vd-top { grid-template-columns: 1fr; }
  .vd-hero { grid-row: auto; width: 100%; transform: none; }
  .vd-shows { grid-column: auto; flex-direction: column; }
  .vd-kpis { grid-template-columns: 1fr 1fr; }
  .vd-kpi.is-total { grid-column: 1 / -1; }
  .vd-main { grid-template-columns: 1fr; }
  .vd-actions { grid-auto-rows: 96px; }
}

@media (max-height: 800px) { .vd-fine { display: none; } }