@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;600;700&display=swap');
:root { --ink: #17211f; --paper: #f2f0e8; --hot: #ff735f; --muted: #68736e; }
* { box-sizing: border-box; }
body { background: linear-gradient(145deg, #dceff0 0%, var(--paper) 42%, #f3dfc8 100%); color: var(--ink); font-family: 'Space Grotesk', sans-serif; margin: 0; min-height: 100vh; }
header { align-items: center; background: rgba(242, 240, 232, .9); border-bottom: 1px solid var(--ink); display: flex; padding: 20px 7vw; }
header a { font-weight: 600; text-decoration: none; }
header a:hover { text-decoration: underline; }
main { margin: 0 auto; max-width: 900px; padding: 80px 7vw 100px; }
.eyebrow { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; margin: 0 0 15px; text-transform: uppercase; }
h1 { font-size: clamp(54px, 10vw, 110px); letter-spacing: -.06em; line-height: .9; margin: 0; max-width: 700px; }
.intro { color: var(--muted); font-size: 17px; margin: 24px 0 55px; }
.content-panel { background: rgba(255, 255, 255, .55); border-left: 7px solid var(--hot); min-height: 230px; padding: 32px; }
.content-panel blockquote { font-size: clamp(27px, 5vw, 52px); letter-spacing: -.03em; line-height: 1.08; margin: 0; }
.source { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; margin: 28px 0 0; }
button { background: var(--ink); border: 0; color: var(--paper); cursor: pointer; font: inherit; margin-top: 26px; padding: 14px 18px; }
button:hover { background: var(--hot); color: var(--ink); }
button:disabled { cursor: wait; opacity: .6; }
#message { color: var(--muted); min-height: 20px; }
@media (max-width: 600px) { header { padding: 16px 5vw; } header a { font-size: 14px; } main { padding: 55px 5vw 70px; } .content-panel { padding: 24px; } }