/* ==========================================================
   Libélula Journal
   Calm, magazine-grade typography for long-form reading.
   No script font. No hover gymnastics. Reveals are slow.
   ========================================================== */

/* The journal lives on warm paper, not the global cream. */
html, body { background: #fdfbf4; }
.footer { background: #fdfbf4; border-top: 0; }
body[data-reading="dark"] html { background: #0F1113; }
body[data-reading="dark"] { background: #0F1113; }
body[data-reading="dark"] .footer { background: #0F1113; border-top: 0; }

/* Stronger reduced-motion default — opt-in animation only. */
@media (prefers-reduced-motion: reduce) {
  .j-reveal, .j-reveal * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------
   REVEAL — a single, slow exhale. 900ms, 8px lift, ease-out.
   Stagger via inline --d (set per element).
   ---------------------------------------------------------- */
.j-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.j-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   HEADER — restrained. A single editorial bar, that's it.
   ========================================================== */
.journal-head {
  padding: clamp(7rem, 11vw, 9rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.journal-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 760px) {
  .journal-head__inner { grid-template-columns: 1fr; align-items: start; }
}

.journal-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.journal-head__eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--ink-quiet);
  display: inline-block;
}

.journal-head__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.journal-head__title em {
  /* Cormorant italic carries all the brand emphasis we need.
     No script font here — it doesn't belong in long-form reading. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.journal-head__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-quiet);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

/* ==========================================================
   THE GRID — nine icons, one tone, no labels.
   The names live in the list below. The icons set the mood.
   ========================================================== */
.journal-grid-section {
  padding: 0 0 clamp(4rem, 8vw, 6rem);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Hairline grid lines instead of cell backgrounds — feels lighter, more printed. */
  background:
    linear-gradient(rgba(31, 42, 34, 0.12), rgba(31, 42, 34, 0.12)) 33.333% center / 1px 100% no-repeat,
    linear-gradient(rgba(31, 42, 34, 0.12), rgba(31, 42, 34, 0.12)) 66.666% center / 1px 100% no-repeat,
    linear-gradient(rgba(31, 42, 34, 0.12), rgba(31, 42, 34, 0.12)) center 33.333% / 100% 1px no-repeat,
    linear-gradient(rgba(31, 42, 34, 0.12), rgba(31, 42, 34, 0.12)) center 66.666% / 100% 1px no-repeat;
  border-top: 1px solid rgba(31, 42, 34, 0.12);
  border-bottom: 1px solid rgba(31, 42, 34, 0.12);
  aspect-ratio: 3 / 2;
  width: 100%;
}
.journal-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
  /* No background — let the paper show through, only a wash on hover. */
  transition: background-color 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-tile:hover {
  background-color: rgba(31, 42, 34, 0.04);
}
.journal-tile__art {
  width: 70%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No scale on hover — calm. The wash alone is the response. */
}
.journal-tile__art svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-tile:hover .journal-tile__art img {
  transform: scale(1.03);
}
.journal-tile:hover .journal-tile__art svg {
  stroke: var(--jungle-deep);
}
.journal-tile__num {
  position: absolute;
  top: clamp(.6rem, 1.2vw, 1rem);
  left: clamp(.7rem, 1.4vw, 1.1rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--ink-whisper);
  transition: color 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-tile:hover .journal-tile__num { color: var(--ink-quiet); }

@media (max-width: 760px) {
  /* Squarer grid (1:1) so the full 9-tile block fits above the fold on
     phones, plus larger icons (78% of cell vs 50%) so they read clearly. */
  .journal-grid { aspect-ratio: 1 / 1; }
  .journal-tile__art { width: 78%; max-width: none; }
}
@media (max-width: 420px) {
  /* On very small phones, push icons even larger. */
  .journal-tile__art { width: 86%; }
}

/* ==========================================================
   THE LIST — asymmetric magazine layout.
   Left column: kicker + date.  Right column: headline + dek.
   ========================================================== */
.journal-list-section {
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(5rem, 9vw, 8rem);
  border-top: 1px solid rgba(31, 42, 34, 0.16);
}
.journal-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.journal-list-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.journal-list-head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}
.journal-list-head__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  flex-shrink: 0;
}

.journal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.journal-list > li + li {
  border-top: 1px solid rgba(31, 42, 34, 0.12);
}

.journal-entry {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  align-items: baseline;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Variant with a cover thumbnail in a leading column. */
.journal-entry--has-cover {
  grid-template-columns: clamp(100px, 14vw, 160px) minmax(140px, 200px) 1fr auto;
  align-items: center;
}
.journal-entry__cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-entry__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.journal-entry--has-cover:hover .journal-entry__cover { transform: scale(1.04); }

@media (max-width: 760px) {
  .journal-entry {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.75rem 0;
  }
  .journal-entry--has-cover {
    grid-template-columns: 80px 1fr auto;
    grid-template-areas:
      "cover meta arrow"
      "cover content arrow";
    column-gap: 1rem;
    row-gap: 0.4rem;
    align-items: center;
  }
  .journal-entry--has-cover .journal-entry__cover { grid-area: cover; align-self: center; }
  .journal-entry--has-cover .journal-entry__meta { grid-area: meta; }
  .journal-entry--has-cover > div:not([class]) { grid-area: content; }
  .journal-entry--has-cover .journal-entry__arrow { grid-area: arrow; }
}

/* When hovering the list, the OTHER entries dim — so the focus is real. */
.journal-list:hover .journal-entry { opacity: 0.45; }
.journal-list:hover .journal-entry:hover { opacity: 1; }

.journal-entry__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-top: 0.5rem; /* aligns with the headline cap-height */
}
.journal-entry__cat {
  color: var(--jungle-deep);
}
.journal-entry__date {
  color: var(--ink-whisper);
}
.journal-entry__time {
  color: var(--ink-whisper);
}
@media (max-width: 760px) {
  .journal-entry__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    padding-top: 0;
    margin-bottom: 0.3rem;
  }
}

.journal-entry__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.45em;
  text-wrap: balance;
  transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-entry__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}
.journal-entry:hover .journal-entry__title { color: var(--jungle-deep); }
.journal-entry:hover .journal-entry__title em { color: var(--jungle-deep); }

.journal-entry__dek {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-quiet);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}

.journal-entry__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-self: center;
  color: var(--ink-whisper);
  transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-entry:hover .journal-entry__arrow {
  color: var(--jungle-deep);
  transform: translateX(6px);
}
@media (max-width: 760px) {
  .journal-entry__arrow { display: none; }
}

/* ==========================================================
   POST PAGE — dedicated long-read styles.
   Reading scale + theme switching live here too.
   ========================================================== */
:root {
  --read-scale: 1;
}
/* ==========================================================
   DARK MODE — industry-standard reader theme.
   - Surface: near-black warm (#0F1113)
   - Body text: #E6E2D9 (off-white, warm)
   - Quiet text: #9A958A
   - Accent: #C9A86A (warm gold, replaces green for legibility)
   - Borders: rgba(230, 226, 217, 0.12)
   ========================================================== */
body[data-reading="dark"] {
  background: #0F1113;
  color: #E6E2D9;
}
body[data-reading="dark"] html { background: #0F1113; }
body[data-reading="dark"] .footer { background: #0F1113; }

/* body text + headings */
body[data-reading="dark"] .post-body p,
body[data-reading="dark"] .post-body h2,
body[data-reading="dark"] .post-body h3,
body[data-reading="dark"] .post-body li,
body[data-reading="dark"] .post-body blockquote,
body[data-reading="dark"] .post-body p.lede,
body[data-reading="dark"] .post-title,
body[data-reading="dark"] .post-cta h3,
body[data-reading="dark"] .post-related__head h2,
body[data-reading="dark"] .related-card__title,
body[data-reading="dark"] .related-card__excerpt,
body[data-reading="dark"] .journal-list-head h2,
body[data-reading="dark"] .journal-entry__title,
body[data-reading="dark"] .journal-entry__dek {
  color: #E6E2D9;
}

/* italic emphasis in titles still gets the warm-gold accent */
body[data-reading="dark"] .post-title em,
body[data-reading="dark"] .post-body h2 em,
body[data-reading="dark"] .post-body h3 em {
  color: #C9A86A;
}

/* deck (standfirst) — softer warm grey */
body[data-reading="dark"] .post-deck { color: #B8B2A4; }

/* lede drop-cap — warm gold instead of green */
body[data-reading="dark"] .post-body p.lede::first-letter { color: #C9A86A; }

/* meta row dots, monospace eyebrows */
body[data-reading="dark"] .post-meta-row,
body[data-reading="dark"] .post-body figcaption,
body[data-reading="dark"] .post-body h3,
body[data-reading="dark"] .post-signoff__role { color: #9A958A; }
body[data-reading="dark"] .post-meta-row a { color: #9A958A; border-color: rgba(230, 226, 217, 0.25); }
body[data-reading="dark"] .post-meta-row a:hover { color: #E6E2D9; border-color: #E6E2D9; }

/* progress bar accent */
body[data-reading="dark"] .read-progress__bar { background: #C9A86A; }

/* nav surface */
body[data-reading="dark"] .nav { background: rgba(15, 17, 19, 0.85); }

/* dividers */
body[data-reading="dark"] .journal-list > li + li,
body[data-reading="dark"] .journal-list-section,
body[data-reading="dark"] .journal-head__inner,
body[data-reading="dark"] .post-signoff { border-color: rgba(230, 226, 217, 0.12); }

/* callout dark-mode handled inline with the .callout block */

/* pull-quote */
body[data-reading="dark"] .post-body .pull { color: #E6E2D9; }
body[data-reading="dark"] .post-body blockquote { border-left-color: #C9A86A; }

/* sign-off + name */
body[data-reading="dark"] .post-signoff__name { color: #E6E2D9; }

/* related cards eyebrows */
body[data-reading="dark"] .journal-entry__cat,
body[data-reading="dark"] .related-card__cat,
body[data-reading="dark"] .post-related__head .eyebrow {
  color: #C9A86A;
}
body[data-reading="dark"] .journal-entry:hover .journal-entry__title,
body[data-reading="dark"] .journal-entry:hover .journal-entry__title em,
body[data-reading="dark"] .journal-entry:hover .journal-entry__arrow { color: #C9A86A; }
body[data-reading="dark"] .journal-tile:hover .journal-tile__art svg { stroke: #C9A86A; }

/* CTA panel */
body[data-reading="dark"] .post-cta { background: #15181A; border-color: rgba(230, 226, 217, 0.10); }
body[data-reading="dark"] .post-cta__eyebrow { color: #C9A86A; }

/* reading toolbar */
body[data-reading="dark"] .reading-tools {
  background: rgba(15, 17, 19, 0.92);
  border-color: rgba(230, 226, 217, 0.14);
}
body[data-reading="dark"] .rt-btn { color: #E6E2D9; }
body[data-reading="dark"] .rt-btn:hover { background: rgba(230, 226, 217, 0.08); }
body[data-reading="dark"] .rt-btn[aria-pressed="true"] { background: #C9A86A; color: #0F1113; }

/* progress bar */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 90;
  pointer-events: none;
  background: transparent;
}
.read-progress__bar {
  height: 100%;
  width: 0;
  background: var(--jungle-deep);
  transition: width 120ms linear;
}

/* nav auto-hide — preserves the existing translateX(-50%) centering */
.nav { transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), background 500ms cubic-bezier(0.22, 1, 0.36, 1), padding 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav.is-hidden { transform: translateX(-50%) translateY(-180%); }

/* ==========================================================
   POST PAGE — TYPOGRAPHIC SYSTEM
   --------------------------------------------------------
   ONE rhythm: 1.4em (= the body line-height) is the unit.
   ONE measure: 680px container, ~62ch comfortable.
   ONE scale: modular, ratio ≈ 1.25 from 1.18rem base.
        body / beat / refrain   1.18rem
        deck                    1.40rem
        h2                      1.85rem
        pull                    2.05rem
        finale                  2.45rem
   THREE weights only: 300 display (titles), 400 body, 500 emphasis.
   ALL spacing is a multiple of 1.4em so the reader's eye finds
   a predictable cadence between every block.
   ========================================================== */

/* post header */
.post-header {
  padding-top: clamp(7rem, 12vw, 9rem);
  padding-bottom: 0;            /* the body owns the gap to the first paragraph */
}
.post-header .container { max-width: 680px; }
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.post-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.post-meta-row a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 42, 34, 0.25);
  padding-bottom: 1px;
  transition: border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.post-meta-row a:hover { border-color: var(--ink); }

.post-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem 0;
  max-width: 16ch;
  color: var(--ink);
  text-wrap: balance;
}
.post-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--jungle-deep);
}
.post-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(1.4rem * var(--read-scale));
  line-height: 1.45;
  letter-spacing: -0.003em;
  color: var(--ink-quiet);
  max-width: 38ch;
  margin: 0;
  text-wrap: pretty;
}
.post-deck::first-letter {
  font-size: inherit;
  float: none;
  padding: 0;
  color: inherit;
}

/* post hero image */
.post-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
  overflow: hidden;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: none;
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

/* article body
   The deck-to-first-paragraph gap is owned HERE (2.8em ≈ two body lines),
   not split between header padding-bottom + body padding-top + p margin-top. */
.post-body { padding: 2.8em 0 clamp(2.5rem, 5vw, 4rem); }
.post-body .container { max-width: 680px; }
.post-body > .container > *:first-child { margin-top: 0; }
.post-body p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(1.18rem * var(--read-scale));
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.4em 0;
}
.post-body p.lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(1.18rem * var(--read-scale));
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.4em 0;
}
.post-body p.lede::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: 3.4em;
  float: left;
  line-height: 0.88;
  padding: 0.06em 0.12em 0 0;
  color: var(--jungle-deep);
}

/* ----- BYLINE — sign-off block at the end of the article ----- */
.post-signoff {
  margin: 3.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(31, 42, 34, 0.16);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.post-signoff__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-deep);
}
.post-signoff__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-signoff__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}
.post-signoff__role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 0.25rem;
}
body[data-reading="dark"] .post-signoff__name { color: #E9E5DD; }
body[data-reading="dark"] .post-signoff { border-color: rgba(233, 229, 221, 0.14); }

/* ----- CALLOUT — editorial aside.
   Asterism (✻ ✻ ✻) centered above, larger italic display text,
   no fill / no box / no caps eyebrow. Reads like a printed aside.
   The <strong> label is folded into the prose as an italic lead-in.
   ----- */
.post-body .callout {
  margin: 3.2em auto;
  padding: 0;
  background: none;
  border: 0;
  max-width: 36ch;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: calc(1.32rem * var(--read-scale));
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--ink);
  text-wrap: pretty;
  position: relative;
}
.post-body .callout::before {
  content: "✻   ✻   ✻";
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  color: var(--jungle-deep);
  opacity: 0.55;
  margin-bottom: 1.4em;
  padding-right: 0.4em; /* optical balance for the trailing letter-spacing */
}
.post-body .callout strong {
  display: inline;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--jungle-deep);
  margin: 0;
}
.post-body .callout strong::after {
  content: " — ";
  color: var(--ink-quiet);
  font-style: normal;
}
body[data-reading="dark"] .post-body .callout {
  background: none;
  color: #E6E2D9;
}
body[data-reading="dark"] .post-body .callout::before { color: #C9A86A; opacity: 0.7; }
body[data-reading="dark"] .post-body .callout strong { color: #C9A86A; }
body[data-reading="dark"] .post-body .callout strong::after { color: #9A958A; }

/* ----- PULL QUOTE — display fragment, breathes 2.1em on each side ----- */
.post-body .pull {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(2.05rem * var(--read-scale));
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2.1em auto;
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
}
.post-body .pull em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}
body[data-reading="dark"] .post-body .pull { color: #E9E5DD; }

/* ----- FIGURE ----- */
.post-body figure {
  margin: 2.4em -2rem;
}
.post-body figure img {
  width: 100%;
  height: auto;
  display: block;
}
.post-body figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 0.9rem;
  padding: 0 2rem;
  text-align: center;
}
.post-body blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
@media (max-width: 760px) {
  .post-body figure { margin: 2em 0; }
  .post-body figcaption { padding: 0; text-align: left; }
}
/* H2 — sub-headings inside the essay.
   These are NOT chapter titles; they are emphatic continuations of the prose
   ("Ayahuasca is not for everyone", "So what should you do?"). So we keep
   them tight to the paragraph above (1.6em top, ~one body-line of breath)
   and tight to the paragraph below (0.5em). Smaller than before, bolder. */
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(1.45rem * var(--read-scale));
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 1.6em 0 0.5em;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: balance;
}
.post-body h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--jungle-deep);
}
.post-body > .container > h2:first-child { margin-top: 0; }
.post-body h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(0.78rem * var(--read-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 2.4em 0 0.8em;
  color: var(--ink-quiet);
}
.post-body ul, .post-body ol {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(1.18rem * var(--read-scale));
  line-height: 1.65;
  padding-left: 1.4em;
  margin: 0 0 1.4em 0;
  color: var(--ink);
}
.post-body li { margin-bottom: 0.5em; }
.post-body blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(1.45rem * var(--read-scale));
  line-height: 1.4;
  color: var(--ink);
  margin: 2em 0;
  padding-left: 1.2em;
  border-left: 1px solid var(--jungle-deep);
}
.post-body em { font-style: italic; }
.post-body strong { font-weight: 600; }

/* ----- BEAT — same as a body paragraph. The author's line break is the cadence.
   No negative margin, no italic, no quiet ink: a short paragraph IS the pause. ----- */
.post-body p.beat {
  margin: 0 0 1.4em 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: calc(1.18rem * var(--read-scale));
  line-height: 1.65;
  color: var(--ink);
}

/* ----- MOVEMENT — a transitional line that opens a new movement of the essay
   ("Now the unromantic part." / "So what should you do?"). NOT a chapter title.
   Same family/size as body, slightly heavier, a little extra breath above. ----- */
.post-body p.movement {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: calc(1.18rem * var(--read-scale));
  line-height: 1.55;
  color: var(--ink);
  margin: 2.2em 0 1.4em 0;
}
.post-body p.movement em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--jungle-deep);
}

/* ----- REFRAIN — parallel-construction block.
   Same body size, same body weight; distinction is the rule on the left
   and the tighter stack inside. Does not shout. Reads as a held breath. ----- */
.post-body .refrain {
  margin: 1.8em 0;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(1.18rem * var(--read-scale));
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
  padding-left: 1.2em;
  border-left: 1px solid rgba(31, 42, 34, 0.18);
}
.post-body .refrain p { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
.post-body .refrain em {
  font-style: italic;
  color: var(--jungle-deep);
  font-weight: 500;
}
body[data-reading="dark"] .post-body .refrain { border-color: rgba(230, 226, 217, 0.12); }
body[data-reading="dark"] .post-body .refrain em { color: #C9A86A; }

/* ----- KICKER — section-opening short fragment that sets the tone.
   ("Now the unromantic part.") — slightly smaller-caps mono, sits below an h2. ----- */
.post-body p.kicker {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(0.78rem * var(--read-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 1.4em 0;
}

/* ----- FINALE — the closing display quote.
   Used once at the end of an essay. Larger than .pull, no border, centered. ----- */
.post-body .finale {
  margin: 2.8em auto 1.4em;
  padding: 2.1em 0 0;
  border-top: 1px solid rgba(31, 42, 34, 0.16);
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: calc(2.45rem * var(--read-scale));
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
}
.post-body .finale em {
  font-style: italic;
  color: var(--jungle-deep);
}
body[data-reading="dark"] .post-body .finale { border-top-color: rgba(230, 226, 217, 0.16); color: #E6E2D9; }
body[data-reading="dark"] .post-body .finale em { color: #C9A86A; }
.post-body hr {
  border: 0;
  margin: 3em auto;
  width: 48px;
  height: 1px;
  background: rgba(31, 42, 34, 0.25);
}

/* ----- READING TOOLBAR ----- */
.reading-tools {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(246, 243, 236, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(31, 42, 34, 0.12);
  border-radius: 100px;
  padding: 0.35rem;
  box-shadow: 0 12px 32px -16px rgba(31, 42, 34, 0.18);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-reading="dark"] .reading-tools {
  background: rgba(21, 25, 26, 0.88);
  border-color: rgba(233, 229, 221, 0.14);
}
.reading-tools.is-hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.rt-btn {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  position: relative;
  transition: background 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-reading="dark"] .rt-btn { color: #E9E5DD; }
.rt-btn:hover { background: rgba(31, 42, 34, 0.07); }
body[data-reading="dark"] .rt-btn:hover { background: rgba(255, 255, 255, 0.08); }
.rt-btn[aria-pressed="true"] { background: var(--jungle-deep); color: #fff; }
.rt-btn svg { width: 17px; height: 17px; }
.rt-aa { font-weight: 500; }
.rt-aa.rt-lg { font-size: 19px; }
.rt-toast {
  position: absolute;
  right: 110%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-toast.show { opacity: 1; }

/* ----- POST CTA + RELATED ----- */
/* Wrapper is full-bleed (edge to edge); inner .post-cta keeps the same height. */
.post-cta-wrap {
  width: 100%;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  background: var(--ink);
}
body[data-reading="dark"] .post-cta-wrap { background: #0A0D0D; }
.post-cta {
  margin: 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
  background: transparent;
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Square buttons in this CTA — override the pill border-radius from .btn */
.post-cta .btn { border-radius: 0; }
body[data-reading="dark"] .post-cta { background: #0A0D0D; }
.post-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.55);
  margin-bottom: 1.25rem;
}
.post-cta h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
  color: var(--paper);
  max-width: 28ch;
  margin-inline: auto;
  text-wrap: balance;
}
.post-cta h3 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--paper);
}
.post-cta p {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: rgba(246, 243, 236, 0.78);
  max-width: 50ch;
  margin: 0 auto 1.8rem;
  line-height: 1.5;
}
.post-cta__buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.post-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  transition: background 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.post-cta__btn--primary { background: var(--paper); color: var(--ink); }
.post-cta__btn--primary:hover { background: #fff; }
.post-cta__btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(246, 243, 236, 0.25); }
.post-cta__btn--ghost:hover { background: rgba(246, 243, 236, 0.08); }
.post-cta__btn .arrow { width: 16px; height: 16px; }

.post-related {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  border-top: 1px solid rgba(31, 42, 34, 0.16);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: 760px;
}
body[data-reading="dark"] .post-related { border-top-color: rgba(230, 226, 217, 0.12); }
.post-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.post-related__head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.post-related__head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}
.post-related__head a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 42, 34, 0.25);
  padding-bottom: 2px;
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.post-related__head a:hover { color: var(--ink); border-color: var(--ink); }
body[data-reading="dark"] .post-related__head a { color: #9A958A; border-color: rgba(230, 226, 217, 0.25); }
body[data-reading="dark"] .post-related__head a:hover { color: #E6E2D9; border-color: #E6E2D9; }

/* the rail becomes a vertical typographic list */
.post-related__rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: none;
  overflow: visible;
  counter-reset: related-counter;
}
@media (max-width: 760px) {
  .post-related__rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    scroll-padding: 0;
  }
}

/* each entry — thumb · body · arrow-on-right */
.related-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.25rem, 2vw, 1.6rem) 0;
  border-top: 1px solid rgba(31, 42, 34, 0.12);
  text-decoration: none;
  color: var(--ink);
  opacity: 1 !important;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.related-card:hover { transform: translateX(6px); }
.related-card:last-child { border-bottom: 1px solid rgba(31, 42, 34, 0.12); }
body[data-reading="dark"] .related-card { border-top-color: rgba(230, 226, 217, 0.12); }
body[data-reading="dark"] .related-card:last-child { border-bottom-color: rgba(230, 226, 217, 0.12); }

/* override the parent-hover dimming */
.post-related__rail:hover .related-card,
.post-related__rail:hover .related-card:hover { opacity: 1 !important; }

/* arrow column (right side) — thin SVG, matches journal index */
.related-card__arrow {
  width: 22px;
  height: 22px;
  align-self: center;
  justify-self: end;
  order: 3;
  color: var(--ink-quiet);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-reading="dark"] .related-card__arrow { color: #9A958A; }
.related-card:hover .related-card__arrow {
  transform: translateX(8px);
  color: var(--jungle-deep);
}
body[data-reading="dark"] .related-card:hover .related-card__arrow { color: #C9A86A; }
@media (max-width: 640px) {
  .related-card__arrow { display: none; }
}

/* body — category + title + excerpt */
.related-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.related-card__cat {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jungle-deep);
  margin: 0;
}
.related-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.related-card__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--jungle-deep);
}
.related-card__excerpt {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink-quiet);
  margin: 0;
  text-wrap: pretty;
  max-width: 52ch;
}

/* small image thumb — square, sits on the left */
.related-card__media {
  aspect-ratio: 1 / 1;
  width: 88px;
  height: 88px;
  background: var(--paper-deep);
  overflow: hidden;
  justify-self: start;
  position: relative;
}
.related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

/* hover — title shifts to accent, no other movement */
.related-card:hover .related-card__title,
.related-card:hover .related-card__title em { color: var(--jungle-deep); }
body[data-reading="dark"] .related-card:hover .related-card__title,
body[data-reading="dark"] .related-card:hover .related-card__title em { color: #C9A86A; }

/* mobile — stack the thumb above the text, hide arrow */
@media (max-width: 640px) {
  .related-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.75rem;
  }

  .related-card:hover { transform: none; }
  .related-card__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* stub coming-soon notice */
.stub-notice {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: rgba(31, 42, 34, 0.04);
  border-left: 1px solid var(--jungle-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .reading-tools { flex-direction: row; bottom: 1rem; right: 50%; transform: translateX(50%); }
  .reading-tools.is-hidden { transform: translateX(50%) translateY(140%); }
  .rt-toast { right: auto; left: 50%; bottom: 110%; top: auto; transform: translateX(-50%); }
}

/* ==========================================================
   ENGAGEMENT — likes + comments. Minimal, monoline, serif.
   No emoji. No coloured pills. Inline SVG glyphs at currentColor.
   ========================================================== */

/* ----- POST REACTIONS BAR — sits between sign-off and CTA ----- */
.post-reactions {
  max-width: 680px;
  margin: 2.5rem auto 0;
  padding: 1.4rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid rgba(31, 42, 34, 0.12);
}
body[data-reading="dark"] .post-reactions { border-top-color: rgba(230, 226, 217, 0.12); }
.post-reactions__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.react-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: 1px solid rgba(31, 42, 34, 0.16);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 100px;
  transition: background 300ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.react-btn:hover {
  background: rgba(31, 42, 34, 0.04);
  border-color: rgba(31, 42, 34, 0.32);
}
.react-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.react-btn[aria-pressed="true"] {
  color: var(--jungle-deep);
  border-color: var(--jungle-deep);
}
.react-btn[aria-pressed="true"] svg {
  fill: var(--jungle-deep);
  stroke: var(--jungle-deep);
  transform: scale(1.08);
}
.react-btn__count {
  font-variant-numeric: tabular-nums;
}
body[data-reading="dark"] .react-btn { color: #E6E2D9; border-color: rgba(230, 226, 217, 0.20); }
body[data-reading="dark"] .react-btn:hover { background: rgba(230, 226, 217, 0.06); border-color: rgba(230, 226, 217, 0.40); }
body[data-reading="dark"] .react-btn[aria-pressed="true"] { color: #C9A86A; border-color: #C9A86A; }
body[data-reading="dark"] .react-btn[aria-pressed="true"] svg { fill: #C9A86A; stroke: #C9A86A; }

/* ----- COMMENTS SECTION ----- */
.post-comments {
  max-width: 680px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0;
}
.post-comments__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(31, 42, 34, 0.16);
}
body[data-reading="dark"] .post-comments__head { border-bottom-color: rgba(230, 226, 217, 0.16); }
.post-comments__head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.post-comments__head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}
body[data-reading="dark"] .post-comments__head h2,
body[data-reading="dark"] .post-comments__head h2 em { color: #E6E2D9; }
.post-comments__count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
body[data-reading="dark"] .post-comments__count { color: #9A958A; }
.post-comments__inline-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-whisper);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  margin-left: 0.45rem;
  vertical-align: 0.2em;
}
body[data-reading="dark"] .post-comments__inline-count { color: #6F6A60; }

/* ----- COMMENT FORM — social-style composer ----- */
.comment-form {
  margin: 0 0 2.25rem;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 0.85rem;
  align-items: start;
}
.comment-form__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--jungle-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--paper);
  text-transform: uppercase;
  margin-top: 4px;
}
body[data-reading="dark"] .comment-form__avatar {
  background: #C9A86A;
  color: #0F1113;
}
.comment-form__box {
  border: 1px solid rgba(31, 42, 34, 0.14);
  border-radius: 16px;
  background: #fff;
  transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.comment-form__box:focus-within {
  border-color: rgba(31, 42, 34, 0.32);
  box-shadow: 0 1px 2px rgba(31, 42, 34, 0.04);
}
body[data-reading="dark"] .comment-form__box {
  background: #15181A;
  border-color: rgba(230, 226, 217, 0.14);
}
body[data-reading="dark"] .comment-form__box:focus-within {
  border-color: rgba(230, 226, 217, 0.28);
}

/* name field */
.comment-form__name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem 0.55rem;
}
.comment-form__name label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  flex-shrink: 0;
}
.comment-form__name input {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0.2rem 0;
  outline: none;
  border-radius: 0;
}
.comment-form__name input::placeholder {
  color: var(--ink-whisper);
  font-style: italic;
}
body[data-reading="dark"] .comment-form__name input { color: #E6E2D9; }
body[data-reading="dark"] .comment-form__name input::placeholder { color: #6F6A60; }

/* message textarea */
.comment-form textarea {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0.1rem 1.1rem 0.6rem;
  outline: none;
  resize: none;
  min-height: 72px;
  border-radius: 0;
  display: block;
}
.comment-form textarea::placeholder {
  color: var(--ink-whisper);
  font-style: italic;
}
body[data-reading="dark"] .comment-form textarea { color: #E6E2D9; }
body[data-reading="dark"] .comment-form textarea::placeholder { color: #6F6A60; }

.comment-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  border-top: 1px solid rgba(31, 42, 34, 0.06);
}
body[data-reading="dark"] .comment-form__actions { border-top-color: rgba(230, 226, 217, 0.06); }
.comment-form__hint {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}
body[data-reading="dark"] .comment-form__hint { color: #6F6A60; }
.comment-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comment-form__submit:hover { background: var(--jungle-deep); transform: translateY(-1px); }
.comment-form__submit:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.comment-form__submit svg {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 1.6;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-reading="dark"] .comment-form__submit { background: #C9A86A; color: #0F1113; }
body[data-reading="dark"] .comment-form__submit:hover { background: #d4b67c; }

@media (max-width: 560px) {
  .comment-form { grid-template-columns: 34px 1fr; gap: 0 0.7rem; }
  .comment-form__avatar { width: 34px; height: 34px; font-size: 0.55rem; }
  .comment-form__name { padding: 0.6rem 0.9rem 0.45rem; }
  .comment-form textarea { padding: 0.1rem 0.9rem 0.5rem; }
  .comment-form__actions { padding: 0.5rem 0.55rem 0.5rem 0.9rem; }
}

/* ----- COMMENT THREAD / LIST ----- */
.comment-thread {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-thread > li {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(31, 42, 34, 0.08);
}
.comment-thread > li:first-child { border-top: 0; padding-top: 0.5rem; }
body[data-reading="dark"] .comment-thread > li { border-top-color: rgba(230, 226, 217, 0.08); }

.comment {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 0.85rem;
  align-items: start;
}
.comment__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(31, 42, 34, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--jungle-deep);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}
body[data-reading="dark"] .comment__avatar { background: rgba(230, 226, 217, 0.07); color: #C9A86A; }

.comment__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.45rem;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}
.comment__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}
body[data-reading="dark"] .comment__name { color: #E6E2D9; }
.comment__handle {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-whisper);
  letter-spacing: 0;
  text-transform: none;
}
body[data-reading="dark"] .comment__handle { color: #6F6A60; }
.comment__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-whisper);
  letter-spacing: 0;
  text-transform: none;
}
body[data-reading="dark"] .comment__meta { color: #6F6A60; }
.comment__badge {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jungle-deep);
  background: rgba(31, 42, 34, 0.06);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  line-height: 1;
  align-self: center;
  margin-left: 0.15rem;
}
body[data-reading="dark"] .comment__badge { color: #C9A86A; background: rgba(201, 168, 106, 0.14); }

.comment__body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.comment__body em { font-style: italic; }
body[data-reading="dark"] .comment__body { color: #E6E2D9; }

.comment__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.55rem 0 0 -0.5rem;
}
.comment-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-whisper);
  cursor: pointer;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comment-action:hover { color: var(--jungle-deep); background: rgba(31, 42, 34, 0.05); }
.comment-action svg {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.5;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: fill 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comment-action[aria-pressed="true"] { color: var(--jungle-deep); }
.comment-action[aria-pressed="true"] svg { fill: var(--jungle-deep); }
body[data-reading="dark"] .comment-action { color: #6F6A60; }
body[data-reading="dark"] .comment-action:hover { background: rgba(230, 226, 217, 0.06); color: #C9A86A; }
body[data-reading="dark"] .comment-action[aria-pressed="true"] { color: #C9A86A; }
body[data-reading="dark"] .comment-action[aria-pressed="true"] svg { fill: #C9A86A; }
.comment-action__count { font-variant-numeric: tabular-nums; }

/* ----- REPLIES — single-level nesting with thread connector ----- */
.comment__replies {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.comment__replies > li {
  position: relative;
  padding: 0 0 1.1rem 0;
}
.comment__replies > li:last-child { padding-bottom: 0; }
/* vertical connector that runs through the avatar column of replies */
.comment__replies > li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: rgba(31, 42, 34, 0.12);
}
.comment__replies > li:last-child::before { display: none; }
body[data-reading="dark"] .comment__replies > li::before { background: rgba(230, 226, 217, 0.12); }
.comment__replies .comment {
  grid-template-columns: 32px 1fr;
  gap: 0 0.75rem;
}
.comment__replies .comment__avatar {
  width: 32px; height: 32px;
  font-size: 0.6rem;
  margin-top: 0;
}
.comment__replies .comment__name { font-size: 0.92rem; }
.comment__replies .comment__body { font-size: 0.98rem; line-height: 1.5; }
.comment__replies .comment__handle,
.comment__replies .comment__meta { font-size: 0.74rem; }

/* inline reply form — appears under a comment when "Reply" is clicked */
.comment__reply-form {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid rgba(31, 42, 34, 0.14);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
body[data-reading="dark"] .comment__reply-form { background: #15181A; border-color: rgba(230, 226, 217, 0.14); }
.comment__reply-form input,
.comment__reply-form textarea {
  font-family: var(--font-display);
  font-size: 0.96rem;
  background: transparent;
  border: 0;
  padding: 0.3rem 0;
  outline: none;
  color: var(--ink);
  border-radius: 0;
}
.comment__reply-form input { border-bottom: 1px solid rgba(31, 42, 34, 0.08); padding-bottom: 0.5rem; }
.comment__reply-form textarea {
  font-style: italic;
  min-height: 56px;
  resize: vertical;
  line-height: 1.5;
}
.comment__reply-form input:focus,
.comment__reply-form textarea:focus { border-color: var(--jungle-deep); }
body[data-reading="dark"] .comment__reply-form input,
body[data-reading="dark"] .comment__reply-form textarea { color: #E6E2D9; border-color: rgba(230, 226, 217, 0.18); }
.comment__reply-form__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
}
.comment__reply-form__actions button {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0.5rem 0.8rem;
  color: var(--ink-quiet);
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comment__reply-form__actions button:hover { color: var(--ink); }
.comment__reply-form__actions button.is-primary {
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 1rem;
}
.comment__reply-form__actions button.is-primary:hover { background: var(--jungle-deep); color: var(--paper); }
body[data-reading="dark"] .comment__reply-form__actions button.is-primary { background: #C9A86A; color: #0F1113; }

/* ----- LOAD MORE ----- */
.comment-thread__more[hidden] { display: none; }

/* Turnstile container — empty most of the time (interaction-only mode).
   When CF requires a real challenge, the iframe appears centered inside the
   compose box with subtle spacing. No frame, no border — just the widget. */
.turnstile-container {
  display: flex;
  justify-content: center;
  margin: 0;
}
.turnstile-container:not(:empty) { margin-top: 16px; }
.turnstile-container > * { max-width: 100%; }

/* ============================================================
   SHARE MODAL — glassmorphism panel matching the index reciprocity section
   Created dynamically by comments.js when user clicks #postShare2 or #rtShare
============================================================ */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 17, 19, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.share-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s;
}

.share-modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 40px 32px 28px;
  border-radius: 28px;
  background: rgba(20, 30, 22, 0.42);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(246, 243, 236, 0.14);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(246, 243, 236, 0.08);
  color: #f6f3ec;
  transform: translateY(10px) scale(0.985);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.share-modal.is-open .share-modal__panel { transform: translateY(0) scale(1); }

.share-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(246, 243, 236, 0.18);
  color: rgba(246, 243, 236, 0.7);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.share-modal__close:hover {
  background: rgba(246, 243, 236, 0.06);
  color: #f6f3ec;
  border-color: rgba(246, 243, 236, 0.32);
}
.share-modal__close svg { width: 14px; height: 14px; }

.share-modal__eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.55);
  margin: 0 0 8px;
  text-align: center;
}
.share-modal__title {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-align: center;
  margin: 0 0 28px;
  color: #f6f3ec;
  line-height: 1.25;
}
.share-modal__title em { font-style: italic; }

.share-modal__circles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 26px;
}
@media (max-width: 480px) {
  .share-modal__circles { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
}

.share-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: rgba(246, 243, 236, 0.6);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 200ms;
}
.share-circle:hover, .share-circle:focus-visible { color: #f6f3ec; outline: none; }
.share-circle__bubble {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms;
}
.share-circle:hover .share-circle__bubble,
.share-circle:focus-visible .share-circle__bubble {
  transform: scale(1.07);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.55);
}
.share-circle__bubble svg { width: 22px; height: 22px; display: block; }

.share-modal__url {
  display: flex;
  align-items: stretch;
  border-radius: 100px;
  background: rgba(246, 243, 236, 0.06);
  border: 1px solid rgba(246, 243, 236, 0.14);
  overflow: hidden;
}
.share-modal__url input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 18px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: rgba(246, 243, 236, 0.88);
  letter-spacing: 0.02em;
  min-width: 0;
}
.share-modal__copy {
  flex-shrink: 0;
  width: 46px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(246, 243, 236, 0.14);
  color: rgba(246, 243, 236, 0.7);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 200ms, background 200ms;
}
.share-modal__copy:hover, .share-modal__copy:focus-visible {
  color: #f6f3ec;
  background: rgba(246, 243, 236, 0.05);
  outline: none;
}
.share-modal__copy svg { width: 16px; height: 16px; }
.share-modal__copy.is-copied { color: #8ad4a0; }

.share-modal__toast {
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.55);
  margin: 14px 0 0;
  height: 12px;
  opacity: 0;
  transition: opacity 220ms ease;
}
.share-modal__toast.is-shown { opacity: 1; color: #8ad4a0; }
.comment-thread__more {
  margin: 2rem auto 0;
  display: block;
  padding: 0.85rem 1.6rem;
  background: transparent;
  border: 1px solid rgba(31, 42, 34, 0.16);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  cursor: pointer;
  border-radius: 100px;
  transition: background 300ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comment-thread__more:hover {
  background: rgba(31, 42, 34, 0.04);
  color: var(--ink);
  border-color: rgba(31, 42, 34, 0.32);
}
body[data-reading="dark"] .comment-thread__more { color: #9A958A; border-color: rgba(230, 226, 217, 0.20); }
body[data-reading="dark"] .comment-thread__more:hover { color: #E6E2D9; background: rgba(230, 226, 217, 0.06); }

/* empty state */
.comment-thread__empty {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink-quiet);
  text-align: center;
  padding: 2rem 0;
  max-width: 32ch;
  margin: 0 auto;
}
body[data-reading="dark"] .comment-thread__empty { color: #9A958A; }

/* ==========================================================
   ENGAGEMENT INDICATORS — likes + comments counters
   used in: index list, related cards, grid tiles
   ========================================================== */
.engage {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  font-variant-numeric: tabular-nums;
}
.engage span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.engage svg {
  width: 11px; height: 11px;
  stroke: currentColor; stroke-width: 1.4;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-reading="dark"] .engage { color: #6F6A60; }

/* in the index list, engagement sits inside .journal-entry__meta — already vertical */
.journal-entry__engage {
  margin-top: 0.15rem;
  display: flex;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-whisper);
}
.journal-entry__engage span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}
.journal-entry__engage svg {
  width: 11px; height: 11px;
  stroke: currentColor; stroke-width: 1.4;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* on the 9-tile grid — top-right corner, very small, very subtle.
   Heart is filled red, comment is outlined gray (visually distinct).
   PC desktop: hidden by default, fades in on hover.
   Tablet/mobile (no hover): always visible. */
.journal-tile__stats {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 6px;
  background: rgba(250, 247, 240, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 250ms ease;
}
.journal-tile__stats span {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}
.journal-tile__stats svg {
  width: 10px; height: 10px;
  stroke: currentColor; stroke-width: 1.6;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
/* Heart filled red — visually distinct from the outlined comment bubble. */
.journal-tile__stats span:first-child svg { fill: #b54a3a; stroke: none; }
.journal-tile__stats span:first-child { color: #b54a3a; }
.journal-tile__stats span:last-child  { color: var(--ink-soft, #5a5a50); }

/* Desktop with mouse: only show on hover. */
.journal-tile:hover .journal-tile__stats { opacity: 1; }

/* Touch / coarse-pointer (no hover capability): always visible. */
@media (hover: none), (pointer: coarse) {
  .journal-tile__stats { opacity: 1; }
}

body[data-reading="dark"] .journal-tile__stats {
  background: rgba(15, 17, 19, 0.4);
}
body[data-reading="dark"] .journal-tile__stats span:first-child { color: #d97a6a; }
body[data-reading="dark"] .journal-tile__stats span:first-child svg { fill: #d97a6a; }
body[data-reading="dark"] .journal-tile__stats span:last-child  { color: #9A958A; }

/* on the related card — sits under the title, very quiet */
.related-card__engage {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-whisper);
  font-variant-numeric: tabular-nums;
}
.related-card__engage span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}
.related-card__engage svg {
  width: 10px; height: 10px;
  stroke: currentColor; stroke-width: 1.4;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-reading="dark"] .journal-entry__engage,
body[data-reading="dark"] .related-card__engage { color: #6F6A60; }


/* =========================================================================
   SHARE POPOVER — opened by reading.js when user clicks #rtShare or
   #postShare2. X / LinkedIn / Facebook / WhatsApp / Email + Copy link.
   ========================================================================= */
.share-pop {
  position: absolute;
  z-index: 9999;
  background: var(--paper, #FDFBF4);
  border: 1px solid rgba(31,42,34,.16);
  border-radius: 10px;
  padding: .45rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 2px;
  box-shadow: 0 18px 44px -14px rgba(31,42,34,.22), 0 2px 6px rgba(31,42,34,.06);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  min-width: 240px;
  animation: share-pop-in .18s ease-out;
}
@keyframes share-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.share-pop__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink, #1F2A22);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  transition: background .15s ease;
}
.share-pop__item:hover,
.share-pop__item:focus-visible { background: rgba(31,42,34,.06); outline: none; }
.share-pop__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.share-pop__item--copy.is-copied {
  background: rgba(58,128,90,.10);
  color: var(--jungle-deep, #1F2A22);
}
body[data-reading="dark"] .share-pop {
  background: #2A2C28;
  border-color: rgba(255,255,255,.10);
  color: #E6E2D6;
}
body[data-reading="dark"] .share-pop__item { color: #E6E2D6; }
body[data-reading="dark"] .share-pop__item:hover,
body[data-reading="dark"] .share-pop__item:focus-visible { background: rgba(255,255,255,.06); }