:root {
  --paper: #ffffff;
  --grid: #dce7f3;
  --ink: #16233f;
  --ink-soft: #52607a;
  --brand: #d01a4a;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 1.0625rem/1.6 "Atkinson Hyperlegible Next", system-ui, sans-serif;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem 3rem;
  border-left: 2px solid var(--brand);
  min-height: 100vh;
  background: rgba(255, 255, 255, 0.92);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2.5rem;
  font: 700 1.375rem/1 "Bricolage Grotesque", sans-serif;
  color: var(--ink);
  text-decoration: none;
}
.brand img { width: 48px; height: 48px; border-radius: 11px; }
h1 {
  font: 700 clamp(2rem, 6vw, 2.75rem)/1.1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
h2 {
  font: 700 1.375rem/1.2 "Bricolage Grotesque", sans-serif;
  margin: 2.5rem 0 0.75rem;
}
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.25rem; }
p { margin: 0 0 0.75rem; max-width: 60ch; }
.meta { color: var(--ink-soft); margin-bottom: 1.5rem; }
a { color: var(--brand); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.footer { margin-top: 3rem; color: var(--ink-soft); font-size: 0.9375rem; }
@media (max-width: 480px) { main { padding: 1.5rem 1rem 3rem 1.5rem; } }