/* TechMailing Design System — shared foundation */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.tm-body {
  margin: 0;
  background: var(--tm-color-paper);
  color: var(--tm-color-ink);
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-body);
  line-height: var(--tm-leading-body);
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.tm-container { width: min(var(--tm-container-width), calc(100% - 80px)); margin: 0 auto; }
.tm-mono { font-family: var(--tm-font-mono); letter-spacing: .04em; text-transform: uppercase; font-size: var(--tm-text-label); }
.tm-overline { color: var(--tm-color-amber); margin: 0 0 var(--tm-space-4); }
.tm-button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 14px 19px; font-size: var(--tm-text-small); font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.tm-button:hover { transform: translateY(-2px); }
.tm-button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--tm-focus-ring); }
.tm-button-primary { background: var(--tm-color-teal); color: var(--tm-color-white); }
.tm-button-primary:hover { background: #105b56; }
.tm-button-outline { border: 1px solid #6b8794; color: var(--tm-color-white); }
.tm-button-outline:hover { background: #1a4054; }
.tm-text-link { border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: var(--tm-text-small); font-weight: 700; }
.tm-text-link span { color: var(--tm-color-amber); margin-left: var(--tm-space-1); }
.tm-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 700; letter-spacing: -.05em; }
.tm-brand > span:last-child > span { color: var(--tm-color-teal-bright); }
.tm-brand-mark { display: grid; grid-template-columns: repeat(2, 8px); grid-auto-rows: 8px; gap: 3px; transform: rotate(45deg); }
.tm-brand-mark i { display: block; background: var(--tm-color-teal); }
.tm-brand-mark i:nth-child(2), .tm-brand-mark i:nth-child(3) { background: var(--tm-color-amber); }
@media (max-width: 800px) { .tm-container { width: min(600px, calc(100% - 40px)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tm-button { transition: none; } }