/* =====================================================================
   UnlockChina.co — Narrative Template B (Citywalk + City Guides)
   Pairs with route_renderer.py and prototype:
   06-design/handoffs/design_handoff_citywalk_template_b/Shanghai Citywalk.dc.html

   Tokens come from screen.css :root.
   Activates on any article whose body contains a .uc-route-map.
   ===================================================================== */

/* =====================================================================
   0. Override the stock post layout for narrative articles
   ===================================================================== */

/* Hide standard .post-head (breadcrumb + serif H1 + meta) — replaced by
   .uc-hero-narrative which is generated inside the post body. */
.post-body:has(.uc-route-map) ~ * + *,  /* (no-op guard) */
.post-shell:has(.uc-hero-narrative) .post-head { display: none !important; }

/* Single-column body (no rail). Article fills the post-shell. */
.post-body:has(.uc-route-map) {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}
.post-body:has(.uc-route-map) .post-rail { display: none; }

/* Pull the post-shell padding tight so the hero can break out cleanly.
   The hero's own .kg-width-full handles the viewport breakout below. */
.post-shell:has(.uc-hero-narrative) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Narrative articles do NOT need the article-css 720px reading column.
   Let .gh-content fill the post-shell up to a generous 1060px. */
.post-body:has(.uc-route-map) .gh-content,
.post-body:has(.uc-route-map) .uc-article {
  max-width: 1060px;
  margin: 0 auto;
  padding-left: clamp(22px, 6vw, 72px);
  padding-right: clamp(22px, 6vw, 72px);
  padding-top: 0;
}

/* =====================================================================
   1. Hero — full-bleed dark green gradient
   ===================================================================== */

.uc-article .uc-hero-narrative {
  background: linear-gradient(180deg, #0d2b22, #103a2d);
  color: #fff;
  padding: clamp(54px, 9vw, 96px) clamp(22px, 6vw, 72px) clamp(44px, 7vw, 72px);
  text-align: center;
  margin-bottom: clamp(22px, 4vw, 38px);
}
.uc-article .uc-hero-narrative .uch-inner {
  max-width: 780px;
  margin: 0 auto;
}
.uc-article .uc-hero-narrative .uch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--uc-mint-300);
  margin-bottom: 20px;
  font-family: var(--uc-font-sans);
}
.uc-article .uc-hero-narrative .uch-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--uc-mint-300);
}
.uc-article .uc-hero-narrative .uch-h1 {
  font-family: var(--uc-font-serif);
  font-weight: var(--uc-serif-weight);
  line-height: 1.06;
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
}
.uc-article .uc-hero-narrative .uch-h1::before { content: none; display: none; }
.uc-article .uc-hero-narrative .uch-standfirst {
  font-family: var(--uc-font-serif);
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.55;
  color: #d4e8df;
  max-width: 620px;
  margin: 20px auto 0;
}
.uc-article .uc-hero-narrative .uch-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 26px;
  font-family: var(--uc-font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.uc-article .uc-hero-narrative .uch-meta-dot {
  opacity: 0.4;
}

/* =====================================================================
   2. Stat strip — pill chips
   ===================================================================== */

.uc-article .uc-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 1.6em;
  max-width: none;
  font-family: var(--uc-font-sans);
}
.uc-article .uc-stat-strip .usp-pill {
  display: inline-flex;
  align-items: center;
  background: var(--uc-surface);
  border: 1px solid var(--uc-hairline);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(13, 43, 34, 0.04);
  font-size: 13.5px;
  color: var(--uc-ink-soft);
}
.uc-article .uc-stat-strip .usp-pill strong {
  color: var(--uc-ink);
  font-weight: 800;
  margin-right: 6px;
}

/* =====================================================================
   3. Intro prose (between hero and glance picker)
   ===================================================================== */

/* Lead paragraph after the hero gets the 21px serif lead treatment. */
.uc-article .uc-hero-narrative + p,
.uc-article .uc-stat-strip + p {
  font-family: var(--uc-font-serif);
  font-size: 21px;
  line-height: 1.7;
  color: var(--uc-ink-body);
  max-width: 720px;
  margin: 0 auto 0.9em;
  padding: 0 clamp(22px, 6vw, 72px);
}

/* Subsequent paragraphs sit at the 19px reading size, still centered. */
.uc-article:has(.uc-route-map) > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* The intro Reddit blockquote inherits .evidence-card from article.css —
   that styling already gives it the pull-quote feel; we just constrain width. */
.uc-article:has(.uc-route-map) > .evidence-card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   4. Routes-at-a-glance — picker cards
   ===================================================================== */

.uc-article .uc-routes-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 1.6em 0 2.2em;
  max-width: none;
  font-family: var(--uc-font-sans);
}
.uc-article .uc-routes-glance .urg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--uc-hairline);
  border-radius: 16px;
  background: var(--uc-surface);
  padding: 22px;
  box-shadow: var(--uc-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.uc-article .uc-routes-glance .urg-card:hover,
.uc-article .uc-routes-glance .urg-card:focus-visible {
  border-color: var(--uc-green-600);
  transform: translateY(-2px);
  box-shadow: var(--uc-shadow-pop);
}
.uc-article .uc-routes-glance .urg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.uc-article .uc-routes-glance .urg-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--uc-green-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 0 0 3px var(--uc-mint-300);
}
.uc-article .uc-routes-glance .urg-meta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--uc-green-600);
  text-transform: uppercase;
}
.uc-article .uc-routes-glance .urg-title {
  font-family: var(--uc-font-serif);
  font-weight: var(--uc-serif-weight);
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 7px;
  padding: 0;
  border: none;
}
.uc-article .uc-routes-glance .urg-title::before { content: none; display: none; }
.uc-article .uc-routes-glance .urg-desc {
  font-size: 14px;
  color: var(--uc-muted);
  line-height: 1.55;
  margin: 0 0 14px;
}
.uc-article .uc-routes-glance .urg-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--uc-green-600);
}

/* =====================================================================
   5. Route section — H2 + eyebrow + lead
   ===================================================================== */

.uc-article .uc-route-section {
  scroll-margin-top: 80px;
  padding: clamp(36px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--uc-hairline);
  margin-top: clamp(22px, 3vw, 34px);
}
.uc-article .uc-route-section .urs-head {
  max-width: 720px;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.uc-article .uc-route-section .urs-eyebrow {
  display: block;
  font-family: var(--uc-font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--uc-green-600);
  margin-bottom: 11px;
}
.uc-article .uc-route-section .urs-h2 {
  font-family: var(--uc-font-serif);
  font-weight: var(--uc-serif-weight);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--uc-ink);
  margin: 0;
  padding: 0;
  border: none;
  max-width: 640px;
}
.uc-article .uc-route-section .urs-h2::before { content: none; display: none; }
.uc-article .uc-route-section .urs-head p {
  font-family: var(--uc-font-serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--uc-ink-body);
  max-width: 680px;
  margin-top: 12px;
}
.uc-article .uc-route-section .urs-head p:first-of-type { margin-top: 12px; }

/* =====================================================================
   6. Route map module (unchanged from earlier ship)
   ===================================================================== */

.uc-article .uc-route-map {
  margin: clamp(20px, 3vw, 26px) 0 0;
  max-width: none;
  background: var(--uc-surface);
  border: 1px solid var(--uc-hairline);
  border-radius: 18px;
  padding: clamp(14px, 2.4vw, 22px);
  box-shadow: 0 14px 40px rgba(13, 43, 34, 0.07);
  font-family: var(--uc-font-sans);
}
.uc-article .uc-rm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 24px);
  align-items: stretch;
}
.uc-article .uc-rm-map {
  flex: 2 1 360px;
  min-width: 0;
  position: relative;
  aspect-ratio: 800 / 560;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--uc-hairline);
  background: #f6faf8;
}
.uc-article .uc-rm-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.uc-article .uc-rm-walk {
  stroke: var(--uc-green-600);
  stroke-width: 3.6;
  stroke-dasharray: 9 8;
}
.uc-article .uc-rm-transport {
  stroke: var(--uc-green-600);
  stroke-width: 3.4;
  stroke-dasharray: 1.5 11;
  opacity: 0.85;
}
.uc-article .uc-rm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: var(--uc-green-600);
  box-shadow:
    0 0 0 3px var(--uc-mint-300),
    0 4px 14px rgba(13, 43, 34, 0.25);
  z-index: 3;
  text-decoration: none;
  transition: filter 140ms ease, transform 140ms ease;
}
.uc-article .uc-rm-pin:hover,
.uc-article .uc-rm-pin:focus-visible {
  filter: brightness(1.08);
  transform: translate(-50%, -50%) scale(1.05);
}
.uc-article .uc-rm-rail {
  flex: 1 1 250px;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.uc-article .uc-rm-rail li { margin: 0; padding: 0; }
.uc-article .uc-rm-rail li::before { content: none; display: none; }
.uc-article .uc-rm-rail a {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  transition: background 140ms ease;
}
.uc-article .uc-rm-rail a:hover,
.uc-article .uc-rm-rail a:focus-visible { background: #f1f7f4; }
.uc-article .uc-rm-rail .urr-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--uc-green-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 0 0 2.5px var(--uc-mint-300);
}
.uc-article .uc-rm-rail .urr-body { display: flex; flex-direction: column; gap: 1px; }
.uc-article .uc-rm-rail .urr-time {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--uc-green-600);
  letter-spacing: 0.02em;
}
.uc-article .uc-rm-rail .urr-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--uc-ink);
  line-height: 1.3;
  margin: 1px 0 2px;
}
.uc-article .uc-rm-rail .urr-note {
  font-size: 12.5px;
  color: var(--uc-muted);
  line-height: 1.45;
}
.uc-article .uc-rm-legend {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef1ef;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  font-size: 12px;
  color: var(--uc-muted);
}
.uc-article .uc-rm-legend .urlg-item { display: inline-flex; align-items: center; gap: 6px; }
.uc-article .uc-rm-legend .urlg-sw {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 2px;
}
.uc-article .uc-rm-legend .urlg-walk {
  background: repeating-linear-gradient(90deg, var(--uc-green-600) 0 5px, transparent 5px 9px);
  height: 3px;
}
.uc-article .uc-rm-legend .urlg-transport {
  background: repeating-linear-gradient(90deg, var(--uc-green-600) 0 1.5px, transparent 1.5px 5px);
  height: 3px;
}
.uc-article .uc-rm-legend .urlg-water { background: #d3e9e4; border: 1px solid #cfe1db; }
.uc-article .uc-rm-legend .urlg-area  { background: #e3f5ed; border: 1px solid #cfe2d8; }
.uc-article .uc-rm-legend .urlg-disc {
  margin-left: auto;
  font-style: italic;
  color: var(--uc-faint);
  font-size: 11.5px;
}

/* =====================================================================
   7. Timing tip card — green border + clock icon
   ===================================================================== */

.uc-article .uc-timing-tip {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--uc-surface);
  border: 1px solid #cfe9dd;
  border-radius: 13px;
  padding: 16px 18px;
  margin: 22px 0 0;
  max-width: 760px;
  font-family: var(--uc-font-sans);
}
.uc-article .uc-timing-tip .utt-icon {
  color: var(--uc-green-600);
  flex-shrink: 0;
  margin-top: 1px;
}
.uc-article .uc-timing-tip p {
  font-size: 14.5px;
  color: var(--uc-ink-soft);
  line-height: 1.55;
  margin: 0;
}
.uc-article .uc-timing-tip strong {
  color: var(--uc-green-600);
  font-weight: 800;
}

/* =====================================================================
   8. ★ Numbered timeline spine — the killer narrative pattern
   ===================================================================== */

.uc-article .uc-stops {
  max-width: 760px;
  margin: 32px 0 0;
}
.uc-article .uc-stop {
  scroll-margin-top: 80px;
  display: flex;
  gap: 18px;
}
.uc-article .uc-stop .urs-spine {
  flex: 0 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.uc-article .uc-stop .urs-spine .urs-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--uc-green-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 0 0 3px var(--uc-mint-300);
}
.uc-article .uc-stop .urs-spine .urs-line {
  flex: 1;
  width: 2px;
  background: #dbe7e1;
  margin-top: 10px;
}
.uc-article .uc-stop .urs-body {
  flex: 1;
  padding-bottom: 30px;
  min-width: 0;
}
.uc-article .uc-stop:last-child .urs-body { padding-bottom: 0; }
.uc-article .uc-stop .urs-time {
  display: inline-block;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--uc-green-600);
  background: var(--uc-green-tint);
  border-radius: 6px;
  padding: 3px 9px;
  margin-bottom: 9px;
  white-space: nowrap;
}
.uc-article .uc-stop .urs-title {
  font-family: var(--uc-font-serif);
  font-weight: var(--uc-serif-weight);
  font-size: 23px;
  line-height: 1.22;
  color: var(--uc-ink);
  margin: 0 0 9px;
  padding: 0;
  border: none;
}
.uc-article .uc-stop .urs-title::before { content: none; display: none; }
.uc-article .uc-stop p {
  font-family: var(--uc-font-serif);
  font-size: 19px;
  line-height: 1.72;
  color: var(--uc-ink-body);
  margin: 0 0 0.6em;
}
.uc-article .uc-stop ul { padding-left: 18px; margin: 0.4em 0 0.8em; }
.uc-article .uc-stop ul li { font-size: 16px; color: var(--uc-ink-soft); line-height: 1.55; }

/* Pull-quote inside a stop (Reddit evidence rendered server-side). */
.uc-article .uc-stop .urs-pullquote {
  margin: 18px 0 0;
  border-left: 3px solid var(--uc-mint-300);
  padding: 2px 0 2px 18px;
  background: transparent;
}
.uc-article .uc-stop .urs-pullquote p {
  font-family: var(--uc-font-serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--uc-ink-soft);
  margin: 0;
}
.uc-article .uc-stop .urs-pullquote footer {
  margin-top: 10px;
  font-family: var(--uc-font-sans);
  font-style: normal;
  font-size: 12.5px;
  color: var(--uc-muted-2);
  font-weight: 600;
}
.uc-article .uc-stop .urs-pullquote .urs-quote-link {
  color: var(--uc-green-600);
  font-weight: 700;
  text-decoration: none;
}
.uc-article .uc-stop .urs-pullquote .urs-quote-link:hover { text-decoration: underline; }

/* =====================================================================
   9. Bottom Line — 3-card grid + Checklist card
   ===================================================================== */

/* Override the V3.3 dark .uc-bottom-line callout — narrative wants the
   calm 3-card layout, not the dark commerce callout. The article.css rule
   `.uc-article .uc-bottom-line { background: var(--uc-dark); color: #fff }`
   would otherwise paint our section dark green. Reset to defaults first,
   then layer the narrative-specific styles on top. */
.uc-article:has(.uc-route-map) .uc-bottom-line {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.uc-article .uc-bottom-line {
  margin: clamp(40px, 6vw, 64px) 0 clamp(28px, 4vw, 40px);
  font-family: var(--uc-font-sans);
}
.uc-article .uc-bottom-line .ubl-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--uc-green-600);
  margin-bottom: 11px;
}
.uc-article .uc-bottom-line .ubl-h2 {
  font-family: var(--uc-font-serif);
  font-weight: var(--uc-serif-weight);
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--uc-ink);
  margin: 0 0 24px;
  padding: 0;
  border: none;
  max-width: 560px;
}
.uc-article .uc-bottom-line .ubl-h2::before { content: none; display: none; }
.uc-article .uc-bottom-line .ubl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.uc-article .uc-bottom-line .ubl-card {
  border: 1px solid var(--uc-hairline);
  background: var(--uc-surface);
  border-radius: 16px;
  padding: 22px;
}
.uc-article .uc-bottom-line .ubl-card-avoid {
  background: var(--uc-warn-bg);
  border-color: var(--uc-warn-line);
}
.uc-article .uc-bottom-line .ubl-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 13px;
}
.uc-article .uc-bottom-line .ubl-label-green { color: var(--uc-green-600); }
.uc-article .uc-bottom-line .ubl-label-warn  { color: var(--uc-orange-800); }
.uc-article .uc-bottom-line .ubl-list {
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.uc-article .uc-bottom-line .ubl-list li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--uc-ink-soft);
  line-height: 1.5;
}
.uc-article .uc-bottom-line .ubl-list li::before { content: none; display: none; }
.uc-article .uc-bottom-line .ubl-mark {
  flex-shrink: 0;
  font-weight: 900;
}
.uc-article .uc-bottom-line .ubl-mark-green { color: var(--uc-green-500); }
.uc-article .uc-bottom-line .ubl-mark-warn  { color: var(--uc-orange-800); }
.uc-article .uc-bottom-line .ubl-card p {
  font-size: 14.5px;
  color: var(--uc-ink-soft);
  line-height: 1.6;
  margin: 0;
}
.uc-article .uc-bottom-line .ubl-card p strong { color: var(--uc-ink); font-weight: 700; }

.uc-article .uc-bottom-line .ubl-checklist {
  border: 1px solid var(--uc-hairline);
  background: var(--uc-surface-2);
  border-radius: 16px;
  padding: 22px clamp(20px, 3vw, 26px);
}
.uc-article .uc-bottom-line .ubl-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 26px;
}
.uc-article .uc-bottom-line .ubl-checklist label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--uc-ink-soft);
  line-height: 1.5;
}
.uc-article .uc-bottom-line .ubl-box {
  width: 18px;
  height: 18px;
  border: 1.6px solid #b9c4be;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =====================================================================
   10. Footer trust block — chips + Research Coverage + Further Reading
   ===================================================================== */

.uc-article .uc-footer-trust {
  margin: clamp(34px, 5vw, 50px) 0 0;
  padding: clamp(28px, 4vw, 40px) 0;
  background: linear-gradient(180deg, var(--uc-green-wash-2), var(--uc-surface));
  border-radius: 18px;
  font-family: var(--uc-font-sans);
}
.uc-article .uc-footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  margin: 0 clamp(22px, 3vw, 30px) 26px;
}
.uc-article .uc-footer-chips .uft-chip {
  display: inline-flex;
  align-items: center;
  background: var(--uc-surface);
  border: 1px solid rgba(15, 110, 86, 0.16);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--uc-green-600);
}
.uc-article .uc-footer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 40px;
  padding: 0 clamp(22px, 3vw, 30px);
}
.uc-article .ufr-card {
  /* shared (chip-like reset) */
}
.uc-article .ufr-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--uc-green-600);
  margin-bottom: 14px;
}
.uc-article .ufr-rows {
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  color: var(--uc-ink-soft);
}
.uc-article .ufr-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #eef1ef;
  padding-bottom: 9px;
}
.uc-article .ufr-row:last-child { border-bottom: 0; padding-bottom: 0; }
.uc-article .ufr-label { color: var(--uc-muted-2); }
.uc-article .ufr-value { font-weight: 600; text-align: right; }
.uc-article .ufr-links {
  display: grid;
  gap: 11px;
  font-size: 15px;
}
.uc-article .ufr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--uc-green-600);
  font-weight: 600;
  text-decoration: none;
}
.uc-article .ufr-link:hover { text-decoration: underline; }

/* =====================================================================
   11. Print + accessibility
   ===================================================================== */

@media print {
  .post-rail, .uc-footer-trust .uft-chip { display: none; }
  .uc-hero-narrative { background: #fff; color: #000; }
  .uc-hero-narrative * { color: #000 !important; }
}
.uc-article .uc-rm-pin:focus-visible {
  outline: 2px solid var(--uc-mint-300);
  outline-offset: 4px;
}