/* Poems page. Builds on /styles.css (palette, hero, footer).
   Poems are set in Garamond, like a printed book of verse;
   the page chrome stays in Mukta like the rest of the site. */
:root{
  --f-title:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --f-verse:'EB Garamond',Georgia,serif;
  --gold-soft:#f6ead3;
}

.hero-small{position:relative; padding:40px 16px 32px}
.home-link{
  position:absolute; left:16px; top:14px; font-size:15px; text-decoration:none; color:var(--faint);
}
.home-link:hover{color:var(--red)}
.lede{font:italic 400 19px/1.5 var(--f-verse); color:var(--faint); max-width:520px; margin:14px auto 0}

/* Contents */
#contents{padding-top:32px}
.pfilter{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font:500 15px/1 var(--f-ui); padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
}
.tag:hover{border-color:var(--red); color:var(--red)}
.tag[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}
.tag:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.pfilter input{
  flex:1 1 260px; font:inherit; padding:10px 14px; border-radius:6px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
}
.pfilter input:focus{outline:2px solid var(--red); outline-offset:1px}
#pcount{margin:14px 0 12px}

.toc{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.toc a{
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px; height:100%;
  padding:18px 18px 16px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.toc a:hover{transform:translateY(-2px); border-color:var(--rule); box-shadow:0 6px 18px rgba(140,28,34,.10)}
.toc a:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.toc-n{grid-row:1 / span 3; font:500 15px/1.9 var(--f-title); color:var(--gold-ink)}
.toc-title{font:600 23px/1.2 var(--f-title); color:var(--red-deep)}
.toc-first{font:italic 400 16px/1.45 var(--f-verse); color:var(--faint)}
.toc-tags{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink); margin-top:4px}

/* Reader */
.reader{
  max-width:680px; margin:32px auto 0; padding:40px clamp(20px,6vw,64px) 32px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 1px 0 var(--line), 0 18px 40px -24px rgba(140,28,34,.25);
  position:relative;
}
.reader::before{ /* thin inner frame, like a printed page */
  content:""; position:absolute; inset:10px; border:1px solid var(--gold-soft);
  border-radius:4px; pointer-events:none;
}
.back{font-size:15px; text-decoration:none; color:var(--faint)}
.back:hover{color:var(--red)}
.r-tags{
  text-align:center; margin:22px 0 6px; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-ink);
}
.r-title{
  text-align:center; margin:0; font:600 clamp(32px,6vw,44px)/1.15 var(--f-title); color:var(--red-deep);
  text-wrap:balance;
}
.r-preface{
  text-align:center; margin:14px auto 0; max-width:480px;
  font:italic 400 17px/1.5 var(--f-verse); color:var(--faint);
}
.r-divider{text-align:center; color:var(--gold); font-size:22px; margin:22px 0 26px; letter-spacing:.6em}
.r-divider::before,.r-divider::after{content:"—"; color:var(--rule); letter-spacing:0; margin:0 10px}
.r-body{font:400 20px/1.7 var(--f-verse); color:var(--ink)}
.stanza{margin:0 0 1.1em}
.r-body .stanza:first-child::first-letter{
  float:left; font:600 3.4em/.82 var(--f-title); color:var(--red); margin:.06em .1em 0 0;
}
.r-sign{
  text-align:right; margin:28px 0 0; font:italic 400 19px/1.4 var(--f-verse); color:var(--faint);
}
.r-by{font:600 26px/1.3 var(--f-title); font-style:italic; color:var(--red-deep)}

.r-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
}
.r-nav a{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--red-deep);
  font:600 19px/1.25 var(--f-title); padding:8px 10px; border-radius:6px;
}
.r-nav a:hover{background:var(--red-soft)}
.r-nav a:focus-visible{outline:3px solid var(--gold); outline-offset:1px}
.r-nav small{font:500 13px/1.4 var(--f-ui); color:var(--faint); letter-spacing:.04em}
.r-nav .next{text-align:right; align-items:flex-end}

@media (max-width:560px){
  .hero-small{padding-top:52px}
  .r-body{font-size:18px}
  .reader{border-radius:0; margin-left:-16px; margin-right:-16px; border-left:0; border-right:0}
}