/* Purpose-drawn lettering from task-matter-title.html, embedded for offline use. */
@font-face {
  font-family: "Task Matter Title";
  src: url("data:font/ttf;base64,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") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

.task-matter-title {
  --tm-paper: #f5f2eb;
  --tm-ink: #181820;
  --tm-gold: #b8860b;
  --tm-title-gold: #a67909;
  --tm-teal: #2d6a6a;
  position: relative;
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 22rem;
  margin-inline: auto;
  aspect-ratio: 800 / 600;
  isolation: isolate;
}

.task-matter-title__art {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

/* Override the shared hero h1 typography without changing other landing pages. */
.goal-examples-page .task-matter-title__heading {
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: block;
  margin: 0;
  color: var(--tm-ink);
  font-family: "Task Matter Title", Futura, "Century Gothic", "Avenir Next", sans-serif;
  /* Match the 1.1× clear-space mask scale in the inline artwork. */
  font-size: 22cqw;
  font-weight: 500;
  font-synthesis: none;
  /* Gently strengthen the single-weight lettering without changing its metrics. */
  -webkit-text-stroke: 0.012em currentColor;
  line-height: .96;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

.task-matter-title__heading span {
  display: block;
  color: var(--tm-title-gold);
  -webkit-text-stroke-color: currentColor;
}

.task-matter-title__ink { color: var(--tm-ink); }
.task-matter-title__gold { color: var(--tm-gold); }
.task-matter-title__teal { color: var(--tm-teal); }

.task-matter-title__orbit {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.task-matter-title__particle { fill: currentColor; }

.task-matter-title__node {
  fill: currentColor;
  stroke: var(--tm-paper);
  stroke-width: 2;
}

@media (max-width: 640px) {
  .task-matter-title { max-inline-size: 20rem; }
}