/* Ars Notoria tokens. The only file where a colour, font, or spacing value is written down.
   Rules: docs/02-DESIGN.md. Layout lives in site.css. Motion lives in site.js. */

/* Fonts: self-hosted, latin subsets, swap. No third-party origin. */
@font-face { font-family: "Cinzel"; font-weight: 400 900; font-display: swap; src: url("fonts/cinzel-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 100 900; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Major Mono Display"; font-weight: 400; font-display: swap; src: url("fonts/major-mono-latin.woff2") format("woff2"); }

:root {
  /* Ground */
  --midnight: #010d19;
  --midnight-2: #061627;
  --line: #14283a;

  /* Ink */
  --cream: #eee1c0;
  --cream-2: #dfcfa6;
  --cream-3: #b9a57c;
  --ink: #0b1626;
  --ink-2: #3a4556;
  --muted: #a9b1bd;
  --text: var(--cream);

  /* Accent */
  --gold: #e7be13;
  --gold-hi: #f5d54a;
  --rubric: #e34224;
  --rubric-ink: #a8152d; /* rubric red for cream ground; 4.5:1 there */
  --gold-dim: #8f7433;
  --parchment-edge: #d8c391; /* the darker edge of aged paper */
  --card-face: #faf6ee; /* the tarot card stock: bright, not aged */

  /* The ramp: fourteen bands, one object, always in this order */
  --r01: #1c0b2c; --r02: #400728; --r03: #6a052c; --r04: #a8152d; --r05: #da282f;
  --r06: #e34224; --r07: #e86921; --r08: #e9a91b; --r09: #e7be13; --r10: #dbc928;
  --r11: #37b052; --r12: #0e8168; --r13: #1e767b; --r14: #04414e;
  --ramp: linear-gradient(90deg,
    var(--r01) 0 7.14%, var(--r02) 0 14.28%, var(--r03) 0 21.42%, var(--r04) 0 28.56%,
    var(--r05) 0 35.7%, var(--r06) 0 42.84%, var(--r07) 0 49.98%, var(--r08) 0 57.12%,
    var(--r09) 0 64.26%, var(--r10) 0 71.4%, var(--r11) 0 78.54%, var(--r12) 0 85.68%,
    var(--r13) 0 92.82%, var(--r14) 0 100%);

  /* Triplets for alpha: rgba(var(--gold-rgb), .4) */
  --gold-rgb: 231, 190, 19;
  --gold-hi-rgb: 245, 213, 74;
  --midnight-rgb: 1, 13, 25;
  --cream-rgb: 238, 225, 192;
  --ink-rgb: 11, 22, 38;
  --glass-rgb: 255, 255, 255;

  /* Light. Rationed: see scripts/gates/allowlists.json for where these may be used */
  --halo-midnight: 0 0 40px 20px rgba(var(--midnight-rgb), .9);
  --halo-gold: 0 0 6px 2px rgba(var(--gold-rgb), .4);
  --lit-gold: drop-shadow(0 0 3px rgba(var(--gold-hi-rgb), .35));
  /* Tints a currentColor SVG image to gold when it cannot be inlined */
  --gold-tint: invert(78%) sepia(64%) saturate(900%) hue-rotate(5deg) brightness(96%);

  /* Type */
  --head: "Cinzel", "Cormorant Garamond", Georgia, serif;       /* every heading */
  --display: "Fraunces", "Cooper Black", Georgia, serif;       /* paper only: notebook, leaf, card backs */
  --wordmark: "Major Mono Display", "JetBrains Mono", monospace;
  --sans: "Jost", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale: five sizes, used everywhere */
  --t-xs: 12px;
  --t-s: 14px;
  --t-m: 17px;
  --t-l: clamp(18px, 1.3vw, 22px);
  --t-xl: clamp(32px, 3.4vw, 48px);
  --t-display: clamp(40px, 8.4cqi, 92px);

  /* Space scale: four gaps, all multiples of the unit */
  --u: 8px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 32px;
  --s-4: 64px;
  --max: 1600px;
  --gutter: clamp(24px, 5vw, 96px);

  /* Motion for the hand: one duration, one curve */
  --ease: 180ms cubic-bezier(.2, .7, .2, 1);
}

/* Base */
* { box-sizing: border-box; border-radius: 0; }
html { color-scheme: dark; }
body { margin: 0; background: var(--midnight); color: var(--text); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1; letter-spacing: -.025em; font-variation-settings: "SOFT" 0, "opsz" 144; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: .9em; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Base components shared by every page */
.rubric { font-family: var(--sans); font-weight: 500; font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.lede { color: var(--muted); font-size: var(--t-l); line-height: 1.55; max-width: 52ch; }
.meta { font-family: var(--wordmark); font-weight: 400; font-size: 13px; letter-spacing: .02em; color: var(--muted); -webkit-text-stroke: .015em currentColor; }
.meta b { font-weight: 400; color: var(--cream); }
.btn { display: inline-flex; align-items: center; gap: var(--s-1); font: 500 var(--t-s) var(--sans); letter-spacing: .02em; color: var(--text); background: transparent; border: 1px solid var(--line); padding: 14px 22px; text-decoration: none; cursor: pointer; transition: border-color var(--ease), background var(--ease), color var(--ease), transform var(--ease); }
.btn::after { content: "\2192"; font-family: var(--mono); transition: transform var(--ease); }
.btn:hover { border-color: var(--gold); }
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.stripe { display: block; height: calc(var(--u) * 1.5); background: var(--ramp); }
.stripe--rule { height: 1px; background: var(--line); }