/**
 * Aria Trove · brand stylesheet for the static marketing pages.
 *
 * Mirrors the @font-face block + .at-logo styles in the Next-side
 * app/globals.css so public/*.html surfaces and the React app share
 * the same brand surface.
 *
 * Self-host fonts so first-paint has zero third-party requests
 * (cleaner GDPR posture and one less round-trip).
 */

@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-300.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";    src: url("/fonts/Inter-400.ttf") format("truetype");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";    src: url("/fonts/Inter-500.ttf") format("truetype");    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";    src: url("/fonts/Inter-600.ttf") format("truetype");    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

/* Logo lockup — matches components/brand/Logo.tsx */
.at-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.at-logo__mark {
  flex: 0 0 auto;
  display: block;
}
.at-logo__word {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.at-logo__word em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-2, #3D6987);
}
[data-theme="dark"] .at-logo__word em { color: var(--accent, #A8C8DC); }

.at-logo--sm .at-logo__mark { width: 24px; height: 24px; }
.at-logo--sm .at-logo__word { font-size: 18px; }
.at-logo--md .at-logo__mark { width: 32px; height: 32px; }
.at-logo--md .at-logo__word { font-size: 22px; }
.at-logo--lg .at-logo__mark { width: 48px; height: 48px; }
.at-logo--lg .at-logo__word { font-size: 36px; }
.at-logo--xl .at-logo__mark { width: 72px; height: 72px; }
.at-logo--xl .at-logo__word { font-size: 56px; }

.at-logo--mono { color: currentColor; }
.at-logo--mono .at-logo__word em { color: currentColor; }