:root {
  --bg: #150a0e; --panel: #21121a; --panel-2: #2b1923; --line: rgba(217, 180, 92, .22); --line-strong: rgba(217, 180, 92, .45);
  --gold: #d9b45c; --gold-pale: #f1d68a; --ink: #f3e9d6; --soft: #b3a190;
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 15px/1.55 var(--body); background: radial-gradient(60rem 40rem at 80% -10%, rgba(143, 19, 37, .22), transparent 60%), var(--bg); min-height: 100vh; }
a { color: var(--gold-pale); }
h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: .01em; }

.topbar { position: sticky; top: 0; z-index: 5; background: rgba(21, 10, 14, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: .7rem 1.1rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand h1 { font-size: 1.5rem; line-height: 1.1; color: var(--gold-pale); }
.brand__sub { margin: 0; color: var(--soft); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.crest { width: 30px; height: 30px; flex: none; }
.tabs { display: flex; gap: .3rem; }
.tabs a { padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .85rem; text-decoration: none; }
.tabs a:hover { border-color: var(--gold); }
.tabs a[aria-current='page'] { background: var(--gold); color: #241005; border-color: transparent; }

main { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
.lede { max-width: 64ch; margin: 0 0 1.1rem; color: var(--soft); }

.controls { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: 1rem; }
input[type='search'], input[type='number'], select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; font: inherit; min-height: 2.5rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; }
.chip[aria-pressed='true'] { background: var(--gold); color: #241005; border-color: transparent; font-weight: 600; }
.count { color: var(--soft); font-size: .85rem; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.tablecard { padding: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; }
.stat__label { color: var(--soft); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.stat__value { font: 600 1.4rem/1.2 var(--display); color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.note { color: var(--soft); font-size: .82rem; margin: .7rem 0 0; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 3.9rem; z-index: 1; background: var(--panel-2); color: var(--gold); font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; padding: .65rem .8rem; border-bottom: 1px solid var(--gold); white-space: nowrap; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; }
th button:hover { color: var(--gold-pale); }
th[aria-sort='ascending'] button::after { content: '▲'; font-size: .6rem; }
th[aria-sort='descending'] button::after { content: '▼'; font-size: .6rem; }
th:first-child, td:first-child { text-align: left; }
td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: right; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
tbody tr:hover { background: rgba(217, 180, 92, .08); }
td a { color: var(--ink); font-weight: 600; text-decoration: none; }
td a:hover { color: var(--gold-pale); text-decoration: underline; }
td.unit { text-align: left; color: var(--soft); }
th.unit { text-align: left; }
td.dim { color: var(--soft); }
tr.milestone td { border-bottom-color: var(--line-strong); }
tr.final td { font-weight: 700; color: var(--gold-pale); }
tr.hit td { background: rgba(217, 180, 92, .22); }

.lookup { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.lookup label { display: block; color: var(--soft); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.lookup input { width: 100%; }
.answer { margin: .55rem 0 0; padding: .6rem .85rem; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); min-height: 3.2rem; }
.answer b { color: var(--gold-pale); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .tablecard { overflow-x: auto; }
  th { top: 0; }
  .lookup { grid-template-columns: 1fr; }
}
/* phones: the event table becomes cards */
@media (max-width: 640px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 .6rem; padding: .5rem .8rem; }
  table.cards tbody tr:nth-child(even) { background: var(--panel); }
  table.cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .22rem 0; text-align: right; }
  table.cards td::before { content: attr(data-label); color: var(--soft); font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
  table.cards td:first-child { font-size: 1.05rem; }
  table.cards td:first-child::before { content: none; }
}

details summary { cursor: pointer; padding: .65rem .9rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; }
details summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }