/* ==========================================================================
   Nitivra -- marketing site stylesheet.
   Direction 3, locked 12 Jun 2026 (D-017). Tokens mirror
   02-design-system/tokens/tokens.css; keep in sync via that file.
   Static, no build step. WCAG 2.2 AA. Light mode by design.
   ========================================================================== */

/* Fonts self-hosted (SIL OFL) -- was a Google Fonts @import; replaced 04 Jul 2026 so the site makes zero third-party requests */
/* Atkinson Hyperlegible Mono normal latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-mono-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Atkinson Hyperlegible Mono normal latin */
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-mono-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Atkinson Hyperlegible Next italic latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Atkinson Hyperlegible Next italic latin */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Atkinson Hyperlegible Next normal latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Atkinson Hyperlegible Next normal latin */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Marcellus SC normal latin-ext */
@font-face {
  font-family: 'Marcellus SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-sc-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Marcellus SC normal latin */
@font-face {
  font-family: 'Marcellus SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-sc-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Core */
  --ink: #0d2424;
  --parchment: #f7f4ed;
  --brass: #9a7b3a;
  --brass-deep: #7a5e22;

  /* Neutral ramp */
  --n-00: #fcfaf4;
  --n-05: #f7f4ed;
  --n-10: #efeadf;
  --n-15: #e6e0d2;
  --n-20: #d8d1c0;
  --n-30: #c2baa6;
  --n-40: #a39b88;
  --n-60: #56625c;
  --n-70: #3c4a44;
  --n-80: #1f302c;

  /* Semantic */
  --success: #2e6b4f;
  --success-bg: #e4ece5;
  --warning: #8a5a12;
  --warning-bg: #f1e7d4;
  --error: #a23426;
  --info: #2a5a7a;

  /* Roles */
  --bg: var(--n-05);
  --bg-elevated: var(--n-00);
  --bg-sunken: var(--n-10);
  --bg-inverse: var(--ink);
  --text: var(--ink);
  --text-secondary: var(--n-70);
  --text-muted: var(--n-60);
  --text-on-inverse: var(--parchment);
  --text-on-inverse-muted: #b9c2bb;
  --border: var(--n-20);
  --border-strong: var(--n-30);
  --border-subtle: var(--n-15);
  --border-inverse: #274040;
  --link: var(--brass-deep);
  --link-hover: #5e4818;
  --focus: #0f5c5c;

  /* Type */
  --font-display: 'Marcellus SC', 'Marcellus', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, Consolas, monospace;
  --t-display-2: clamp(2.2rem, 5.2vw, 3.052rem);
  --t-h1: clamp(1.85rem, 4vw, 2.441rem);
  --t-h2: 1.953rem;
  --t-h3: 1.563rem;
  --t-h4: 1.25rem;
  --t-body-lg: 1.1875rem;
  --t-body: 1.0625rem;
  --t-body-sm: 0.9375rem;
  --t-label: 0.8125rem;

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Layout */
  --container: 1200px;
  --measure: 68ch;

  /* Shape and depth */
  --radius-2: 4px;
  --radius-3: 6px;
  --shadow-doc: 0 1px 2px rgba(13,36,36,0.06), 0 8px 24px -12px rgba(13,36,36,0.18);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* Motion */
  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Base --------------------------------------------------------------------*/

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}

p { max-width: var(--measure); text-wrap: pretty; margin: 0 0 var(--s-5); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

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

:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-2);
}

ul { margin: 0 0 var(--s-5); padding-left: 1.2em; }
li { margin-bottom: var(--s-2); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--parchment);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius-2) 0;
}
.skip-link:focus { left: 0; }

/* Layout ------------------------------------------------------------------*/

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }

.band { padding: var(--s-9) 0; }
.band--tight { padding: var(--s-8) 0; }
.band--sunken { background: var(--bg-sunken); }
.band--ink { background: var(--bg-inverse); color: var(--text-on-inverse); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }

/* Type roles --------------------------------------------------------------*/

.eyebrow {
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-deep); margin: 0 0 var(--s-4); max-width: none;
}
.band--ink .eyebrow { color: var(--brass); }

.h-sec { font-size: var(--t-h1); margin: 0 0 var(--s-4); color: inherit; }
.h-display { font-size: var(--t-display-2); margin: 0 0 var(--s-5); }

.lede {
  font-size: var(--t-body-lg); line-height: 1.35;
  color: var(--text-secondary); margin: 0 0 var(--s-6); max-width: 62ch;
}
.band--ink .lede { color: var(--text-on-inverse-muted); }

.prose { color: var(--text-secondary); }
.prose strong { color: var(--text); }

.section-head { margin-bottom: var(--s-7); max-width: 62ch; }
.section-head--flush { margin-bottom: 0; }
.section-head--wide { max-width: none; }

.mono { font-family: var(--font-mono); letter-spacing: 0.01em; }
.tnum { font-variant-numeric: tabular-nums; }
.small { font-size: var(--t-body-sm); }
.muted { color: var(--text-muted); }

/* Header ------------------------------------------------------------------*/

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 64px; flex-wrap: wrap; padding-top: var(--s-2); padding-bottom: var(--s-2);
}

.wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.28em; text-transform: uppercase;
  font-size: 1.25rem; color: var(--text); text-decoration: none;
}
.wordmark:hover { color: var(--text); }

.site-nav { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.site-nav a:not(.btn) {
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--t-body-sm); font-weight: 500;
  padding: var(--s-2) 0; min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:not(.btn):hover { color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--text); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--brass);
}

/* Buttons -----------------------------------------------------------------*/

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-2); border: 0; cursor: pointer;
  font: 700 var(--t-body)/1 var(--font-body);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--parchment); }
.btn--primary:hover { background: var(--n-80); color: var(--parchment); }
.btn--secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn--secondary:hover { border-color: var(--ink); color: var(--text); }
.band--ink .btn--primary { background: var(--parchment); color: var(--ink); }
.band--ink .btn--primary:hover { background: var(--n-10); }
.btn .icon { width: 18px; height: 18px; }

.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Cards -------------------------------------------------------------------*/

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background: var(--bg-elevated);
  padding: var(--s-6);
}
.card--raised { box-shadow: var(--shadow-doc); }
.card--proof { border-top: 2px solid var(--brass); }
.card h3 { font-size: var(--t-h4); margin: 0 0 var(--s-3); }
.card p { font-size: var(--t-body-sm); color: var(--text-secondary); margin: 0 0 var(--s-3); }
.card .eyebrow { margin-bottom: var(--s-3); }
.card-footer {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--t-body-sm);
  color: var(--text); font-variant-numeric: tabular-nums;
}

.fact-list { display: flex; flex-direction: column; gap: 0; margin: var(--s-2) 0 0; }
.fact {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border-subtle);
  font-size: var(--t-body-sm);
}
.fact dt { color: var(--text-muted); margin: 0; }
.fact dd { font-family: var(--font-mono); color: var(--text); margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Badges ------------------------------------------------------------------*/

.badge-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-1, 2px);
  background: var(--bg-elevated);
  font-size: var(--t-body-sm); color: var(--text-secondary);
}

/* Kicker list (numbered steps) ---------------------------------------------*/

.kicker-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: var(--s-6); }
.kicker { display: flex; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); }
.kicker-n { font-family: var(--font-mono); font-size: var(--t-body-sm); color: var(--brass-deep); flex: 0 0 48px; }
.kicker h3 { font-size: var(--t-h4); margin: 0 0 6px; }
.kicker p { font-size: var(--t-body-sm); color: var(--text-secondary); margin: 0; max-width: 60ch; }

/* Stat band (ink) ----------------------------------------------------------*/

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  border-top: 1px solid var(--border-inverse); padding-top: var(--s-6);
}
.stat-f {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-display-2); font-weight: 700; color: var(--parchment);
  line-height: 1; letter-spacing: -0.01em;
}
.stat-l { font-size: var(--t-body-sm); color: var(--text-on-inverse-muted); margin-top: var(--s-3); max-width: 26ch; }

/* Tables ------------------------------------------------------------------*/

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-body-sm); }
table.data caption {
  text-align: left; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: var(--s-3);
}
table.data th {
  text-align: left; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
}
table.data td {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  vertical-align: top;
}
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--n-15); }

/* Checklist ---------------------------------------------------------------*/

.check-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.check-list li { display: flex; gap: var(--s-3); margin: 0; color: var(--text-secondary); }
.check-list .icon { width: 18px; height: 18px; color: var(--success); flex: 0 0 auto; margin-top: 3px; }

/* POV / statement band ------------------------------------------------------*/

.pov {
  border-top: 2px solid var(--brass);
  padding-top: var(--s-6);
  max-width: 56ch;
}
.pov p.statement {
  font-family: var(--font-body); font-size: var(--t-h3); font-weight: 500;
  line-height: 1.35; color: var(--text); margin: 0 0 var(--s-4);
}

/* Footer ------------------------------------------------------------------*/

.site-footer {
  background: var(--bg-inverse); color: var(--text-on-inverse-muted);
  padding: var(--s-8) 0; margin-top: var(--s-9);
  font-size: var(--t-body-sm);
}
.site-footer .wordmark { color: var(--parchment); font-size: 1.1rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-7); margin-bottom: var(--s-7); }
.site-footer h4 {
  color: var(--parchment); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-3); }
.site-footer a { color: var(--text-on-inverse-muted); text-decoration: none; }
.site-footer a:hover { color: var(--parchment); text-decoration: underline; }
.footer-legal {
  border-top: 1px solid var(--border-inverse); padding-top: var(--s-5);
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.footer-legal .mono { font-variant-numeric: tabular-nums; }

/* Hero --------------------------------------------------------------------*/

.hero { padding: var(--s-9) 0; }
.hero .grid-2 { align-items: center; }
.hero h1 { font-size: var(--t-display-2); margin: 0 0 var(--s-5); }

/* Responsive ---------------------------------------------------------------*/

@media (max-width: 880px) {
  .grid-2, .grid-3, .footer-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: var(--s-5); }
  .band { padding: var(--s-8) 0; }
  .hero { padding: var(--s-7) 0; }
  .site-header { position: static; }
  .site-header .wrap { justify-content: center; text-align: center; }
  .site-nav { justify-content: center; }
  .site-header .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Print -------------------------------------------------------------------*/

@media print {
  .site-header, .site-footer, .btn, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .band { padding: 1.5rem 0; }
}