/* ==========================================================================
   BTP Aggregator — app styles
   Built only on brand/tokens.css. Dark surface by default. Hard rules:
   no pure white or black, no gradients/shadows/glows, coral leads,
   gold flags an editor's pick and nothing else (no gold appears here yet).
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--btp-bg);
  color: var(--btp-paper);
  font-family: var(--btp-font-text);
  font-weight: var(--btp-weight-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Header: the horizontal lockup ------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--btp-hairline-dark);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.lockup-star {
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--btp-coral);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

.lockup-words {
  display: flex;
  flex-direction: column;
  font-family: var(--btp-font-display);
  font-weight: var(--btp-weight-display);
  line-height: 0.82;
}
.lockup-line1 { font-size: 22px; color: var(--btp-paper); }
.lockup-line2 { font-size: 22px; color: var(--btp-coral); }

.site-place {
  font-family: var(--btp-font-mono);
  font-size: 11px;
  letter-spacing: var(--btp-track-tag);
  color: var(--btp-ondark-muted);
}

/* ---- Page shell -------------------------------------------------------- */
.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px calc(48px + env(safe-area-inset-bottom));
}

/* ---- Hero -------------------------------------------------------------- */
.kicker {
  display: inline-block;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--btp-track-tag);
  color: var(--btp-ondark-muted);
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--btp-font-display);
  font-weight: var(--btp-weight-display);
  font-size: 48px;
  line-height: 0.92;
  margin: 0 0 20px;
  color: var(--btp-paper);
}

.hero-lede {
  font-family: var(--btp-font-text);
  font-weight: var(--btp-weight-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--btp-ondark-muted);
  margin: 0 0 32px;
  max-width: 34em;
}

/* ---- Dateline ---------------------------------------------------------- */
.dateline { margin: 0 0 28px; }

.dateline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--btp-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--btp-track-tag);
  color: var(--btp-ondark-muted);
}

.dateline-rule {
  height: 2px;
  background: var(--btp-coral);
  margin-top: 10px;
}

.hero-note {
  font-family: var(--btp-font-text);
  font-style: italic;
  font-size: 15px;
  color: var(--btp-ondark-faint);
  margin: 0;
}

/* ---- Larger screens ---------------------------------------------------- */
@media (min-width: 700px) {
  .hero-title { font-size: 58px; }
  .app { padding-top: 56px; }
}