:root { --wood: #e2a869; --plank: #dda061; --paper: #fff8ea; --ink: #3b2416; --muted: #6e5240; --chili: #e8475b; --gold: #f6c343; --talavera: #1f4e9c; color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  background: repeating-linear-gradient(180deg, var(--wood) 0 71px, rgba(59, 36, 22, .25) 71px 74px, var(--plank) 74px 145px, rgba(59, 36, 22, .25) 145px 148px);
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
main {
  max-width: 40rem; margin: 32px auto 48px; padding: 32px max(20px, env(safe-area-inset-left)) 40px;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 0 6px 0 var(--ink);
}
@media (max-width: 44rem) { main { margin: 16px; } }
.brand { display: inline-block; font-weight: 900; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--chili); text-decoration: none; }
h1 { font-size: 2.2rem; line-height: 1.15; margin: 8px 0 6px; font-weight: 900; text-wrap: balance; }
h2 { font-size: 1.2rem; margin: 32px 0 4px; color: var(--talavera); font-weight: 800; }
.lede { color: var(--muted); margin-top: 0; }
a { color: var(--talavera); }
.mail { display: inline-block; margin-top: 6px; padding: 10px 18px; background: var(--chili); color: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); font-weight: 800; text-decoration: none; }
dt { font-weight: 800; margin-top: 18px; }
dd { margin: 4px 0 0; color: var(--muted); }
footer { margin-top: 40px; padding-top: 14px; border-top: 2px dashed rgba(59, 36, 22, .3); color: var(--muted); font-size: 14px; }