/* Alfred Pierce — shared brand tokens and primitives. Generated ramps live in palette.json; these are the chosen roles. */
:root{
  /* surfaces */
  --paper-50:#FBFAF7; --paper-100:#F6F4F0; --paper-200:#EAE7E0; --paper-300:#D8D3CA;
  /* ink (blue-tinted neutral, hue 266) */
  --ink-950:#020616; --ink-900:#101729; --ink-800:#20283B; --ink-700:#364056; --ink-600:#4A546A; --ink-500:#67738C; --ink-400:#95A0B7; --ink-300:#CED4E1; --ink-200:#E4E8F0; --ink-100:#F2F4F9; --ink-50:#F9FAFC;
  /* blue (900 is the logo) */
  --blue-950:#081558; --blue-900:#0A1F86; --blue-800:#112CB7; --blue-700:#1B40DE; --blue-600:#2459FE; --blue-500:#467EFF; --blue-400:#70A1FF; --blue-300:#A2C3FF; --blue-200:#C7DCFF; --blue-100:#E0ECFF; --blue-50:#F0F6FF;

  /* roles */
  --bg:var(--paper-50); --fg:var(--ink-900); --fg-2:var(--ink-700); --fg-3:var(--ink-600);
  --rule:var(--paper-200); --brand:var(--blue-900); --brand-deep:var(--blue-950); --link:var(--blue-700);
  --on-brand:#FFFFFF; --on-brand-2:var(--blue-200);
  /* the field: the doorway's fill, lit from the top left */
  --field:radial-gradient(90% 60% at 28% 8%,rgba(38,64,196,.6) 0%,rgba(38,64,196,0) 60%),var(--blue-900);

  /* type: the serif speaks, the grotesk works */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* display, Instrument Serif regular: hero, page title, section title, pull quote */
  --d-1:clamp(3.25rem,6.6vw,6.25rem); --d-2:clamp(3rem,5.5vw,5rem); --d-3:clamp(2.75rem,4.4vw,4rem); --d-4:clamp(1.75rem,2.6vw,2.25rem);
  /* subheads, Manrope semibold: step title, card title */
  --h-1:clamp(1.5rem,2vw,1.875rem); --h-2:1.125rem;
  /* text, Manrope: lede, body, card body, small */
  --t-2:1.3125rem; --t-1:1.0625rem; --t-s:0.9375rem; --t-0:0.875rem;

  /* shape */
  --r-0:2px; --r-1:4px; --r-2:8px; --r-3:12px;
  --shadow-panel:0 1px 2px rgba(2,6,22,.04),0 8px 24px -16px rgba(8,21,88,.18);
  --shadow-card:0 1px 2px rgba(8,21,88,.18),0 12px 40px -12px rgba(8,21,88,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--t-1);line-height:1.55;font-feature-settings:"kern","liga","calt"}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px;border-radius:var(--r-1)}
img,svg{display:block}
/* the wordmark is typed, in the serif, and stands alone in the header */
.wordmark{font-family:var(--serif);font-weight:400;font-size:1.625rem;letter-spacing:-.01em;line-height:1;color:var(--fg)}
.mark{color:var(--brand)}
/* buttons: near-square, Manrope medium, one fill and one outline */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;padding:0 1.25rem;border-radius:var(--r-0);font:500 15px/1 var(--sans);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .3s,color .2s,opacity .2s}
.btn.primary{background:var(--brand);color:var(--on-brand)}
.btn.primary:hover{opacity:.85}
.btn.secondary{background:transparent;color:var(--fg);border-color:rgba(16,23,41,.2)}
.btn.secondary:hover{border-color:rgba(16,23,41,.6)}
.btn.lg{height:48px;padding:0 1.5rem}