@font-face {font-family: "Anutaksha Orbit";
  src: url("assets/fonts/AnutakshaOrbit-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f2f3f4;
  --ink: #222222;
  --muted: #5c6065;
  --line: #d2d5d8;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { position: relative; overflow: hidden; min-height: 100svh; }
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 1800px;
  margin: auto;
  padding: 36px clamp(24px, 5.5vw, 100px) 26px;
}

.masthead, footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.masthead { font-size: 14px; font-weight: 500; }
.identity { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; flex: 1; min-height: 390px; padding: 80px 0; }
.logo { display: block; width: min(100%, 1120px); height: auto; }
.tagline { font-family: "Anutaksha Orbit", "Avenir Next", sans-serif; text-align: center; letter-spacing: .04em; }
.announcement { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 34px 0 52px; border-top: 1px solid var(--line); }
h1 { margin: 0; font-family: "Anutaksha Orbit", "Avenir Next", sans-serif; font-size: clamp(38px, 4.6vw, 72px); font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
h1 span { color: #878c91; }
p { margin: 0; color: var(--muted); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.8; }
footer { color: var(--muted); font-size: 11px; line-height: 1.6; }

.orbit-field { position: absolute; inset: 0; pointer-events: none; }
.orbit { position: absolute; left: 50%; top: 35%; width: 1600px; height: 620px; border: 1px solid #22222209; border-radius: 50%; transform: translate(-50%, -50%) rotate(-8deg); }
.orbit-two { width: 1960px; height: 960px; }
.orbit-three { width: 2300px; height: 1320px; }
.satellite { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #aeb4bb; box-shadow: 0 0 0 4px #b6bbc10d; offset-path: ellipse(50% 50% at 50% 50%); offset-distance: 14%; }
.orbit-two .satellite { offset-distance: 58%; width: 4px; height: 4px; opacity: .7; }
.orbit-three .satellite { offset-distance: 82%; width: 5px; height: 5px; opacity: .5; }

@media (max-width: 640px) {
  .page { padding-top: 26px; padding-bottom: 22px; }
  .identity { min-height: min(320px, 45svh); padding: clamp(32px, 8svh, 72px) 0; }
  .logo { width: 100%; }
  .announcement { align-items: flex-start; flex-direction: column; gap: 22px; padding: 30px 0 48px; }
  h1 { font-size: clamp(27px, 8.6vw, 48px); }
  p { font-size: 14px; }
  footer { align-items: flex-start; font-size: 10px; gap: 16px; }
  .orbit { width: 900px; height: 430px; top: 30%; }
  .orbit-two { width: 1200px; height: 740px; }
  .orbit-three { width: 1500px; height: 1050px; }
  .satellite { width: 4px; height: 4px; }
}

@media (min-width: 641px) and (max-height: 600px) {
  .page { padding-top: 20px; padding-bottom: 20px; }
  .identity { min-height: 0; gap: 12px; padding: 24px 0; }
  .logo { width: min(62%, 680px); }
  .announcement { padding: 20px 0 24px; gap: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .identity { animation: arrive 900ms ease-out both; }
  .satellite { animation: orbit-drift 100s linear infinite; animation-delay: -14s; }
  .orbit-two .satellite { animation-duration: 140s; animation-delay: -81.2s; animation-direction: reverse; }
  .orbit-three .satellite { animation-duration: 180s; animation-delay: -147.6s; }
  @keyframes orbit-drift { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
}