/* One full-screen image, one quote. Normal-case serif type; no text transforms. */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0d0f12;color:#f6f3ee}
body{overflow:hidden;font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.stage{position:fixed;inset:0;animation:fade 1.1s ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.stage{animation:none}}
.stage picture,.stage img{position:absolute;inset:0;width:100%;height:100%}
.stage img{object-fit:cover;display:block}
/* legibility: a soft vignette plus a gradient behind the text */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,rgba(8,10,14,.18) 0%,rgba(8,10,14,.42) 60%,rgba(8,10,14,.62) 100%),
             linear-gradient(to top,rgba(8,10,14,.62) 0%,rgba(8,10,14,0) 45%)}
/* the quote sits in the bottom quarter of the screen */
figure{position:absolute;inset:0;margin:0;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 8vh;z-index:1}
blockquote{margin:0;max-width:92vw;text-align:center}
blockquote p{margin:0 auto;max-width:15em;font-weight:400;font-style:italic;letter-spacing:.005em;line-height:1.22;
  font-size:clamp(1.65rem,4.2vw,3.4rem);text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)}
blockquote p::before{content:"\201C"}
blockquote p::after{content:"\201D"}
figcaption{margin-top:1.1em;font-size:clamp(.95rem,1.6vw,1.2rem);letter-spacing:.04em;opacity:.9;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
figcaption::before{content:"\2014\00a0"}
.long blockquote p{max-width:19em;font-size:clamp(1.35rem,3.1vw,2.6rem)}
@media (max-width:600px){figure{padding-bottom:9vh}}