:root {
  --cream: #efe6d4;
  --ink: #2a1d16;
  --terra: #a44b32;
  --forest: #2c4034;
  --muted: #6a5a4e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Outfit, system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
}
a { color: var(--terra); }

.bookmark {
  position: fixed;
  top: 0;
  right: 32px;
  z-index: 5;
  background: var(--forest);
  color: var(--cream);
  border: 0;
  padding: 18px 10px 28px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}

.book {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px 80px;
}
.colophon {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 40px;
}
h1, h2, .sign, blockquote { font-family: "Cormorant Garamond", serif; }
h1 { font-size: clamp(36px, 6vw, 52px); line-height: 1.15; font-weight: 600; margin-bottom: 20px; }
.drop {
  float: left;
  font-size: 78px;
  line-height: 0.8;
  padding-right: 8px;
  color: var(--terra);
}
.opening { font-size: 18px; color: var(--muted); margin-bottom: 48px; }
h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 48px 0 16px;
  clear: both;
}
h2 span { color: var(--terra); font-style: italic; margin-right: 8px; }
h2 em { font-style: italic; }
.sign { font-style: italic; font-size: 22px; color: var(--terra); margin: 20px 0 0; }
dl { display: grid; gap: 4px 20px; grid-template-columns: 120px 1fr; }
dt { font-weight: 700; color: var(--terra); padding-top: 10px; }
dd { color: var(--muted); padding-top: 10px; border-top: 1px solid rgba(164,75,50,0.2); }
.margin { padding-left: 22px; color: var(--muted); }
.margin li { margin: 12px 0; }
blockquote {
  margin: 24px 0 0;
  padding: 16px 0 16px 20px;
  border-left: 2px solid var(--forest);
  font-size: 22px;
  font-style: italic;
  color: var(--forest);
}
form { display: grid; gap: 14px; margin-top: 12px; }
label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
input, textarea {
  font: inherit;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
}
button[type="submit"] {
  justify-self: start;
  background: var(--terra);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.note { font-size: 13px; color: var(--muted); }
.end { margin-top: 28px; color: var(--muted); font-size: 13px; }

@media (max-width: 600px) {
  dl { grid-template-columns: 1fr; }
  dt { padding-top: 16px; }
  .bookmark { right: 12px; }
}