@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
:root { color-scheme: dark; --bg:#080808; --fg:#f5f5f2; --muted:#a8a8a4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; font-family:'Libre Baskerville',Georgia,'Times New Roman',serif; }
main { width:min(100% - 48px, 560px); margin:auto; }
header { padding:clamp(58px,13vh,110px) 0 38px; text-align:center; }
.eyebrow { font: 10px/1.7 Arial,Helvetica,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
h1 { font-weight:400; font-size:clamp(35px,10vw,58px); line-height:1.13; letter-spacing:-.035em; margin:27px 0 18px; }
figure { margin:0 0 75px; }
figure img, figure picture { display:block; width:100%; height:auto; }
figcaption { text-align:center; font:11px/1.7 Arial,Helvetica,sans-serif; color:var(--muted); letter-spacing:.08em; margin-top:17px; }
.hero { margin:0 -24px 0; }
article { padding:clamp(65px,13vh,110px) 0 75px; }
article p { font-size:clamp(20px,5.25vw,26px); line-height:1.68; letter-spacing:-.012em; margin:0 0 1.4em; }
.context { border-top:1px solid #3b3b3b; padding:48px 0 75px; }
.context p { color:#d0d0cc; font-size:17px; line-height:1.8; margin:22px 0 0; }
.next { display:block; margin:0 0 75px; color:inherit; text-decoration:none; }
.next img { display:block; width:100%; height:auto; opacity:.86; transition:opacity .45s ease; }
.next:hover img, .next:focus-visible img { opacity:1; }
.next .label { display:flex; justify-content:center; gap:10px; font:11px/1.7 Arial,Helvetica,sans-serif; letter-spacing:.14em; text-transform:uppercase; margin-top:17px; }
.next .label span:last-child { transition:transform .45s ease; }
.next:hover .label span:last-child { transform:translateX(5px); }
.back { display:inline-block; font:11px/1.7 Arial,Helvetica,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:28px 0 0; }
.back:hover { color:var(--fg); }
.step .eyebrow { display:block; text-align:center; margin-bottom:17px; }
footer { padding:28px 0 70px; border-top:1px solid #333; text-align:center; }
.credit { margin:22px auto 0; max-width:340px; font:12px/1.8 Arial,Helvetica,sans-serif; color:var(--muted); }
.credit a { color:var(--fg); text-underline-offset:3px; }
::selection { background:#eee; color:#111; }
@media (min-width:650px) { .hero { margin:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .next img, .next .label span { transition:none; } }