: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 "kids" — createTheme("kids") */
  --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: #766CC3;
  --q-action-pressed: #504886;
  --q-action-tint: #E6E5FF;
  --q-danger-tint: #F6E4E2;
  --q-on-action: #FDF8EA;
  --q-field: #FFFDF7;
  --q-surface-action: #FFFDF7;
  --q-danger: #C0453A;

  /* this property's accent ramp — `action` above is the same value */
  --q-accent: #766CC3;
  --q-accent-soft: #E6E5FF;
  --q-accent-border: #CAC7FD;
  --q-accent-deep: #504886;
  --q-accent-on-dark: #A097F2;

  /* 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-kids: #766CC3;
  --q-app-kids-soft: #E6E5FF;
  --q-app-kids-border: #CAC7FD;
  --q-app-kids-deep: #504886;
  --q-app-kids-on-dark: #A097F2;
  --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;
  --q-app-admin: #0089A0;
  --q-app-admin-soft: #C0F2FF;
  --q-app-admin-border: #94DBEC;
  --q-app-admin-deep: #005D6D;
  --q-app-admin-on-dark: #00B8D6;

  /* 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);
}
.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). Directly under the hero lockup that pull makes the
   wordmark and the heading collide. Add clearance and keep the token in the
   calc, so the optical correction still applies. Same fix as queso.site. */
.hero .wordmark + .t-display { margin-top: calc(var(--q-display-mt) + var(--q-space-xxl)); }
.eyebrow { display: block; margin-bottom: var(--q-space-lg); }
.t-display em, .t-title em { font-style: normal; color: var(--q-accent); }

/* =============================================================================
   Pictures (the hero's row and the deck's) and the deck's slides.
   ========================================================================== */
.figures { display: grid; gap: var(--q-space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.figures--hero { margin-block: var(--q-space-xxl) var(--q-space-xl); }
.figures--slide { margin-bottom: var(--q-space-xl); }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 619;
  object-fit: cover;
  border-radius: var(--q-radius-card-large);
  box-shadow: var(--q-shadow-card);
}
.figure figcaption { margin-top: var(--q-space-sm); font-size: var(--q-caption-size); line-height: calc(var(--q-caption-line) / var(--q-caption-size)); color: var(--q-text-muted); }
.figure strong { color: var(--q-text); font-weight: var(--q-weight-body-medium); }
.slide { padding-block: clamp(var(--q-space-xl), 6vw, calc(var(--q-space-xxl) * 1.5)); border-top: 1px solid var(--q-line); }
.slide__body { margin-bottom: var(--q-space-xl); }
.slide__items { margin-bottom: var(--q-space-xl); }
.slide__item .t-label { display: block; margin-bottom: var(--q-space-sm); color: var(--q-action); }
.slide__item .t-subhead { margin-bottom: var(--q-space-sm); }
.slide__list { margin: 0; padding-left: 1.1em; color: var(--q-text-muted); font-size: var(--q-body-size); line-height: calc(var(--q-body-line) / var(--q-body-size)); }
.slide__list li + li { margin-top: var(--q-space-xs); }
.slide__table { overflow: auto; margin-bottom: var(--q-space-xl); border: 1px solid var(--q-line); border-radius: var(--q-radius-card-large); background: var(--q-surface); }
.slide__table table { width: 100%; border-collapse: collapse; font-size: var(--q-caption-size); line-height: calc(var(--q-caption-line) / var(--q-caption-size)); }
.slide__table th, .slide__table td { text-align: left; vertical-align: top; padding: var(--q-space-md) var(--q-space-lg); border-bottom: 1px solid var(--q-line); }
.slide__table thead th { font-size: var(--q-label-size); letter-spacing: var(--q-label-tracking); text-transform: uppercase; color: var(--q-text-faint); }
.slide__table tbody th { font-weight: var(--q-weight-body-medium); color: var(--q-text); }
.slide__table td { color: var(--q-text-muted); }
.slide__table tr:last-child > * { border-bottom: 0; }
.slide__notes { display: grid; gap: var(--q-space-sm); max-width: 48rem; }
@media print {
  .site-header, .site-footer { display: none; }
  .slide { break-before: page; border-top: 0; }
  .hero { break-after: page; }
}
.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 family directory. This is the one block that uses every property's ramp
   rather than this site's, so each row wears its own app's colour.
   ========================================================================== */
.directory { display: grid; gap: var(--q-space-md); }
.directory__item {
  --q-accent: var(--app-base);
  --q-accent-soft: var(--app-soft);
  --q-accent-border: var(--app-border);
  --q-accent-deep: var(--app-deep);
  display: flex;
  align-items: flex-start;
  gap: var(--q-space-lg);
  padding: var(--q-space-lg);
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-card-large);
  box-shadow: var(--q-shadow-card);
  text-decoration: none;
}
.directory__item:hover { border-color: var(--q-accent-border); background: var(--q-accent-soft); }
.directory__body { display: grid; gap: var(--q-space-xs); }

/* =============================================================================
   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); }
  .directory__item { flex-direction: column; gap: var(--q-space-md); }
}

/* --- 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); }