/* WarnFire marketing — shared base.
   The palette, the two faces, and the page chrome every route renders: header,
   brand, nav disclosure, theme control, skip link, consent bar, and the browser
   surfaces (selection, scrollbars, focus ring).

   This file exists because site.css and home.css each carried their own copy of
   all of it — 78 rules identical in both, including three full token blocks.
   Two palettes meant a colour could be fixed in one file and not the other, and
   that is exactly how the light-theme ghost-button hover reached 1.27:1.

   Load order matters: base.css first, then the page stylesheet, so a route can
   override anything here (the homepage runs a larger display scale that way). */

@font-face {
  font-family: "Archivo";
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-weight: 400 700;
  font-stretch: 75% 112%;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-var.woff2") format("woff2");
}
:root {
  --ink: #0b0c0e;
  --panel: #14171a;
  --bone: #e8e3db;
  --bone-dim: #a79f97;
  --flame: #f46036;
  --rule: rgba(232, 227, 219, 0.13);
  --rule-strong: rgba(232, 227, 219, 0.22);
  --grid: rgba(244, 96, 54, 0.07);
  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(20px, 4.5vw, 64px);

  color-scheme: dark;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  background: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 56px);
  -webkit-font-smoothing: antialiased;
}
/* browser surfaces belong to the design */
::selection { background: var(--flame); color: #0b0c0e; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 1px; }
* { caret-color: var(--flame); }
html { scrollbar-color: #2c3136 var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2c3136; border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #3a4046; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--flame); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; margin: 0; }
h3 { font-size: 19px; font-stretch: 105%; line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0; line-height: 1.6; }
/* ---- header / footer, shared with the homepage world ---- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 12, 14, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: block; flex: none; }
.brand-copy strong { font-size: 17px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; }
/* The interior routes and the homepage each declared this whole rule; the
   homepage now adds only its own padding as a delta, so the narrow-viewport
   gap override further down is not silently out-cascaded by it. */
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
@media (max-width: 900px) {
  .nav-links {gap: 16px;}

}
/* ---- analytics consent (analytics.js): the same panel on every route ---- */
.analytics-consent {
  position: fixed; inset: auto 20px 20px; z-index: 100;
  max-width: 680px; margin-inline: auto; padding: 20px;
  background: var(--panel); color: var(--bone);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.analytics-consent p { margin: 0 0 16px; line-height: 1.5; }
.analytics-consent div { display: flex; flex-wrap: wrap; gap: 12px; }
.analytics-consent button, .analytics-preferences {
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; color: var(--bone);
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.analytics-consent button:hover, .analytics-preferences:hover { border-color: var(--flame); color: var(--flame); }
.analytics-consent button[data-choice="accepted"] { background: var(--flame); color: #0b0c0e; border-color: var(--flame); }
.analytics-consent button[data-choice="accepted"]:hover { background: #ff7146; color: #0b0c0e; }
.analytics-preferences { align-self: start; justify-self: start; margin-top: 16px; }
/* Keyboard entry. The header repeats seven links ahead of the content on every
   route, so the first tab stop should be a way past them. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; padding: 12px 18px; background: var(--flame); color: #0b0c0e; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; }
/* The mono axis readout, shared with the home route's own sheet. */
.readout { font-family: var(--mono); font-size: 12px; font-weight: 500; font-stretch: 85%; letter-spacing: 0.02em; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
/* Below 900px every nav link used to be display:none with no replacement, so
   Log in and every route were unreachable on a phone. Native disclosure, so it
   still opens without JavaScript. */
.nav-disclosure { position: relative; display: flex; align-items: center; }
.nav-panel { display: flex; align-items: center; gap: 22px; }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border: 1px solid var(--rule-strong); background: transparent; color: var(--bone); font-family: var(--mono); font-size: 12px; font-stretch: 85%; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; list-style: none; }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle svg { width: 15px; height: 15px; }
.nav-toggle .nav-toggle-close, .nav-disclosure[open] .nav-toggle-open { display: none; }
.nav-disclosure[open] .nav-toggle-close { display: block; }
.nav-disclosure[open] .nav-toggle { border-color: var(--flame); color: var(--flame); }
@media (min-width: 901px) {
  .nav-disclosure::details-content {content-visibility: visible;}

}
@media (max-width: 900px) {
  .nav-toggle {display: inline-flex;}
  /* the base rule above forces display so the panel lays out inline on
     desktop; at this width the closed state has to win instead. */
  .nav-disclosure:not([open]) .nav-panel {display: none;}
  .nav-disclosure[open] .nav-panel {position: absolute; top: calc(100% + 14px); right: 0; z-index: 40; display: grid; min-width: 212px; padding: 6px; border: 1px solid var(--rule-strong); background: var(--panel);}

}
/* Brand lockup, Menu and the primary action do not all fit at 320px, which the
   body still declares as supported; the mark alone keeps the home link. */
@media (max-width: 380px) {
  .nav {gap: 12px;}

}
/* ---- light theme -------------------------------------------------------
   Dark is the authored identity, so it stays on :root and remains the
   fallback when nothing else matches. Light applies when the OS asks for it
   and the visitor has not pinned dark, or when they pick it in the header.
   Flame darkens to #c23e14 on paper: the dark-theme #f46036 is 2.83:1 there
   and fails, #c23e14 measures 4.66:1. Button text flips to white to keep
   5.26:1 on that darker flame. ---------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {--ink: #f4f1e9;
  --panel: #ffffff;
  --bone: #14161a;
  --bone-dim: #5c5750;
  --flame: #c23e14;
  --rule: rgba(20, 22, 26, 0.14);
  --rule-strong: rgba(20, 22, 26, 0.26);
  --grid: rgba(194, 62, 20, 0.07);
  color-scheme: light;
  scrollbar-color: #c9c2b6 var(--ink);}
  :root:not([data-theme="dark"])::selection {background: var(--flame); color: #ffffff;}
  :root:not([data-theme="dark"])::-webkit-scrollbar-thumb {background: #c9c2b6; border: 3px solid var(--ink);}
  :root:not([data-theme="dark"])::-webkit-scrollbar-thumb:hover {background: #b3aa9c;}
  :root:not([data-theme="dark"]) .site-header {background: rgba(244, 241, 233, 0.86);}
  :root:not([data-theme="dark"]) .analytics-consent {box-shadow: 0 18px 48px rgba(20, 22, 26, 0.18);}
  :root:not([data-theme="dark"]) .analytics-consent button[data-choice="accepted"] {color: #ffffff;}
  :root:not([data-theme="dark"]) .analytics-consent button[data-choice="accepted"]:hover {background: #a8330f; color: #ffffff;}
  :root:not([data-theme="dark"]) .skip-link {color: #ffffff;}

}
:root[data-theme="light"] {
  --ink: #f4f1e9;
  --panel: #ffffff;
  --bone: #14161a;
  --bone-dim: #5c5750;
  --flame: #c23e14;
  --rule: rgba(20, 22, 26, 0.14);
  --rule-strong: rgba(20, 22, 26, 0.26);
  --grid: rgba(194, 62, 20, 0.07);
  color-scheme: light;
  scrollbar-color: #c9c2b6 var(--ink);
}
:root[data-theme="light"]::selection { background: var(--flame); color: #ffffff; }
:root[data-theme="light"]::-webkit-scrollbar-thumb { background: #c9c2b6; border: 3px solid var(--ink); }
:root[data-theme="light"]::-webkit-scrollbar-thumb:hover { background: #b3aa9c; }
:root[data-theme="light"] .site-header { background: rgba(244, 241, 233, 0.86); }
:root[data-theme="light"] .analytics-consent { box-shadow: 0 18px 48px rgba(20, 22, 26, 0.18); }
:root[data-theme="light"] .analytics-consent button[data-choice="accepted"] { color: #ffffff; }
:root[data-theme="light"] .analytics-consent button[data-choice="accepted"]:hover { background: #a8330f; color: #ffffff; }
:root[data-theme="light"] .skip-link { color: #ffffff; }
/* ---- theme control ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong);
  border-radius: 0; background: transparent; color: var(--bone-dim);
  cursor: pointer; transition: color 140ms ease-out, border-color 140ms ease-out;
}
.theme-toggle:hover { color: var(--flame); border-color: var(--flame); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .theme-icon-to-light { display: none; }
.theme-toggle .theme-icon-to-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-to-light { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-to-light {display: block;}
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-to-dark {display: none;}

}
/* The header carries three controls once the theme toggle is present (menu,
   theme, CTA) and stopped fitting a 320px bar. The menu label goes visually
   hidden rather than display:none so the summary keeps its accessible name. */
@media (max-width: 900px) {
  .nav-toggle-label {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;}

}

@media (max-width: 400px) {
  .nav {gap: 12px;}
  .nav-links {gap: 10px;}

}