/* Quis Ut Deus · brand tokens · QVD / WP-02 · locked */

:root {
  /* ─── palette · Limestone & Laurel ─── */
  --limestone:    #E5DFCE;
  --limestone-2:  #D8D0B9;
  --limestone-3:  #C8BFA4;
  --ink:          #1A1A1F;
  --ink-2:        #3D3D42;
  --ink-3:        #76746C;
  --bluegrass:    #3F4F4D;
  --bluegrass-2:  #2A3837;
  --tobacco:      #4A2E1B;
  --tobacco-2:    #6E4525;
  --oxblood:      #6E2018;
  --laurel:       #B08A3E;
  --laurel-2:     #C9A24B;

  /* ─── type families ─── */
  --serif-d: "Fraunces", "EB Garamond", Garamond, serif;
  --serif:   "Fraunces", "EB Garamond", Garamond, serif;
  --sans:    "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
  --mono:    "Space Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ─── type scale · 1.25 fourth · anchored 16px ─── */
  --t-d1:    124px;  --lh-d1: 0.94;
  --t-d2:     84px;  --lh-d2: 0.96;
  --t-h1:     56px;  --lh-h1: 1.02;
  --t-h2:     40px;  --lh-h2: 1.05;
  --t-h3:     28px;  --lh-h3: 1.15;
  --t-blg:    21px;  --lh-blg: 1.45;
  --t-bmd:    18px;  --lh-bmd: 1.5;
  --t-bsm:    15px;  --lh-bsm: 1.55;
  --t-ui:     14px;  --lh-ui:  1.5;
  --t-meta:   11px;  --lh-meta: 1.6;
  --t-mu:     10px;  --lh-mu:  1.7;

  /* ─── spacing · 8px base · 11 stops ─── */
  --s-4:    4px;
  --s-8:    8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-48:  48px;
  --s-64:  64px;
  --s-96:  96px;
  --s-128: 128px;
  --s-192: 192px;

  /* ─── grid ─── */
  --max-width: 1240px;
  --col-count: 12;
  --gutter: 24px;
  --baseline: 24px;

  /* ─── motion ─── */
  --tick:  120ms;
  --open:  280ms;
  --enter: 600ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-sealed:   cubic-bezier(.65, 0, .35, 1);
}

/* ─── reset · light ─── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--laurel); color: var(--ink); }

/* ─── body default ─── */
body {
  font-family: var(--serif);
  font-size: var(--t-bmd);
  line-height: var(--lh-bmd);
  font-feature-settings: "onum", "ss01";
  color: var(--ink);
  background: var(--limestone);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ─── typography utility classes ─── */
.t-display       { font-family: var(--serif-d); font-style: italic; font-weight: 400; }
.t-display.d1    { font-size: var(--t-d1); line-height: var(--lh-d1); letter-spacing: -.005em; }
.t-display.d2    { font-size: var(--t-d2); line-height: var(--lh-d2); letter-spacing: -.005em; }
.t-h1            { font-family: var(--serif-d); font-style: italic; font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-h1); }
.t-h2            { font-family: var(--serif-d); font-style: italic; font-weight: 400; font-size: var(--t-h2); line-height: var(--lh-h2); }
.t-h3            { font-family: var(--serif-d); font-style: italic; font-weight: 400; font-size: var(--t-h3); line-height: var(--lh-h3); }
.t-body          { font-family: var(--serif); font-size: var(--t-bmd); line-height: var(--lh-bmd); }
.t-lede          { font-family: var(--serif); font-size: var(--t-blg); line-height: var(--lh-blg); }
.t-small         { font-family: var(--serif); font-size: var(--t-bsm); line-height: var(--lh-bsm); }
.t-ui            { font-family: var(--sans); font-size: var(--t-ui); line-height: var(--lh-ui); font-weight: 400; }
.t-meta          {
  font-family: var(--mono); font-size: var(--t-meta); line-height: var(--lh-meta);
  letter-spacing: .14em; text-transform: uppercase;
}
.t-mu            {
  font-family: var(--mono); font-size: var(--t-mu); line-height: var(--lh-mu);
  letter-spacing: .18em; text-transform: uppercase;
}
.t-mono          { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ─── the wordmark · the only italic Instrument that sets the name ─── */
.wordmark {
  font-family: var(--serif-d);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.005em;
  font-feature-settings: "liga", "dlig";
}
.wordmark .strike { color: var(--laurel); }

/* ─── color utilities ─── */
.c-limestone { color: var(--limestone); }
.c-ink       { color: var(--ink); }
.c-ink-2     { color: var(--ink-2); }
.c-ink-3     { color: var(--ink-3); }
.c-bluegrass { color: var(--bluegrass); }
.c-tobacco   { color: var(--tobacco); }
.c-oxblood   { color: var(--oxblood); }
.c-laurel    { color: var(--laurel); }

.bg-limestone { background: var(--limestone); }
.bg-ink       { background: var(--ink); }
.bg-bluegrass { background: var(--bluegrass); }
.bg-tobacco   { background: var(--tobacco); }

/* ─── ink-on-ground inversions ─── */
.on-ink, .on-bluegrass, .on-tobacco {
  color: var(--limestone);
}
.on-ink       { background: var(--ink); }
.on-bluegrass { background: var(--bluegrass); }
.on-tobacco   { background: var(--tobacco); }

/* ─── motion defaults ─── */
a, button, .hover {
  transition: color var(--tick) var(--ease-standard),
              background var(--tick) var(--ease-standard),
              opacity var(--tick) var(--ease-standard);
}

/* ─── focus · accessible, not loud ─── */
:focus-visible {
  outline: 1.5px solid var(--laurel);
  outline-offset: 3px;
}

/* ─── responsive type scale · scales down on small ─── */
@media (max-width: 720px) {
  :root {
    --t-d1: 64px;   --lh-d1: 0.96;
    --t-d2: 48px;   --lh-d2: 1.0;
    --t-h1: 38px;
    --t-h2: 30px;
    --t-h3: 22px;
  }
}