/* ============================================================
   Knowledge Library shared styles.
   ============================================================
   Three page registers share one cream-paper palette and one
   typographic system:

     .library-page  --  Insights landing (Current Attention + Library doorway)
     .topic-page    --  Topic pages (cluster framing + article listings)
     .post-page     --  Article pages (the reading experience)

   The same :root variables hold across all three. Page-specific
   styles are scoped under their respective body class so the
   global stylesheet (rajiv-styles.css) does not bleed in.

   Visual register: cream paper, Lora for body and titles, Inter
   Tight for small editorial labels, burnt orange (--accent) for
   inline links. No cards. No shadows. No section dividers other
   than thin hairlines. Vertical rhythm is generous.
   ============================================================ */

:root {
  --base: #faf5ea;
  --paper: #f5ede0;
  --ink: #1a1a1a;
  --muted: #4a4a4a;
  --muted-soft: #8a7d68;
  --accent: #b8602e;
  --accent-soft: #d6855a;
  --rule: rgba(26, 26, 26, 0.10);
  --rule-soft: rgba(26, 26, 26, 0.06);
}

/* ------------------------------------------------------------
   Page-level resets for the three library-system pages.
   The site's main stylesheet sets dark backgrounds and other
   styles that don't belong here; we reset within scope.
   ------------------------------------------------------------ */

html.library-page, body.library-page,
html.topic-page,   body.topic-page,
html.post-page,    body.post-page,
html.library-index, body.library-index {
  background: var(--base);
}
body.library-page,
body.topic-page,
body.post-page,
body.library-index {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  font-family: 'Lora', Georgia, serif;
}

.library-page main, .library-page main > section, .library-page main > header,
.topic-page main,   .topic-page main > section,   .topic-page main > header,
.post-page main,    .post-page main > section,    .post-page main > header,
.post-page main > article,
.library-index main, .library-index main > section, .library-index main > header {
  background: transparent;
}

/* ------------------------------------------------------------
   Neutralize bleed-through from the legacy site stylesheet
   (rajiv-styles.css). The older sheet defines:
     section            { padding: 60px 0; }
     h1, h2, h3         { font-family:'Inter'; text-align:center;
                          margin-bottom:20px; }
     h1                 { font-size:3.5em; font-weight:700; }
     h2                 { font-size:2.5em; color:var(--primary-blue);
                          margin-bottom:40px; }
     h3                 { font-size:1.5em; color:var(--dark-text); }
     p                  { margin-bottom:1.5em; }
   Those defaults are correct for the older pages but they
   would otherwise hijack our headings and paragraphs (centering
   them, painting them blue, etc.). Reset them once here. The
   page-specific blocks below then style headings the way the
   library system wants. */
.library-page h1, .library-page h2, .library-page h3,
.library-page h4, .library-page h5, .library-page h6,
.topic-page   h1, .topic-page   h2, .topic-page   h3,
.topic-page   h4, .topic-page   h5, .topic-page   h6,
.post-page    h1, .post-page    h2, .post-page    h3,
.post-page    h4, .post-page    h5, .post-page    h6,
.library-index h1, .library-index h2, .library-index h3,
.library-index h4, .library-index h5, .library-index h6 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  text-align: left;
  margin: 0;
}
.library-page p,
.topic-page   p,
.post-page    p,
.library-index p {
  margin: 0;
}
.library-page section,
.topic-page   section,
.post-page    section,
.library-index section {
  padding: 0;
}

/* Shared wrap. Same measure on all three page types so the eye
   learns one column across the library experience.
   Marked !important so that no legacy rule from rajiv-styles.css
   can collapse the column on any specific section. */
.library-page main .wrap,
.topic-page   main .topic-wrap,
.post-page    main .post-wrap,
.library-index main .wrap,
.library-page .wrap,
.topic-page   .topic-wrap,
.post-page    .post-wrap,
.library-index .wrap {
  max-width: 760px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(24px, 5vw, 56px) !important;
  padding-right: clamp(24px, 5vw, 56px) !important;
  box-sizing: border-box !important;
  float: none !important;
}
.post-page main .post-wrap,
.post-page .post-wrap { max-width: 720px !important; }

/* Shared colophon at the bottom of each page.
   Centered sign-off line so the closing beat sits in the middle
   of the page rather than echoing the left-anchored body. */
.library-page  .colophon,
.topic-page    .topic-colophon,
.post-page     .post-colophon,
.library-index .library-colophon {
  padding-top: clamp(64px, 9vh, 110px);
  padding-bottom: clamp(80px, 11vh, 130px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.library-page  .colophon .wrap,
.topic-page    .topic-colophon .topic-wrap,
.post-page     .post-colophon .post-wrap,
.library-index .library-colophon .wrap {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.library-page  .colophon p,
.topic-page    .topic-colophon p,
.post-page     .post-colophon p,
.library-index .library-colophon p {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--muted-soft);
  margin: 0;
}
.library-page  .colophon a,
.topic-page    .topic-colophon a,
.post-page     .post-colophon a,
.library-index .library-colophon a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.library-page  .colophon a:hover,
.topic-page    .topic-colophon a:hover,
.post-page     .post-colophon a:hover,
.library-index .library-colophon a:hover,
.library-page  .colophon a:focus-visible,
.topic-page    .topic-colophon a:focus-visible,
.post-page     .post-colophon a:focus-visible,
.library-index .library-colophon a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Nav overrides shared across the three library pages, matching
   the homepage palette so the library feels continuous with the
   rest of the site rather than the older blue-themed pages.
   Active state: burnt-orange text + thin burnt-orange underline,
   no background. Hover state: faint neutral gray wash. The two
   states stay visually distinct without either feeling like a
   button. */
.library-page  .nav-links li a.active,
.topic-page    .nav-links li a.active,
.post-page     .nav-links li a.active,
.library-index .nav-links li a.active {
  background: none !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.library-page  .nav-links li a.active::after,
.topic-page    .nav-links li a.active::after,
.post-page     .nav-links li a.active::after,
.library-index .nav-links li a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 2px !important;
  background-color: var(--accent) !important;
  transform: none !important;
  transition: none !important;
}
.library-page  .nav-links li a:hover,
.topic-page    .nav-links li a:hover,
.post-page     .nav-links li a:hover,
.library-index .nav-links li a:hover {
  background-color: rgba(26, 26, 26, 0.05) !important;
  color: var(--accent) !important;
}
.library-page  .social-icons a, .library-page  .footer-social a,
.topic-page    .social-icons a, .topic-page    .footer-social a,
.post-page     .social-icons a, .post-page     .footer-social a,
.library-index .social-icons a, .library-index .footer-social a {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 1.05rem !important;
}
.library-page  .social-icons a:hover, .library-page  .footer-social a:hover,
.topic-page    .social-icons a:hover, .topic-page    .footer-social a:hover,
.post-page     .social-icons a:hover, .post-page     .footer-social a:hover,
.library-index .social-icons a:hover, .library-index .footer-social a:hover {
  color: var(--accent) !important;
  background: transparent !important;
  transform: translateY(-1px) !important;
}

/* The global dark footer is hidden on library pages; the
   on-page colophon does the closing work. */
.library-page  > footer,
.topic-page    > footer,
.post-page     > footer,
.library-index > footer { display: none; }


/* ============================================================
   .library-page  --  Insights landing
   ============================================================
   Two stacked beats:
     1. Current Attention  -- what is currently in mind
     2. Knowledge Library  -- six topic doorways
   The visitor sees both the living surface and the durable body
   of work on the same page, with the library being the larger,
   more enduring half of the page. */

.library-page .library-head {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.library-page .library-anchor {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  margin: 0 0 36px 0;
  font-style: italic;
}
.library-page .library-anchor a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 96, 46, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.library-page .library-anchor a:hover,
.library-page .library-anchor a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}
.library-page .library-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 32px 0;
  /* Cancel the site-wide h1 drop shadow (rajiv-styles.css) so
     the title sits flat on the cream paper. */
  text-shadow: none;
}
.library-page .library-framing {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.library-page .attention {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--rule);
}
.library-page .attention__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 28px 0;
}
.library-page .attention__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.library-page .attention__list li {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.32vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink);
}
.library-page .attention__list li:last-child {
  border-bottom: 1px solid var(--rule);
}
.library-page .attention__kind {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.library-page .attention__what { color: var(--ink); }

.library-page .library {
  padding-top: clamp(72px, 10vh, 120px);
  padding-bottom: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--rule);
}
.library-page .library__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 14px 0;
}
.library-page .library__framing {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 40px 0;
  max-width: 580px;
}
.library-page .topics {
  list-style: none;
  padding: 0;
  margin: 0;
}
.library-page .topics li {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.library-page .topics li:last-child {
  border-bottom: 1px solid var(--rule);
}
.library-page .topics__title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.32rem, 1.85vw, 1.55rem);
  line-height: 1.2;
  margin: 0 0 8px 0;
  letter-spacing: -0.005em;
}
.library-page .topics__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.library-page .topics__title a:hover,
.library-page .topics__title a:focus-visible {
  color: var(--accent);
}
.library-page .topics__desc {
  font-family: 'Lora', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 8px 0;
  max-width: 620px;
}
.library-page .topics__meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
}


/* ============================================================
   .topic-page  --  Topic pages
   ============================================================
   Sequence: anchor -> title + framing -> Start here -> Threads
   (one per cluster, with article listings) -> Continue elsewhere
   -> Colophon. The topic page is the bridge between the library
   and the article. */

.topic-page .topic-head {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.topic-page .topic-anchor {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  margin: 0 0 36px 0;
  font-style: italic;
}
.topic-page .topic-anchor a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 96, 46, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.topic-page .topic-anchor a:hover,
.topic-page .topic-anchor a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}
.topic-page .topic-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 32px 0;
  /* Cancel the site-wide h1 drop shadow (rajiv-styles.css) so
     the title sits flat on the cream paper. */
  text-shadow: none;
}
.topic-page .topic-framing {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.topic-page .start {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(48px, 7vh, 80px);
  border-top: 1px solid var(--rule);
}
.topic-page .start__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 20px 0;
}
.topic-page .start__title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}
.topic-page .start__title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.topic-page .start__title a:hover,
.topic-page .start__title a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.topic-page .start__draft {
  display: inline-block;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-left: 12px;
  vertical-align: 0.18em;
}
.topic-page .start__why {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.topic-page .threads {
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--rule);
}
.topic-page .threads__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 36px 0;
}
.topic-page .thread {
  margin: 0 0 56px 0;
}
.topic-page .thread:last-child {
  margin-bottom: 0;
}
.topic-page .thread__title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px 0;
}
.topic-page .thread__framing {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 24px 0;
}
.topic-page .thread__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topic-page .thread__list li {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.topic-page .thread__list li:last-child {
  border-bottom: 1px solid var(--rule);
}
.topic-page .thread__article {
  display: block;
  text-decoration: none;
  color: inherit;
}
.topic-page .thread__article-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.08rem, 1.3vw, 1.2rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 8px 0;
  transition: color 0.2s ease;
}
.topic-page .thread__article:hover .thread__article-title,
.topic-page .thread__article:focus-visible .thread__article-title {
  color: var(--accent);
}
.topic-page .thread__article-lede {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.topic-page .thread__article-meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
}
.topic-page .thread__article-meta span + span::before {
  content: '\00B7';
  margin: 0 8px;
  opacity: 0.5;
}
.topic-page .thread__empty {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--muted-soft);
  margin: 0;
  padding: 4px 0;
}

.topic-page .continue {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--rule);
}
.topic-page .continue__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 24px 0;
}
.topic-page .continue__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topic-page .continue__list li {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.55;
  color: var(--muted);
  padding: 14px 0;
}
.topic-page .continue__list a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  margin-right: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.topic-page .continue__list a:hover,
.topic-page .continue__list a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ============================================================
   .library-index  --  Library page (complete map of the work)
   ============================================================
   Two stacked layers in one page:
     1. The Map     -- six topics, one row each, title + count
     2. Everything  -- articles grouped by topic, title only
   The Library is for retrieval ("show me everything"); the topic
   pages are for orientation ("help me understand this area"). The
   two are deliberately different shapes. */

.library-index .library-head {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.library-index .library-anchor {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  margin: 0 0 36px 0;
  font-style: italic;
}
.library-index .library-anchor a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 96, 46, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.library-index .library-anchor a:hover,
.library-index .library-anchor a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}
.library-index .library-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 22px 0;
  /* Cancel the site-wide h1 drop shadow (rajiv-styles.css) so
     the title sits flat on the cream paper. */
  text-shadow: none;
}
.library-index .library-framing {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 580px;
}

/* Layer 1  --  The Map.
   Six rows, hairline between them, title left and count right. */
.library-index .library-map {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--rule);
}
.library-index .library-map__label,
.library-index .library-archive__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 28px 0;
}
.library-index .library-map__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.library-index .library-map__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.library-index .library-map__item:last-child {
  border-bottom: 1px solid var(--rule);
}
.library-index .library-map__title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.18rem, 1.65vw, 1.42rem);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
}
.library-index .library-map__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.library-index .library-map__title a:hover,
.library-index .library-map__title a:focus-visible {
  color: var(--accent);
}
.library-index .library-map__count {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  white-space: nowrap;
}

/* Layer 2  --  Everything.
   Topic groups, each with the topic name (linked to the topic page)
   and a flat list of article titles. Title only. Drafts get a small
   muted tag inline. Topics with no articles are omitted entirely;
   the Map above already declares the full inventory. */
.library-index .library-archive {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--rule);
}
.library-index .library-archive__group {
  margin: 0 0 clamp(36px, 5vh, 56px) 0;
}
.library-index .library-archive__group:last-child {
  margin-bottom: 0;
}
.library-index .library-archive__group-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px 0;
}
.library-index .library-archive__group-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.library-index .library-archive__group-title a:hover,
.library-index .library-archive__group-title a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.library-index .library-archive__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.library-index .library-archive__item {
  padding: 7px 0;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1rem, 1.18vw, 1.1rem);
  line-height: 1.4;
}
.library-index .library-archive__item a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.library-index .library-archive__item a:hover,
.library-index .library-archive__item a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.library-index .library-archive__draft {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-left: 10px;
  vertical-align: 0.08em;
}
/* JS render states for the Library page lists. */
.library-index [data-render-state="loading"] {
  font-family: 'Inter Tight', sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted-soft);
  padding: 12px 0;
  margin: 0;
}
.library-index [data-render-state="error"] {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.92rem;
  color: var(--accent);
  padding: 12px 16px;
  margin: 12px 0;
  background: rgba(184, 96, 46, 0.06);
  border-left: 2px solid var(--accent-soft);
}


/* ============================================================
   .post-page  --  Article pages
   ============================================================
   Reading-first. Cream paper, Lora body at a comfortable size,
   minimal chrome above the writing. */

.post-page .post-header {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(28px, 5vh, 56px);
}
.post-page .post-anchor {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  margin: 0 0 32px 0;
  font-style: italic;
}
.post-page .post-anchor a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 96, 46, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.post-page .post-anchor a:hover,
.post-page .post-anchor a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}
.post-page .post-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 22px 0;
  /* Cancel the site-wide h1 drop shadow (rajiv-styles.css) so
     the title sits flat on the cream paper. */
  text-shadow: none;
}
.post-page .post-meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  margin: 0;
}
.post-page .post-meta span + span::before {
  content: '\00B7';
  margin: 0 8px;
  opacity: 0.5;
}

.post-page .post-body {
  font-family: 'Lora', Georgia, serif;
  color: var(--ink);
  line-height: 1.7;
  font-size: clamp(1.08rem, 1.3vw, 1.18rem);
  padding-top: clamp(20px, 3vh, 36px);
  padding-bottom: clamp(48px, 7vh, 80px);
}
.post-page .post-body p {
  margin: 0 0 1.4em 0;
}
.post-page .post-body h2 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2.4em 0 0.6em 0;
}
.post-page .post-body h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 2em 0 0.5em 0;
}
.post-page .post-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 96, 46, 0.35);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.post-page .post-body a:hover,
.post-page .post-body a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}
.post-page .post-body blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}
.post-page .post-body em { font-style: italic; }
.post-page .post-body strong { font-weight: 600; }
.post-page .post-body ul,
.post-page .post-body ol {
  margin: 0 0 1.4em 0;
  padding-left: 1.4em;
}
.post-page .post-body li { margin: 0.4em 0; }
.post-page .post-body sup a {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--accent);
  border-bottom: none;
}

/* Stub notice  --  shown on draft articles while writing is in
   progress. Quiet, no fanfare. */
.post-page .stub-notice {
  margin: 1.6em 0;
  padding: 16px 18px;
  background: var(--paper);
  border-left: 2px solid var(--accent-soft);
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
}

/* Sources block  --  shown only for Research Reviews and any
   article that surfaces a citation list. */
.post-page .post-sources {
  padding-top: clamp(36px, 6vh, 64px);
  padding-bottom: clamp(28px, 5vh, 48px);
  border-top: 1px solid var(--rule);
}
.post-page .post-sources__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 18px 0;
}
.post-page .post-sources ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.post-page .post-sources li { margin: 0.6em 0; }
.post-page .post-sources a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 96, 46, 0.3);
  padding-bottom: 1px;
}
.post-page .post-sources a:hover,
.post-page .post-sources a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

/* Next block  --  three voiced pointers to related pieces. */
.post-page .post-next {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(28px, 5vh, 56px);
  border-top: 1px solid var(--rule);
}
.post-page .post-next__label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 28px 0;
}
.post-page .post-next__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-page .post-next__list li {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.post-page .post-next__list li:last-child {
  border-bottom: 1px solid var(--rule);
}
.post-page .post-next__title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.08rem, 1.3vw, 1.2rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 6px 0;
  transition: color 0.2s ease;
}
.post-page .post-next__list a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.post-page .post-next__list a:hover .post-next__title,
.post-page .post-next__list a:focus-visible .post-next__title {
  color: var(--accent);
}
.post-page .post-next__why {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 6px 0;
}
.post-page .post-next__meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
}
.post-page .post-next__meta span + span::before {
  content: '\00B7';
  margin: 0 8px;
  opacity: 0.5;
}


/* ============================================================
   Render states (loading / error / empty) for JS-populated lists
   ============================================================ */
.library-page [data-render-state="loading"],
.topic-page   [data-render-state="loading"] {
  font-family: 'Inter Tight', sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted-soft);
  padding: 12px 0;
  margin: 0;
}
.library-page [data-render-state="error"],
.topic-page   [data-render-state="error"] {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.92rem;
  color: var(--accent);
  padding: 12px 16px;
  margin: 12px 0;
  background: rgba(184, 96, 46, 0.06);
  border-left: 2px solid var(--accent-soft);
}


/* ============================================================
   Mobile overrides
   ============================================================ */
@media (max-width: 640px) {
  .library-page .library-head,
  .topic-page   .topic-head,
  .post-page    .post-header {
    padding-top: 72px;
  }

  .library-page .attention__list li,
  .post-page    .post-meta {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .post-page .post-body {
    font-size: 1.05rem;
    line-height: 1.65;
  }
}