@font-face {
  font-family: Jost;
  src: url("assets/jost-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { color-scheme: dark; font-family: Jost, sans-serif; color: #f8f8ff; background: #000817; }
* { box-sizing: border-box; }
body { margin: 0; }
.background { position: fixed; inset: 0; z-index: -2; }
.background img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 max(20px, env(safe-area-inset-right)) max(5svh, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.announcement { margin-top: 24svh; position: relative; }
.announcement::before { content: ""; position: absolute; inset: -35px -70px; z-index: -1; background: #000817; opacity: .88; filter: blur(32px); border-radius: 45%; }
.logo { position: relative; aspect-ratio: 625 / 115; display: block; width: min(60vw, 780px); height: auto; margin: 0 auto; }
.logo > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: auto; }
h1 { margin: 1.4rem 0 0; font-size: clamp(1.25rem, 2.65vw, 2.4rem); line-height: 1.55; font-weight: 400; letter-spacing: .28em; }
h1 span { display: block; }
.intro { font-size: clamp(1.125rem, 2.25vw, 1.875rem); line-height: 1.35; margin: 1.25rem 0 0; }
footer { margin-top: auto; padding-top: 2rem; text-shadow: 0 2px 12px #000, 0 0 20px #000; }
.address { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.2vw, 1.875rem); letter-spacing: .1em; }
.socials { display: flex; gap: 10px; align-items: center; justify-content: center; }
.social { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; border-radius: 6px; }
.social svg { width: 31px; height: 31px; filter: drop-shadow(0 0 8px #001944); }
a.social:hover { background: #ffffff20; }
a.social:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (max-aspect-ratio: 3/4) {
  .page { padding-bottom: max(7svh, env(safe-area-inset-bottom)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .announcement { margin-top: 27svh; width: 100%; }
  .announcement::before { inset: -16px -5px -30px; filter: blur(22px); }
  .logo { width: min(100%, 500px); }
  h1 { font-size: clamp(1rem, 5.35vw, 1.75rem); letter-spacing: .115em; margin-top: 1.1rem; line-height: 1.65; }
  .intro { font-size: clamp(1rem, 4.9vw, 1.5rem); margin-top: 1.55rem; line-height: 1.4; }
  .address { font-size: 1.45rem; }
}
@media (max-height: 550px) and (min-aspect-ratio: 3/4) {
  .announcement { margin-top: 8svh; }
  .logo { width: min(45vw, 420px); }
  h1 { font-size: 1.1rem; margin-top: .5rem; }
  .intro { font-size: 1rem; margin-top: .5rem; }
  footer { padding-top: 1rem; }
  .address { font-size: 1.1rem; margin: 0; }
}