.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.22em; }

.bar {
  position: sticky; top: 0; z-index: 40;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding: 0 clamp(16px, 2.6vw, 36px);
  background: var(--ground-2);
  border-bottom: 1px solid var(--line);
}

.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  opacity: .9;
}
.brand { display: flex; align-items: center; gap: 20px; flex: none; height: 100%; }

.home-mark { display: grid; place-items: center; width: 24px; height: 34px; position: relative; color: var(--brass); transition: color var(--dur-2), filter var(--dur-2); }
.home-mark::before { content: ""; position: absolute; inset: 0 -6px; }                     
.home-mark::after { content: ""; position: absolute; right: -10.5px; top: 7px; bottom: 7px; width: 1px; background: var(--line-2); }
.home-mark svg { width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; }
.home-mark svg .planet { fill: var(--ground-2); }   
.home-mark .orb { transform-box: view-box; transform-origin: 12px 12px; transform: rotate(-18deg); }
.home-mark:hover, .home-mark:focus-visible { color: var(--brass-glint); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--brass-glint) 55%, transparent)); }
.home-mark:hover .orb, .home-mark:focus-visible .orb { animation: gyro 1.1s var(--ease); }
@keyframes gyro {
  0% { transform: rotate(-18deg); } 30% { transform: rotate(-40deg); } 62% { transform: rotate(-8deg); } 84% { transform: rotate(-22deg); } 100% { transform: rotate(-18deg); }
}
@media (prefers-reduced-motion: reduce) { .home-mark:hover .orb, .home-mark:focus-visible .orb { animation: none; } }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.wordmark .logo {
  width: 168px; height: 20px; background: var(--ink);
  
  --logo: url("data:image/webp;base64,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");
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.wordmark:hover .logo { background: var(--brass-hi); }
.nav { display: flex; align-items: stretch; gap: 2px; height: 100%; margin-left: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 0 12px; text-decoration: none; white-space: nowrap;
  font-family: var(--f-ui-sc); font-weight: 500; font-size: 15px; letter-spacing: .07em; color: var(--ink-2);
  transition: color var(--dur-1);
}
.nav a .ic { width: 17px; height: 17px; opacity: .75; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--brass);
}
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex: none; }
.datechip {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-2); font-family: var(--f-ui); font-size: var(--t-sm); white-space: nowrap;
}
.datechip b { color: var(--ink); font-weight: 700; font-variant-numeric: lining-nums; }
.datechip .ic { color: var(--brass); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: var(--r-2);
  font-family: var(--f-ui); font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em; text-decoration: none;
  border: 1px solid var(--brass); background: var(--brass); color: var(--brass-ink);
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.btn:hover { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--brass-ink); }
.btn:active { transform: translateY(1px); }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.quiet:hover { border-color: var(--brass); color: var(--brass-hi); background: var(--brass-soft); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 0 10px; }
.btn.ghost:hover { color: var(--ink); background: var(--ground-3); }
.btn.sm { min-height: 30px; padding: 0 11px; font-size: var(--t-xs); gap: 6px; }
.btn.danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-2);
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.icon-btn:hover { background: var(--ground-3); color: var(--ink); }
.icon-btn[aria-pressed="true"] { color: var(--brass); border-color: var(--line); }
.kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px;
  font-family: var(--f-ui); font-size: 11px; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--ground);
}
.search-btn {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; min-width: 190px;
  border-radius: var(--r-2); border: 1px solid var(--line); background: var(--ground);
  color: var(--ink-3); font-family: var(--f-ui); font-size: var(--t-sm);
}
.search-btn:hover { border-color: var(--brass); color: var(--ink-2); }
.search-btn .kbd { margin-left: auto; }

@media (max-width: 1720px) { .nav a .ic { display: none; } .nav a { padding: 0 10px; } }
@media (max-width: 1500px) { .search-btn { min-width: 0; width: auto; gap: 8px; } .search-btn .lbl { display: none; } .search-btn .kbd { margin-left: 0; } .bar { gap: var(--s-4); } }
@media (max-width: 1320px) { .datechip { display: none; } }
@media (max-width: 1120px) { .wordmark .logo { width: 132px; } .nav a { padding: 0 8px; font-size: 14px; } }

@media (max-width: 1060px) {
  :root { --bar-h: 100px; }
  .bar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 56px 44px; grid-template-areas: "brand tools" "nav nav"; column-gap: var(--s-4); row-gap: 0; }
  .brand { grid-area: brand; }
  .bar-tools { grid-area: tools; justify-self: end; }
  .nav { grid-area: nav; margin: 0 calc(-1 * clamp(16px, 2.6vw, 36px)); padding: 0 clamp(8px, 2vw, 28px); border-top: 1px solid var(--line);
    -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .nav a { padding: 0 11px; font-size: 14px; }
  .nav a[aria-current="page"]::after { bottom: 5px; }
}
@media (max-width: 480px) {
  .search-btn .kbd { display: none; }
  .search-btn { padding: 0 10px; }
  .wordmark .logo { width: 124px; }
}

.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 4px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ground-2);
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; max-width: 100%;
}
.chip.no-pic { padding-left: 11px; }
.chip:hover { border-color: var(--brass); color: var(--ink); }
.chip .ic { width: 14px; height: 14px; }
.chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.chip .mono { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 12px; background: var(--ground-3); color: var(--ink-2); }
.chip.session { padding: 0 10px; height: 24px; font-variant-numeric: lining-nums tabular-nums; font-weight: 700; letter-spacing: .02em; }
.chip.tone-past { border-color: color-mix(in srgb, var(--past) 45%, transparent); color: var(--past); }
.chip.tone-present { border-color: color-mix(in srgb, var(--present) 50%, transparent); color: var(--present); }
.chip.tone-future { border-color: color-mix(in srgb, var(--future) 45%, transparent); color: var(--future); }
.chip.on { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }

.tag { display: inline-block; font-family: var(--f-ui-sc); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.eyebrow { font-family: var(--f-ui-sc); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; color: var(--brass); }

.plain { list-style: none; padding: 0; margin: 0; }

.portrait {
  --size: 48px; --ring: var(--brass);
  position: relative; flex: none; display: inline-block; vertical-align: middle; width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--ground-3);
}
.portrait img, .portrait .mono { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.portrait .mono { display: grid; place-items: center; font-family: var(--f-display); font-size: calc(var(--size) * .42); color: var(--ink-2); background: radial-gradient(circle at 35% 30%, var(--ground-2), var(--ground-3)); }

.portrait[data-status="defeated"] img, .portrait[data-status="at-rest"] img { filter: grayscale(1) sepia(.25) brightness(.8) contrast(1.05); }
.portrait[data-status="defeated"], .portrait[data-status="at-rest"] { --ring: var(--ink-4); }
.portrait .badge .ic { color: var(--past); }
.portrait::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--ring), 0 2px 6px -2px rgba(0,0,0,.4);
  pointer-events: none;
}

.portrait.bezel::before {
  content: ""; position: absolute; inset: calc(var(--size) * -.1); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from -1deg, var(--ring) 0 1.4deg, transparent 1.4deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4.5px), #000 calc(50% - .5px), transparent 50%);
          mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4.5px), #000 calc(50% - .5px), transparent 50%);
  opacity: .65;
}
.portrait[data-status="dead"] img { filter: grayscale(1) sepia(.25) brightness(.8) contrast(1.05); }
.portrait[data-status="dead"] { --ring: var(--ink-4); }
.portrait[data-status="erased"] img { filter: grayscale(.6) brightness(1.1) opacity(.55); }
.portrait[data-status="erased"] { --ring: var(--ghost); }
.portrait .badge {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ground-2); color: var(--ink-2); box-shadow: 0 0 0 1.5px var(--line-2);
}
.portrait .badge .ic { width: 13px; height: 13px; }

.seal {
  --c: var(--gun-loaded);
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; position: relative;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent);
}
.seal::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.seal .ic { width: 17px; height: 17px; }
.seal.fired { --c: var(--gun-fired); background: color-mix(in srgb, var(--gun-fired) 20%, transparent); }
.seal.dud { --c: var(--gun-dud); background: transparent; }
.seal.dud::after { border-style: dotted; }
.seal.sm { width: 24px; height: 24px; }
.seal.sm .ic { width: 13px; height: 13px; }
.seal.sm::after { inset: 2px; }

.panel { background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--r-2); }
.well { background: var(--ground-3); border-radius: var(--r-2); }
.rule-ticks {
  height: 9px; border: 0; margin: var(--s-5) 0;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10px) 0 50% / 100% 9px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s-4); margin-bottom: var(--s-4); }
.section-head h2, .section-head h3 { flex: 0 1 auto; min-width: 0; }
.section-head .fill { flex: 1; height: 1px; background: var(--line); transform: translateY(-.3em); }
.section-head .aside { color: var(--ink-3); font-family: var(--f-ui); font-size: var(--t-sm); }

.field { display: grid; gap: 6px; }
.field > span { font-family: var(--f-ui-sc); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ground);
  color: var(--ink); padding: 8px 11px; font-family: var(--f-ui); font-size: var(--t-md); line-height: 1.4;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.textarea { font-family: var(--f-body); font-size: var(--t-md); min-height: 96px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); border-radius: var(--r-2); }
.input.num { width: 5.2em; text-align: center; font-variant-numeric: lining-nums tabular-nums; font-weight: 700; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { appearance: none; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--ground); display: grid; place-items: center; flex: none; margin: 0; }
.check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--brass-ink); border-bottom: 2px solid var(--brass-ink); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--brass); border-color: var(--brass); }
.check input:checked::after { opacity: 1; }

.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity var(--dur-2); }
.drawer-scrim.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(560px, 100vw);
  background: var(--ground-2); box-shadow: var(--shadow-3); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(104%); transition: transform var(--dur-3) var(--ease);
}
.drawer.open { transform: none; }
.drawer-close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 2; background: var(--ground-2); }

.palette-scrim { position: fixed; inset: 0; z-index: 70; background: var(--scrim); display: grid; place-items: start center; padding-top: 12vh; }
.palette {
  width: min(640px, calc(100vw - 32px)); background: var(--ground-2); border-radius: var(--r-3); box-shadow: var(--shadow-3);
  overflow: hidden; border: 1px solid var(--line);
}
.palette-input { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.palette-input .ic { color: var(--brass); width: 22px; height: 22px; }
.palette-input input { flex: 1; border: 0; background: transparent; font-family: var(--f-body); font-size: var(--t-lg); color: var(--ink); }
.palette-input input::placeholder { color: var(--ink-3); }
.palette-input input:focus-visible { box-shadow: none; }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 520px); overflow-y: auto; }
.palette-list li a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-2); text-decoration: none; color: var(--ink); }
.palette-list li a .k { margin-left: auto; font-family: var(--f-ui-sc); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.palette-list li a .t { font-family: var(--f-ui); font-weight: 500; }
.palette-list li a .s { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-3); display: block; }
.palette-list li a .s.snip { font-family: var(--f-body); font-style: italic; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-list li[aria-selected="true"] a { background: var(--brass-soft); box-shadow: inset 2px 0 0 var(--brass); }
.palette-list .ph { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ground-3); color: var(--ink-2); overflow: hidden; }
.palette-list .ph img { width: 100%; height: 100%; object-fit: cover; }
.palette-empty { padding: 26px; text-align: center; color: var(--ink-3); font-family: var(--f-ui); }
.palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-family: var(--f-ui); font-size: 12px; color: var(--ink-3); }

.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-2);
  background: var(--ink); color: var(--ground); font-family: var(--f-ui); font-size: var(--t-sm); box-shadow: var(--shadow-2);
  animation: toast-in var(--dur-2) var(--ease);
}
.toast .ic { color: var(--toast-accent); }

.toast.has-action .toast-act { pointer-events: auto; }
.toast-act {
  margin-left: 6px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--toast-accent) 60%, transparent);
  background: transparent; color: var(--toast-accent); font: 700 var(--t-xs)/1.2 var(--f-ui); cursor: pointer;
}
.toast-act:hover { background: color-mix(in srgb, var(--toast-accent) 18%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.banner {
  display: flex; gap: 10px; align-items: center; padding: 8px clamp(16px, 2.6vw, 36px);
  background: color-mix(in srgb, var(--warn) 16%, var(--ground-2)); color: var(--ink); border-bottom: 1px solid var(--line);
  font-family: var(--f-ui); font-size: var(--t-sm);
}

.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; z-index: 50; padding: 6px; background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.menu button, .menu label { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink); font-family: var(--f-ui); font-size: var(--t-sm); text-align: left; cursor: pointer; }
.menu button:hover, .menu label:hover { background: var(--ground-3); }
.menu hr { margin: 6px 4px; }
.menu .confirm { padding: 10px 12px; display: grid; gap: 8px; font-family: var(--f-ui); font-size: var(--t-sm); }
.rel { position: relative; }

.cert { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-hand); font-size: 15px; color: var(--ink-3); }
.cert .ic { width: 14px; height: 14px; }
.empty { padding: var(--s-6); text-align: center; color: var(--ink-3); font-family: var(--f-ui); }

.chart-tip {
  position: absolute; z-index: 5; transform: translate(-50%, -100%); max-width: 280px; padding: 8px 11px; pointer-events: none;
  border-radius: var(--r-2); background: var(--ink); color: var(--ground); box-shadow: var(--shadow-2);
  font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.4;
}

.select.sm, .input.sm { width: auto; min-height: 32px; padding: 4px 10px; font-size: var(--t-sm); }
.select.sm { padding-right: 28px; }
.linkish { padding: 0; border: 0; background: none; color: var(--brass-hi); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.field-err { font-style: normal; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; color: var(--bad); }
.input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 16%, transparent); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; font-family: var(--f-ui-sc); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }

.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--ground-3); box-shadow: inset 0 0 0 1px var(--line); }
.seg-btn, .seg-radio > span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font-family: var(--f-ui); font-weight: 700; font-size: var(--t-xs); cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1);
}
.seg-btn .num { font-weight: 500; color: var(--ink-3); }
.seg-btn:hover, .seg-radio:hover > span { color: var(--ink); }
.seg-btn.on, .seg-radio > input:checked + span { background: var(--ground-2); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px var(--line-2); }
.seg-btn.on .num { color: var(--brass); }
.seg-radio { position: relative; display: inline-flex; }
.seg-radio > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-radio > input:focus-visible + span { box-shadow: var(--focus); }

.lt-switch { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--ground-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--dur-2); }
.lt-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform var(--dur-2) var(--ease), background var(--dur-2); }
.switch-host input:checked + .lt-switch { background: var(--brass); box-shadow: none; }
.switch-host input:checked + .lt-switch::after { transform: translateX(14px); background: var(--brass-ink); }
.switch-host input:focus-visible + .lt-switch { box-shadow: var(--focus); }

.menu-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--brass); color: var(--brass-ink); font-size: 12px; font-weight: 700; text-align: center; }
.menu a.menu-link { display: block; padding: 6px 12px 8px; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-3); }
.menu a.menu-link:hover { color: var(--brass-hi); }

.site-foot { max-width: 60rem; margin: 0 auto; padding: var(--s-5) clamp(16px, 3vw, 48px) var(--s-7); border-top: 1px solid var(--line); text-align: center; font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.site-foot p + p { margin-top: 6px; }
.site-foot a { color: var(--ink-2); }
.site-foot a:hover { color: var(--brass-hi); }

.statline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; margin: var(--s-4) 0 var(--s-5); font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-3); }
.statline > span { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--line-2); }
.statline > span:last-child { border-right: 0; }
.statline b { font-size: 1.3rem; color: var(--ink); margin-right: 3px; }
.statline a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.statline a:hover { color: var(--brass-hi); }
.filter-wrap {
  position: sticky; top: var(--bar-h); z-index: 6; margin: var(--s-6) calc(-1 * clamp(16px, 3vw, 48px)) 0;
  padding: 10px clamp(16px, 3vw, 48px); background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filter-search { position: relative; display: flex; align-items: center; }
.filter-search .ic { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.filter-search .input { padding-left: 30px; width: 190px; }
.filter-count { margin-left: auto; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-3); }
.filter-count:empty { display: none; }
.empty-state { padding: var(--s-7) 0; text-align: center; color: var(--ink-3); display: grid; justify-items: center; gap: 12px; }
@media (max-width: 1100px) { .filter-count { margin-left: 0; } }
@media (max-width: 640px) {
  .filter-wrap { position: static; }
  .filter-search .input { width: 150px; }
  .statline > span { border-right: 0; padding-right: 0; margin-right: 16px; }
}