:root{--bg:#f3ead7;--ink:#111111;--muted:#5c5446;--accent:#6b1f1f;--line:#d8cbb0;--card:#faf4e6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Instrument Sans",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:860px;margin:0 auto;padding:0 24px}
nav{display:flex;justify-content:space-between;gap:16px;padding:22px 0}
nav a{text-decoration:none;margin-left:20px;color:var(--muted)}
nav a:hover{color:var(--accent)}
nav .name{font-family:Fraunces,serif;font-weight:700;margin:0;color:var(--ink)}
header.hero{padding:9vh 0 7vh}
.hero h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.05;margin:0 0 24px;letter-spacing:-.02em;max-width:14em}
.hero h1 em{font-weight:400}
.hero p{max-width:34em;color:var(--muted);font-size:1.15rem;margin:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}
.filters button{font:inherit;font-size:.95rem;background:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 16px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.works a{text-decoration:none;display:grid;grid-template-columns:1fr auto;gap:4px 24px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:22px 4px;color:inherit;font:inherit;cursor:pointer}
.works a:hover h3{color:var(--accent)}
.works h3{font-family:Fraunces,serif;font-weight:500;font-size:1.5rem;margin:0;line-height:1.2}
.works .meta{color:var(--muted);font-size:.9rem;align-self:center;text-align:right}
.works .blurb{grid-column:1/-1;color:var(--muted);margin:0}
section{padding:8vh 0 0}
h2{font-family:Fraunces,serif;font-weight:500;font-size:1.9rem;margin:0 0 20px}
.about{display:grid;gap:12px;max-width:36em}
.about p{margin:0}
.mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px}
#addr{font-family:Fraunces,serif;font-size:1rem;padding-bottom:1px;border-bottom:1px solid var(--line)}
.copy{font:inherit;font-size:.8rem;line-height:1.4;background:none;color:var(--ink);border:1px solid var(--ink);border-radius:5px;padding:2px 11px;cursor:pointer}
.copy:hover{background:var(--ink);color:var(--bg)}
footer{padding:12vh 0 40px;color:var(--muted);font-size:.9rem}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  nav a{margin-left:14px}
  .filters button{padding:8px 16px}
  .works a{text-decoration:none;grid-template-columns:1fr;padding:20px 2px}
  .works .meta{text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

nav .name a{margin:0;color:var(--ink);text-decoration:none}
.piece{max-width:720px;padding-top:3vh}
.back{margin:0 0 28px}
.back a{color:var(--muted);text-decoration:none}
.back a:hover{color:var(--accent)}
.piece h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2rem,6vw,2.8rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 8px}
.piece .meta{color:var(--muted);margin:0 0 36px}
.text.poem p{font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-weight:500;font-size:1.3rem;line-height:1.6;margin:0 0 1.4em}
.text.poem .ln{display:block;padding-left:2em;text-indent:-2em;text-wrap:balance}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
.pager a{text-decoration:none;color:var(--ink);max-width:48%;font-family:Fraunces,serif}
.pager a span{display:block;font:400 .85rem "Instrument Sans",system-ui,sans-serif;color:var(--muted)}
.pager a:hover{color:var(--accent)}
.pager .older{margin-left:auto;text-align:right}
@media (max-width:600px){
  .text.poem p{font-size:clamp(1.05rem,4.8vw,1.25rem);line-height:1.5;margin-bottom:1.3em}
  .text.poem .ln{padding-left:1.4em;text-indent:-1.4em}
}