/* ---------- palette ----------
   night   #140a0d   oxblood #3a1119   garnet #8a2434
   gold    #c9a45c   bone    #efe3d0
------------------------------- */
 
body {
  margin: 0;
  padding: 28px 14px;
  min-height: 100vh;
  color: #efe3d0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  background-color: #140a0d;
  background-image:
    radial-gradient(ellipse at 50% 0%, #4a1520 0%, transparent 60%),
    radial-gradient(circle, rgba(201,164,92,0.18) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(201,164,92,0.10) 1.5px, transparent 2px);
  background-size: auto, 34px 34px, 34px 34px;
  background-position: 0 0, 0 0, 17px 17px;
}
 
/* ---------- the big ornate frame ---------- */
.frame {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 28px 28px;
  background: rgba(30, 10, 15, 0.88);
  border: 4px double #c9a45c;
  border-radius: 220px 220px 14px 14px;
  box-shadow:
    0 0 0 8px #140a0d,
    0 0 0 10px #8a2434,
    0 0 40px rgba(138, 36, 52, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
}
 
/* ---------- type ---------- */
h1 {
  font-family: "UnifrakturCook", serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.1;
  margin: 6px 0;
  color: #e6c987;
  text-shadow: 0 0 18px rgba(201, 164, 92, 0.45);
}
h2 {
  font-family: "UnifrakturCook", serif;
  font-weight: 700;
  font-size: 2rem;
  margin: 10px 0;
  color: #e6c987;
}
.flourish { color: #c9a45c; font-size: 1.5rem; margin: 0; letter-spacing: 0.3em; }
.sub { color: #d9b8b8; margin: 0 0 18px; }
.hint { color: #d9b8b8; margin-top: 0; }
.sign { color: #e6c987; text-align: right; }
 
section p { max-width: 34em; margin-left: auto; margin-right: auto; text-align: left; }
 
/* ---------- portrait of him ---------- */
.cameo-wrap { display: flex; justify-content: center; margin: 10px 0 6px; }
.cameo, .cameo-empty {
  width: 190px;
  height: 250px;
  border-radius: 50%;
  border: 5px double #c9a45c;
  box-shadow: 0 0 0 6px #3a1119, 0 0 0 8px #8a2434, 0 0 24px rgba(201, 164, 92, 0.35);
  object-fit: cover;
}
.cameo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #5a1a26, #2a0c13);
  color: #c9a45c;
  font-style: italic;
  font-size: 1rem;
  padding: 20px;
  box-sizing: border-box;
}
 
/* ---------- nav ---------- */
nav { margin: 22px 0 6px; }
nav a {
  color: #efe3d0;
  text-decoration: none;
  font-style: italic;
  padding: 2px 8px;
  border-bottom: 1px solid #8a2434;
}
nav a:hover, nav a:focus-visible { color: #e6c987; border-bottom-color: #c9a45c; outline: none; }
nav span { color: #c9a45c; margin: 0 4px; }
 
/* ---------- ornamental divider ---------- */
hr.orn {
  border: 0;
  height: 22px;
  margin: 26px 0;
  background:
    linear-gradient(90deg, transparent, #c9a45c 20%, #c9a45c 40%, transparent 46%) left center / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 54%, #c9a45c 60%, #c9a45c 80%, transparent) left center / 100% 1px no-repeat;
  position: relative;
}
hr.orn::after {
  content: "✠";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #c9a45c;
  font-size: 1.3rem;
  padding: 0 10px;
  background: #1e0a0f;
}
 
/* ---------- drawings gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
figure { margin: 0; }
figure img, .empty {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-sizing: border-box;
  border: 6px double #c9a45c;
  outline: 3px solid #3a1119;
  outline-offset: 0;
  box-shadow: 0 0 0 6px #140a0d, 0 6px 18px rgba(0, 0, 0, 0.6);
}
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a0c13;
  color: #c9a45c;
  font-style: italic;
}
figcaption { margin-top: 12px; font-style: italic; color: #d9b8b8; font-size: 1rem; }
 
/* ---------- notes ---------- */
.note {
  max-width: 34em;
  margin: 14px auto;
  padding: 10px 18px;
  text-align: left;
  border-left: 3px solid #8a2434;
  background: rgba(138, 36, 52, 0.15);
}
.note p { margin: 4px 0; }
.note i { color: #e6c987; }
 
footer { margin-top: 30px; color: #d9b8b8; }
 
/* ---------- small screens ---------- */
@media (max-width: 560px) {
  .frame { border-radius: 120px 120px 12px 12px; padding: 32px 16px 22px; }
  h1 { font-size: 2.3rem; }
  .gallery { gap: 14px; }
}