/* Brand fonts and tokens copied from ferens/apps/web/src/styles/tokens.css (self-hosted latin subsets). */
@font-face { font-family: 'Frank Ruhl Libre'; src: url('fonts/FrankRuhlLibre-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('fonts/Raleway-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('fonts/Raleway-Italic-latin.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Monaspace Argon'; src: url('fonts/MonaspaceArgon-Regular-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Monaspace Argon'; src: url('fonts/MonaspaceArgon-SemiBold-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --navy-800: #263a52;
  --navy-900: #17263d;
  --ivory-50: #faf8f3;
  --ivory-100: #f2ede6;
  --ink: #101c2d;
  --gold: #e2b383;
  --white: #fff;
  --font-heading: 'Frank Ruhl Libre', Georgia, serif;
  --font-body: 'Raleway', system-ui, sans-serif;
  --font-type: 'Monaspace Argon', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --ease-gentle: cubic-bezier(0.45, 0, 0.15, 1);
  --margin: clamp(20px, 5vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Site button (components.css .button): square, 2px edge, uppercase Raleway medium. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 12px 28px; border: 2px solid currentColor; background: transparent;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color 200ms, color 200ms, transform 200ms var(--ease-out);
}
.button:active { transform: scale(0.97); }

/* Prototype bar: back to the index and the language switch (not part of the design). */
.proto-bar {
  position: fixed; z-index: 50; right: 12px; bottom: 12px; display: flex; gap: 2px;
  font: 500 12px/1 var(--font-body); 
}
.proto-bar a { padding: 8px 10px; background: rgba(16, 28, 45, 0.82); color: #fff; text-decoration: none; }
.proto-bar a[aria-current] { background: #fff; color: var(--ink); }