/* article-sections.v1.css — redesigned end-of-article sections.
   Owner picks 2026-06-08: Tags E, Share A, Author E, More D, Nav C.
   Loaded AFTER civic.v3.css so .rd-* wins. Uses the site's own tokens. */

/* ---- Tags E: "Topics" label + slab words, rust underline ---- */
.rd-tags{margin:8px 0 6px}
.rd-tags-lbl{display:block;font:700 11px/1 var(--font-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.rd-tags-row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:baseline}
.rd-tags-row a{font:600 15.5px/1 "Zilla Slab",Georgia,serif;color:var(--ink);
  text-decoration:none;border-bottom:2px solid var(--rust);padding-bottom:2px;
  transition:color .12s ease}
.rd-tags-row a:hover{color:var(--rust-dk)}

/* ---- Share A: round filled icon buttons ---- */
.sj-share-rail.rd-share{margin:10px 0}
.sj-share-rail.rd-share ul{display:flex;gap:12px;align-items:center;
  list-style:none;margin:0;padding:0}
.sj-share-rail.rd-share ul li{margin:0}
.sj-share-rail.rd-share ul li a,
.sj-share-rail.rd-share ul li button{display:inline-flex;align-items:center;
  justify-content:center;width:42px;height:42px;border-radius:50%;
  background:var(--ink);border:0;padding:0;cursor:pointer;
  transition:background .12s ease}
.sj-share-rail.rd-share ul li a:hover,
.sj-share-rail.rd-share ul li button:hover{background:var(--rust)}
.sj-share-rail.rd-share ul li a svg,
.sj-share-rail.rd-share ul li button svg{width:18px;height:18px;fill:#fff}

/* ---- Author E: rust rule + slab name ---- */
.rd-author{border-left:3px solid var(--rust);padding:2px 0 2px 16px;margin:26px 0 8px}
.rd-author-nm{font:700 19px/1.2 "Zilla Slab",Georgia,serif;color:var(--ink)}
.rd-author-ro{font:400 13px/1.3 var(--font-body);color:var(--muted);margin:2px 0 8px}
.rd-author-bio{font:400 15px/1.55 var(--font-body);color:#3a352c}
.rd-author-more{display:inline-block;margin-top:10px;font:700 14px/1 var(--font-body);
  color:var(--rust-dk);text-decoration:none}
.rd-author-more:hover{color:var(--rust)}

/* ---- More D: two-column headline links ---- */
.rd-more{margin:10px 0}
.rd-more-h{font:700 12px/1 var(--font-body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--rust);margin:0 0 16px}
.rd-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.rd-more-grid a{text-decoration:none;color:var(--ink);display:block}
.rd-more-cat{display:block;font:700 10px/1 var(--font-body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rust);margin:0 0 5px}
.rd-more-hd{display:block;font:600 16.5px/1.32 var(--font-display);color:var(--ink)}
.rd-more-grid a:hover .rd-more-hd{color:var(--rust-dk)}

/* ---- Nav C: prev/next rule bar ---- */
.rd-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;margin:10px 0}
.rd-nav a{color:var(--ink);text-decoration:none;font:600 15px/1 var(--font-body);
  transition:color .12s ease}
.rd-nav a:hover{color:var(--rust-dk)}
.rd-nav-ar{color:var(--rust);font-weight:700}
.rd-nav-next{text-align:right}
.rd-nav-dis{color:var(--muted);opacity:.55;font:600 15px/1 var(--font-body)}

/* ---- phones: one column for More so headlines don't get cramped ---- */
@media (max-width:540px){
  .rd-more-grid{grid-template-columns:1fr;gap:14px}
}

/* ---- 2026-06-09: bold-only-paragraph subhead.
   build.render_body_html promotes a paragraph whose entire content is
   **text** to <h2 class="sj-body-subhead">. Sized as a section break that
   reads as part of body type, not a feature head. ---- */
.sj-editorial-body h2.sj-body-subhead{
  font-family:"Zilla Slab",Georgia,serif;
  font-weight:700;
  font-size:1.18em;
  line-height:1.3;
  letter-spacing:.005em;
  color:#241F18;
  margin:1.6em 0 .55em;
}
.sj-editorial-body h2.sj-body-subhead:first-child{margin-top:0}