:root {
  color-scheme: dark;
  --background: #292b24;
  --text: #f0f0e5;
  --muted: #c1c3b4;
  --green: #c1e878;
  font-family: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  padding: 48px 28px;
  background: linear-gradient(180deg, #505245, var(--background));
  color: var(--text);
}
a { color: var(--green); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
::selection { background: var(--green); color: var(--background); }
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  padding: 14px;
  background: var(--green);
  color: var(--background);
  z-index: 2;
}
.skip-link:focus { top: 12px; }

.page-shell {
  max-width: 960px;
  margin: 0 auto;
  background: #33362c;
  border: 1px solid #60624f;
  box-shadow: 0 24px 70px #11150d38;
}
.masthead {
  padding: 0 38px;
  border-bottom: 2px solid #a5bd68;
  background: #2c3029;
}
.wordmark {
  display: block;
  width: min(100%, 650px);
  height: auto;
  margin: 0 auto;
  mix-blend-mode: lighten;
}
main {
  padding: 42px 48px 48px;
  text-align: center;
  background: linear-gradient(115deg, #383b30, #2e3128);
}
h1 {
  margin: 0 0 18px;
  font-family: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 600;
  line-height: 1.15;
}
.announcement h2 {
  margin: 0 0 25px;
  color: var(--green);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.intro { max-width: 550px; margin: 0 auto; }
.intro p {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--muted);
}
.intro p:first-child { color: var(--text); font-size: 1.1875rem; font-weight: 500; }
.intro p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  body { padding: 24px 16px; }
  .masthead { padding: 0 10px; }
  main { padding: 30px 26px 35px; }
  h1 { font-size: clamp(1.875rem, 8.1vw, 3rem); }
  .announcement h2 { margin-bottom: 20px; font-size: 1rem; }
  .intro p { font-size: 1rem; }
  .intro p:first-child { font-size: 1.0625rem; }
  }

@media (max-width: 380px) {
  body { padding: 18px 10px; }
  .masthead { padding: 0 8px; }
  main { padding: 26px 20px 30px; }
  h1 { font-size: 8.1vw; }
}
