/*
 * ql-bridge.css: maps the long-form page classes in ql.css (blog, guides,
 * landing pages, legal, pricing) onto the "Itinerary" design's tokens and type.
 *
 * ql.css keeps the layout of those pages; this sheet only changes their
 * palette, typefaces and a few component treatments, so every page reads as
 * one site with the homepage. Loaded after ql.css by SiteLayout.
 */

html,
body {
  background: var(--paper);
}

.ql-root {
  --ql-bg: var(--paper);
  --ql-ink: var(--ink);
  --ql-soft: var(--ink-2);
  --ql-clay: var(--signal-ink);
  --ql-rule: var(--rule);
  --ql-line: var(--rule);
  --ql-mist: var(--paper-2);
  background: var(--paper);
  font-family: var(--sans);
}

.ql-root em,
.ql-root i {
  font-style: italic;
}

/* Display type: the serif, at regular weight, like the homepage. */
.ql-title,
.ql-root h1,
.ql-root .ql-seo-guidance h2,
.ql-root .ql-art-title {
  font-family: var(--serif);
  font-weight: 400 !important;
  letter-spacing: -0.015em;
}

.ql-title {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
}

.ql-title.ql-title-sm {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.04;
}

.ql-title em,
.ql-title i {
  font-style: italic;
  color: var(--signal-ink);
}

.ql-root h2 {
  font-family: var(--serif);
  font-weight: 400 !important;
}

.ql-root h3 {
  font-weight: 600 !important;
}

/* Light (300) body weights were tuned for Inter; Instrument Sans reads best at 400. */
.ql-root p,
.ql-root li,
.ql-root dd,
.ql-lead {
  font-weight: 400 !important;
}

.ql-lead {
  color: var(--ink-2);
}

.ql-eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--signal-ink);
}

@media (hover: hover) and (pointer: fine) {
  .ql-link:hover,
  .ql-root a:hover {
    color: var(--signal-ink);
  }
}

.ql-landing-actions > a {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
}

.ql-landing-primary {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

.ql-landing-secondary {
  border-color: var(--ink) !important;
}

.ql-product-proof img {
  border-color: var(--rule);
  box-shadow: 0 30px 70px -44px rgba(20, 20, 22, 0.4);
}

.ql-seo-byline {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.ql-root :focus-visible {
  outline-color: var(--signal);
}