:root{
  --paper:#faf7f2; --ink:#2b2622; --muted:#7a6f64; --line:#e6ded3;
  --accent:#a2482f; --sepia:#d9cbb6; --sepia-dark:#b9a78d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Lora',Georgia,serif;line-height:1.75}
a{color:inherit}
header.site{border-bottom:1px solid var(--line);padding:28px 24px 22px;text-align:center}
header.site a{text-decoration:none}
header.site h1{margin:0;font-weight:600;font-size:2.4rem;letter-spacing:.02em}
header.site p{margin:4px 0 0;font-family:'Inter',sans-serif;font-size:.9rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.wrap{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:150px 1fr;gap:48px;padding:40px 24px 80px}

/* Year list */
nav.years{position:sticky;top:24px;align-self:start;font-family:'Inter',sans-serif}
nav.years h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
nav.years ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
nav.years a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;font-size:1.05rem;color:var(--muted)}
nav.years a:hover{color:var(--ink)}
nav.years a[aria-current="page"]{border-left-color:var(--accent);color:var(--ink);font-weight:600}
nav.years a .t{display:block;font-size:.75rem;font-weight:400;color:var(--muted)}

/* Story */
article{max-width:680px}
.hero{aspect-ratio:16/9;width:100%;border-radius:6px;margin-bottom:28px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero.empty{background:repeating-linear-gradient(45deg,#efe8dd,#efe8dd 12px,#ebe3d6 12px,#ebe3d6 24px);border:2px dashed var(--sepia-dark);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-family:'Inter',sans-serif;font-size:.9rem}
.meta{font-family:'Inter',sans-serif;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
article h1{font-size:2.1rem;line-height:1.25;margin:6px 0 6px;font-weight:600}
.byline{font-style:italic;color:var(--muted);margin:0 0 28px}
article h2{font-size:1.25rem;margin:40px 0 8px;font-weight:600}
article p{margin:0 0 18px;font-size:1.08rem}
article blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-style:italic;font-size:1.15rem;color:#4a413a}
article blockquote p{margin:0}
figure{margin:32px 0}
figure img{width:100%;border-radius:4px;display:block;background:var(--sepia)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair img{aspect-ratio:4/3;object-fit:cover}
figcaption{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--muted);margin-top:8px}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
footer.story{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--muted)}

/* Story list (Kuwento home) */
.story-list{list-style:none;margin:0;padding:0}
.story-list li{border-bottom:1px solid var(--line);padding:22px 0}
.story-list a{text-decoration:none}
.story-list .yr{font-family:'Inter',sans-serif;font-size:.8rem;letter-spacing:.1em;color:var(--accent);font-weight:600}
.story-list h2{margin:2px 0 4px;font-size:1.5rem}
.story-list p{margin:0;color:var(--muted)}

@media (max-width:760px){
  .wrap{grid-template-columns:1fr;gap:20px;padding-top:20px}
  nav.years{position:static}
  nav.years ol{display:flex;gap:4px;border-left:0;border-bottom:2px solid var(--line);overflow-x:auto}
  nav.years a{border-left:0;border-bottom:2px solid transparent;margin:0 0 -2px;padding:6px 12px}
  nav.years a[aria-current="page"]{border-bottom-color:var(--accent)}
  nav.years a .t{display:none}
  .pair{grid-template-columns:1fr}
}