@font-face {
  font-family: Michroma;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Michroma-Regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Michroma Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 141%;
  ascent-override: 82%;
  descent-override: 18.8%;
  line-gap-override: 0%;
}
:root {
  --bg: #221F26;
  --text: #AEB4C0;
  --text-strong: #FFFFFF;
  --accent: #D7301F;
  --text-legal: #9399A6;
  --font-tagline: Michroma, "Michroma Fallback", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-message: 0.875rem; /* 14px on phones */
  --lh-message: 1.5;
  --fw-message: 400;
  --ls-message: 0.02em;
  --fs-legal: 0.6875rem; /* 11px; 12px from 768px */
  --lh-legal: 1.7;
  --icon-size: 24px;
  --icon-target: 44px;
  --icon-gap: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --logo-w: min(calc(100vw - 48px), 340px);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (max-width: 340px) {
  :root { --fs-message: 0.8125rem; } /* 13px */
}
@media (min-width: 768px) {
  :root {
    --logo-w: min(440px, 58dvh);
    --fs-message: 1rem; /* 16px */
    --fs-legal: 0.75rem; /* 12px */
  }
}
@media (min-width: 1280px) {
  :root {
    --logo-w: min(520px, 58dvh);
    --fs-message: 1.125rem; /* 18px */
  }
}
/* Short landscape. Last rule so it wins at every width. */
@media (max-height: 520px) {
  :root { --logo-w: min(210px, 40dvh); }
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh; /* fallback where dvh is unsupported */
  min-height: 100dvh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding:
    max(var(--sp-4), env(safe-area-inset-top))
    max(var(--sp-4), env(safe-area-inset-right))
    max(var(--sp-3), env(safe-area-inset-bottom))
    max(var(--sp-4), env(safe-area-inset-left));
  font-family: var(--font);
  color: var(--text);
  text-align: center;
}
#dust {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
}
main, footer { position: relative; z-index: 1; }
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
}
h1 { font-size: 0; line-height: 0; } /* the heading holds only the lockup */
.logo {
  display: block;
  width: var(--logo-w);
  aspect-ratio: 870 / 560;
  height: auto;
}
.message {
  font-family: var(--font-tagline);
  font-size: var(--fs-message);
  line-height: var(--lh-message);
  font-weight: var(--fw-message);
  letter-spacing: var(--ls-message);
  max-width: 32ch;
  text-wrap: balance;
  text-rendering: geometricPrecision; /* ideal advances, so the measured line breaks hold */
}
.social {
  display: flex;
  justify-content: center;
  gap: var(--icon-gap);
}
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-target);
  height: var(--icon-target);
  color: var(--text);
  border-radius: 4px;
}
.icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}
.icon:visited { color: var(--text); }
.icon:hover { color: var(--text-strong); }
.icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.legal {
  flex: none;
  width: 100%;
  max-width: none;
  margin: var(--sp-4) auto 0;
  font-family: var(--font-tagline);
  font-size: var(--fs-legal);
  font-weight: 400;
  line-height: var(--lh-legal);
  letter-spacing: 0;
  color: var(--text-legal);
  text-align: center;
  text-wrap: pretty;
  text-rendering: geometricPrecision;
}
.legal p + p { margin-top: var(--sp-1); }
@media (min-width: 768px) {
  /* 59em = 62ch of Michroma at this size. em, not ch, so the fallback is the same width. */
  .legal { max-width: 59em; }
}
@media (max-height: 520px) {
  .legal { margin-top: var(--sp-3); }
}
.dust-toggle {
  position: fixed;
  z-index: 2;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-legal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dust-toggle svg { width: 16px; height: 16px; display: block; }
.dust-toggle .i-play { display: none; }
.dust-toggle[data-state="paused"] .i-play { display: block; }
.dust-toggle[data-state="paused"] .i-pause { display: none; }
.dust-toggle:hover { color: var(--text-strong); }
.dust-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dust-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dust-toggle { display: none; }
}