/* ganj — reader for the Ganjoor corpus.
   Self-hosted font, no CDN: the page must render with zero outbound reach. */

@font-face{font-family:Vazirmatn;src:url(/static/fonts/Vazirmatn-Regular.woff2) format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/static/fonts/Vazirmatn-Medium.woff2) format('woff2');
  font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/static/fonts/Vazirmatn-SemiBold.woff2) format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/static/fonts/Vazirmatn-Bold.woff2) format('woff2');
  font-weight:700;font-display:swap}

:root{
  --paper:#faf7f0; --ink:#1e1b16; --ink-soft:#57503f; --ink-faint:#8b8271;
  --rule:#e6dfd0; --card:#fffdf8; --accent:#8a5a2b; --accent-soft:#f0e4d2;
  --mark:#f6e3b8;
  --fs:1rem; --measure:44rem;
  --shadow:0 1px 2px rgba(60,45,20,.05), 0 8px 24px rgba(60,45,20,.05);
}
:root[data-theme=dark]{
  --paper:#14120f; --ink:#ece5d8; --ink-soft:#b3a894; --ink-faint:#7d7362;
  --rule:#2b2620; --card:#1b1814; --accent:#d3a066; --accent-soft:#2c2318;
  --mark:#4a3a18;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#14120f; --ink:#ece5d8; --ink-soft:#b3a894; --ink-faint:#7d7362;
    --rule:#2b2620; --card:#1b1814; --accent:#d3a066; --accent-soft:#2c2318;
    --mark:#4a3a18;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Vazirmatn,'IRANSans','Segoe UI',Tahoma,system-ui,sans-serif;
  font-size:var(--fs); line-height:2; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}
.wrap.wide{max-width:64rem}
.muted{color:var(--ink-faint)}
.skip{position:absolute;right:-9999px}
.skip:focus{right:1rem;top:.6rem;background:var(--card);padding:.5rem .9rem;
  border-radius:.5rem;z-index:20}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.top .row{display:flex;align-items:center;gap:1rem;height:3.75rem;max-width:64rem}
.brand{font-weight:700;font-size:1.35rem;letter-spacing:-.01em;flex:none}
.brand .mark{color:var(--accent)}
.find{flex:1;display:flex;gap:.4rem;min-width:0}
.find input{flex:1;min-width:0;background:var(--card);border:1px solid var(--rule);
  color:var(--ink);border-radius:.65rem;padding:.5rem .85rem;font:inherit;font-size:.9rem;
  line-height:1.6}
.find input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.find button{flex:none;background:var(--accent);color:#fff;border:0;border-radius:.65rem;
  padding:.5rem 1rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.tools{display:flex;gap:.3rem;flex:none}
.icon{background:transparent;border:1px solid var(--rule);color:var(--ink-soft);
  border-radius:.55rem;width:2.1rem;height:2.1rem;cursor:pointer;font-size:.8rem;
  display:grid;place-items:center;font-family:inherit}
.icon:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:640px){
  .top .row{height:auto;flex-wrap:wrap;padding-block:.7rem;gap:.6rem}
  .find{order:3;flex-basis:100%}
  .tools{margin-inline-start:auto}
}

main{padding:2.5rem 0 4rem;min-height:60vh}

/* ------------------------------------------------------------------ home */
.hero{text-align:center;padding:2rem 0 2.5rem}
.hero h1{font-size:clamp(2.6rem,9vw,4rem);margin:0;line-height:1.2;letter-spacing:-.02em}
.lede{color:var(--ink-soft);margin:.75rem auto 2rem;max-width:34rem;font-size:.95rem}
.bigfind{display:flex;gap:.5rem;max-width:32rem;margin:0 auto}
.bigfind input{flex:1;min-width:0;background:var(--card);border:1px solid var(--rule);
  color:var(--ink);border-radius:.8rem;padding:.8rem 1.1rem;font:inherit;font-size:1rem}
.bigfind input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.bigfind button{background:var(--accent);color:#fff;border:0;border-radius:.8rem;
  padding:.8rem 1.4rem;font:inherit;font-weight:600;cursor:pointer}

h2.sec{font-size:.8rem;font-weight:600;letter-spacing:.12em;color:var(--ink-faint);
  margin:3rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}

.poet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.7rem}
.poet-card{background:var(--card);border:1px solid var(--rule);border-radius:.9rem;
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.15rem;text-align:center;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.poet-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.pc-name{font-size:1.15rem;font-weight:600;line-height:1.5}
.pc-years,.pc-count{font-size:.72rem;color:var(--ink-faint);line-height:1.7}

.century{margin:1.5rem 0}
.century h3{font-size:.9rem;font-weight:600;color:var(--accent);margin:0 0 .3rem}
.namelist{display:flex;flex-wrap:wrap;gap:.3rem .85rem;line-height:2.2}
.namelist a{font-size:.9rem;color:var(--ink-soft);border-bottom:1px solid transparent}
.namelist a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ------------------------------------------------------------ poet / cat */
.crumbs{font-size:.8rem;color:var(--ink-faint);margin-bottom:1.5rem;line-height:2}
.crumbs a:hover{color:var(--accent)}
.crumbs i{margin:0 .45rem;font-style:normal;opacity:.5}

.poet-head h1{font-size:2.4rem;margin:0;line-height:1.3;letter-spacing:-.015em}
.poet-full{color:var(--ink-soft);margin:.2rem 0 .1rem;font-size:1rem}
.poet-life{color:var(--ink-faint);font-size:.85rem;margin:.1rem 0 0}
.poet-bio{margin-top:1.25rem;color:var(--ink-soft);font-size:.95rem;line-height:2.1;
  border-inline-start:2px solid var(--accent-soft);padding-inline-start:1rem}

.cat-title{font-size:2rem;margin:0 0 1.5rem;line-height:1.4;letter-spacing:-.015em}

.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem}
.work{background:var(--card);border:1px solid var(--rule);border-radius:.75rem;
  padding:.85rem 1rem;display:flex;flex-direction:column;gap:.1rem;
  transition:border-color .15s,box-shadow .15s}
.work:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.w-title{font-weight:500;font-size:1.02rem;line-height:1.7}
.w-meta{font-size:.74rem;color:var(--ink-faint)}

.poem-list{display:flex;flex-direction:column;margin-top:.5rem}
.poem-row{padding:.55rem .25rem;border-bottom:1px solid var(--rule);font-size:.98rem;
  transition:color .12s,padding .12s}
.poem-row:hover{color:var(--accent);padding-inline-start:.6rem}

/* ------------------------------------------------------------------ poem */
.poem h1{font-size:1.7rem;margin:0 0 .8rem;line-height:1.5;letter-spacing:-.01em}
.meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2.5rem}
.tag{font-size:.72rem;color:var(--ink-soft);background:var(--accent-soft);
  border-radius:2rem;padding:.25rem .7rem;line-height:1.8}

/* The poem column is wider than the site measure on purpose: a beyt puts two
   hemistichs side by side, so it needs roughly twice the width that running
   prose does. At the 44rem site measure, classical hemistichs wrapped and
   left a single orphaned word adrift under its own half — which reads as a
   third line and destroys the couplet. */
.poem{max-width:52rem;margin:0 auto}
.verses{margin:0 auto;max-width:52rem}

.beyt{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;margin:0 0 .35rem}
.beyt .m{font-size:1.08rem;line-height:2.5;text-align:center;
  padding:.1rem 0;letter-spacing:.005em;
  /* When a hemistich is long enough to wrap anyway, split it evenly rather
     than stranding one word on its own line. */
  text-wrap:balance}
.beyt.centered{grid-template-columns:1fr}
.beyt.centered .m{text-align:center}
.single{text-align:center;font-size:1.08rem;line-height:2.5;margin:.35rem 0;
  text-wrap:balance}
.prose{font-size:1.02rem;line-height:2.3;margin:.9rem 0;text-align:justify;
  color:var(--ink);max-width:44rem;margin-inline:auto}
/* Stack well before the columns get too narrow to hold a hemistich.
   A classical hemistich wants ~26rem of its own, so two of them plus the gap
   and the page padding need ~56rem before side-by-side is actually readable.
   Below that, one hemistich per line beats two that both wrap. */
@media(max-width:56rem){
  .beyt{grid-template-columns:1fr;gap:0;margin-bottom:1.1rem}
  .beyt .m{line-height:2.2;text-align:center}
  .beyt .m:first-child{padding-bottom:0}
}

.summary{margin-top:3rem;background:var(--card);border:1px solid var(--rule);
  border-radius:.9rem;padding:1rem 1.25rem}
.summary h4{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.1em;color:var(--ink-faint);
  font-weight:600}
.summary p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:2.1}

.poemnav{display:flex;gap:.6rem;margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid var(--rule)}
.pn{flex:1;background:var(--card);border:1px solid var(--rule);border-radius:.75rem;
  padding:.7rem .9rem;display:flex;flex-direction:column;font-size:.92rem;
  transition:border-color .15s}
.pn:hover{border-color:var(--accent)}
.pn span{font-size:.7rem;color:var(--ink-faint)}
.pn.next{text-align:left}

/* ---------------------------------------------------------------- search */
.searchnote{font-size:.85rem;margin:-.8rem 0 1.5rem}
.hits{display:flex;flex-direction:column;gap:.5rem}
.hit{background:var(--card);border:1px solid var(--rule);border-radius:.8rem;
  padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.3rem;
  transition:border-color .15s,box-shadow .15s}
.hit:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.h-title{font-size:.8rem;color:var(--ink-faint);line-height:1.8}
.h-body{display:flex;flex-direction:column;gap:.1rem}
.ex{font-size:1.04rem;line-height:2.2}
mark{background:var(--mark);color:inherit;border-radius:.2rem;padding:0 .12em}
.pager{display:flex;gap:.8rem;justify-content:center;margin-top:2rem}
.pager a{color:var(--accent);font-size:.9rem;border:1px solid var(--rule);
  border-radius:.6rem;padding:.4rem 1rem}
.pager a:hover{border-color:var(--accent)}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule);padding:1.75rem 0;margin-top:3rem;
  color:var(--ink-faint);font-size:.78rem;text-align:center}
.foot p{margin:.15rem 0}
.foot a{color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--accent)}

@media print{
  .top,.foot,.poemnav,.crumbs,.tools{display:none}
  body{background:#fff;color:#000}
}