/* Shared styles for public pages (track record, calculator). Matches the landing page. */
:root {
  --char: #14110F; --char-2: #1E1916; --char-3: #29221E; --line: #372D27;
  --white: #FFFFFF; --ash: #B5A89E; --ember: #FF7A2F; --ember-deep: #3A2014; --green: #2FD27A; --red: #FF5C5C;
  --soft-text: #E6DDD6; --btn-bg: #FF7A2F; --btn-hover: #FF904F; color-scheme: dark;
  --display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
:root[data-theme="light"] {
  --char: #FAF7F4; --char-2: #FFFFFF; --char-3: #F3ECE6; --line: #E6DBD2;
  --white: #1C1612; --ash: #6B5D54; --ember: #D9561A; --ember-deep: #FFE6D6; --green: #15803D; --red: #DC2626;
  --soft-text: #3D322B; --btn-bg: #FF7A2F; --btn-hover: #FF904F;
  color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) {
  --char: #FAF7F4; --char-2: #FFFFFF; --char-3: #F3ECE6; --line: #E6DBD2;
  --white: #1C1612; --ash: #6B5D54; --ember: #D9561A; --ember-deep: #FFE6D6; --green: #15803D; --red: #DC2626;
  --soft-text: #3D322B; --btn-bg: #FF7A2F; --btn-hover: #FF904F;
  color-scheme: light; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--char); color: var(--white); font: 17px/1.6 var(--body); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.nav { display: flex; align-items: center; gap: 22px; padding: 20px 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 800 20px/1 var(--display); text-decoration: none; }
.brand b { color: var(--ember); font-weight: 800; }
.grow { flex: 1; }
.nav a.link { text-decoration: none; color: var(--ash); font-size: 15px; }
.nav a.link:hover, .nav a.link[aria-current] { color: var(--white); }
@media (max-width: 640px) { .nav a.link.hide-sm { display: none; } }
.btn { display: inline-block; text-decoration: none; font: 600 16px/1 var(--body); padding: 15px 22px; border-radius: 12px; background: var(--btn-bg); color: #1A0E07; border: 0; cursor: pointer; }
.btn:hover { background: var(--btn-hover); }
.btn.sm { padding: 11px 16px; font-size: 15px; }
h1 { font: 800 clamp(36px, 5.6vw, 64px)/1 var(--display); letter-spacing: -.035em; margin: 32px 0 16px; max-width: 16em; }
h2 { font: 800 clamp(26px, 3.4vw, 36px)/1.1 var(--display); letter-spacing: -.025em; margin: 0 0 14px; }
.lede { font-size: 19px; color: var(--ash); max-width: 36em; margin: 0 0 32px; }
section { padding: 56px 0; border-top: 1px solid var(--line); }
.note { background: var(--char-2); border: 1px dashed var(--line); border-radius: 14px; padding: 12px 16px; color: var(--ash); font-size: 15px; margin: 0 0 28px; }
footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--ash); font-size: 14px; }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; color: var(--ash); }
footer a:hover { color: var(--white); }
.muted { color: var(--ash); }
.num { font-variant-numeric: tabular-nums; }

.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px;
  background: transparent; border: 1px solid var(--line); color: var(--ash); cursor: pointer; }
.theme-toggle:hover { color: var(--white); }