/* Metis — shared tokens and components for the deck (index.html) and the assessment (assess.html). */
:root {
  --paper: #F3F0E8;
  --paper-2: #E8E3D5;
  --paper-3: #EDE9DE;
  --card: #FAF8F3;
  --ink: #141C26;
  --ink-soft: #57616C;
  --ink-faint: #8A929A;
  --rule: rgba(20, 28, 38, .16);
  --rule-strong: rgba(20, 28, 38, .32);
  --night: #1B2440;
  --night-2: #243056;
  --indigo: #3A4A8C;
  --vermilion: #D6522F;
  --amber: #E5A83B;
  --teal: #2E7A6D;
  --sky: #9CC0D9;
  --lilac: #B3A6D8;
  --sage: #A9B78F;
  --rose: #EDBFAE;
  /* pillars */
  --p-direction: #3A4A8C;
  --p-people: #D6522F;
  --p-foundations: #2E7A6D;
  --p-execution: #E5A83B;
  /* maturity ramp L1..L5 */
  --l1: #C8463A;
  --l2: #E58A55;
  --l3: #E5B43B;
  --l4: #8DAF6E;
  --l5: #2E7A6D;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --bar: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* paper grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .38 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

a { color: inherit; }
strong { font-weight: 650; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--bar);
  z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  font: 500 12px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark svg { width: 26px; height: 26px; flex: none; }
.mark span { font: 700 16px/1 var(--serif); letter-spacing: .01em; text-transform: none; }
.bar-issue { color: var(--ink-soft); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-issue em { font: italic 400 14px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.bar-count { font-family: var(--mono); letter-spacing: .04em; }
.bar-count b { color: var(--vermilion); font-weight: 500; }
.bar-link {
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); white-space: nowrap;
}
.bar-link:hover { background: var(--vermilion); }
.bar-link.ghost { background: transparent; color: var(--ink); border: 1.2px solid var(--ink); }
.bar-link.ghost:hover { background: var(--ink); color: var(--paper); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress i { display: block; height: 100%; width: 0; background: var(--vermilion); transition: width .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- type ---------- */
.kicker {
  margin: 0 0 14px;
  font: 600 11.5px/1.2 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px;
}
.kicker em { font: italic 500 22px/1 var(--serif); letter-spacing: 0; color: var(--vermilion); text-transform: none; }
.kicker::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .5; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.015em; }
h2 em, h3 em { font-style: italic; color: var(--vermilion); }
.hl { color: var(--vermilion); font-style: italic; }
.nw { white-space: nowrap; }
.src { font: 400 11px/1.45 var(--mono); color: var(--ink-soft); margin: 16px 0 0; max-width: 64ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 20px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.small { padding: 10px 14px; font-size: 11px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- stats ---------- */
.stats { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.stats.s2 { grid-template-columns: repeat(2, 1fr); }
.stats.s3 { grid-template-columns: repeat(3, 1fr); }
.stats.s4 { grid-template-columns: repeat(4, 1fr); }
.stat { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.stat + .stat { padding-left: 14px; border-left: 1px solid var(--rule); }
.stats.s2 .stat:nth-child(3) { border-left: 0; padding-left: 0; }
.stat b {
  display: block;
  font: 500 clamp(26px, 2.6vw, 40px)/1 var(--serif);
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.stat span { font: 500 12px/1.35 var(--sans); color: var(--ink-soft); display: block; }

/* ---------- chips / tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tags span, .tags li { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; border: 1.2px solid var(--ink); border-radius: 999px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.2px solid var(--ink); background: var(--c, var(--paper)); flex: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; animation-delay: 0s !important; transition-delay: 0s !important; }
}