/* ══════════════════════════════════════════════════════════════════════════
   QUIVER — a woodcut archery-tournament print.
   Flat inked shapes, parchment panels, hard letterpress shadows, brass.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #14100B;
  --ink-2:      #453A28;
  --ink-3:      #7A6A50;

  --parch:      #F7EBD2;
  --parch-2:    #F0E1C1;
  --parch-3:    #E4D2AA;
  --parch-4:    #D3BC8D;

  --forest:     #0E2A1B;
  --forest-2:   #143A26;
  --forest-3:   #1D5134;

  --brass:      #E9B443;
  --brass-2:    #CE9422;
  --brass-3:    #8E6512;

  --bull:       #1E8A4E;
  --bull-soft:  #CDE9D6;
  --bear:       #C63A22;
  --bear-soft:  #F5D6CD;

  --shadow:     4px 4px 0 var(--ink);
  --shadow-lg:  7px 7px 0 var(--ink);
  --r:          14px;
  --r-sm:       9px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--forest) url('/backdrop.svg') center top / cover no-repeat fixed;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Keeps the art visible but guarantees contrast for anything laid over it. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,20,12,.62), rgba(6,20,12,.26) 38%, rgba(6,20,12,.66));
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; letter-spacing: .002em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.dim { color: var(--ink-3); }
.mid { color: var(--ink-2); }
.small { font-size: 12.5px; }
.bull { color: var(--bull); }
.bear { color: var(--bear); }
.right { text-align: right; }

/* Uppercase engraved label — used for every column head and stat caption. */
.label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────── display type */
.display {
  font-family: 'Alfa Slab One', Georgia, serif;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--parch);
  text-shadow:
     3px 0 0 var(--ink),  -3px 0 0 var(--ink),
     0 3px 0 var(--ink),  0 -3px 0 var(--ink),
     2px 2px 0 var(--ink), -2px 2px 0 var(--ink),
     2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
     8px 8px 0 rgba(0,0,0,.32);
}
.display .brass { color: var(--brass); }

/* ──────────────────────────────────────────────────────────────── surfaces */
.card {
  background: var(--parch);
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px;
  background: var(--parch-3);
  border-bottom: 3px solid var(--ink);
}
.card-head h2 { font-size: 16px; }
.card-body { padding: 18px; }

/* A nailed-on banner, for section titles. */
.ribbon {
  display: inline-block; position: relative;
  background: var(--bear); color: var(--parch);
  border: 3px solid var(--ink); border-radius: 8px;
  padding: 5px 16px; font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--shadow);
  transform: rotate(-1.4deg);
}
.ribbon-brass { background: var(--brass); color: var(--ink); }
.ribbon-forest { background: var(--forest-3); color: var(--parch); }

/* ───────────────────────────────────────────────────────────────── buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 14px; letter-spacing: .02em;
  padding: 10px 18px;
  background: var(--parch-2); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, background .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--parch); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
.btn-brass { background: var(--brass); }
.btn-brass:hover { background: #F2C25C; }
.btn-bull { background: var(--bull); color: var(--parch); }
.btn-bull:hover { background: #24A25C; }
.btn-bear { background: var(--bear); color: var(--parch); }
.btn-bear:hover { background: #DA4529; }
.btn-lg { font-size: 18px; padding: 14px 26px; border-radius: 12px; }
.btn-sm { font-size: 11.5px; padding: 6px 11px; border-width: 2.5px; box-shadow: 3px 3px 0 var(--ink); }
.btn-sm:active { transform: translate(3px, 3px); }
.btn-block { width: 100%; }

/* ──────────────────────────────────────────────────────────────── top bar */
.topbar { position: sticky; top: 0; z-index: 60; padding: 14px 20px 0; }
.topbar-inner {
  max-width: 1280px; margin: 0 auto;
  /* wraps to a second row rather than pushing the purse off-screen on narrow viewports */
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--parch);
  border: 3px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 8px 12px 8px 14px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { display: block; }
.brand-name { font-family: 'Alfa Slab One', Georgia, serif; font-size: 20px; letter-spacing: .01em; }
.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a {
  font-family: 'Alfa Slab One', Georgia, serif; font-size: 13px;
  padding: 7px 12px; border-radius: 8px; color: var(--ink-2); white-space: nowrap;
  border: 2.5px solid transparent;
}
.nav a:hover { background: var(--parch-2); }
.nav a.active { background: var(--brass); border-color: var(--ink); color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.purse {
  display: flex; align-items: center; gap: 10px;
  background: var(--forest-3); color: var(--parch);
  border: 3px solid var(--ink); border-radius: var(--r-sm);
  padding: 5px 12px;
}
.purse .k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; line-height: 1.1; }
.purse .v { font-family: 'Alfa Slab One', Georgia, serif; font-size: 15px; line-height: 1.2; }
.crest {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--brass); border: 3px solid var(--ink);
  font-family: 'Alfa Slab One', Georgia, serif; font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────── layout */
.view { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 22px 20px 56px; }
.boot { padding: 90px 0; text-align: center; color: var(--parch); font-family: 'Alfa Slab One', serif; font-size: 20px; text-shadow: 2px 2px 0 var(--ink); }

/* ───────────────────────────────────────────────────────────────── hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center; margin: 18px 0 30px; }
.hero h1 { font-size: 58px; margin-bottom: 16px; }
.hero-sub {
  color: var(--parch); font-size: 16px; font-weight: 700; max-width: 46ch;
  text-shadow: 2px 2px 0 rgba(0,0,0,.55); margin-bottom: 20px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.handle-slot {
  display: flex; align-items: center; gap: 8px; background: var(--parch);
  border: 3px solid var(--ink); border-radius: var(--r-sm); padding: 4px 4px 4px 14px;
  box-shadow: var(--shadow);
}
.handle-slot input { background: none; border: 0; outline: none; width: 150px; font-weight: 700; }
.handle-slot input::placeholder { color: var(--ink-3); font-weight: 600; }

/* the live bull/bear tension bar — "the draw" */
.draw-panel { padding: 16px 18px 18px; }
.draw-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.draw-bar {
  position: relative; height: 30px; border: 3px solid var(--ink); border-radius: 8px;
  overflow: hidden; background: var(--bear); display: flex;
}
.draw-bar i { display: block; height: 100%; background: var(--bull); transition: width .5s cubic-bezier(.3,.9,.3,1); }
.draw-bar span {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: 'Alfa Slab One', serif; font-size: 13px; color: var(--parch);
  text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.5);
}
.draw-bar .l { left: 9px; } .draw-bar .r { right: 9px; }
.draw-legend { display: flex; justify-content: space-between; margin-top: 8px; }

.volley { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  border-top: 2.5px dashed var(--parch-4); padding-top: 13px; }
.volley .clock {
  font-family: 'Alfa Slab One', serif; font-size: 25px; letter-spacing: .02em;
  background: var(--forest); color: var(--brass); border: 3px solid var(--ink);
  border-radius: 8px; padding: 3px 12px;
}

/* ───────────────────────────────────────────────────────────────── tables */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th {
  text-align: right; padding: 9px 14px; background: var(--parch-3);
  border-bottom: 3px solid var(--ink); white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 18px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 18px; }
.tbl td { text-align: right; padding: 11px 14px; border-bottom: 2px solid var(--parch-3); white-space: nowrap; font-weight: 700; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.hit { cursor: pointer; }
.tbl tbody tr.hit:hover { background: var(--parch-2); }
.table-scroll { overflow-x: auto; }

.mkt { display: flex; align-items: center; gap: 11px; }
.mkt img, .mkt .ph {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--ink); background: var(--parch-3); object-fit: cover;
}
.mkt .ph { display: grid; place-items: center; font-size: 11px; font-family: 'Alfa Slab One', serif; }
.mkt b { display: block; font-family: 'Alfa Slab One', serif; font-size: 14px; font-weight: 400; }
.mkt span { display: block; font-size: 11.5px; color: var(--ink-3); }

.pill {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--parch-3);
}
.pill-open { background: var(--bull); color: var(--parch); }
.pill-shut { background: var(--parch-4); }

/* ────────────────────────────────────────────────────────── segmented tabs */
.seg {
  display: inline-flex; gap: 0; background: var(--parch-3);
  border: 3px solid var(--ink); border-radius: var(--r-sm); overflow: hidden;
}
.seg button {
  border: 0; background: none; cursor: pointer; padding: 8px 15px;
  font-family: 'Alfa Slab One', serif; font-size: 12.5px; color: var(--ink-2);
  border-right: 3px solid var(--ink);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--parch-2); }
.seg button.on { background: var(--brass); color: var(--ink); }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.seek {
  display: flex; align-items: center; gap: 8px; background: var(--parch);
  border: 3px solid var(--ink); border-radius: var(--r-sm); padding: 7px 13px;
  box-shadow: var(--shadow); min-width: 200px;
}
.seek input { background: none; border: 0; outline: none; width: 100%; font-weight: 700; }
.seek input::placeholder { color: var(--ink-3); font-weight: 600; }

/* ─────────────────────────────────────────────────────────── asset page */
.back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  color: var(--parch); font-family: 'Alfa Slab One', serif; font-size: 13px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.asset-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; }
.asset-bar img, .asset-bar .ph {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: var(--parch-3);
}
.asset-bar .ph { display: grid; place-items: center; font-family: 'Alfa Slab One', serif; font-size: 16px; }
.asset-bar h1 { font-size: 26px; }
.asset-spot { margin-left: auto; text-align: right; }
.asset-spot .p { font-family: 'Alfa Slab One', serif; font-size: 30px; line-height: 1.1; }

/* the SPL mint address, copyable */
.mintpill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
  background: var(--parch-2); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 3px 4px 3px 4px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.mintpill:hover { background: var(--parch); }
.mintpill:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.mintpill code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: -.01em;
}
.chainmark {
  font-family: 'Alfa Slab One', serif; font-size: 9.5px; letter-spacing: .06em;
  color: #fff; background: linear-gradient(100deg, #9945FF, #14F195);
  border: 2px solid var(--ink); border-radius: 999px; padding: 2px 8px;
}
.mintpill .copy {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding-right: 9px;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.stat { padding: 11px 16px; border-right: 2.5px dashed var(--parch-4); }
.stat:last-child { border-right: 0; }
.stat .v { font-family: 'Alfa Slab One', serif; font-size: 17px; margin-top: 1px; font-variant-numeric: tabular-nums; }

.range-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* ─────────────────────────────────────────────── the target (option dial) */
.target-wrap { display: flex; gap: 20px; align-items: center; padding: 18px; flex-wrap: wrap; justify-content: center; }
.target { flex: none; }
.target .band { cursor: pointer; transition: opacity .12s; }
.target .band:hover { opacity: .78; }
.target .band.on { stroke: var(--brass); stroke-width: 5; }
.target-key { flex: 1; min-width: 190px; }
.target-key .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; }
.target-key .row + .row { border-top: 2px solid var(--parch-3); }

/* ──────────────────────────────────────────────────────────── option chain */
.chain { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
.chain thead th {
  padding: 8px 9px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--parch-3); border-bottom: 3px solid var(--ink);
}
.chain thead .grp { font-family: 'Alfa Slab One', serif; font-size: 12px; letter-spacing: .06em; border-bottom: 2px solid var(--ink); }
.chain thead .grp.c { background: var(--bull); color: var(--parch); }
.chain thead .grp.p { background: var(--bear); color: var(--parch); }
.chain td { padding: 7px 9px; text-align: center; border-bottom: 2px solid var(--parch-3); }
.chain tbody tr:last-child td { border-bottom: 0; }
.chain .k {
  font-family: 'Alfa Slab One', serif; background: var(--parch-3);
  border-left: 2.5px solid var(--ink); border-right: 2.5px solid var(--ink); width: 92px;
}
.chain tr.atm td { background: #FBF0D2; }
.chain tr.atm .k { background: var(--brass); }
.chain .buyable { cursor: pointer; border-radius: 6px; }
.chain .buyable:hover { background: var(--parch-4); }
.chain .buyable.on { background: var(--ink); color: var(--brass); }
.chain .quiet { color: var(--ink-3); font-weight: 600; }

/* ────────────────────────────────────────────────────────────────── ticket */
.ticket { position: sticky; top: 96px; }
.ticket-empty { padding: 40px 22px; text-align: center; color: var(--ink-3); }
.ticket-empty img { opacity: .35; margin-bottom: 10px; }
.contract { font-family: 'Alfa Slab One', serif; font-size: 18px; line-height: 1.2; }
.tag {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px;
  border: 2.5px solid var(--ink); border-radius: 6px; vertical-align: 3px;
}
.tag-c { background: var(--bull); color: var(--parch); }
.tag-p { background: var(--bear); color: var(--parch); }

.qty { display: flex; align-items: center; gap: 11px; margin: 14px 0 12px; }
.stepper { display: flex; border: 3px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; background: var(--parch-2); }
.stepper button {
  width: 36px; height: 38px; border: 0; background: none; cursor: pointer;
  font-family: 'Alfa Slab One', serif; font-size: 17px;
}
.stepper button:hover { background: var(--parch-4); }
.stepper input {
  width: 64px; text-align: center; background: none; border: 0; outline: none;
  font-family: 'Alfa Slab One', serif; font-size: 16px; font-variant-numeric: tabular-nums;
  border-left: 3px solid var(--ink); border-right: 3px solid var(--ink);
}

.greeks { display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; margin: 12px 0; }
.greeks div { padding: 7px 4px; text-align: center; background: var(--parch-2); border-right: 2.5px solid var(--ink); }
.greeks div:last-child { border-right: 0; }
.greeks .n { font-family: 'Alfa Slab One', serif; font-size: 13px; margin-top: 1px; font-variant-numeric: tabular-nums; }

.kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.kv + .kv { border-top: 2px solid var(--parch-3); }
.kv .v { font-variant-numeric: tabular-nums; font-weight: 800; }
.kv-total { border-top: 3px solid var(--ink); margin-top: 5px; padding-top: 9px; font-size: 15px; }
.kv-total .v { font-family: 'Alfa Slab One', serif; font-size: 18px; }
.note { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; margin-top: 12px; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────── portfolio */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile { background: var(--parch); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 13px 16px; }
.tile .v { font-family: 'Alfa Slab One', serif; font-size: 24px; line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }

.empty { padding: 46px 20px; text-align: center; }
.empty .big { font-family: 'Alfa Slab One', serif; font-size: 19px; margin-bottom: 6px; }

/* ─────────────────────────────────────────────────────────────────── modal */
.veil {
  position: fixed; inset: 0; background: rgba(6,18,11,.74); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 200; padding: 20px; animation: fade .15s;
}
.modal { width: 100%; max-width: 430px; animation: pop .18s cubic-bezier(.2,.9,.3,1.25); }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) rotate(-1deg) } }
.x { border: 0; background: none; cursor: pointer; font-family: 'Alfa Slab One', serif; font-size: 19px; line-height: 1; padding: 2px 6px; }
.coin {
  display: flex; align-items: center; gap: 8px; border: 3px solid var(--ink); background: var(--parch-2);
  border-radius: var(--r-sm); padding: 11px 15px; margin: 12px 0;
}
.coin span { font-family: 'Alfa Slab One', serif; font-size: 21px; color: var(--ink-3); }
.coin input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-family: 'Alfa Slab One', serif; font-size: 23px; font-variant-numeric: tabular-nums;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.seg-wrap { flex-wrap: wrap; }
.purse-split { width: 2.5px; align-self: stretch; background: rgba(247,235,210,.28); border-radius: 2px; }

/* withdrawal destination and key display */
.dest { border: 3px solid var(--ink); border-radius: var(--r-sm); background: var(--parch-2); padding: 9px 12px; margin-bottom: 14px; }
.dest code, .keybox code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 700; word-break: break-all; display: block; margin-top: 3px;
}
.keybox {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  border: 3px solid var(--ink); border-radius: var(--r-sm);
  background: var(--parch-2); padding: 8px 10px;
}
.keybox code { flex: 1; margin: 0; }
.keybox code.blurred { filter: blur(5px); user-select: none; }

.warn {
  margin-top: 14px; padding: 10px 13px; font-size: 12.5px; line-height: 1.45;
  border: 3px solid var(--ink); border-radius: var(--r-sm);
  background: #FBEBC6;
}
.warn b { font-family: 'Alfa Slab One', serif; font-weight: 400; }
.warn-hard { background: var(--bear); color: var(--parch); margin-top: 10px; }

/* ─────────────────────────────────────────────────────────────────── toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 300; }
.toast {
  background: var(--parch); border: 3px solid var(--ink); border-left-width: 10px;
  border-radius: var(--r-sm); padding: 10px 15px; min-width: 250px; max-width: 370px;
  box-shadow: var(--shadow); animation: slide .2s;
}
.toast.ok { border-left-color: var(--bull); }
.toast.no { border-left-color: var(--bear); }
.toast b { display: block; font-family: 'Alfa Slab One', serif; font-size: 13.5px; }
.toast span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
@keyframes slide { from { opacity: 0; transform: translateX(18px) } }

/* ─────────────────────────────────────────────────────────────────── footer */
.footer { padding: 0 20px 26px; }
.footer-inner {
  max-width: 1280px; margin: 0 auto; color: var(--parch); font-size: 12px; font-weight: 600;
  text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.5); display: flex; gap: 14px;
  justify-content: space-between; flex-wrap: wrap; align-items: center;
}

/* ─────────────────────────────────────────────────────────────── responsive */
@media (max-width: 1060px) {
  .range-layout { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px; }
}
@media (max-width: 860px) {
  .topbar-inner { gap: 10px; }
  .nav a { font-size: 12px; padding: 6px 9px; }
  .topbar-right { margin-left: auto; }
}
@media (max-width: 720px) {
  .brand-name { display: none; }
  .view { padding: 16px 12px 40px; }
  .topbar { padding: 10px 12px 0; }
  .hero h1 { font-size: 34px; }
  .display { text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 5px 5px 0 rgba(0,0,0,.32); }
  .purse .k { display: none; }
}