/* ═════════════════════════════════════════════════════════════════
   BLOG · essays and the writing index (blog/*.html)
   Builds on css/ink.css tokens only. Load after ink.css:
     <link rel="stylesheet" href="../css/ink.css" />
     <link rel="stylesheet" href="blog.css" />
   No boxes, no cards, no uppercase labels. Hairlines and space only.
   ═════════════════════════════════════════════════════════════════ */

/* ── ARTICLE OPENING ──
   Essay titles are full sentences, so the h1 runs smaller than a page title.
   The back link sits in the margin on desktop and above the title on mobile. */
.post-hero{padding-bottom:clamp(40px,5vw,72px)}
.post-hero h1{font-size:clamp(40px,4.3vw,62px);line-height:1.08;letter-spacing:-.012em;max-width:17em;margin-bottom:clamp(22px,2.4vw,32px)}
.post-hero .hero-note{font-size:17px}
.post-hero .meta{margin:0}

/* ── ARTICLE BODY ──
   Margin: tick, "From Faith", and the essay's drawing (sticks while reading).
   Text: a 64–68ch measure with generous leading.                       */
.post-margin{grid-column:1 / span 3;align-self:start;position:sticky;top:120px}
.post-margin .inkart{margin-top:30px}
.article .prose{font-size:clamp(18px,1.35vw,20px);line-height:1.82}
.article .prose p{max-width:34em}
.article .prose > * + *{margin-top:1.15em}
/* section break: one small dry-brush mark instead of a rule */
.article .prose hr{width:44px;height:9px;margin:2.6em 0;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cfilter id='f' x='-5%25' y='-40%25' width='110%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath d='M1 4.6 C 8 3.2, 20 3.4, 39 4.1 L 38.6 4.9 C 22 5.4, 10 6.2, 1.4 6.4 Z' fill='%237A6A5D' filter='url(%23f)'/%3E%3C/svg%3E") no-repeat left center/contain}

/* sign-off: Faith's photo, name, role */
.post-sign{display:flex;align-items:center;gap:18px;margin-top:clamp(56px,6vw,80px)}
.post-sign-img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center 12%;flex:none}
.post-sign-name{font-family:var(--f-display);font-size:24px;line-height:1.2;color:var(--ink)}
.post-sign .meta{margin-top:2px}

/* closing invitation, after the sign-off */
.post-next{margin-top:clamp(48px,5vw,72px)}
.post-next .aside-line{margin-top:0}
.post-next p:not(.aside-line){font-size:18px;color:var(--text-2);margin-top:18px}

/* ── READ MORE ── fine-line list of other essays, then the Substack link */
.rm-list a,.post-index a{display:block;color:var(--ink)}
.rm-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px}
.rm-title{font-family:var(--f-display);font-size:clamp(22px,1.9vw,26px);line-height:1.25;transition:color .4s}
.rm-list .meta{white-space:nowrap;flex:none}
.rm-list a:hover .rm-title,.post-index a:hover h2{color:var(--wash)}
.rm-all{margin-top:28px}
.rm-sub{margin-top:clamp(64px,7vw,104px)}
.rm-sub h2{font-size:clamp(28px,2.6vw,34px);font-weight:400;line-height:1.15;margin:0;max-width:none}

/* ── WRITING INDEX ── each essay: date, title, excerpt, separated by hairlines */
.post-index{list-style:none;max-width:40em}
.post-index li{padding:clamp(30px,3vw,42px) 0;border-bottom:1px solid var(--rule)}
.post-index li:first-child{border-top:1px solid var(--rule)}
.post-index h2{font-size:clamp(27px,2.5vw,34px);line-height:1.18;margin:6px 0 0;max-width:24em;transition:color .4s}
.post-index .pi-ex{margin-top:14px;font-size:17px;color:var(--text-2);max-width:36em}
.post-index .pi-read{display:inline-block;margin-top:16px}

@media (prefers-reduced-motion:reduce){
  .rm-title,.post-index h2{transition:none}
}
@media (max-width:860px){
  .post-hero .hero-note{display:block;margin-bottom:28px}
  .post-hero h1{font-size:clamp(34px,9vw,46px)}
  .post-margin{position:static;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
  .post-margin .inkart{margin-top:0;width:120px !important;height:144px !important}
  .rm-list a{flex-direction:column;gap:4px}
}

/* shorter bottom space for sections that end on a wash */
.sec.pb-sm{padding-bottom:clamp(64px,7vw,110px)}