/* ninetonever.com — the company site for NineToNever LLC.
   Shares its structure with our other static sites, and none of its palette:
   this one is periwinkle on near-black. Two sites from the same company should
   be built the same way and must not look like the same product.

   NO inline styles and NO inline <style> anywhere in this site. The CSP in
   docker-compose.yml sets style-src 'self' with no 'unsafe-inline', so a
   style="" attribute is silently dropped by the browser and the layout breaks
   only in production. Every spacing exception below exists because of that.

   Contrast ratios in the comments were computed from these hex values against
   the ground named, not eyeballed. AA needs 4.5 for body text, 3.0 for large
   text and meaningful non-text. */

/* ── typeface ──────────────────────────────────────────────────────────────
   Archivo, variable, latin subset, weight 100-900 and width 62-125%. SIL Open
   Font License 1.1 (fonts/OFL.txt) — self-hosting and redistribution are both
   granted. One file serves both roles: headings take the expanded width, body
   text the normal one, which is why there is no second family to download. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo.woff2') format('woff2');
}

/* ── tokens: this site is dark, deliberately and only ───────────────────────
   Not a dark *mode*. There is no light palette, no prefers-color-scheme block
   and no [data-theme] stamp: the page paints the same way for every visitor,
   which is why every colour below is declared here on the bare :root and
   nothing is left to inherit from the host.

   Ratios were computed against the ground named, not eyeballed. AA wants 4.5
   for body text, 3.0 for large text and for non-text that carries meaning. */
:root {
  --page:      #0b0d13;   /* near-black with a blue bias, not a neutral grey */
  --panel:     #191f2c;   /* 1.18 against the page — cards read as raised */
  --ink:       #f2f4f8;   /* 17.64 on page */
  --ink-soft:  #bcc3d2;   /* 10.98 on page — body copy in secondary blocks */
  --ink-faint: #949db1;   /*  7.14 on page — eyebrows, labels, footer */
  --rule:      #2a3140;   /* 1.49 on page: a hairline separator, decorative.
                             It never carries meaning on its own, which is why
                             it is allowed to sit below 3.0. */
  --line-firm: #5c6780;   /*  3.01 on panel — .btn-ghost's ONLY boundary, so
                             this one does have to clear 3.0. Do not merge it
                             back into --rule. */
  --accent:    #8fa8ff;   /*  8.52 on page — links and the primary fill */
  --accent-soft: #1a2338; /*  accent text on this reads 6.87 */
  --on-accent: #0b0d13;   /*  8.52 on the accent fill */
  --focus:     #8fa8ff;

  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:    'Archivo', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --shell: 68rem;
  --radius: 10px;
}

/* The page must paint its own ground. A transparent body would let a light
   host show through behind the type, which is the one way a committed
   single-theme design still breaks. */
html { background: var(--page); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* Headings take Archivo's expanded width. This is the whole type concept:
   one family, two widths, so the display voice costs no extra download. */
h1, h2, h3 {
  font-family: var(--display);
  font-stretch: 112%;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 650; }
h3 { font-size: 1.125rem; font-weight: 650; font-stretch: 105%; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
ul { max-width: var(--measure); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter); top: 0.5rem; z-index: 20;
  background: var(--panel); color: var(--ink);
  padding: 0.6rem 1rem; border: 1px solid var(--accent); border-radius: 6px;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ── masthead ──────────────────────────────────────────────────────────── */

header.site { border-bottom: 1px solid var(--rule); background: var(--page); position: sticky; top: 0; z-index: 10; }
header.site .shell {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1.75rem; min-height: 4.5rem; padding-block: 0.75rem;
}

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-stretch: 112%; font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; margin-inline-end: auto;
}
.brand .mark { display: block; width: 22px; height: 22px; }
.wordmark .suffix { color: var(--ink-faint); font-weight: 500; }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.9375rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; padding: 0.4rem 0; display: inline-block; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ── sections ──────────────────────────────────────────────────────────── */

section { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
section + section { border-top: 1px solid var(--rule); }

.lede { font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--ink-soft); max-width: 46ch; }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.9rem;
}

.hero h1 { max-width: 18ch; margin-bottom: 1.1rem; }
.hero .lede { margin-bottom: 1.75rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0.6rem 1.35rem; border-radius: 8px;
  font-family: var(--display); font-stretch: 105%;
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line-firm); color: var(--ink); background: var(--panel); }
.btn-ghost:hover { border-color: var(--ink); }

/* ── grids and cards ───────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }

.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.9688rem; }
.card p:last-child { margin-bottom: 0; }
.card .facts { margin-top: 0.75rem; }

.pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 0.85rem;
}

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

/* ── facts list ────────────────────────────────────────────────────────── */

.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 40rem) {
  .facts > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
.facts dt { color: var(--ink-faint); font-size: 0.875rem; font-weight: 600; }
.facts dd { margin: 0; color: var(--ink); }

/* ── spacing exceptions (see the no-inline-styles note at the top) ─────── */

/* A run of prose where an h2 starts a new topic inside one column. */
.flow > h2 + p { margin-top: 0.75rem; }
.flow > * + h2 { margin-top: 2.5rem; }
/* ...except a pill, which labels the heading it sits on and must stay attached to it. */
.flow > .pill + h2 { margin-top: 0; }
.flow > .cta-row { margin-top: 2rem; }
.flow > .facts { margin-top: 2.5rem; }
.flow > .facts + p { margin-top: 1.5rem; }
.flow > p:last-child { margin-bottom: 0; }

/* The "read more" line that ends a section. */
.more { margin-top: 2rem; margin-bottom: 0; }

/* ── document pages (legal, 404) ───────────────────────────────────────── */

.doc main { max-width: 46rem; margin-inline: auto; padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) 4rem; }
.doc h1 { margin-bottom: 0.75rem; }
.doc h2 { font-size: 1.3125rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.doc .lede { margin-bottom: 2rem; }
.doc li { margin-bottom: 0.4em; }
.docmeta { color: var(--ink-faint); font-size: 0.9375rem; }

/* ── footer ────────────────────────────────────────────────────────────── */

footer.site { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; color: var(--ink-soft); font-size: 0.9375rem; }
.footer-top { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 2rem; }
footer.site h3 { font-family: var(--body); font-stretch: 100%; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.7rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 0.4rem; }
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
.legal-line { border-top: 1px solid var(--rule); padding-top: 1.5rem; color: var(--ink-faint); font-size: 0.875rem; }
.legal-line p { margin: 0 0 0.35em; max-width: none; }