:root {
  /* palette */
  --q-paper-50: #FDF8EA;
  --q-paper-75: #F8F1E0;
  --q-paper-100: #F8F0D9;
  --q-paper-200: #F2E6C4;
  --q-paper-300: #E7D6A6;
  --q-ink-900: #262219;
  --q-ink-600: #5C5648;
  --q-ink-400: #746D5E;
  --q-ink-400-on-dark: #B6AE9B;
  --q-ink-300: #999280;
  --q-blue-500: #2A5CD0;
  --q-blue-600: #1F47A8;
  --q-blue-50: #E3EAFA;
  --q-field: #FFFDF7;
  --q-danger: #C0453A;
  --q-danger-tint: #F6E4E2;

  /* semantic roles for "site" — createTheme("site") */
  --q-bg: #F8F0D9;
  --q-surface: #FDF8EA;
  --q-surface-sunken: #F2E6C4;
  --q-surface-inset: #F8F1E0;
  --q-line: #E7D6A6;
  --q-text: #262219;
  --q-text-muted: #5C5648;
  --q-text-faint: #746D5E;
  --q-placeholder: #999280;
  --q-text-faint-on-dark: #B6AE9B;
  --q-action: #A17000;
  --q-action-pressed: #6E4B00;
  --q-action-tint: #FDE4BF;
  --q-danger-tint: #F6E4E2;
  --q-on-action: #FDF8EA;
  --q-field: #FFFDF7;
  --q-danger: #C0453A;

  /* this property's accent ramp — `action` above is the same value */
  --q-accent: #A17000;
  --q-accent-soft: #FDE4BF;
  --q-accent-border: #E9C896;
  --q-accent-deep: #6E4B00;
  --q-accent-on-dark: #D19936;

  /* every property's ramp — for the family directory and cross-links */
  --q-app-chat: #4E78C7;
  --q-app-chat-soft: #DCE9FF;
  --q-app-chat-border: #B4CFFF;
  --q-app-chat-deep: #335189;
  --q-app-chat-on-dark: #77A4F6;
  --q-app-camp: #00906D;
  --q-app-camp-soft: #C5F4E1;
  --q-app-camp-border: #9DDEC4;
  --q-app-camp-deep: #006249;
  --q-app-camp-on-dark: #37BE95;
  --q-app-land: #748410;
  --q-app-land-soft: #E4EEC4;
  --q-app-land-border: #C9D59D;
  --q-app-land-deep: #4E5905;
  --q-app-land-on-dark: #9EAF48;
  --q-app-quest: #B85C37;
  --q-app-quest-soft: #FFE0D5;
  --q-app-quest-border: #F9BEA8;
  --q-app-quest-deep: #7F3D22;
  --q-app-quest-on-dark: #E88761;
  --q-app-bet: #9461B1;
  --q-app-bet-soft: #F2E0FF;
  --q-app-bet-border: #DEC0F2;
  --q-app-bet-deep: #65407A;
  --q-app-bet-on-dark: #C08CDF;
  --q-app-care: #B4567E;
  --q-app-care-soft: #FFDDE9;
  --q-app-care-border: #F6BAD0;
  --q-app-care-deep: #7C3855;
  --q-app-care-on-dark: #E380A9;
  --q-app-site: #A17000;
  --q-app-site-soft: #FDE4BF;
  --q-app-site-border: #E9C896;
  --q-app-site-deep: #6E4B00;
  --q-app-site-on-dark: #D19936;

  /* type */
  --q-font-dosis: "Dosis", system-ui, -apple-system, Segoe UI, sans-serif;
  --q-font-body: "Work Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --q-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --q-weight-dosis-light: 300;
  --q-weight-dosis-semibold: 600;
  --q-weight-dosis-bold: 700;
  --q-weight-body: 400;
  --q-weight-body-medium: 500;
  --q-weight-mono: 400;
  --q-display-family: var(--q-font-dosis);
  --q-display-weight: 700;
  --q-display-size: 72px;
  --q-display-line: 71px;
  --q-display-tracking: -0.02em;
  --q-display-mt: -0.2778em;
  --q-display-mb: 0.2778em;
  --q-title-family: var(--q-font-dosis);
  --q-title-weight: 600;
  --q-title-size: 32px;
  --q-title-line: 37px;
  --q-title-mb: 0.375em;
  --q-subhead-family: var(--q-font-dosis);
  --q-subhead-weight: 600;
  --q-subhead-size: 20px;
  --q-subhead-line: 25px;
  --q-subhead-mt: -0.4em;
  --q-subhead-mb: 0.4em;
  --q-body-family: var(--q-font-body);
  --q-body-weight: 400;
  --q-body-size: 16px;
  --q-body-line: 26px;
  --q-caption-family: var(--q-font-body);
  --q-caption-weight: 400;
  --q-caption-size: 13px;
  --q-caption-line: 20px;
  --q-label-family: var(--q-font-mono);
  --q-label-weight: 400;
  --q-label-size: 11px;
  --q-label-tracking: 0.14em;
  --q-field-label-family: var(--q-font-dosis);
  --q-field-label-weight: 600;
  --q-field-label-size: 15px;

  /* space */
  --q-space-xs: 4px;
  --q-space-sm: 8px;
  --q-space-md: 12px;
  --q-space-lg: 16px;
  --q-space-xl: 24px;
  --q-space-xxl: 32px;

  /* radius */
  --q-radius-pill: 999px;
  --q-radius-card: 12px;
  --q-radius-card-large: 14px;
  --q-radius-row: 13px;
  --q-radius-input: 12px;
  --q-radius-tile: 11px;

  /* the property mark — ratios, so the lockup scales with its type size */
  --q-mark-tile: 0.8;
  --q-mark-glyph: 0.8;
  --q-mark-corner: 0.12;
  --q-mark-nudge: 0.24;
  --q-mark-android-glyph: 0.58;

  /* buttons */
  --q-button-sm-font-size: 14px;
  --q-button-sm-padding-vertical: 8px;
  --q-button-sm-padding-horizontal: 18px;
  --q-button-sm-min-height: 44px;
  --q-button-md-font-size: 17px;
  --q-button-md-padding-vertical: 12px;
  --q-button-md-padding-horizontal: 26px;
  --q-button-md-min-height: 44px;
  --q-button-lg-font-size: 20px;
  --q-button-lg-padding-vertical: 16px;
  --q-button-lg-padding-horizontal: 34px;
  --q-button-lg-min-height: 56px;

  /* the one shadow in the system */
  --q-shadow-card: 0 1px 2px rgba(38, 34, 25, 0.04);

  /* layout — a custom property cannot be used in a media query, so the */
  /* breakpoint is also interpolated into one; see styles.mjs. */
  --q-breakpoint-compact: 480px;
}

/* =============================================================================
   Reset — the short kind. Nothing here is opinionated about how things look.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }

/* The document scrolls. Never set overflow on one axis alone: CSS forbids one
   axis being visible while the other is clipped, so the visible one computes
   to auto, html and body become scroll containers, and scrolling stops
   propagating to the viewport. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   Ground
   ========================================================================== */
body {
  background: var(--q-bg);
  color: var(--q-text);
  font-family: var(--q-body-family);
  font-weight: var(--q-body-weight);
  font-size: var(--q-body-size);
  line-height: calc(var(--q-body-line) / var(--q-body-size));
  /* Warmth comes from the paper, not from decoration. */
  -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   Type — the scale, verbatim from `type` in @queso-site/design.

   The Dosis styles carry a negative margin-top. Dosis has a tall ascender box,
   so its glyphs sit noticeably below the top of their line box — around 8px at
   subhead size — and wherever one is first in a container that reads as extra
   padding nobody asked for. line-height cannot fix it: it pads symmetrically
   and the gap is asymmetric. `title` is the exception and has none, because a
   page heading has nothing beside it to line up with.
   ========================================================================== */
.t-display, .t-title, .t-subhead {
  font-family: var(--q-font-dosis);
  text-wrap: balance;
}
.t-display {
  font-weight: var(--q-display-weight);
  font-size: clamp(calc(var(--q-title-size) * 1.25), 8vw, var(--q-display-size));
  line-height: calc(var(--q-display-line) / var(--q-display-size));
  letter-spacing: var(--q-display-tracking);
  margin-top: var(--q-display-mt);
  margin-bottom: var(--q-display-mb);
}
.t-title {
  font-weight: var(--q-title-weight);
  font-size: var(--q-title-size);
  line-height: calc(var(--q-title-line) / var(--q-title-size));
  margin-bottom: var(--q-title-mb);
}
.t-subhead {
  font-weight: var(--q-subhead-weight);
  font-size: var(--q-subhead-size);
  line-height: calc(var(--q-subhead-line) / var(--q-subhead-size));
  margin-top: var(--q-subhead-mt);
  margin-bottom: var(--q-subhead-mb);
}
.t-body { font-size: var(--q-body-size); line-height: calc(var(--q-body-line) / var(--q-body-size)); }
.t-caption {
  font-size: var(--q-caption-size);
  line-height: calc(var(--q-caption-line) / var(--q-caption-size));
  color: var(--q-text-faint);
}
/* Mono for labels and codes, never for prose. */
.t-label {
  font-family: var(--q-label-family);
  font-weight: var(--q-label-weight);
  font-size: var(--q-label-size);
  letter-spacing: var(--q-label-tracking);
  text-transform: uppercase;
  color: var(--q-text-faint);
}
.t-muted { color: var(--q-text-muted); }

/* =============================================================================
   Layout
   ========================================================================== */
.page { display: flow-root; }
.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(var(--q-space-lg), 4vw, var(--q-space-xxl));
}
.section { padding-block: clamp(var(--q-space-xxl), 7vw, calc(var(--q-space-xxl) * 2.5)); }
.section + .section { border-top: 1px solid var(--q-line); }
.section__head { margin-bottom: var(--q-space-xl); }
.section__head > .t-label { display: block; margin-bottom: var(--q-space-sm); }
/* Prose is capped at a reading column even when the page is not. A paragraph
   the full width of a 1200px page is a paragraph nobody finishes. */
.prose { max-width: 40rem; }
.prose > * + * { margin-top: var(--q-space-lg); }
.prose a { color: var(--q-action); text-underline-offset: 0.2em; }
.prose a:hover { color: var(--q-action-pressed); }

/* =============================================================================
   Header and footer
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--q-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--q-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-space-lg);
  min-height: var(--q-button-md-min-height);
  padding-block: var(--q-space-md);
}
.nav { display: flex; align-items: center; gap: var(--q-space-lg); flex-wrap: wrap; }
.nav a {
  font-family: var(--q-font-dosis);
  font-weight: var(--q-weight-dosis-semibold);
  font-size: var(--q-field-label-size);
  color: var(--q-text-muted);
  text-decoration: none;
  padding-block: var(--q-space-xs);
}
.nav a:hover { color: var(--q-accent); }

.site-footer {
  background: var(--q-ink-900);
  color: var(--q-text-faint-on-dark);
  padding-block: clamp(var(--q-space-xxl), 6vw, calc(var(--q-space-xxl) * 2));
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-xl);
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer a { color: var(--q-paper-100); text-decoration: none; }
.site-footer a:hover { color: var(--q-accent-on-dark); text-decoration: underline; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--q-space-lg); }
.site-footer__meta { margin-top: var(--q-space-md); }

/* =============================================================================
   Buttons — pill is for chips and badges, NOT for actions. Cards and actions
   share --q-radius-card so a button on a card reads as part of the same
   surface rather than a sticker on top of it.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--q-space-sm);
  font-family: var(--q-font-dosis);
  font-weight: var(--q-weight-dosis-semibold);
  font-size: var(--q-button-md-font-size);
  min-height: var(--q-button-md-min-height);
  padding: var(--q-button-md-padding-vertical) var(--q-button-md-padding-horizontal);
  border: 1px solid transparent;
  border-radius: var(--q-radius-card);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
/* The accent is the verb: this is the only colour that means "you can do
   something here". Known trade-off, taken deliberately in the design package:
   --q-on-action on --q-action measures 3.9-4.4, under WCAG AA for normal text.
   The lever is the label SIZE, not the hue — which is why .btn is 17px and
   .btn--lg is 20px, both large-text sizes at this weight. */
.btn--primary { background: var(--q-action); color: var(--q-on-action); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--q-action-pressed); }
.btn--secondary {
  background: transparent;
  color: var(--q-action);
  border-color: var(--q-accent-border);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  background: var(--q-action-tint);
  color: var(--q-action-pressed);
}
/* An action with nowhere to go. Dashed and faint rather than a greyed solid,
   so it reads as "not yet" rather than "broken" — and it is a <span>, not a
   disabled <button>, because there is no control here to disable: nothing on
   this site runs after the page loads. Not focusable, so it costs the keyboard
   user nothing to skip. */
.btn--disabled {
  background: transparent;
  color: var(--q-text-faint);
  border-color: var(--q-line);
  border-style: dashed;
  cursor: default;
}

.btn--lg {
  font-size: var(--q-button-lg-font-size);
  min-height: var(--q-button-lg-min-height);
  padding: var(--q-button-lg-padding-vertical) var(--q-button-lg-padding-horizontal);
}
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--q-action);
  outline-offset: 2px;
  border-radius: var(--q-radius-input);
}

/* =============================================================================
   Cards and grids
   ========================================================================== */
.grid { display: grid; gap: var(--q-space-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.card {
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-card-large);
  box-shadow: var(--q-shadow-card);
  padding: var(--q-space-xl);
}
.card__inset {
  background: var(--q-surface-inset);
  border-radius: var(--q-radius-card);
  padding: var(--q-space-md) var(--q-space-lg);
  margin-top: var(--q-space-lg);
}
a.card { display: block; text-decoration: none; }
a.card:hover { border-color: var(--q-accent-border); }

/* The property tile, at card scale. Same geometry as the wordmark's — the
   ratios come from `mark`, so the tile in a card, the tile in the lockup and
   the app icon on a home screen are one shape at three sizes. */
.tile {
  --tile-size: calc(var(--q-title-size) * var(--q-mark-tile));
  flex: none;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: calc(var(--tile-size) * var(--q-mark-corner));
  background: var(--q-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tile svg {
  width: calc(var(--tile-size) * var(--q-mark-glyph));
  height: calc(var(--tile-size) * var(--q-mark-glyph));
  fill: var(--q-paper-50);
  display: block;
}

/* =============================================================================
   Hero, and the three pieces it shares with every other block that has a
   heading: an eyebrow label, a lede paragraph and a row of actions.
   ========================================================================== */
.hero { padding-block: clamp(var(--q-space-xxl), 9vw, calc(var(--q-space-xxl) * 3)); }
/* .t-display carries a NEGATIVE margin-top from the type scale — Dosis sits
   low in its line box, so the token pulls the heading up to sit optically
   right. Directly under the hero lockup that pull closes the gap to nothing
   and the two collide. Add clearance without discarding the compensation:
   keep the token in the calc so the optical correction still applies. */
.hero .t-display { margin-top: calc(var(--q-display-mt) + var(--q-space-xxl) * 1.5); }
/* The gap under the hero was two paddings stacked: the hero's own bottom
   (up to 96px) plus the next section's top (up to 80px). The hero already
   ends in plenty of space, so the section that follows it does not need a
   second helping — this halves the gap without touching either scale, and
   without shrinking the hero's TOP padding, which is what holds the page off
   the top of the window now that there is no header. */
.hero + .section { padding-top: 0; }
.eyebrow { display: block; margin-bottom: var(--q-space-lg); }
.lede {
  max-width: 34em;
  font-size: clamp(var(--q-body-size), 2.2vw, var(--q-subhead-size));
  line-height: 1.55;
  color: var(--q-text-muted);
  margin-top: var(--q-space-lg);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-md);
  margin-top: var(--q-space-xl);
}

/* =============================================================================
   Steps
   ========================================================================== */
.steps { counter-reset: step; display: grid; gap: var(--q-space-lg); }
.steps > li { counter-increment: step; display: flex; gap: var(--q-space-lg); }
.steps > li::before {
  content: counter(step);
  flex: none;
  width: var(--q-space-xxl);
  height: var(--q-space-xxl);
  display: grid;
  place-items: center;
  border-radius: var(--q-radius-pill);
  background: var(--q-accent-soft);
  color: var(--q-accent-deep);
  font-family: var(--q-label-family);
  font-size: var(--q-caption-size);
}

/* =============================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--q-space-sm); }
.faq details {
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-card);
  padding: var(--q-space-lg) var(--q-space-xl);
}
.faq summary {
  cursor: pointer;
  font-family: var(--q-font-dosis);
  font-weight: var(--q-weight-dosis-semibold);
  font-size: var(--q-subhead-size);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--q-accent); }
.faq details[open] summary::after { content: " \2013"; }
.faq details[open] summary { margin-bottom: var(--q-space-md); }

/* =============================================================================
   The app cards. The one block that uses every property's ramp rather than
   this site's, so each card wears its own app's colour.
   ========================================================================== */
.app-grid { display: grid; gap: var(--q-space-lg); grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .app-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 66rem) {
  .app-grid { grid-template-columns: repeat(3, 1fr); }
}

.app-card {
  /* The card's own app colour, for the mark AND for the buttons. Remapping
     the action role as well as the accent is deliberate: on this page the
     verb belongs to the app on offer. */
  --q-accent: var(--app-base);
  --q-accent-soft: var(--app-soft);
  --q-accent-border: var(--app-border);
  --q-accent-deep: var(--app-deep);
  --q-action: var(--app-base);
  --q-action-pressed: var(--app-deep);
  --q-action-tint: var(--app-soft);

  display: flex;
  flex-direction: column;
  gap: var(--q-space-md);
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-card-large);
  box-shadow: var(--q-shadow-card);
  padding: var(--q-space-xl);
}
/* No :hover and no cursor change anywhere on the card. It is an <article>, not
   a link — the buttons are the only things you can press. */
.app-card__body { color: var(--q-text-muted); margin: 0; }
/* margin-top:auto pins the actions to the bottom, so the buttons line up
   across a row of cards whose descriptions are different lengths. */
.app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-sm);
  margin-top: auto;
  padding-top: var(--q-space-sm);
}

/* =============================================================================
   Call to action
   ========================================================================== */
.cta {
  background: var(--q-accent-soft);
  border: 1px solid var(--q-accent-border);
  border-radius: var(--q-radius-card-large);
  padding: clamp(var(--q-space-xl), 5vw, calc(var(--q-space-xxl) * 1.5));
  text-align: center;
}
.cta .lede { margin-inline: auto; }
.cta .actions { justify-content: center; }

/* Skip link — the first thing in the tab order, invisible until focused. */
.skip {
  position: absolute;
  left: var(--q-space-md);
  top: calc(var(--q-space-md) * -10);
  z-index: 20;
  background: var(--q-surface);
  border: 1px solid var(--q-accent-border);
  border-radius: var(--q-radius-input);
  padding: var(--q-space-sm) var(--q-space-lg);
  transition: top 120ms ease;
}
.skip:focus { top: var(--q-space-md); }

/* =============================================================================
   Compact. `breakpoint.compact` is 480 rather than a phone's 375, because the
   squeeze starts well before the smallest phone — a narrow window on a laptop
   hits it too. A layout should answer to the space it has, not to the kind of
   device it guesses it is on.

   A custom property cannot be used in a media query, so this number is
   interpolated from the token at build time. --q-breakpoint-compact carries
   the same value for anything that can read it.
   ========================================================================== */
@media (max-width: 480px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--q-space-sm); }
  .nav { gap: var(--q-space-md); }
  .actions .btn { width: 100%; }
  .card { padding: var(--q-space-lg); }
  .app-card { padding: var(--q-space-lg); }
}

/* --- the lockup ------------------------------------------------------------
   Ratios from `mark` in @queso-site/design. Do not retype them here; they are
   also what the favicon and the app icons are drawn from, and the last time
   they lived in two places they drifted the first time the corner moved. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-size: var(--q-title-size);
  /* -0.01em at display sizes. The token gives -0.3pt at the 32px it was set
     at; as an em it stays right at every size. */
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.wordmark--small { gap: 0.3em; }
.wordmark__tile {
  flex: none;
  width: calc(var(--q-mark-tile) * 1em);
  height: calc(var(--q-mark-tile) * 1em);
  /* A ratio, not --q-radius-card: the tile renders at 14-35px, so a flat 12px
     would round it into a circle. */
  border-radius: calc(var(--q-mark-tile) * var(--q-mark-corner) * 1em);
  background: var(--q-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  /* A flex row centres the tile on Dosis's tall line box, which sits well
     above the x-height band. align-items: center means the offset is part of
     the centred box, so the visible shift is about half of it. */
  margin-top: calc(var(--q-mark-nudge) * 1em);
}
.wordmark__glyph {
  width: calc(var(--q-mark-tile) * var(--q-mark-glyph) * 1em);
  height: calc(var(--q-mark-tile) * var(--q-mark-glyph) * 1em);
  display: block;
  /* paper-50, not pure white: the tile sits on paper, and a colder mark would
     read as borrowed from somewhere else. */
  fill: var(--q-paper-50);
}
.wordmark__word { font-family: var(--q-font-dosis); }
.wordmark__queso {
  font-weight: var(--q-weight-dosis-light);
  color: var(--q-text);
}
.wordmark__tld {
  font-weight: var(--q-weight-dosis-semibold);
  color: var(--q-accent);
}
/* On ink the whole lockup lifts: paper for the word, the ramp's onDark step
   for the accent, so the TLD reads warm rather than muddy. */
.wordmark--on-ink .wordmark__queso { color: var(--q-paper-100); }
.wordmark--on-ink .wordmark__tld { color: var(--q-accent-on-dark); }
.wordmark--on-ink .wordmark__tile { background: var(--q-accent-on-dark); }