/* QBA Deck — Editorial quantitative aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg: #F5F2EC;
  --bg-alt: #EDE8DE;
  --paper: #FAF8F3;
  --ink: #161515;
  --ink-2: #3A3936;
  --ink-3: #6B6862;
  --rule: #C9C2B2;
  --rule-soft: #DDD6C5;
  --navy: #13243C;
  --navy-2: #1F3A5F;
  --terra: #B85540;
  --terra-soft: #D88770;
  --olive: #4A6B3A;
  --olive-soft: #7A9560;
  --amber: #C28A2C;
  --rose: #D9A8A0;
  --display: 'Newsreader', 'Times New Roman', serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html, body { margin: 0; padding: 0; background: #0a0a0a; color: var(--ink); font-family: var(--sans); }

deck-stage section {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  box-sizing: border-box;
}

* { box-sizing: border-box; }

.slide {
  width: 100%;
  height: 100%;
  padding: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.slide.tight { padding: 80px 100px; }

/* ——————— Chrome ——————— */
.slide-chrome {
  position: absolute;
  top: 44px; left: 100px; right: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.slide-chrome .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terra); display: inline-block; margin-right: 12px; vertical-align: middle; }
.slide-rule { position: absolute; top: 78px; left: 100px; right: 100px; height: 1px; background: var(--rule); }

/* ——————— Type ——————— */
.eyebrow {
  font-family: var(--sans);
  font-size: 24px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 600;
}
.title {
  font-family: var(--display);
  font-size: 88px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.title-md { font-size: 64px; line-height: 1.04; }
.subtitle {
  font-family: var(--display);
  font-size: 36px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.3;
  text-wrap: balance;
}
.body {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
}
.body-sans {
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
}
.label {
  font-family: var(--sans);
  font-size: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ——————— Big number ——————— */
.bignum {
  font-family: var(--display);
  font-size: 240px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 300;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bignum .unit {
  font-family: var(--display);
  font-size: 56px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-3);
  letter-spacing: 0;
}

/* ——————— Tables ——————— */
table.qba {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 22px;
}
table.qba th, table.qba td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
table.qba th {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--ink);
}
table.qba td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table.qba tr.optimal td { background: rgba(74,107,58,0.08); }
table.qba td.bad { color: var(--terra); font-weight: 600; }
table.qba td.good { color: var(--olive); font-weight: 600; }

/* ——————— Buttons / pills ——————— */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.pill.optimal { background: var(--olive); color: white; border-color: var(--olive); }
.pill.danger { background: var(--terra); color: white; border-color: var(--terra); }

/* ——————— Slide rule line ——————— */
.hr-thin { height: 1px; background: var(--rule); border: 0; }

/* ——————— Footer ——————— */
.slide-footer {
  position: absolute;
  bottom: 44px; left: 100px; right: 100px;
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ——————— Section divider ——————— */
.section-slide {
  background: var(--navy) !important;
  color: var(--paper) !important;
}
.section-slide .eyebrow { color: var(--terra-soft); }
.section-slide .title { color: var(--paper); }
.section-slide .subtitle { color: rgba(245,242,236,0.7); }
.section-slide .slide-chrome { color: rgba(245,242,236,0.5); }
.section-slide .slide-rule { background: rgba(245,242,236,0.18); }
.section-slide .slide-footer { color: rgba(245,242,236,0.4); }

/* ——————— Data viz colors ——————— */
.col-A { background: #D9A8A0; }
.col-B { background: #E5D69A; }
.col-C { background: #C9B97A; }
.col-D { background: #7A9560; }
.txt-A { color: #B85540; }
.txt-B { color: #B89530; }
.txt-D { color: #4A6B3A; }

/* ——————— Interactive elements ——————— */
.slider-row {
  display: grid;
  grid-template-columns: 220px 1fr 160px;
  gap: 24px;
  align-items: center;
  font-family: var(--mono);
  font-size: 22px;
}
input[type="range"].qba-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--rule);
  border-radius: 999px;
  outline: none;
}
input[type="range"].qba-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--terra);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--terra);
}
input[type="range"].qba-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--terra);
  cursor: pointer;
  border: 2px solid var(--paper);
}

/* ——————— Diagrams ——————— */
.diagram svg { width: 100%; height: 100%; }
.queue-server {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 14px;
}

.kbd {
  font-family: var(--mono);
  font-size: 14px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-2);
}

/* deck-stage internals */
deck-stage::part(stage) { background: #0a0a0a; }