/* BurnerSets — "Signal in the Dust" site styles.
   Tokens are the brand package's design/tokens.css, verbatim, so the site
   and the app share one visual system. Semantic tokens (--bs-bg, --bs-text,
   --bs-accent…) switch with [data-theme]; components only use those. */

@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bs-color-ink: #171916;
  --bs-color-panel: #242722;
  --bs-color-chalk: #F2EDE2;
  --bs-color-dust: #D5C8B0;
  --bs-color-muted: #B6B7AA;
  --bs-color-orange: #FF6B35;
  --bs-color-sage: #BED49A;
  --bs-color-error: #FFB3A9;
  --bs-color-line: #74796D;
  --bs-color-lightMuted: #505548;
  --bs-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --bs-font-body: "Barlow", system-ui, sans-serif;
  --bs-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bs-fontSize-micro: 12px;
  --bs-fontSize-label: 14px;
  --bs-fontSize-body: 16px;
  --bs-fontSize-lead: 20px;
  --bs-fontSize-h3: 28px;
  --bs-fontSize-h2: 48px;
  --bs-fontSize-hero: clamp(56px, 8vw, 112px);
  --bs-radius-control: 4px;
  --bs-layout-max: 1280px;
  --bs-layout-gutter: clamp(16px, 4vw, 48px);
  --bs-layout-touch: 48px;
  --bs-motion-fast: 120ms;
  --bs-motion-normal: 200ms;
  --bs-motion-easing: cubic-bezier(0.2, 0, 0, 1);
}
:root, [data-theme="dark"] {
  --bs-bg: #171916;
  --bs-surface: #242722;
  --bs-text: #F2EDE2;
  --bs-muted: #B6B7AA;
  --bs-border: #74796D;
  --bs-accent: #FF6B35;
  --bs-onAccent: #171916;
  --bs-focus: #BED49A;
  --bs-success: #BED49A;
  --bs-danger: #FFB3A9;
  /* Orange is only readable as text on the dark canvas (6.24:1). */
  --bs-accentText: #FF6B35;
  color-scheme: dark;
}
[data-theme="light"] {
  --bs-bg: #F2EDE2;
  --bs-surface: #FFFFFF;
  --bs-text: #171916;
  --bs-muted: #505548;
  --bs-border: #74796D;
  --bs-accent: #FF6B35;
  --bs-onAccent: #171916;
  --bs-focus: #171916;
  --bs-success: #37551E;
  --bs-danger: #8D271F;
  --bs-accentText: #171916; /* never orange text on chalk */
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --bs-motion-fast: 0ms; --bs-motion-normal: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-font-body);
  font-size: var(--bs-fontSize-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p a, .prose a { color: var(--bs-accentText); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--bs-focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--bs-accent); color: var(--bs-onAccent); padding: 10px 16px; border-radius: var(--bs-radius-control); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--bs-layout-max); margin: 0 auto; padding: 0 var(--bs-layout-gutter); }
.mono { font-family: var(--bs-font-mono); }
.label { font-family: var(--bs-font-mono); font-size: var(--bs-fontSize-label); line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-muted); }
.display { font-family: var(--bs-font-display); font-weight: 700; text-transform: uppercase; line-height: .95; letter-spacing: .005em; margin: 0; }
.rule { border: 0; border-top: 1px solid var(--bs-border); margin: 0; }

/* Header */
.site-header { border-bottom: 1px solid var(--bs-border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.logo { display: block; flex: none; }
.logo img { width: 180px; height: auto; }
[data-theme="dark"] .logo .on-light, [data-theme="light"] .logo .on-dark { display: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  font-weight: 600; text-decoration: none; padding: 0 12px; min-height: var(--bs-layout-touch);
  display: inline-flex; align-items: center; border-radius: var(--bs-radius-control);
}
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--bs-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.theme-toggle {
  width: var(--bs-layout-touch); height: var(--bs-layout-touch); display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--bs-text); border: 1px solid var(--bs-border); border-radius: var(--bs-radius-control); cursor: pointer; margin-left: 4px;
}
.theme-toggle svg { width: 20px; height: 20px; }
/* The icon shows the theme you would switch to. */
[data-theme="dark"] .theme-toggle .moon, [data-theme="light"] .theme-toggle .sun { display: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--bs-layout-touch); padding: 0 20px;
  font-family: var(--bs-font-body); font-weight: 600; font-size: 16px; line-height: 1.25; text-decoration: none;
  border-radius: var(--bs-radius-control); border: 1px solid transparent; cursor: pointer;
  transition: box-shadow var(--bs-motion-fast) var(--bs-motion-easing);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--bs-accent); color: var(--bs-onAccent); }
.btn-primary:hover { box-shadow: inset 0 0 0 2px var(--bs-onAccent); }
.btn-secondary { background: transparent; color: var(--bs-text); border-color: var(--bs-border); }
.btn-secondary:hover { border-color: var(--bs-text); }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 6px; }
.input, .select {
  font: inherit; color: var(--bs-text); background: var(--bs-surface);
  border: 1px solid var(--bs-border); border-radius: var(--bs-radius-control);
  min-height: var(--bs-layout-touch); padding: 0 14px; width: 100%;
}
.input::placeholder { color: var(--bs-muted); opacity: 1; }
.select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--bs-muted) 50%), linear-gradient(135deg, var(--bs-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

/* Footer */
.site-footer { border-top: 1px solid var(--bs-border); margin-top: 96px; padding: 48px 0 64px; }
.site-footer .wrap { display: grid; gap: 24px; }
.site-footer .mark { width: 24px; height: auto; }
.site-footer .independent { color: var(--bs-muted); max-width: 60ch; margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer nav a { color: var(--bs-text); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .small { font-family: var(--bs-font-mono); font-size: var(--bs-fontSize-micro); color: var(--bs-muted); }

.logo .mark-only { display: none; width: 28px; }
@media (max-width: 767px) {
  .nav a:not(.btn) { padding: 0 8px; }
  .nav .hide-sm { display: none; }
}
/* The lockup's minimum is 180px; below that, the standalone mark (min 24px)
   stands in rather than a squeezed lockup. */
@media (max-width: 400px) {
  .logo img.lockup { display: none !important; }
  .logo .mark-only { display: block; }
}