/* The spec sheet is one US-letter page (816×1056 at 96 dpi), as drawn in Claude Design. */
* { box-sizing: border-box; }
body { margin: 0; background: #d9d7d1; padding: 0 0 40px; }
a { color: inherit; text-decoration: none; }
a:hover { color: #b8261c; }
.bar { max-width: 816px; margin: 0 auto; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; color: #1a1916; }
.bar .actions { display: flex; gap: 8px; align-items: center; }
.bar .actions a { padding: 8px 14px; border: 1px solid #161513; }
.bar .actions a:hover { background: #161513; color: #efece4; }
.bar button { font: inherit; letter-spacing: inherit; background: #161513; color: #efece4; border: 0; padding: 8px 14px; cursor: pointer; }
.bar button:hover { background: #ff3b2f; color: #161513; }
.sheet { width: 816px; height: 1056px; margin: 0 auto; box-shadow: 0 12px 32px rgba(45, 43, 43, .22); }

/* Below letter width the page is scaled down (see the script in the page), not reflowed. */
@media (max-width: 848px) {
  body { padding: 0 16px 24px; }
  .bar { padding: 12px 0; }
}

@page { size: letter; margin: 0; }
@media print {
  body { background: none; padding: 0; }
  .bar { display: none; }
  .sheet { box-shadow: none; zoom: 1; }
}