/*
  Shared by every page: the fonts, the colour tokens, and the site header
  (crest, nav, Log in). Page-specific styles stay inline in each page.
  Rules come from DESIGN.md in the app repo: warm black, ivory, one gold
  element per page. The header never holds the gold; Log in is an ivory outline.
*/
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/Barlow-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/Figtree-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --bg: #0B0A08;
  --surface: #15130F;
  --raised: #1D1A14;
  --hairline: #2A2620;
  --ivory: #F5F2EA;
  --soft: #CFCABD;
  --muted: #8F8A7B;
  --ink-muted: #5E594D;
  --gold: #C9A24B;
  --gold-bright: #E3C060;
  --error: #E05252;
  --display: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); color: var(--ivory);
  border-bottom: 1px solid var(--hairline);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
.site-header .bar {
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  height: 64px; display: flex; align-items: center; gap: 24px;
}
@media (min-width: 720px) { .site-header .bar { padding: 0 32px; } }
.site-header a { color: inherit; text-decoration: none; }
.site-header a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 4px; }
.site-header .brand {
  display: flex; align-items: center; gap: 12px; margin: 0 auto 0 0; padding: 0;
  font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ivory);
}
.site-header .brand img { width: 22px; height: auto; display: block; }
.site-header .brand span { font: 700 16px/1 var(--display); letter-spacing: .16em; }
.site-header nav { display: none; gap: 28px; }
@media (min-width: 860px) { .site-header nav { display: flex; } }
.site-header nav a {
  font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.site-header nav a:hover { color: var(--ivory); }
.site-header .login {
  font: 600 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 16px; border: 1px solid var(--ivory); border-radius: 10px; color: var(--ivory);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.site-header .login:hover { background: var(--ivory); color: var(--bg); }