/* Shared shell for every page on calculators.jbb-ai.com. Matches hub.jbb-ai.com. */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url(fonts/big-shoulders.woff2) format('woff2');
  font-weight: 500 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #f3f4f1;
  --panel: #ffffff;
  --ink: #000000;
  --graphite: #5f625e;
  --line: #d6d8d2;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111311;
    --panel: #1a1d1a;
    --ink: #f3f4f1;
    --graphite: #a2a69e;
    --line: #30342f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Top bar: site mark and breadcrumb. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  padding: clamp(16px, 3.5vh, 36px) var(--gutter) 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .01em;
}
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar .sep, .topbar [aria-current] { color: var(--graphite); }

.page { padding: clamp(20px, 5vh, 56px) var(--gutter) clamp(28px, 6vh, 72px); }

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.005em;
}
.lede { margin: .9rem 0 0; max-width: 62ch; color: var(--graphite); font-size: 1.0625rem; }