:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  color: #111;
  background: #fff;
}

main, header, footer, nav {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

main { padding-block: 1rem 2rem; }

h1 { font-size: clamp(1.5rem, 1.2rem + 2vw, 2.25rem); line-height: 1.3; }
h2 { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.5rem); line-height: 1.3; }

img { max-width: 100%; height: auto; }

a:focus-visible, .table-scroll:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -10000px;
  z-index: 10;
  padding: .75rem 1rem;
  color: #fff;
  background: #111;
}
.skip-link:focus { inset-inline-start: 0; }

.site-nav { padding-block: .5rem; }
.site-nav p { margin: 0; line-height: 2; }

.table-scroll {
  max-width: 100%;
  margin-block: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.table-instructions { margin-block-end: .5rem; }
.new-singers-scroll {
  max-height: min(70dvh, 40rem);
  overflow: auto;
  border-block: 1px solid #777;
}
.new-singers-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  background: #f2f2f2;
  box-shadow: 0 1px 0 #777;
}

table {
  margin-inline: auto;
  border-collapse: collapse;
  border: 1px solid #555;
}
table.left, table.tight, table.littletight { margin-inline-start: 0; }
table.full, table.spfull { width: 100%; }
table.wide, table.nowrap { white-space: nowrap; }
th, td { border: 1px solid #555; padding: .4rem .55rem; }
th { background: #f2f2f2; }

.center, td.center, th.center { text-align: center; }
.right, td.right, th.right { text-align: right; }
.nowrap, td.nowrap { white-space: nowrap; }
.vcenter, td.vcenter { vertical-align: middle; }
.year, td.year, th.year { text-align: center; background: #fff4b8; }
.white, td.white { background: #dff7ff; }
.red, td.red { background: #ffd6dc; }
.lightgray, td.lightgray { background: #e5e5e5; }
.team-red { color: #a3152a; }
.team-white { color: #174a8b; }
.team-badge {
  display: none;
  margin-inline-end: .25em;
  padding-inline: .25em;
  border: 1px solid currentColor;
  border-radius: .2em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1.4;
}
td .team-badge, th .team-badge { display: inline-block; }
.text-small { font-size: .75rem; }
.text-large { font-size: 1.2em; }

table.no-border, table.no-border tr, table.no-border th, table.no-border td {
  border: 0;
}
.nested-table-cell { padding: 0; }
.nested-table-cell > table.no-border {
  width: 100%;
  margin: 0;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
.nested-table-cell > table.no-border th,
.nested-table-cell > table.no-border td {
  padding: .4rem .55rem;
  border: 0;
}
.nested-table-cell > table.no-border tr + tr > th,
.nested-table-cell > table.no-border tr + tr > td {
  border-block-start: 1px solid #777;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 37.5rem) {
  main, header, footer, nav { width: min(100% - 1rem, 72rem); }
  th, td { padding: .35rem .4rem; }
}