/* ============================================================
   dpanosian.com — the reading pages

   The front page is a held breath: one screen, nothing to scroll.
   These pages are the opposite and should not pretend otherwise —
   they scroll, they have a measure, and the type is set for
   sustained reading rather than for effect. What they keep from
   the front page is the ground, the gold, and the restraint.
   ============================================================ */

body.reading{
  overflow:auto;
  min-height:100%;
  background:var(--bg);
}
body.reading .mesh{opacity:calc(var(--mesh-op) * .55)}

.reading-shell{
  height:auto; min-height:100%;
  grid-template-rows:auto 1fr auto;
  max-width:74rem; margin-inline:auto;
}
.reading-shell .hd{margin-bottom:clamp(2.5rem,8vh,5rem)}
a.mark{transition:color .3s var(--ease)}
a.mark:hover{color:var(--accent)}

/* the language row here is links, not buttons */
.langs a{
  position:relative; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute);
  transition:color .4s var(--ease);
}
.langs a:hover{color:var(--fg)}

/* ---------- measure ---------- */
.page{
  width:min(100%, 40rem);
  margin-inline:auto;
  padding-bottom:clamp(3rem,10vh,6rem);
}
.page.centred{display:grid; place-content:center; text-align:center; gap:.8rem}
.big{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(3rem,12vw,6rem); font-weight:300; line-height:1;
  color:var(--accent); margin:0;
}

.page-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400; letter-spacing:-.005em; line-height:1.15;
  font-size:clamp(1.9rem,5vw,3.1rem);
  margin:0 0 1.2rem; color:var(--fg);
}
html[lang="hy"] .page-title{font-family:"Noto Sans Armenian",sans-serif; font-size:clamp(1.6rem,4.2vw,2.5rem)}
html[lang="fa"] .page-title{font-family:"Vazirmatn",sans-serif; font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.5}

.empty{color:var(--mute); font-style:italic}

/* ---------- the list ---------- */
.posts{list-style:none; margin:0; padding:0}
.posts li{
  padding:clamp(1.3rem,3vh,1.9rem) 0;
  border-bottom:1px solid var(--line);
}
.posts li:first-child{border-top:1px solid var(--line)}
.post-link{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  text-decoration:none;
}
.post-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:400; line-height:1.3;
  color:var(--fg); transition:color .35s var(--ease);
}
html[lang="hy"] .post-title{font-family:"Noto Sans Armenian",sans-serif; font-size:clamp(1rem,2.2vw,1.25rem)}
html[lang="fa"] .post-title{font-family:"Vazirmatn",sans-serif; font-size:clamp(1rem,2.2vw,1.25rem); line-height:1.7}
.post-link:hover .post-title{color:var(--accent)}
.post-date{
  margin-inline-start:auto; white-space:nowrap;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.post-excerpt{
  margin:.5rem 0 0; color:var(--mute);
  font-size:.88rem; line-height:1.7;
}

/* ---------- the piece itself ---------- */
.entry-meta{
  margin:-.6rem 0 2rem;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.hero{margin:0 0 2.2rem}
.hero img{width:100%; height:auto; display:block; border:1px solid var(--line)}

.prose{
  font-size:clamp(1rem,1.05rem,1.08rem);
  line-height:1.8;
  color:var(--fg);
}
html[lang="fa"] .prose{font-family:"Vazirmatn",sans-serif; line-height:2.05; font-size:1rem}
html[lang="hy"] .prose{font-family:"Noto Sans Armenian",sans-serif; line-height:1.9}

.prose p{margin:0 0 1.4em}
.prose h2,.prose h3,.prose h4,.prose h5{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400; line-height:1.25; color:var(--fg);
  margin:2.2em 0 .7em;
}
html[lang="hy"] .prose h2,html[lang="hy"] .prose h3{font-family:"Noto Sans Armenian",sans-serif}
html[lang="fa"] .prose h2,html[lang="fa"] .prose h3{font-family:"Vazirmatn",sans-serif}
.prose h2{font-size:1.55em}
.prose h3{font-size:1.28em}
.prose h4,.prose h5{font-size:1.1em; letter-spacing:.02em}

.prose a{
  color:var(--fg); text-decoration:none;
  border-bottom:1px solid var(--accent);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.prose a:hover{color:var(--accent)}

.prose strong{font-weight:600; color:var(--fg)}
.prose em{font-style:italic}

.prose ul,.prose ol{margin:0 0 1.4em; padding-inline-start:1.4em}
.prose li{margin-block:.45em}
.prose li::marker{color:var(--accent)}

.prose blockquote{
  margin:1.8em 0; padding-inline-start:1.3em;
  border-inline-start:2px solid var(--accent);
  color:var(--mute); font-style:italic;
}
.prose blockquote p{margin:0}

.prose hr{
  border:0; height:1px; background:var(--line);
  margin:2.6em auto; width:40%;
}

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em; direction:ltr; unicode-bidi:isolate;
  background:rgb(from var(--fg) r g b / .07);
  padding:.12em .38em; border-radius:3px;
}
.prose pre{
  margin:1.6em 0; padding:1rem 1.1rem; overflow-x:auto;
  background:rgb(from var(--fg) r g b / .05);
  border:1px solid var(--line); border-radius:4px;
  direction:ltr; text-align:left;
}
.prose pre code{background:none; padding:0; font-size:.84em; line-height:1.65}

.prose figure{margin:2em 0}
.prose figure img{width:100%; height:auto; display:block; border:1px solid var(--line)}
.prose figcaption{
  margin-top:.6rem; font-size:.76rem; color:var(--mute);
  text-align:center; font-style:italic;
}

/* ---------- afterwards ---------- */
.also,.back{
  margin-top:2.6rem; font-size:.72rem;
  letter-spacing:.1em; color:var(--mute);
}
.also a,.back a{
  color:var(--mute); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.also a{margin-inline-end:.7rem}
.also a:hover,.back a:hover{color:var(--accent); border-bottom-color:var(--accent)}

.reading-shell .ft{margin-top:clamp(2rem,6vh,4rem)}

@media (max-width:640px){
  .post-date{margin-inline-start:0; width:100%}
}

/* a draft being looked at through its private link */
.preview-flag{
  margin:0 0 1.6rem; padding:.6rem .9rem;
  border:1px dashed var(--accent); border-radius:4px;
  font-size:.72rem; letter-spacing:.06em; color:var(--accent);
}
.reading-shell .menu-header{margin-bottom:clamp(1.4rem,4vh,2.4rem)}