@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');
:root{--paper:#f3efe7;--ink:#243631;--muted:#3c4f43;--line:#c8cec4;--accent:#963b28;--card:#faf8f2}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:Newsreader,Georgia,serif;min-height:100vh}
button,textarea{font:inherit}
.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}
.masthead,footer{display:flex;justify-content:space-between;align-items:center;padding:27px clamp(24px,5vw,80px);font-family:'DM Mono',monospace;font-size:14px;letter-spacing:.02em}
.masthead{border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:13px;font-weight:500}
.brand-mark{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:Georgia,serif;font-size:18px}
.masthead-note{color:var(--muted)}
main{width:min(1120px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr);gap:28px 6vw;padding:clamp(48px,7vw,110px) 0 100px}
.intro{grid-column:1/-1;position:relative;overflow:hidden;min-height:320px}
.sun{position:absolute;right:7%;top:12px;width:clamp(140px,22vw,270px);aspect-ratio:1;border-radius:50%;background:var(--accent);opacity:.9;box-shadow:0 0 0 22px #d3654517;animation:rise 1.2s ease-out both}
.issue,.desk-heading,.prompt-number{font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--muted)}
h1{position:relative;margin:24px 0 20px;font-size:clamp(58px,9vw,124px);line-height:.87;letter-spacing:-.055em;font-weight:400;animation:rise .8s ease-out both}
h1 em{font-weight:400;color:var(--accent)}
.intro-copy{position:relative;max-width:480px;margin:28px 0 0;font-size:clamp(18px,2vw,23px);line-height:1.35;color:var(--muted);animation:rise .8s .1s ease-out both}
.desk,.prompt{background:var(--card);border:1px solid var(--line)}
.desk{padding:28px;min-height:380px;display:flex;flex-direction:column}
.desk-heading{display:flex;justify-content:space-between;gap:12px}
textarea{flex:1;width:100%;min-height:220px;margin:24px 0;border:0;outline:0;resize:vertical;background:transparent;color:var(--ink);font-size:clamp(23px,2.5vw,31px);line-height:1.35}
textarea::placeholder{color:#57695f;font-style:italic}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.desk-actions{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.desk-actions span,.prompt button{font-family:'DM Mono',monospace;font-size:13px;color:var(--muted)}
button{cursor:pointer;border:0;background:none;padding:6px 0;color:var(--ink)}
button:hover,button:focus-visible{color:var(--accent)}
.desk-actions button{font-family:'DM Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.desk-actions button span{color:inherit;font-size:15px}
.prompt{padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:380px;background:#e4e8df}
.prompt p{font-size:clamp(34px,3vw,48px);line-height:1.04;letter-spacing:-.035em;margin:30px 0}
.prompt button{align-self:flex-start;text-transform:uppercase;letter-spacing:.06em}
footer{border-top:1px solid var(--line);color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){.masthead-note{display:none}main{grid-template-columns:1fr;padding-top:64px}.intro{min-height:360px}.sun{right:-15px;top:-20px;opacity:.52}h1{margin-top:60px}.desk,.prompt{min-height:300px}.prompt p{max-width:360px}}
@media(prefers-reduced-motion:reduce){.sun,h1,.intro-copy{animation:none}}