/* Piecepass pages: the app's "Archiv" design (paper, ink, serif titles, typewriter metadata). */
:root {
  color-scheme: light;
  --paper: #F9F8F2; --ink: #121212; --ink2: #5E5552; --sand: #E2D9D1; --line: #121212;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: "New York", ui-serif, Georgia, "Times New Roman", serif; line-height: 1.55; }
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
a { color: var(--ink); }
.caption {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink2);
}
nav.crumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
nav.crumbs a { text-decoration: none; }
h1 { font-weight: 400; font-size: clamp(32px, 7vw, 48px); line-height: 1.15; margin: 8px 0 12px; }
h2 { font-weight: 400; font-size: 24px; margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
p, li { font-size: 18px; }
code, a { overflow-wrap: anywhere; }
ul { padding-left: 20px; }
.lead { font-size: 20px; }
.box { border: 1px solid var(--line); padding: 20px; margin: 24px 0; background: var(--sand); }
.button {
  display: inline-block; padding: 14px 20px; border: 1px solid var(--line); text-decoration: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; margin: 8px 8px 0 0;
}
footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line); }
footer a { margin-right: 16px; }