/* Long-form article typography for /reading/* and /invitation.

   pages.css `.prose` only ever styled p / h3 / ul / a, because the migrated
   pages never carried a full essay. These rules give the reading pages a real
   vertical rhythm, a measured column, and styling for the elements the essays
   actually use — h2, ol, blockquote and figure. Scoped to `.article` so nothing
   here can reach the migrated pages. */

.article{
  max-width:41rem;
  margin-inline:auto;
  font-size:1.075rem;
  line-height:1.72;
  color:#33403a;
}

/* ---------- rhythm ---------- */
.article > * + *{margin-top:1.15em;}
.article p{color:#3a4740;margin-top:1.15em;}

/* Opening paragraph carries a little more weight. */
.article > p:first-of-type{
  font-size:1.2rem;line-height:1.62;color:#2b3a32;
}
.article > p:first-of-type em{color:#5c6b5f;}

/* ---------- headings ---------- */
.article h2{
  font-family:var(--font-head,Lora,Georgia,serif);
  font-size:clamp(1.5rem,2.6vw,1.95rem);
  line-height:1.2;color:#1C2A24;
  margin-top:2.6em;margin-bottom:0.1em;
  padding-top:1.5rem;border-top:1px solid #D4DAC6;
}
.article h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.article h3{
  font-family:var(--font-head,Lora,Georgia,serif);
  font-size:1.22rem;line-height:1.3;color:#286932;
  margin-top:2em;margin-bottom:0.1em;
}

/* ---------- lists ---------- */
.article ul,.article ol{
  margin-top:1.15em;padding-left:1.5rem;
  display:grid;gap:0.7em;color:#3a4740;
}
.article ol{counter-reset:a;list-style:none;padding-left:0;}
.article ol > li{
  counter-increment:a;position:relative;padding-left:3rem;
}
.article ol > li::before{
  content:counter(a);position:absolute;left:0;top:0.05em;
  width:2rem;height:2rem;border-radius:50%;
  background:#eaf1e6;color:#286932;
  font-family:var(--font-head,Lora,Georgia,serif);font-size:0.95rem;
  display:grid;place-items:center;
}
.article ul > li::marker{color:#8FA084;}

/* ---------- quotes ---------- */
.article blockquote{
  margin:2em 0;padding:0.2em 0 0.2em 1.5rem;
  border-left:3px solid #2FF141;
  font-family:var(--font-head,Lora,Georgia,serif);
  font-size:1.24rem;line-height:1.5;font-style:italic;color:#24352b;
}
.article blockquote p{color:inherit;margin-top:0.5em;}
.article blockquote p:first-child{margin-top:0;}
.article blockquote p:last-child{
  font-family:var(--font-body,inherit);font-size:0.9rem;
  font-style:normal;color:#6a7568;
}

/* A standalone bold paragraph reads as the section's takeaway. */
.article p > strong:only-child{
  display:block;font-family:var(--font-head,Lora,Georgia,serif);
  font-size:1.2rem;font-style:italic;font-weight:500;
  color:#286932;line-height:1.45;
}

/* ---------- figures ---------- */
.article figure{margin:2.4em 0;}
.article figure img{
  display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid rgba(20,32,26,0.10);
}
.article figcaption{
  margin-top:0.7rem;font-size:0.88rem;line-height:1.5;color:#6a7568;
}
/* Break the measure for a wide image on roomy screens. */
@media (min-width:1080px){
  .article figure.wide{width:min(52rem,92vw);margin-inline:calc(50% - min(26rem,46vw));}
}

.article a{color:#286932;text-decoration:underline;text-underline-offset:3px;}
.article a:hover{color:#1EAF32;}
.article hr{border:0;border-top:1px solid #D4DAC6;margin:2.6em 0;}

@media (max-width:560px){
  .article{font-size:1.02rem;}
  .article > p:first-of-type{font-size:1.1rem;}
  .article ol > li{padding-left:2.5rem;}
  .article ol > li::before{width:1.75rem;height:1.75rem;font-size:0.85rem;}
}

/* A pair of plates side by side, as the invitation sets them. */
.pop-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
  max-width:41rem;margin:0 auto 2.4rem;
}
.pop-pair figure{margin:0;}
.pop-pair img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:12px;border:1px solid rgba(20,32,26,0.10);
}
@media (max-width:520px){ .pop-pair{grid-template-columns:1fr;gap:1rem;} }

/* ═══════════ Reading layout ═══════════
   A contents rail beside the column on wide screens, a collapsible summary on
   narrow ones. The rail is server-rendered so its links work without JS. */

.read-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2.5rem;
  align-items:start;
}
@media (min-width:1100px){
  .read-layout{
    grid-template-columns:15rem minmax(0,1fr);
    max-width:60rem;margin-inline:auto;
  }
  .read-layout .article{margin-inline:0;}
}

/* ---------- contents rail ---------- */
.toc{position:sticky;top:5.5rem;}
.toc-title{
  font-family:var(--font-body,inherit);
  font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:#6a7568;margin-bottom:0.9rem;
}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:0.1rem;
  border-left:2px solid #D4DAC6;}
.toc-link{
  display:block;padding:0.42rem 0 0.42rem 0.9rem;margin-left:-2px;
  border-left:2px solid transparent;
  font-size:0.88rem;line-height:1.35;color:#5c6b5f;text-decoration:none;
  transition:color 0.15s ease,border-color 0.15s ease;
}
.toc-link:hover{color:#286932;}
.toc-link.is-active{color:#1C2A24;font-weight:600;border-left-color:#1EAF32;}

/* Narrow screens: fold it away above the article. */
.toc-mobile{
  border:1px solid #D4DAC6;border-radius:12px;background:#fbfcf7;
  padding:0.9rem 1.1rem;margin-bottom:2rem;max-width:41rem;margin-inline:auto;
}
.toc-mobile > summary{
  cursor:pointer;font-weight:700;font-size:0.92rem;color:#286932;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.toc-mobile > summary::-webkit-details-marker{display:none;}
.toc-mobile > summary::after{content:"⌄";font-size:1.1rem;line-height:1;}
.toc-mobile[open] > summary::after{content:"⌃";}
.toc-mobile .toc-list{margin-top:0.8rem;}
@media (min-width:1100px){ .toc-mobile{display:none;} }
@media (max-width:1099px){ .toc-desktop{display:none;} }

/* ---------- progress + back to top ---------- */
.read-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:transparent;pointer-events:none;
}
.read-progress > span{
  display:block;height:100%;background:#2FF141;
  transition:width 0.12s linear;
}
.to-top{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:250;
  width:2.8rem;height:2.8rem;border-radius:50%;
  border:1px solid rgba(20,32,26,0.14);background:rgba(246,248,239,0.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#2B4835;font-size:1.1rem;line-height:1;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;
  box-shadow:0 6px 20px rgba(14,42,23,0.14);
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:#fff;color:#286932;}

/* Deep links shouldn't hide the heading under the sticky site header. */
.article h2{scroll-margin-top:6rem;}

/* ---------- article meta line ---------- */
.read-meta{
  display:flex;flex-wrap:wrap;gap:0.5rem 1.1rem;align-items:center;
  font-size:0.95rem;color:var(--on-dark-soft,rgba(233,237,217,0.72));
}
.read-meta .dot{opacity:0.45;}

@media (prefers-reduced-motion:reduce){
  .read-progress > span,.to-top{transition:none;}
}

/* Touch targets in the collapsible contents must clear 44px. */
@media (max-width:1099px){
  .toc-mobile .toc-link{padding:0.72rem 0 0.72rem 0.9rem;font-size:0.95rem;}
  .toc-mobile > summary{padding:0.35rem 0;}
}