/* ---- palette and type (spec section 2) ---- */
:root {
  --void: #050507;
  --ink: #090b12;
  --midnight: #001a2c;
  --indigo-deep: #0e0146;
  --indigo: #15106b;
  --amethyst: #502f4c;
  --violet-muted: #70587c;
  --teal-deep: #0b525b;
  --teal: #006466;
  --mist: #c8b8db;
  --ivory: #f9f4f5;
  --gold: #d3a54a;
  --mark-cyan: #7fe3ff;
  --mark-peri: #8fa3ff;
  --mark-violet: #b57bff;
  --font-caps: 'Cinzel Variable', 'Cinzel', Georgia, serif;
  --font-head: 'Fraunces Variable', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --shadow-text: 0 0 24px rgba(5, 5, 7, .9);
  --hair: rgba(112, 88, 124, .45);
  /* Silver replaces gold on everything in the foreground (Plan 11): the button edges, the corner
   * marks and the hero rule. Gold survives only where it is already deep in a picture. */
  --silver: #cfc7d8;
  --silver-dim: rgba(207, 199, 216, .5);
}

@font-face { font-family: 'Cinzel Variable'; font-weight: 400 900; font-style: normal; font-display: swap; src: url('../fonts/cinzel-var.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces Variable'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('../fonts/fraunces-var.woff2') format('woff2'); }
/* The italic is the full-axes file (opsz 9-144, wght, SOFT, WONK) so the hero line can sit at opsz 144 / SOFT 100 / WONK 1;
 * every other italic gets optical sizing by its font size. */
@font-face { font-family: 'Fraunces Variable'; font-weight: 100 900; font-style: italic; font-display: swap; src: url('../fonts/fraunces-var-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Variable'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono Variable'; font-weight: 100 800; font-style: normal; font-display: swap; src: url('../fonts/jetbrains-mono-var.woff2') format('woff2'); }

/* ---- base ---- */
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--ivory); scroll-behavior: auto; }
body { margin: 0; font: 400 1.05rem/1.7 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 500; line-height: 1.15; }
p { margin: 0; }

/* The wordmark is live type, never an image, so it stays sharp at any size.
 * Mixed case, not caps: the splash lettering's character is in the tall pointed N and H against the
 * small round o and e, and uppercasing it throws that away. Patrick's typography table (spec 5) sets
 * the wordmark in Fraunces Light 300, one flat ivory - no gradient fill. */
.wordmark { display: inline-block; font: 300 1em/.88 var(--font-head); letter-spacing: -.02em; color: #F9F4F5; }

.skip { position: fixed; left: -999px; top: 8px; z-index: 100; padding: .5rem 1rem; background: var(--ink); color: var(--ivory); }
.skip:focus { left: 8px; }