@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--paper:#f5f2eb;--ink:#1e2728;--muted:#6d7470;--line:#d8d6ce;--accent:#a33b2f;--card:#fffdf8;--green:#dce7df}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.55}
a{color:inherit}
.masthead{border-bottom:1px solid var(--line);padding:24px clamp(18px,5vw,76px) 0}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1500px;margin:auto;padding-bottom:20px}
.wordmark{text-decoration:none;font-weight:700;letter-spacing:.11em;font-size:1.2rem}
.wordmark span{color:var(--accent)}
.masthead-note{color:var(--muted);font-size:.9rem;margin:0}
.navigation{max-width:1500px;margin:auto;display:flex;gap:clamp(18px,3vw,42px);overflow-x:auto;white-space:nowrap}
.nav-link{font:500 .92rem 'DM Sans',sans-serif;color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:14px 0 12px;cursor:pointer}
.nav-link:hover,.nav-link.active{color:var(--ink)}
.nav-link.active{border-bottom-color:var(--accent)}
main{max-width:1500px;margin:auto;padding:clamp(24px,4vw,56px) clamp(18px,5vw,76px) 36px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--accent);margin:0 0 8px}
h1{font:600 clamp(2.3rem,5vw,4.2rem)/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.035em;margin:0}
.section-description{margin:12px 0 0;color:var(--muted);max-width:620px}
.intro-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--muted);font-size:.78rem;white-space:nowrap}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.story-card{min-width:0;background:var(--card);border:1px solid var(--line);padding:21px;display:flex;flex-direction:column;min-height:245px}
.story-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.source{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:.66rem;line-height:1.4;text-transform:uppercase;letter-spacing:.07em;font-weight:700;background:#ece9e0;padding:5px 7px;border-radius:2px;white-space:nowrap}
.tag.achievement{background:#e2ece2}.tag.criticism{background:#f2e2dc}.tag.development{background:#e3e8ef}
.story-card h2{font:600 1.23rem/1.35 'Playfair Display',Georgia,serif;margin:0 0 13px;overflow-wrap:anywhere}
.story-summary{font-size:.87rem;color:#4f5956;margin:0 0 18px}
.story-summary strong{display:block;font-size:.67rem;letter-spacing:.1em;color:var(--accent);margin-bottom:5px}
.story-bottom{margin-top:auto;padding-top:14px;border-top:1px solid #e7e4dc;display:flex;justify-content:space-between;align-items:center;gap:10px}
.story-date{font-size:.7rem;color:var(--muted)}
.read-link{font-size:.8rem;font-weight:700;text-decoration:none;color:var(--accent);white-space:nowrap}
.read-link:hover{text-decoration:underline}
.status{padding:22px 0;color:var(--muted);font-size:.9rem}
.status:empty{display:none}
.empty{grid-column:1/-1;padding:30px;border:1px dashed var(--line);color:var(--muted)}
.footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.77rem;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer p{margin:0;max-width:520px}
.footer a{color:var(--ink)}
.refresh-button{border:1px solid var(--line);background:transparent;padding:9px 12px;font:500 .8rem 'DM Sans',sans-serif;cursor:pointer}
.refresh-button:hover{border-color:var(--ink)}
@media(max-width:900px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.masthead-note{display:none}.intro{align-items:flex-start;flex-direction:column}.intro-meta{align-items:flex-start}.story-grid{grid-template-columns:1fr}.story-card{min-height:0}.navigation{gap:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}