/* ---------- short-stories · Hebrew reading theme ---------- */
:root{
  --paper:#f3efe6;        /* aged parchment */
  --ink:#211e1a;          /* warm near-black */
  --muted:#7a7163;
  --indigo:#34425f;
  --gold:#9c7a3c;         /* gilt of an old sefer, used sparingly */
  --rule:rgba(33,30,26,.14);
  --quote-bg:rgba(52,66,95,.045);
  --measure:34rem;
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --sans:"Heebo",system-ui,sans-serif;
  --display:"Suez One","Frank Ruhl Libre",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.18rem;line-height:1.92;
  font-weight:400;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(52,66,95,.16)}

.hero,.toc,.topbar,.chapter,.chap-nav,.foot{
  width:min(92vw,var(--measure));margin-inline:auto;
}

/* ---------- index: hero + essay list ---------- */
.hero{padding:14vh 0 1.5rem;text-align:center}
.hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,12vw,5.5rem);line-height:1;margin:0;
  letter-spacing:.01em;
}
.hero-sub{
  font-family:var(--sans);font-weight:500;color:var(--muted);
  font-size:.95rem;letter-spacing:.22em;margin:1.1rem 0 0;
}
.hero::after{
  content:"";display:block;width:2.5rem;height:1px;
  background:var(--gold);margin:2.2rem auto 0;
}
.toc{padding-bottom:14vh}
.toc-list{list-style:none;margin:0;padding:0}
.toc-list li{border-bottom:1px solid var(--rule)}
.toc-list li:first-child{border-top:1px solid var(--rule)}
.toc-list a{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.15rem .35rem;transition:background .18s ease,padding .18s ease;
}
.toc-list a:hover,.toc-list a:focus-visible{
  background:var(--quote-bg);padding-inline-start:.9rem;outline:none;
}
.toc-title{font-size:1.4rem;font-weight:500;line-height:1.3}
.toc-sub{
  font-family:var(--sans);font-weight:400;color:var(--muted);
  font-size:.95rem;line-height:1.5;
}

/* ---------- essay ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 0;margin-bottom:3.5rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:.85rem;letter-spacing:.04em;
}
.brand{font-weight:500}
.back{color:var(--muted)}
.back:hover,.brand:hover{color:var(--indigo)}

.chap-title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(2rem,6vw,2.9rem);line-height:1.18;
  margin:0 0 .6rem;
}
.chap-sub{
  font-family:var(--sans);font-weight:400;color:var(--muted);
  font-size:1.05rem;line-height:1.5;margin:0 0 2.8rem;
}

/* prose */
.prose p{margin:0 0 1.45rem}
.prose h2{font-weight:700;font-size:1.5rem;line-height:1.4;margin:3rem 0 1rem}
.prose h3{font-weight:700;font-size:1.2rem;margin:2.2rem 0 .8rem}
.prose strong{font-weight:700}
.prose em{font-style:italic;color:#3a342c}
.prose a{color:var(--indigo);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.5px;text-decoration-color:rgba(52,66,95,.4)}
.prose a:hover{text-decoration-color:var(--indigo)}
.prose hr{border:0;height:1px;background:var(--rule);margin:2.5rem 0}

/* source citations */
.prose blockquote{
  margin:1.8rem 0;padding:.2rem 1.3rem;
  border-inline-start:2px solid var(--gold);
  background:var(--quote-bg);
  font-size:.98rem;line-height:1.78;color:#332f28;border-radius:2px;
}
.prose blockquote h3{
  font-family:var(--sans);font-weight:500;
  font-size:.8rem;letter-spacing:.06em;color:var(--indigo);
  margin:.9rem 0 .3rem;
}
.prose blockquote p{margin:.5rem 0 .9rem}
.prose blockquote :is(h3):first-child{margin-top:.6rem}

/* bottom navigation */
.chap-nav{
  display:flex;justify-content:space-between;gap:1rem;
  margin:4.5rem auto 0;padding-top:2rem;border-top:1px solid var(--rule);
}
.np{flex:1;max-width:48%;font-family:var(--sans)}
.np-empty{flex:1}
.np-k{display:block;font-size:.75rem;letter-spacing:.12em;color:var(--muted);margin-bottom:.25rem}
.np-t{display:block;font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--ink)}
.np:hover .np-t{color:var(--indigo)}

/* footer */
.foot{
  text-align:center;color:var(--muted);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;
  padding:5rem 0 3rem;
}

/* a11y */
a:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:480px){
  body{font-size:1.08rem;line-height:1.85}
  .topbar{margin-bottom:2.5rem}
}