@font-face {
  /* FAIRE Sprig Bold Italic by Faire Type, Web license for getjoia.com and its account pages (order R762131589). Self-hosted; don't link to it from anywhere else. */
  font-family: "FAIRE Sprig";
  src: url("/fonts/FAIRE-Sprig-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Joia brand tokens (brand kit, October 2026). Interface colors only; the crystal artwork has its own.
   getjoia.com is light only (Richie, 2026-10-07): the same white page on phones and desktops, even in dark mode. */
:root {
  color-scheme: light;
  --joia-ink: #0B2D5B;
  --joia-snow: #F9FCFF;
  --joia-ice: #E6F3FF;
  --joia-cyan: #38CFFF;
  --joia-sapphire: #0F63FF;

  /* Headings: system serif for now. The brand heading font is pending a license check;
     once it is self-hosted, swap it in here (one change). */
  --font-heading: "FAIRE Sprig", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fg: var(--joia-ink);
  --muted: #4A5F7E;
  --bg: var(--joia-snow);
  --card: var(--joia-ice);
  --line: #CFE0F2;
  /* Sapphire is 4.4:1 on Ice, just under AA for text, so links use a deeper sapphire (5.4:1 on Ice). */
  --link: #0B56E0;
  --warn-bg: #fff4d6;
  --warn-fg: #6b4e00;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.6 var(--font-body);
  color: var(--fg);
  background: var(--bg);
}
header, main, footer { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.5rem; padding-bottom: 1rem; }
/* Header wordmark: the vector version, since the detailed crystal is for 160 CSS px and up (brand rule). */
header .brand { display: block; line-height: 0; padding: .25rem 0; }
header .brand img { width: 136px; height: auto; }
@media (max-width: 480px) { header .brand img { width: 120px; } }
nav a { color: var(--muted); text-decoration: none; margin-left: 1rem; font-size: .95rem; }
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--fg); }
main { padding-bottom: 3rem; }
h1, h2, h3 { font-family: var(--font-heading); font-style: italic; font-weight: 700; color: var(--fg); }
h1 { font-size: 2.6rem; line-height: 1.1; letter-spacing: -0.01em; margin: 1.75rem 0 .75rem; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 2.5rem 0 .5rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 .25rem; }
@media (max-width: 480px) { h1 { font-size: 2.1rem; } }
p, li { color: var(--fg); }
.muted { color: var(--muted); }
a { color: var(--link); }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }
code { font: .9em var(--font-mono); background: var(--card); padding: .1em .35em; border-radius: 5px; overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
ol.steps li { margin-bottom: .6rem; }
footer { border-top: 1px solid var(--line); padding-top: 1.25rem; padding-bottom: 2rem; font-size: .9rem; color: var(--muted); }
footer a { color: var(--muted); margin-right: 1rem; display: inline-block; padding: .3rem 0; }