@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
  Color works in three shares. Neutrals carry about 60% of the page, because
  reading happens as dark text on a light surface. Royal violet carries about 30%.
  Gold is the 10% accent, kept for the crown and the one thing to press, and it
  sits opposite violet on the color wheel. The flag colors are decoration only and
  never hold body text. tests/colors.test.js checks every pair below.
*/
:root {
  --surface: #ffffff;
  --line: #e3e0e9;
  --field-line: #7d7689;
  --ink: #1b1326;
  --ink-soft: #595266;
  --link: #5a1fb0;
  --error: #b3261e;

  --royal: #2a0a52;
  --on-royal: #ffffff;
  --on-royal-soft: #d8cfe8;

  --gold: #ffc81e;
  --gold-hover: #ffd95e;

  --flag-red: #e40303;
  --flag-orange: #ff8c00;
  --flag-yellow: #ffed00;
  --flag-green: #008026;
  --flag-blue: #004cff;
  --flag-violet: #750787;

  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --radius: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --column: 760px;
  --bar-height: 48px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  background: var(--surface);
  scroll-padding-bottom: calc(var(--bar-height) + 16px);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  margin: 0;
  padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
}

.throne :focus-visible,
.page-head :focus-visible,
.bar :focus-visible {
  outline-color: var(--on-royal);
}

.take :focus-visible {
  outline-color: var(--royal);
}

[hidden] {
  display: none !important;
}

/* Wordmark, the same on every page. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  display: block;
}

.masthead {
  width: 100%;
  max-width: 1200px;
  padding-block: 12px;
  text-align: left;
}

/* First screen: the champion, then the way to replace them. */
.throne {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter) 48px;
  background: var(--royal);
  color: var(--on-royal);
  text-align: center;
}

.throne.full {
  justify-content: center;
  min-height: calc(100svh - var(--bar-height) - 36px);
}

.throne.full .masthead {
  margin-bottom: auto;
}

.throne.full .after {
  margin-bottom: auto;
}

.crown {
  display: block;
  width: clamp(92px, 15vh, 132px);
  height: auto;
  margin-top: clamp(0px, 1.5vh, 16px);
  transform-origin: 50% 85%;
  animation: hover 4s ease-in-out infinite;
}

@keyframes hover {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

h1 {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  font-weight: inherit;
}

/* A fixed height, so the form below stays put while someone types a name. */
.name-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(168px, 23vh, 200px);
}

.top-name {
  display: block;
  max-width: 100%;
  font-size: 96px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.title-line {
  display: block;
  margin-top: 8px;
  font-size: clamp(var(--text-lg), 2.4vw, 1.75rem);
  line-height: 1.25;
}

.reign {
  min-height: 27px;
  margin: 8px 0 0;
  color: var(--on-royal-soft);
  font-size: var(--text-md);
  text-wrap: balance;
}

.reign img {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -3px;
}

/* The one task on the page gets its own white surface. */
.take {
  width: min(100%, var(--column));
  margin-top: 32px;
  padding: 24px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.take h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
}

.take-intro {
  max-width: 34rem;
  margin: 4px 0 16px;
  color: var(--ink-soft);
}

.fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.field input,
.field select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
}

.field select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%231b1326'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
}

.field [aria-invalid='true'] {
  border-color: var(--error);
  outline: 1px solid var(--error);
}

.pay,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.pay:hover,
.button:hover {
  background: var(--gold-hover);
}

.pay:disabled {
  background: var(--line);
  cursor: progress;
}

.form-error {
  margin: 12px 0 0;
  color: var(--error);
  font-weight: 600;
}

.form-error:empty {
  display: none;
}

.fine {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.fine a {
  color: var(--link);
}

.after {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.button.quiet {
  border: 1px solid var(--on-royal);
  background: transparent;
  color: var(--on-royal);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.button.quiet:hover {
  background: var(--on-royal);
  color: var(--royal);
}

/* The flag stays, as a stripe rather than the whole page. */
.flag {
  display: grid;
  grid-template-rows: repeat(6, 6px);
}

.flag i:nth-child(1) { background: var(--flag-red); }
.flag i:nth-child(2) { background: var(--flag-orange); }
.flag i:nth-child(3) { background: var(--flag-yellow); }
.flag i:nth-child(4) { background: var(--flag-green); }
.flag i:nth-child(5) { background: var(--flag-blue); }
.flag i:nth-child(6) { background: var(--flag-violet); }

/* The list */
.list {
  padding: 48px var(--gutter) 64px;
}

.list-inner {
  max-width: var(--column);
  margin-inline: auto;
}

.list h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.list-intro {
  margin: 4px 0 16px;
  color: var(--ink-soft);
  font-size: var(--text-md);
}

.names {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.rank {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.entry:nth-child(6n + 1) .rank { background: var(--flag-orange); color: var(--ink); }
.entry:nth-child(6n + 2) .rank { background: var(--flag-yellow); color: var(--ink); }
.entry:nth-child(6n + 3) .rank { background: var(--flag-green); color: var(--on-royal); }
.entry:nth-child(6n + 4) .rank { background: var(--flag-blue); color: var(--on-royal); }
.entry:nth-child(6n + 5) .rank { background: var(--flag-violet); color: var(--on-royal); }
.entry:nth-child(6n + 6) .rank { background: var(--flag-red); color: var(--on-royal); }

.who {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.where {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  text-align: right;
}

.where img {
  display: block;
  flex: none;
  outline: 1px solid var(--line);
}

/* Always on screen: the credit, the links, and a way back to the form. */
.bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 20px;
  min-height: var(--bar-height);
  padding: 0 var(--gutter) env(safe-area-inset-bottom);
  background: var(--ink);
  color: var(--on-royal);
}

.bar a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: inherit;
}

.bar a:hover {
  color: var(--gold);
}

.bar a.bar-cta {
  display: none;
  min-height: 36px;
  margin-right: auto;
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}

.bar a.bar-cta:hover {
  background: var(--gold-hover);
  color: var(--ink);
}

.past-form .bar a.bar-cta {
  display: inline-flex;
}

/* Rules and privacy */
.page-head {
  padding: 2px var(--gutter);
  background: var(--royal);
  color: var(--on-royal);
}

.page-head .brand {
  min-height: 52px;
}

/* In rem, not ch: ch measures this font's wide zero and ran lines past 90 characters. */
.prose {
  max-width: 35rem;
  margin-inline: auto;
  padding: 40px var(--gutter) 64px;
  box-sizing: content-box;
  font-size: var(--text-md);
  line-height: 1.6;
}

.prose a {
  color: var(--link);
}

.prose h1 {
  max-width: none;
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.prose h2 {
  margin: 40px 0 8px;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
}

.prose p,
.prose ul {
  margin: 0 0 16px;
}

.prose ul {
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 8px;
}

.updated {
  margin-top: 40px !important;
  color: var(--ink-soft);
  font-size: var(--text-base);
}

@media (max-width: 760px) {
  /* Tighter above the form, so the pay button is on a phone's first screen. */
  .masthead {
    padding-block: 4px;
  }

  .crown {
    width: 80px;
    margin-top: 4px;
  }

  .name-box {
    height: 148px;
  }

  .reign {
    margin-top: 4px;
  }

  .throne {
    padding-bottom: 24px;
  }

  .take {
    margin-top: 16px;
    padding: 16px;
  }

  .take-intro {
    margin-bottom: 12px;
  }

  .fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .pay {
    width: 100%;
  }

  .entry {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 2px 12px;
  }

  .rank {
    grid-row: span 2;
  }

  .where {
    grid-column: 2;
    text-align: left;
  }

  .bar {
    justify-content: space-between;
  }

  .bar a.bar-cta {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
  }

  body.past-form {
    padding-bottom: calc(var(--bar-height) * 2 + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .crown {
    animation: none;
    transform: rotate(-6deg);
  }

  .pay,
  .button,
  .button.quiet,
  .bar a.bar-cta {
    transition: none;
  }
}