:root { color-scheme: dark; font-family: 'Amiri', serif; background: #1c1814; color: #f4ead5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 0, #432522, transparent 68%), #1c1814; }
nav { display: flex; justify-content: flex-end; padding: 24px 32px; }
a { color: inherit; }
nav a, .read { border: 1px solid #d4a57455; box-shadow: inset 0 1px 0 #f4ead522, 0 8px 32px #0002; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 999px; text-decoration: none; }
nav a { font: 14px system-ui, sans-serif; padding: 13px 20px; background: #f4ead509; }
main { width: 100%; max-width: 860px; margin: auto; padding: 48px 28px 80px; text-align: center; }
h1 { font-size: clamp(58px, 12vw, 104px); font-weight: 700; line-height: 1.5; margin: 0; }
h1 span { display: block; font-size: .4em; font-weight: 400; line-height: 1.6; margin-top: 2px; color: #d4a574; }
.pitch { font-size: clamp(20px, 3vw, 24px); line-height: 2; max-width: 630px; margin: 34px auto 36px; color: #cbbda8; }
.read { display: inline-block; font-size: 22px; padding: 10px 38px; background: linear-gradient(160deg, #f4ead51c, #f4ead507); }
.read:hover { border-color: #d4a574; background-color: #d4a57415; }
a:focus-visible { outline: 2px solid #d4a574; outline-offset: 6px; }
@media (max-width: 500px) { main { padding: 24px 26px 64px; } nav { padding: 18px; } h1 { font-size: clamp(48px, 14vw, 68px); } .pitch { margin: 28px auto; } }
main { display: flex; flex-direction: column; align-items: center; gap: 34px; max-width: 1040px; }
.cover { margin: 0; width: min(300px, 64vw); }
.cover img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 22px 60px #000a, 0 2px 8px #0006; }
@media (min-width: 860px) { main { flex-direction: row; align-items: center; gap: 64px; text-align: right; } .cover { flex: 0 0 340px; width: 340px; } .copy { flex: 1; } .pitch { margin-right: 0; } }
@media (max-width: 500px) { main { gap: 26px; } .cover { width: min(240px, 62vw); } }