:root {
  --wood: #4a2f1b;
  --wood-dark: #2f1d10;
  --wood-edge: #7a5233;
  --parchment: #f3e6c8;
  --parchment-edge: #c9ad7a;
  --ink: #2b1d12;
  --ink-soft: #5c4631;
  --gold: #d9a441;
  --green: #4f7a2e;
  --green-dark: #3a5c21;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: #2a1a0e linear-gradient(180deg, #3b2614 0%, #24160b 100%) fixed;
  color: var(--ink);
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  padding: 0 16px 24px;
}

.wood {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--wood-edge) 0%, var(--wood) 18%, var(--wood-dark) 100%);
  border: 3px solid #1c110a;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: var(--parchment);
}

.emblem { flex: 0 0 auto; }

h1 {
  margin: 0;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 2px 0 #1c110a;
}

.tagline { margin: 2px 0 0; font-style: italic; opacity: 0.9; }

main { max-width: 720px; margin: 22px auto 0; display: grid; gap: 18px; }

.parchment {
  background: var(--parchment) radial-gradient(ellipse at center, #f7edd6 0%, var(--parchment) 70%, #e6d3a9 100%);
  border: 2px solid var(--parchment-edge);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: inset 0 0 24px rgba(120, 85, 40, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
}

h2 { margin: 0 0 10px; font-size: 1.35rem; color: var(--wood); }

.big { font-size: 1.4rem; font-weight: bold; margin: 4px 0 8px; }

.meta, .small, .hash { color: var(--ink-soft); }

.small, .hash { font-size: 0.9rem; }

.hash code { word-break: break-all; font-size: 0.8rem; }

#notes { white-space: pre-line; }

.button {
  display: block;
  margin: 16px 0 10px;
  padding: 16px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff8e6;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  border: 3px solid #23380f;
  border-radius: 10px;
  box-shadow: 0 3px 0 #1a2a0b;
}

.button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a2a0b; }

ol { padding-left: 1.3em; margin: 0 0 8px; }

li { margin-bottom: 6px; }

footer { max-width: 720px; margin: 18px auto 0; text-align: center; color: #c9ad7a; font-size: 0.85rem; }

@media (min-width: 600px) {
  .button { display: inline-block; min-width: 280px; }
}