/* Chiark landing — one screen, no scroll on desktop. */

:root {
  --cream: #F4EEE2;
  --ink: #1B2422;
  --muted: #585F58;      /* 6:1 on cream */
  --accent: #B4452D;     /* button bg + headline italic; 5:1 with --on-accent */
  --on-accent: #FFF7EE;
  --teal: #163C3B;       /* orbital panel */
  --panel-text: #D9CFB9;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --s: 1;                /* orbit scale, set by landing.js */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }

.page { display: flex; height: 100svh; min-height: 560px; overflow: hidden; }

/* ---------- left: text ---------- */
.main {
  flex: 0 0 60%;
  min-width: 0;
  padding: clamp(28px, 5.8vh, 52px) clamp(24px, 5.6vw, 80px) clamp(28px, 5.3vh, 48px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.wordmark { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
.hero { display: flex; flex-direction: column; gap: 30px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0; font-weight: 400; font-size: clamp(44px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -0.025em; }
h1 em { color: var(--accent); }

.cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 6px; }
.enter {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; text-decoration: none;
  transition: transform 200ms ease, filter 200ms ease;
}
.enter:hover { transform: translateY(-1px); filter: brightness(1.06); }
.enter:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 13px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }

.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.designation { display: flex; flex-direction: column; gap: 8px; }
.designation .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.designation .name { font-size: 26px; font-style: italic; transition: opacity 600ms ease; }
.designation .name.out { opacity: 0; }
.designation { min-width: 0; }
.designation .name { overflow-wrap: anywhere; }

/* ---------- right: the orbital ---------- */
.orbital { position: relative; flex: 1 1 auto; background: var(--teal); color: var(--panel-text); overflow: hidden; }
.status {
  position: absolute; top: clamp(24px, 6.7vh, 60px); right: clamp(20px, 3.9vw, 56px);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
}
.live { width: 8px; height: 8px; border-radius: 50%; background: #9CC9A6; animation: blink 2.8s ease-in-out infinite; }

.system {
  position: absolute; left: 50%; top: 50%; width: 520px; height: 520px;
  transform: translate(-50%, -50%) rotate(-14deg) scale(var(--s));
}
.system svg { position: absolute; inset: 0; }
.hub { position: absolute; left: 251px; top: 251px; width: 18px; height: 18px; border-radius: 50%; background: #EDB44A; }
.hubring { position: absolute; left: 253px; top: 253px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #EDB44A; animation: hub 4s ease-out infinite; }

/* bodies travel along the ring ellipses via offset-path */
.b {
  position: absolute; top: 0; left: 0;
  width: var(--d); height: var(--d); border-radius: 50%; background: var(--c);
  offset-rotate: 0deg;
  animation: orbit var(--t) linear infinite; animation-delay: var(--o);
}
.r1 { offset-path: path('M 28 260 A 232 86 0 1 1 492 260 A 232 86 0 1 1 28 260'); }
.r2 { offset-path: path('M 104 260 A 156 58 0 1 1 416 260 A 156 58 0 1 1 104 260'); }
.key { animation: orbit var(--t) linear infinite, halo 2.6s ease-out infinite; animation-delay: var(--o), 0s; }

.legend {
  position: absolute; left: clamp(20px, 3.9vw, 56px); bottom: clamp(24px, 5.8vh, 52px);
  display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px;
}
.legend span { display: flex; align-items: center; gap: 10px; }
.legend i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); }

@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes halo  { 0% { box-shadow: 0 0 0 0 rgba(240,122,90,.6); } 100% { box-shadow: 0 0 0 20px rgba(240,122,90,0); } }
@keyframes hub   { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.motion-paused .b, .motion-paused .key,
.motion-paused .hubring, .motion-paused .live { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .b, .key { animation-play-state: paused; } /* frozen at their spread-out start positions */
  .key { box-shadow: 0 0 0 6px rgba(240,122,90,.25); }
  .hubring, .live { animation: none; }
  .enter, .designation .name { transition: none; }
  .enter:hover { transform: none; }
}

/* ---------- tablet / phone: orbital becomes a band on top ---------- */
@media (max-width: 900px) {
  .page { flex-direction: column-reverse; height: auto; min-height: 100svh; overflow: visible; }
  .orbital { flex: 0 0 auto; height: 42svh; min-height: 280px; }
  .main { flex: 1 1 auto; gap: 40px; }
  .legend { gap: 18px; }
}