/* =====================================================================
   post.css — the journal-post vocabulary, shared by every essay.
   Loaded AFTER base.css. Owns the reading column, the pull quote,
   figures, the share block and the tail. Tokens, nav, footer: base.css.
   ===================================================================== */

/* The post nav carries the same active underline as the rest of the site */
.primary .brand .sep{color:var(--ink-3)}
.primary .brand .ed{font-family:var(--mono);font-weight:400;letter-spacing:.02em;font-size:12px;color:var(--ink-3)}

.rule-hair{border-top:1px solid var(--hairline)}
.theme-tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.arr-link{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:gap .2s, color .15s;
}
.arr-link:hover{gap:14px;color:var(--ink)}
.arr-link .arr{font-family:var(--sans);font-size:14px}

/* =====================================================================
   HERO — crumbs → meta → h1 → abstract → byline
   ===================================================================== */
.post-hero{padding:56px 0 48px;background:var(--accent)}
.post-hero .crumbs{
  display:flex;align-items:center;gap:14px;margin-bottom:40px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);
}
/* Back-link — a secondary button, like every other back-link on the site */
.post-hero .crumbs .back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;letter-spacing:.005em;color:var(--ink);
  background:transparent;border:1.5px solid var(--ink);white-space:nowrap;padding:14px 22px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.post-hero .crumbs .back .arr{display:inline-block;line-height:1;transition:transform .15s}
.post-hero .crumbs .back:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--ink-4);border-color:var(--ink-3);color:var(--ink)}
.post-hero .crumbs .back:hover .arr{transform:translateX(-3px)}
.post-hero .crumbs .sep{color:var(--ink-4)}
.post-hero .crumbs .here{
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:500;
}

.post-hero .meta-row{display:flex;gap:18px;align-items:center;margin-bottom:24px}
.post-hero .meta-row .theme{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:4px 10px;
}
.post-hero .meta-row .dot{color:var(--ink-4)}
.post-hero .meta-row .date,
.post-hero .meta-row .read{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

.post-hero h1{
  font-family:var(--sans);font-weight:700;letter-spacing:-.025em;line-height:.92;
  font-size:var(--t-page);color:var(--ink);text-wrap:balance;max-width:18ch;
}
.post-hero h1 .second{color:var(--ink-3)}
.post-hero .abstract{
  margin-top:30px;font-family:var(--body);font-size:clamp(22px, 1.9vw, 26px);
  line-height:1.4;letter-spacing:-.008em;color:var(--ink);
  font-variation-settings:"opsz" 36;text-wrap:pretty;max-width:48ch;
}
.post-hero .abstract em{font-style:italic}

.post-hero .byline{
  margin-top:36px;padding-top:18px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.post-hero .byline strong{font-weight:500;color:var(--ink-2)}
.post-hero .byline .theme{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:4px 10px;
}

/* =====================================================================
   BODY — one measured reading column
   ===================================================================== */
.post-body{padding:48px 0 80px}
.post-body .col{max-width:var(--measure-read);margin:0 auto}
.post-body p{
  font-family:var(--body);font-size:var(--t-read);line-height:1.7;letter-spacing:-.003em;
  color:var(--ink);margin-bottom:20px;text-wrap:pretty;
}
.post-body .lead-para{font-size:22px;line-height:1.55;font-weight:500;margin-bottom:28px}
.post-body .lead-para::first-letter{
  font-family:var(--sans);font-weight:700;font-size:5.2em;float:left;
  line-height:.85;padding:6px 12px 0 0;color:var(--ink);
}
.post-body h2{
  font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  font-size:var(--t-sub);line-height:1.08;color:var(--ink);margin:48px 0 16px;text-wrap:balance;
}
.post-body h3{
  font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:12px;color:var(--ink-3);margin:36px 0 12px;
}

/* The pulled line — extends past the column */
.post-body .pull{
  margin:48px -8vw;padding:32px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--hairline);
  font-family:var(--mono);font-size:clamp(22px, 2.2vw, 32px);line-height:1.28;letter-spacing:-.015em;
  color:var(--ink);text-align:center;text-wrap:balance;max-width:none;
}
@media(max-width:880px){.post-body .pull{margin-left:0;margin-right:0}}

/* Figures — documents keep their edges; the caption is a label */
.post-body figure{margin:48px -8vw;display:flex;flex-direction:column;gap:12px}
@media(max-width:880px){.post-body figure{margin:32px 0}}
.post-body figure img{display:block;width:100%;height:auto;border:1px solid var(--hairline);background:#fff}
.post-body figcaption{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.55;color:var(--ink-3);padding-left:8px;
}

/* Italic is emphasis; mono is a label. They are not the same thing. */
.post-body em{font-style:italic}
.post-body strong{font-weight:600;letter-spacing:-.006em;color:var(--ink)}
.post-body a:not(.btn){border-bottom:1px solid var(--ink-4);transition:border-color .15s}
.post-body a:not(.btn):hover{border-bottom-color:var(--ink);color:inherit}

.post-body ul,.post-body ol{margin:8px 0 20px 24px;padding-left:8px}
.post-body li{font-family:var(--body);font-size:var(--t-read);line-height:1.7;color:var(--ink);margin-bottom:8px;padding-left:6px}

.post-body .endmark{
  margin:64px 0 0;padding-top:24px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
}
.post-body .endmark .glyph{display:inline-block;width:8px;height:8px;background:var(--ink);margin:0 8px;transform:translateY(1px)}

/* Sources line */
.post-body .sources{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--ink-3);
}

/* =====================================================================
   TAIL — share, preview card, prev/next, return
   ===================================================================== */
.post-tail{padding:48px 0 64px;border-top:1px solid var(--hairline)}
.post-tail .col{max-width:var(--measure-read);margin:0 auto}

.share{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--hairline)}
.share .lbl{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.share .links{display:flex;gap:12px}
.share .links a{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 11px;border:1px solid var(--hairline);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.share .links a:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--ink-4);border-color:var(--ink-3);color:var(--ink-2)}

.share-preview{margin-top:32px;padding:24px;background:var(--paper-2);display:flex;gap:24px;align-items:stretch;border:1px solid var(--hairline)}
.share-preview .label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.share-preview .og{
  flex:0 0 auto;width:320px;aspect-ratio:1200 / 630;background:var(--paper);border:1px solid var(--ink);
  padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;position:relative;overflow:hidden;
}
.share-preview .og .og-theme{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.share-preview .og .og-title{font-family:var(--sans);font-weight:700;font-size:24px;line-height:.96;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;align-self:end}
.share-preview .og .og-foot{display:flex;justify-content:space-between;align-items:end;gap:12px;border-top:1px solid var(--ink);padding-top:6px}
.share-preview .og .og-foot .author,
.share-preview .og .og-foot .mark{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-3)}
.share-preview .og .og-foot .author{color:var(--ink-2)}
.share-preview .og .og-mark{position:absolute;right:18px;top:18px;width:42px;height:42px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}
.share-preview .og .og-mark span{background:var(--ink-4)}
.share-preview .og .og-mark span:nth-child(1),
.share-preview .og .og-mark span:nth-child(5),
.share-preview .og .og-mark span:nth-child(9){background:var(--ink)}
.share-preview .right{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}
.share-preview .right .h{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.share-preview .right .d{font-family:var(--body);font-size:15px;line-height:1.55;color:var(--ink-2);max-width:42ch}

.next-prev{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.next-prev a{padding:24px 18px;display:flex;flex-direction:column;gap:6px;transition:background .15s}
.next-prev a:first-child{border-right:1px solid var(--hairline)}
.next-prev a:hover{background:rgba(15,14,11,.02);color:inherit}
.next-prev a:last-child{text-align:right}
.next-prev .dir{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.next-prev .t{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.008em;color:var(--ink);line-height:1.2}

.return-cta{margin-top:48px;text-align:center}
.return-cta a{
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1.5px solid var(--ink);
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;letter-spacing:.005em;color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.return-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--ink-4);border-color:var(--ink-3);color:var(--ink)}

@media(max-width:600px){
  .share-preview{flex-direction:column}
  .share-preview .og{width:100%}
  .next-prev{grid-template-columns:1fr}
  .next-prev a:first-child{border-right:0;border-bottom:1px solid var(--hairline)}
  .next-prev a:last-child{text-align:left}
}