/* The holding page. Values are the design system's tokens (design-system/tokens), copied rather than
   imported so the page carries no dependency on the repository layout. Navy ground, so the mark sits
   directly on it with the wordmark inverted and no plate. */
:root {
  --ground: #011934;          /* --eps-plate-navy */
  --ink-inverse: #FFFFFF;     /* --eps-ink-inverse */
  --subline: #B2B5BE;         /* --eps-neutral-300, GROUP on dark grounds */
  --body: #CFD2DA;            /* --eps-neutral-200 */
  --muted: #8B909C;           /* --eps-neutral-400 */
  --link: #53B9F6;            /* --eps-blue-300 */
  --focus: #3099E4;           /* --eps-blue-400 */
  --wordmark-font: 'Michroma', 'Onest', sans-serif;
  --font: 'Onest', system-ui, sans-serif;

  /* Primary lockup at a 104px mark (Logo size "xl"): wordmark round(104 * 0.34) = 35, snapped to the
     flush size 33; GROUP round(33 * 0.42) = 14; gaps round(104 * 0.24) and round(33 * 0.28). */
  --mark: 104px;
  --word: 33px;
  --sub: 14px;
  --gap-mark: 25px;
  --gap-word: 9px;
}

/* Under 480px the lockup steps down to an 80px mark: wordmark round(80 * 0.34) = 27 (flush), GROUP 11. */
@media (max-width: 480px) {
  :root { --mark: 80px; --word: 27px; --sub: 11px; --gap-mark: 19px; --gap-word: 8px; }
}

* { box-sizing: border-box; margin: 0; }

html { background: var(--ground); color-scheme: dark; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--body);
  font: 400 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
}

a.lockup { text-decoration: none; }
.lockup { display: inline-flex; align-items: center; gap: var(--gap-mark); font-weight: 400; }
.lockup img { display: block; width: var(--mark); height: var(--mark); }
.lockup .type { display: flex; flex-direction: column; gap: var(--gap-word); }
.wordmark, .subline { font-family: var(--wordmark-font); font-weight: 400; line-height: 1; }
.wordmark { font-size: var(--word); letter-spacing: 0.04em; color: var(--ink-inverse); }
.subline { font-size: var(--sub); letter-spacing: 0.24em; color: var(--subline); }

.copy { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.lead { font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--ink-inverse); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

footer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 32px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 480px) {
  main { padding: 48px 16px; gap: 32px; }
  footer { padding: 0 16px 24px; }
  .lead { font-size: 18px; }
}