:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; background: #111210; color: #f3f0e8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 780px; margin: 0 auto; padding: 32px 24px 80px; }
header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 34px; color: #aaa99f; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mark { color: #dfbd7c; }
h1 { margin: 0 0 14px; font-family: Georgia, serif; font-size: clamp(3rem, 9vw, 5.6rem); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
.intro { margin: 0 0 30px; color: #aaa99f; font-size: 15px; }
figure { margin: 0; }
img { display: block; width: 100%; height: auto; }
.hero img, .goosebumps img { border-radius: 3px; }
blockquote { margin: 0; padding: 42px 0 44px; text-align: center; }
blockquote p { max-width: 590px; margin: 0 auto 14px; font-family: Georgia, serif; font-size: clamp(1.55rem, 4.6vw, 2.3rem); font-weight: 400; line-height: 1.3; }
blockquote footer { color: #dfbd7c; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
button { margin-top: 24px; padding: 10px 16px; border: 1px solid #55544a; border-radius: 2px; background: transparent; color: #f3f0e8; font: inherit; font-size: 12px; cursor: pointer; }
button:hover { border-color: #dfbd7c; color: #dfbd7c; }
button:focus-visible { outline: 2px solid #dfbd7c; outline-offset: 4px; }
button span { margin-left: 6px; }
.goosebumps { max-width: 560px; margin: 0 auto; }
figcaption { padding-top: 12px; color: #aaa99f; font-size: 12px; text-align: center; }
.footer { margin-top: 62px; padding-top: 20px; border-top: 1px solid #30312c; color: #77786e; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 480px) { main { padding: 24px 18px 56px; } header { padding-bottom: 28px; } blockquote { padding: 32px 0 36px; } }