/*
 * Librarium Militaris — page chrome.
 * Masthead, sticky control bar, filter drawer, empty state, footer and the
 * sign-up for the morning email (its call to action and the dialog behind it).
 */

/* --------------------------------------------------------------- masthead -- */

/* The top padding clears the corner rail. On a phone it leaves more room than
   the rail strictly needs: the sigil below is centred rather than off to one
   side, so it passes close under the button and wants the air. */
.masthead {
  position: relative;
  z-index: 10;
  padding: 5rem 1rem 3rem;
  background-color: var(--grim-800);
  text-align: center;
}

@media (min-width: 768px) {
  .masthead {
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* The calls to action, pinned to the plate's top-right corner. On a phone only
   the sign-up rides up here: the corner has room for one, and submitting a
   report is the footer's business at that width. */
.masthead__rail {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.masthead__rail .btn-submit { display: none; }

/* At the size the report page's own bar uses, so the two headers agree on how
   big the sign-up is. Written the wrong way round because it is the exception
   that needs stating, not the rule. */
@media (max-width: 767px) {
  .masthead__rail .btn-signup {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
  }

  .masthead__rail .btn-signup svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

@media (min-width: 768px) {
  .masthead__rail {
    top: 1.5rem;
    right: 1.5rem;
  }

  .masthead__rail .btn-submit { display: inline-block; }
}

.masthead__inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.masthead__sigil {
  width: 3rem;
  height: 3rem;
  color: var(--accent);
  margin-bottom: 1rem;
  opacity: 0.8;
}

.masthead__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Carries the air the kicker used to sit in. On a filtered page the heading
     runs straight into the stat strip; on the archive root the blurb below
     takes the gap instead. */
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

/* The brand, above the heading rather than as it. Wears what the kicker wore:
   small, spaced and quiet, so the page's own subject is what carries weight. */
.masthead__wordmark {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.2em;
  color: var(--zinc-400);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Answers "what is this" on the one page whose subject is the archive itself.
   Set below the heading and above the counts, because a number means nothing
   until you know what is being counted. */
.masthead__blurb {
  max-width: 40rem;
  margin: -0.25rem 0 1.5rem;
  color: var(--zinc-400);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .masthead__title { font-size: 3.75rem; line-height: 1; }
  .masthead__wordmark { font-size: 1rem; line-height: 1.5rem; }
  .masthead__blurb { font-size: 1.0625rem; }
}

/* ----------------------------------------------------------------- digest -- */

/* The standing account of a page's subject, set under the results as an
   endnote. Deliberately quiet: a reader came for the games and met them first,
   and this is the small print they drop to only if they want it. */
.digest {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--grim-700);
  display: grid;
  gap: 1.25rem;
  color: var(--zinc-500);
  font-size: 0.875rem;
  line-height: 1.65;
}

@media (min-width: 900px) {
  .digest {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: start;
  }
}

.digest__heading {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zinc-600);
}

.digest__body {
  max-width: 44rem;
}

/* The prose names reports, armies, channels and pairings, and links every one
   of them. Set to stay prose: no colour of their own, and an underline that
   only shows up when the eye is already on the word. A dozen accent-coloured
   names in a paragraph reads as a list of links rather than as a sentence. */
.digest__body a {
  color: var(--zinc-400);
  text-decoration: underline;
  text-decoration-color: var(--grim-700);
  text-underline-offset: 0.2em;
}

.digest__body a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.digest__text + .digest__text {
  margin-top: 0.625rem;
}

/* The written note on the army, where one exists: the only part here a reader
   is likely to want, so it is the only part allowed to be brighter. */
.digest__brief {
  margin-top: 1rem;
  padding-left: 0.875rem;
  border-left: 1px solid var(--grim-700);
  color: var(--zinc-400);
}

/* Where an event's dates and venue came from. Set quietly: it is a citation,
   not a call to leave. */
.digest__source {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
}

.digest__source a {
  color: var(--zinc-500);
  text-decoration: none;
  border-bottom: 1px solid var(--grim-700);
}

.digest__source a:hover { color: var(--accent); }

/* A row of figures rather than a plate of them: same information, a third of
   the room. */
.digest__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.digest__stat {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  white-space: nowrap;
}

.digest__stat-label {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--zinc-600);
}

.digest__stat-value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--zinc-400);
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--grim-700-50);
}

@media (min-width: 768px) {
  .stat-strip { gap: 2rem; }
}

.stat-strip__value { color: #fff; }
.stat-strip__sep { color: var(--zinc-600); }

.searchfield {
  position: relative;
  width: 100%;
  max-width: 42rem;
}

.searchfield__icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--zinc-500);
  pointer-events: none;
  transition: color 0.15s ease;
}

.searchfield:focus-within .searchfield__icon {
  color: var(--accent);
}

.searchfield__input {
  display: block;
  width: 100%;
  padding: 1rem 1rem 1rem 2.75rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.75rem;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.searchfield__input::placeholder { color: var(--zinc-600); }
.searchfield__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.searchfield__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------ control bar -- */

.controlbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(10, 10, 12, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grim-700);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.controlbar__row {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.controlbar__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.controlbar__group--lead {
  gap: 1rem;
  flex: 1 1 auto;
}

.btn-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  color: var(--zinc-300);
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.btn-filters svg { width: 1rem; height: 1rem; }

.btn-filters:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.btn-filters.is-open {
  background-color: var(--zinc-700);
  color: #fff;
}

.result-count {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--zinc-400);
}

.result-count__value { color: #fff; font-weight: 500; }
.result-count__total { color: var(--zinc-500); }

.spoiler-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  color: var(--zinc-300);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.spoiler-switch:hover { color: #fff; }

.spoiler-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex: none;
  display: grid;
  place-content: center;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.spoiler-switch input::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  box-shadow: inset 1rem 1rem #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.spoiler-switch input:checked {
  background-color: var(--danger);
  border-color: var(--danger);
}

.spoiler-switch input:checked::before { transform: scale(1); }

.spoiler-switch input:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.sortselect {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--grim-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem 1rem;
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-300);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sortselect:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.sortselect option {
  background-color: var(--grim-800);
  color: var(--zinc-300);
}

/* --------------------------------------------------------- active filters -- */

.activefilters {
  border-top: 1px solid var(--grim-700-50);
  background-color: rgba(0, 0, 0, 0.4);
}

.activefilters__list {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  color: var(--zinc-300);
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  transition: all 0.2s ease;
}

.pill__group {
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 0.25rem;
}

.pill__remove {
  display: flex;
  margin-left: 0.25rem;
  color: inherit;
  transition: color 0.15s ease;
}

.pill__remove:hover { color: var(--danger); }
.pill__remove svg { width: 0.75rem; height: 0.75rem; }

.pill__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.clear-all {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
  text-decoration: underline;
  text-decoration-color: rgba(229, 169, 61, 0.3);
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.clear-all:hover { color: #fff; }

/* ----------------------------------------------------------- filter drawer -- */

.drawer {
  border-top: 1px solid var(--grim-700);
  background-color: rgba(21, 21, 24, 0.95);
  max-height: 60vh;
  overflow-y: auto;
}

.drawer__grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .drawer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .drawer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* One group to a column. Seven groups over a four-wide grid puts the four that
   grow across the top row and the three short ones underneath. */
.drawer__column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.filtergroup__title {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--grim-700);
}

/* On one narrow column every list is as tall as every other, so the cap is what
   keeps the drawer from running past the screen. Beside each other it is the
   stack of short groups that sets the height, and the taller cap below takes
   over. */
.filtergroup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 10rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Format, Event Type and Language stacked run taller than one list capped at
   10rem, so Factions, Channel and Player were scrolling inside a short box with
   dead space under it. This clears the stack and a little more, which leaves
   the long lists — the ones worth scrolling — setting the drawer's height. */
@media (min-width: 768px) {
  .filtergroup__chips { max-height: 16rem; }
}

.chip {
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.125rem;
  text-align: left;
  transition: all 0.2s ease;
}

.chip:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.chip.is-on {
  background-color: var(--accent-20);
  color: var(--accent);
  border-color: var(--accent);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------- main -- */

.archive {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  position: relative;
  z-index: 10;
  min-height: 50vh;
}

.emptystate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  text-align: center;
}

.emptystate__icon {
  width: 4rem;
  height: 4rem;
  color: var(--zinc-700);
  margin-bottom: 1rem;
}

.emptystate__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.emptystate__body {
  color: var(--zinc-500);
  margin-bottom: 1.5rem;
  max-width: 28rem;
}

.btn-reset {
  padding: 0.5rem 1.5rem;
  background-color: var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.125rem;
  transition: background-color 0.15s ease;
}

.btn-reset:hover { background-color: var(--accent-hover); }

.loadmore {
  margin-top: 3rem;
  text-align: center;
}

.btn-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-300);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-loadmore:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-loadmore svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease;
}

.btn-loadmore:hover svg { transform: translateY(0.25rem); }

/* ----------------------------------------------------------------- footer -- */

.sitefooter {
  background-color: var(--grim-800);
  padding: 3rem 0;
  margin-top: 3rem;
  position: relative;
  z-index: 10;
}

.sitefooter__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.sitefooter__about { max-width: 28rem; }

.sitefooter__wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.sitefooter__text {
  color: var(--zinc-500);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Two calls to action, the sign-up leading. They sit on one line where there is
   room for it and stack, still aligned with the footer's text, where there is not. */
.sitefooter__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.btn-submit {
  display: inline-block;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.125rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Four words that break over two lines make a button twice the height of the
     one beside it, so it holds its line and the row wraps around it instead. */
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-submit:hover {
  color: #fff;
  border-color: #fff;
}

.sitefooter__legal {
  color: var(--zinc-600);
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.5rem;
  max-width: 24rem;
}

@media (min-width: 768px) {
  .sitefooter__inner {
    flex-direction: row;
    text-align: left;
  }

  .sitefooter__actions { text-align: right; }
  .sitefooter__cta { justify-content: flex-end; }
  .sitefooter__legal { margin-left: auto; }
}

/* ---------------------------------------------------------- the sign-up call -- */

/* The archive's primary action, and the only filled button on the page: the
   masthead corner and the footer both raise the same dialog with it. */
.btn-signup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--accent);
  color: #000;
  border-radius: 0.125rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(229, 169, 61, 0.15);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-signup:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(229, 169, 61, 0.35);
}

.btn-signup svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.btn-signup:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The form's own submit, which owns the width of the dialog. */
.btn-signup--wide {
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .btn-signup { font-size: 0.875rem; }
}

/* ------------------------------------------------------------------ modal -- */

.signupmodal {
  /* The reset zeroes every margin; a modal dialog centres itself with this one. */
  margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: transparent;
  color: var(--text);
}

.signupmodal::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.signupmodal[open] { animation: signup-rise 0.18s ease-out; }

@keyframes signup-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

/* A fixed bar over a body that scrolls, rather than one scrolling box: the
   pickers make this taller than a short screen, and the close button has to
   stay reachable when it does. */
.signupmodal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  background-color: var(--grim-800);
  /* .panel supplies the recessed plate; the accent edge marks it as the one
     thing on the page asking the reader for something. */
  border-top: 2px solid var(--accent);
  border-radius: 0.125rem;
}

.signupmodal__bar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 0.625rem 0.625rem 0;
}

.signupmodal__body {
  overflow-y: auto;
  padding: 0.5rem 1.75rem 1.75rem;
}

.signupmodal__close {
  display: flex;
  padding: 0.25rem;
  color: var(--zinc-500);
  transition: color 0.15s ease;
}

.signupmodal__close:hover { color: #fff; }
.signupmodal__close svg { width: 1.125rem; height: 1.125rem; }

.signupmodal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- sign-up form -- */

.signup { text-align: center; }

.signup__sigil {
  display: inline-flex;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.signup__sigil svg { width: 2rem; height: 2rem; }
.signup__sigil--done { color: #4ade80; }

.signup__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.signup__blurb {
  color: var(--zinc-400);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}

/* Rails wraps a field that failed validation. The wrapper carries no styling of
   its own here, so it must not become a box in the form's own column either. */
.signup__form .field_with_errors { display: contents; }

.signup__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.signup__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.signup__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.signup__input::placeholder { color: var(--zinc-600); }

.signup__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.signup__error {
  background-color: rgba(153, 27, 27, 0.15);
  border: 1px solid var(--danger);
  border-radius: 0.125rem;
  padding: 0.5rem 0.75rem;
  color: #fca5a5;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

/* ------------------------------------------------------------- the pickers -- */

.pickgroup {
  padding: 0;
  min-width: 0;
}

.pickgroup__title {
  display: block;
  padding: 0;
  width: 100%;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--grim-700);
}

.pickgroup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* The label is the control: the box itself keeps its place in the tab order and
   its keyboard behaviour, and gives up every pixel of its own appearance. */
.pickchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  border-radius: 0.125rem;
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.3125rem 0.5rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.pickchip input {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  flex: none;
  opacity: 0;
}

.pickchip:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.pickchip:has(input:checked) {
  background-color: var(--accent-20);
  border-color: var(--accent);
  color: var(--accent);
}

.pickchip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "Everything" is a claim about the whole group, so it reads as a lead rather
   than as one more army in the list. */
.pickchip--all {
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pickchip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex: none;
}

.signup__note {
  color: var(--zinc-600);
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
}

/* The honeypot: present for anything that reads the markup, reachable by nobody. */
.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup--done .btn-signup--wide { margin-top: 0.5rem; }

/* The two standing pages, in the footer of every page that has one. */
.sitefooter__links {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--zinc-600);
}

.sitefooter__links a {
  color: var(--zinc-400);
  transition: color 0.15s ease;
}

.sitefooter__links a:hover { color: var(--accent); }

/* The digest moved inside <main class="archive">, which already carries the
   shell width and the gutter, so it stops applying both a second time. The rule
   it keeps is the one that makes it read as an endnote: a line above it, and
   air between it and the last row of cards. */
.archive > .digest {
  max-width: none;
  margin-top: 2.5rem;
  padding: 2rem 0 0;
}

/* ---------------------------------------------------------- event list -- */

/* The tournaments hub, grouped by year. A couple of GTs run every weekend, so
   this page is in the hundreds within a year or two: the year headings are what
   keep it navigable, and the jump strip is what keeps it navigable on a phone
   without scrolling past all of them. */
.yearjump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.yearjump a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-300);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-decoration: none;
}

.yearjump a:hover { border-color: var(--accent); color: var(--accent); }
.yearjump__count { color: var(--zinc-600); font-size: 0.6875rem; }

.eventyear { margin-top: 2.5rem; }

.eventyear__heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--grim-700);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: #fff;
}

.eventyear__count {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--zinc-600);
}

.eventlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.eventlist__item { padding-top: 1.5rem; }

.eventlist__name {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eventlist__name a {
  color: #fff;
  text-decoration: none;
}

.eventlist__name a:hover { color: var(--accent); }

.eventlist__facts {
  margin-top: 0.3125rem;
  color: var(--zinc-500);
  font-size: 0.8125rem;
}

.eventlist__sep { margin: 0 0.5rem; }

.eventlist__note {
  margin-top: 0.5rem;
  max-width: 44rem;
  color: var(--zinc-400);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* The tail of a capped facet, pointing at the page that carries all of it. */
.chip--more {
  border-style: dashed;
  color: var(--zinc-500);
}