@import url('https://fonts.googleapis.com/css2?family=Tomorrow:wght@800&display=swap');

:root {
  color-scheme: light;
  color: #252b19;
  background: #193b3e;
  font-family: 'Tomorrow', 'Arial Black', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.wrap { width: min(1120px, 90%); margin-inline: auto; }
header { background: #f9efd9; }
.bar { padding-block: 1rem; }
.brand { display: inline-block; }
.brand img { display: block; width: clamp(145px, 19vw, 200px); height: auto; }

.roster-panel {
  padding-block: clamp(3rem, 8vw, 7rem);
  border-top: 6px solid #cb541f;
  color: #fff0ce;
}

h1, h2 { font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: .95; }
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

article {
  display: grid;
  align-items: end;
  min-height: 12rem;
  padding: 1.5rem;
  border-top: 8px double currentColor;
  border-radius: 2.5rem 2.5rem 0 0;
  color: #252b19;
  background: #f9efd9;
}
article:nth-child(2) { background: #edaf50; }
article:nth-child(3) { background: #e17a45; }
h2 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1; }
h2 a { text-decoration-thickness: .07em; text-underline-offset: .15em; }