/* Haiku-machine page. Shared tokens and components live in painted-interface.css and site.css. */
.hm-hero {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.hm-hero h1 {
  font-size: clamp(56px, 7vw, 104px);
}
.hm-tags {
  margin-top: 24px;
}
.hm-stage {
  position: relative;
  padding: 40px 12px 40px 40px;
}
.hm-disc {
  left: 0;
  top: 0;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orchid);
}
.hm-tile {
  right: -8px;
  bottom: 0;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 28px;
  background: var(--sunflower);
  rotate: 10deg;
}
.hm-window {
  box-shadow: 0 8px 0 var(--orchid-deep);
}
.hm-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.hm-story {
  max-width: 44rem;
}
.hm-story > section + section {
  margin-top: clamp(48px, 5vw, 72px);
}
.hm-story > section > h2:first-child {
  margin-top: 0;
}
.hm-story section > * + * {
  margin-top: 16px;
}
.hm-story section > h2 + * {
  margin-top: 20px;
}
.hm-exercise {
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--radius-xl);
}
.hm-exercise p,
.hm-exercise li {
  color: var(--ink);
}
.hm-steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 12px;
}
.hm-steps li {
  position: relative;
  counter-increment: step;
  padding: 10px 0 10px 60px;
  margin: 0;
  min-height: 44px;
}
.hm-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--paper-raised);
  box-shadow: 0 3px 0 var(--orchid-deep);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hm-story .hm-exercise a.slab-link {
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
}
.hm-story ol.hm-steps {
  padding-left: 0;
}
.hm-story .hm-steps li + li {
  margin-top: 0;
}
.hm-notes {
  position: sticky;
  top: 24px;
}
.hm-notes h2 {
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.12;
  margin-bottom: 8px;
}
.hm-notes dl {
  margin: 0;
  width: 100%;
}
.hm-notes dt {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
}
.hm-notes dd {
  margin: 4px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  color: var(--ink-muted);
}
.hm-divider {
  margin-top: 28px;
}
.hm-divider h3 {
  font-size: 24px;
  margin-bottom: 8px;
}
.hm-divider p {
  color: var(--ink-muted);
}
@media (max-width: 860px) {
  .hm-hero,
  .hm-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-stage {
    max-width: 640px;
  }
  .hm-notes {
    position: static;
  }
}
@media (max-width: 560px) {
  .hm-stage {
    padding: 28px 4px 28px 16px;
  }
  .hm-disc {
    width: 84px;
  }
  .hm-tile {
    width: 56px;
    border-radius: 18px;
    right: -2px;
  }
  .hm-exercise {
    border-radius: 40px;
  }
  .hm-steps li {
    padding-left: 56px;
  }
}