@font-face {
  font-family: Roboto;
  src: url("roboto-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("roboto-slab-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --green: #a9c23f;
  --white: #ffffff;
  --secondary: #c8c8c8;
  --line: #30352a;
  background: #000000;
  color: var(--white);
  font-family: Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
::selection { color: #000000; background: var(--green); }
main { flex: 1; display: grid; place-items: center; padding: 64px 24px 56px; }
.welcome { width: 100%; max-width: 800px; text-align: center; }
.program-logo { display: block; width: min(100%, 640px); height: auto; margin: 0 auto 22px; }
h1 { margin: 0; font: 600 clamp(2rem, 6vw, 3.5rem)/1.2 "Roboto Slab", serif; letter-spacing: -0.03em; }
h1 span { color: var(--green); }
p { margin: 0; }
.purpose { margin-top: 24px; font-size: clamp(1.1rem, 3vw, 1.4rem); line-height: 1.5; }
.location { margin-top: 8px; color: var(--secondary); font-size: 1rem; line-height: 1.6; }
.status { margin-top: 20px; color: var(--green); font: 600 clamp(1.65rem, 4.5vw, 2.25rem)/1.35 "Roboto Slab", serif; text-wrap: balance; }
.intro { margin: 12px auto 0; max-width: 48ch; color: var(--secondary); font-size: 1rem; line-height: 1.75; text-wrap: pretty; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--white); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 2px; }
.location a { color: inherit; text-decoration: none; }
.location a:hover, .location a:focus-visible { color: var(--green); text-decoration: none; }
.official-link { display: inline-block; max-width: 100%; margin-top: 22px; padding: 12px 0; font-size: 0.95rem; line-height: 1.6; }
footer { border-top: 1px solid var(--line); padding: 28px 24px 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.footer-content { max-width: 960px; margin: 0 auto; text-align: center; }
footer p { color: var(--secondary); font-size: 0.875rem; line-height: 1.75; }
footer p:not(.copyright) { color: #a0a0a0; font-size: 0.75rem; }
footer p:not(.copyright) a { color: inherit; }
footer p + p { margin-top: 12px; }
footer .copyright { color: var(--white); }

@media (max-width: 480px) {
  main { padding: 44px 20px 36px; }
  .program-logo { margin-bottom: 24px; }
  .purpose { margin-top: 20px; }
  .status { margin-top: 18px; }
  .desktop-break { display: none; }
  footer { padding-right: 20px; padding-left: 20px; }
}