@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Variable.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Italic-Variable.ttf") format("truetype"); font-style: italic; font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/fonts/IMFellEnglish-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --ink: #2e1a0c; --umber: #6e4e2c; --brass: #b8862e; --gilt: #f3da97;
  --parchment: #f3e9d2; --paper: #fbf4e4; --oxblood: #8e1e18; --walnut: #2a1309;
  --text: var(--ink); --muted: var(--umber); --card: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root { --text: #f3e9d2; --muted: #d9c7a3; --card: #2b1a0e; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "EB Garamond", Georgia, serif; font-size: 1.15rem; line-height: 1.6;
  color: var(--text); background: var(--walnut) url("/img/wood.jpg") repeat;
}
a { color: var(--brass); }
h1, h2, h3 { font-family: "IM Fell English", Georgia, serif; font-weight: 400; line-height: 1.15; }

.hero { text-align: center; padding: 64px 16px 40px; color: var(--parchment); }
.hero img.icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.hero h1 { font-size: clamp(3rem, 12vw, 5.5rem); margin: 16px 0 4px; color: var(--gilt); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.hero p.lede { font-style: italic; font-size: 1.35rem; margin: 0 auto; max-width: 30rem; }
.cta { display: inline-block; margin-top: 28px; padding: 14px 28px; border-radius: 12px; font-weight: 600; text-decoration: none;
  color: var(--ink); background: linear-gradient(#f3da97, #b8862e); box-shadow: 0 4px 14px rgba(0,0,0,.45); }

.drawer { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 8px 16px 40px; }
.drawer img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
@media (prefers-reduced-motion: no-preference) {
  .drawer img { animation: breathe 5s ease-in-out infinite; }
  .drawer img:nth-child(2n) { animation-delay: -2.5s; }
  .drawer img:nth-child(3n) { animation-delay: -1.2s; }
  @keyframes breathe { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
}

.page { max-width: 46rem; margin: 0 auto 48px; padding: 32px 24px; background: var(--card); border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); border-top: 4px solid var(--brass); }
@media (max-width: 720px) { .page { margin: 0 16px 32px; padding: 24px 18px; } }
.page h1 { font-size: 2.4rem; margin-top: 0; }
.page h2 { font-size: 1.6rem; margin: 1.6em 0 .4em; }
.muted { color: var(--muted); font-style: italic; }

.shots { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 8px 0 24px; }
.shots img { width: min(240px, 44vw); height: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }

footer { text-align: center; color: var(--parchment); padding: 8px 16px 40px; font-size: 1rem; }
footer a { color: var(--gilt); }