.mt-12 { margin-top: 3rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }

.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }

.min-h-\[22rem\] { min-height: 22rem; }

.text-\[17px\] { font-size: 17px; }
.text-\[clamp\(1\.9rem\,4\.4vw\,3\.6rem\)\] { font-size: clamp(1.9rem, 4.4vw, 3.6rem); }
.text-\[clamp\(2\.2rem\,6vw\,4\.4rem\)\]    { font-size: clamp(2.2rem, 6vw, 4.4rem); }

@media (min-width: 640px) {
  .sm\:p-12 { padding: 3rem; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
}

@media (min-width: 1024px) {
  .lg\:p-9   { padding: 2.25rem; }
  .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:min-h-\[30rem\] { min-height: 30rem; }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_18rem\] { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.nav-toggle {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: transparent;
}
@media (max-width: 767px) {
  .nav-toggle { display: flex; }
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--chalk);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-mobile { overflow: hidden; }
.nav-mobile a + a { border-top: 1px solid var(--line2); }

.field {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--chalk);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .18s, background .18s;
}
.field:hover { border-color: rgba(255, 255, 255, .22); }
.field:focus { outline: none; border-color: var(--yellow); background: var(--ink); }
.field::placeholder { color: var(--muted); }
textarea.field { resize: vertical; min-height: 7rem; line-height: 1.6; }

.prose-km { font-size: 16px; line-height: 1.75; color: rgba(241, 238, 231, .86); }
.prose-km > * + * { margin-top: 1.35em; }
.prose-km h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--chalk);
  margin-top: 2.2em;
}
.prose-km h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--chalk);
  margin-top: 1.9em;
}
.prose-km a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.prose-km ul, .prose-km ol { padding-left: 1.35em; }
.prose-km ul { list-style: disc; }
.prose-km ol { list-style: decimal; }
.prose-km li + li { margin-top: .5em; }
.prose-km blockquote {
  padding: 2px 0 2px 1.25em;
  border-left: 3px solid var(--yellow);
  color: var(--chalk);
  font-size: 1.05em;
}
.prose-km img { border-radius: var(--r-sm); margin-inline: auto; }
.prose-km code {
  font-family: var(--mono);
  font-size: .88em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--panel2);
}
.prose-km hr { border-top: 1px solid var(--line2); margin: 2.4em 0; }
.prose-km table { width: 100%; font-size: .92em; }
.prose-km th, .prose-km td { padding: 10px 12px; border-bottom: 1px solid var(--line2); text-align: left; }
.prose-km th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }