/* ═══════════════════════════════════════════════════════════
   NYAY VIDHAN — Premium Frontend CSS v2
   Single-source, no duplicates, modern legal portal design
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

/* ─── Design Tokens ─────────────────────────────────────── */
:root {
  --navy: #0d1b3e;
  --navy-mid: #1a2e5a;
  --navy-lt: #2a3f6b;
  --crimson: #9b1b30;
  --crimson-lt: #c0253f;
  --gold: #b8860b;
  --gold-lt: #d4a017;
  --bg: #f8f6f1;
  --bg-card: #ffffff;
  --bg-shade: #eee9e0;
  --bg-deep: #e4ddd2;
  --text-pri: #1a1a1a;
  --text-sec: #444444;
  --text-muted: #777777;
  --text-inv: #f8f6f1;
  --border: #d8d0c4;
  --border-dark: #2a3f6b;
  --serif: "Playfair Display", Georgia, serif;
  --body-serif: "Source Serif 4", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(13, 27, 62, .06), 0 2px 8px rgba(13, 27, 62, .06);
  --shadow-md: 0 4px 16px rgba(13, 27, 62, .10), 0 1px 4px rgba(13, 27, 62, .06);
  --shadow-lg: 0 8px 32px rgba(13, 27, 62, .14), 0 2px 8px rgba(13, 27, 62, .08);
  --shadow-xl: 0 16px 48px rgba(13, 27, 62, .18);
  --tr: .26s cubic-bezier(.4, 0, .2, 1);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-pri);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

a {
  text-decoration: none;
  color: inherit
}

img {
  display: block;
  width: 100%;
  object-fit: cover;
  max-width: 100%;
  height: auto
}

ul {
  list-style: none
}

/* ─── Container ─────────────────────────────────────────── */
.container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px
}

/* ─── Tags / Badges ─────────────────────────────────────── */
.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--crimson);
  color: #fff
}

.tag.navy {
  background: var(--navy)
}

.tag.gold {
  background: var(--gold)
}

.tag.green {
  background: #1b6b3a
}

.tag.teal {
  background: #0e6b6b
}

.tag.outline {
  background: transparent;
  border: 1.5px solid var(--crimson);
  color: var(--crimson)
}

.tag-gold {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(184, 134, 11, .15);
  color: var(--gold);
  border: 1px solid rgba(184, 134, 11, .3)
}

/* ─── Section Title ─────────────────────────────────────── */
.section-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bg-deep);
  position: relative
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--crimson);
  border-radius: 1px
}

.section-title span.accent {
  color: var(--crimson)
}

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px
}

.view-all {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--crimson);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap var(--tr)
}

.view-all:hover {
  gap: 9px
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--tr);
  border: none
}

.btn-primary {
  background: var(--navy);
  color: #fff
}

.btn-primary:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md)
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy)
}

.btn-outline:hover {
  background: var(--navy);
  color: #fff
}

/* ─── Reading Progress Bar ──────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(13, 27, 62, .1);
  z-index: 9999
}

.reading-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  transition: width .1s linear
}

/* ═══════════════════════════════════════════════════════════
   BREAKING BAR
   ═══════════════════════════════════════════════════════════ */
.breaking-bar {
  background: var(--crimson);
  color: #fff;
  height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 200
}

.breaking-label {
  flex-shrink: 0;
  background: #7a0d22;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  gap: 8px;
  position: relative;
  z-index: 2
}

.breaking-label::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  border-style: solid;
  border-width: 18px 0 18px 10px;
  border-color: transparent transparent transparent #7a0d22
}

.breaking-dot {
  width: 6px;
  height: 6px;
  background: #ffd;
  border-radius: 50%;
  animation: blink 1.2s ease-in-out infinite
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

.marquee-wrap {
  flex: 1;
  overflow: hidden;
  padding-left: 20px
}

.marquee-track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite
}

.marquee-wrap:hover .marquee-track {
  animation-play-state: paused
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-item {
  font-size: 12.5px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

a.marquee-item:hover {
  text-decoration: underline;
  opacity: .85;
}

.marquee-item::before {
  content: "●";
  margin-right: 12px;
  font-size: 8px;
  opacity: .7
}

/* ═══════════════════════════════════════════════════════════
   UTILITY BAR
   ═══════════════════════════════════════════════════════════ */
.util-bar {
  background: var(--navy);
  color: #9aadcc;
  font-size: 11px;
  height: 32px;
  display: flex;
  align-items: center
}

.util-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.util-left,
.util-right {
  display: flex;
  align-items: center;
  gap: 20px
}

.util-bar a:hover {
  color: #fff
}

.util-bar .date-tag {
  color: #c8d5e8;
  font-weight: 500
}

.util-contribute-btn {
  background: var(--crimson);
  color: #fff !important;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: background var(--tr)
}

.util-contribute-btn:hover {
  background: var(--crimson-lt) !important
}

.edition-pill {
  background: rgba(255, 255, 255, .1);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #c8d5e8
}

/* ═══════════════════════════════════════════════════════════
   HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .3s, border-color .3s
}

.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(13, 27, 62, .1);
  border-bottom-color: transparent
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px
}

/* Logo */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none
}

/* Site logo image — navbar header */
.site-logo-img {
  height: 44px;
  max-width: 200px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Mobile drawer logo image */
.drawer-logo-img {
  height: 32px;
  max-width: 160px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Footer logo image */
.footer-logo-img {
  height: 40px;
  max-width: 180px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Light pill background so logo reads on dark footer */
.footer-logo-wrap {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 16px;
  background: #fff;
  padding: 6px 14px;
  border-radius: 6px;
}

/* Admin / user panel logo */
.admin-logo-img {
  height: 36px;
  max-width: 160px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .site-logo-img { height: 36px; max-width: 160px; }
}

.logo-emblem {
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden
}

.logo-text-block {
  display: flex;
  flex-direction: column
}

.logo-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.5px;
  line-height: 1
}

.logo-name span {
  color: var(--crimson)
}

.logo-tagline {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px
}

.logo-rule {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 4px
}

.logo-rule span:first-child {
  width: 28px;
  height: 2px;
  background: var(--crimson)
}

.logo-rule span:last-child {
  width: 10px;
  height: 2px;
  background: var(--gold);
  margin-left: 3px
}

/* Main Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px
}

.main-nav a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-sec);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: var(--tr);
  position: relative
}

.main-nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--crimson);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform .22s
}

.main-nav a:hover {
  color: var(--navy);
  background: var(--bg-shade)
}

.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1)
}

.main-nav a.active {
  color: var(--crimson)
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: var(--tr);
  background: transparent;
  color: var(--text-sec)
}

.icon-btn:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.subscribe-btn {
  background: var(--crimson);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  transition: var(--tr)
}

.subscribe-btn:hover {
  background: var(--crimson-lt);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(155, 27, 48, .3)
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm)
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: var(--tr)
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* Mobile Drawer Overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 31, .5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  backdrop-filter: blur(2px)
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: var(--bg-card);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl)
}

.mobile-drawer.open {
  transform: translateX(0)
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border)
}

.drawer-logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.3px;
  text-decoration: none
}

.drawer-logo span {
  color: var(--crimson)
}

.drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-shade);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sec);
  transition: var(--tr)
}

.drawer-close:hover {
  background: var(--navy);
  color: #fff
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px
}

.drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--text-sec);
  font-size: 14.5px;
  font-weight: 500;
  transition: var(--tr);
  text-decoration: none
}

.drawer-item:hover,
.drawer-item.active {
  background: var(--bg-shade);
  color: var(--navy)
}

.drawer-item.active {
  font-weight: 700;
  color: var(--crimson)
}

.drawer-arrow {
  color: var(--text-muted);
  transition: transform var(--tr)
}

.drawer-item:hover .drawer-arrow {
  transform: translateX(3px);
  color: var(--crimson)
}

.drawer-footer {
  padding: 16px 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px
}

.drawer-cta {
  display: block;
  text-align: center;
  padding: 12px 20px;
  background: var(--crimson);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: var(--tr);
  text-decoration: none
}

.drawer-cta:hover {
  background: var(--crimson-lt)
}

.drawer-cta--outline {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy)
}

.drawer-cta--outline:hover {
  background: var(--navy);
  color: #fff
}

/* Secondary Nav */
.nav-secondary {
  background: var(--bg-shade);
  border-bottom: 1px solid var(--border);
  overflow: hidden
}

.nav-secondary .container {
  display: flex;
  gap: 0;
  align-items: center;
  height: 40px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch
}

.nav-secondary .container::-webkit-scrollbar {
  display: none
}

.nav-secondary a {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-sec);
  padding: 0 16px;
  height: 40px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
  transition: var(--tr)
}

.nav-secondary a:hover,
.nav-secondary a.active {
  background: var(--navy);
  color: #fff
}

/* ═══════════════════════════════════════════════════════════
   HOME PAGE LAYOUT
   ═══════════════════════════════════════════════════════════ */
.main-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  padding: 16px 0 36px
}

.content-col {
  min-width: 0
}

.sidebar-col {
  min-width: 0
}

.leaderboard-ad {
  background: var(--bg-shade);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 32px;
  cursor: pointer;
  overflow: hidden
}

.leaderboard-ad span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaa
}

.leaderboard-ad img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain
}

.ribbon-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px
}

.ribbon-bar::before,
.ribbon-bar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border)
}

.ribbon-bar::before {
  max-width: 40px
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px;
  margin-bottom: 28px;
  animation: fadeUp .6s ease both
}

.hero-main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--navy);
  box-shadow: var(--shadow-md);
  min-height: 380px
}

.hero-img-wrap {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
  position: relative
}

.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.25, .46, .45, .94)
}

.hero-main:hover .hero-img-wrap img {
  transform: scale(1.04)
}

.hero-text-panel {
  flex: 1;
  background: var(--navy);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0
}

.hero-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 10px
}

.hero-featured-label::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--gold-lt)
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px
}

.hero-time {
  font-size: 11px;
  color: #aab8cc;
  display: flex;
  align-items: center;
  gap: 4px
}

.hero-headline {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 10px
}

.hero-summary {
  font-size: 13.5px;
  color: #c0ccdc;
  line-height: 1.58
}

.hero-read-more {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-lt);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--tr)
}

.hero-read-more:hover {
  color: #fff
}

.hero-read-more svg {
  transition: transform .2s
}

.hero-read-more:hover svg {
  transform: translateX(4px)
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.side-story {
  display: flex;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: var(--tr);
  flex: 1;
  box-shadow: var(--shadow-sm)
}

.side-story:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #c8d0da
}

.side-thumb {
  width: 88px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden
}

.side-thumb img {
  height: 100%;
  transition: transform .4s
}

.side-story:hover .side-thumb img {
  transform: scale(1.07)
}

.side-body {
  flex: 1;
  min-width: 0
}

.side-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 4px;
  display: block
}

.side-headline {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-pri);
  margin-bottom: 6px
}

.side-headline a {
  color: inherit;
  transition: color .2s
}

.side-headline a:hover {
  color: var(--crimson)
}

.side-time {
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px
}

/* ═══════════════════════════════════════════════════════════
   NEWS GRID (Homepage)
   ═══════════════════════════════════════════════════════════ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
  animation: fadeUp .6s .1s ease both
}

.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column
}

.news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: #c4ccd8
}

.news-card-img {
  display: block;
  text-decoration: none;
  height: 175px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0
}

.news-card-img img {
  height: 100%;
  transition: transform .45s cubic-bezier(.25, .46, .45, .94)
}

.news-card:hover .news-card-img img {
  transform: scale(1.07)
}

.news-card-img .tag,
.news-card-img .news-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(13, 27, 62, .82);
  color: var(--gold-lt);
  border: 1px solid rgba(200, 150, 42, .3);
  backdrop-filter: blur(4px)
}

.news-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.news-headline {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-pri);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1
}

.news-headline a {
  color: inherit;
  transition: color .2s
}

.news-headline a:hover {
  color: var(--crimson)
}

.news-desc {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px
}

.news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--bg-shade);
  padding-top: 10px;
  margin-top: auto;
  flex-wrap: wrap;
  gap: 6px
}

.news-meta-left {
  display: flex;
  align-items: center;
  gap: 6px
}

.news-author-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border)
}

.news-author {
  font-weight: 700;
  color: var(--navy);
  font-size: 11px
}

.news-date {
  display: flex;
  align-items: center;
  gap: 4px
}

/* ═══════════════════════════════════════════════════════════
   JUDGMENTS SECTION (Homepage)
   ═══════════════════════════════════════════════════════════ */
.judgments-section {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1428 100%);
  border-radius: var(--radius-md);
  padding: 28px 28px 20px;
  margin-bottom: 28px;
  animation: fadeUp .6s .2s ease both;
  box-shadow: var(--shadow-lg)
}

.judgments-section .section-title {
  color: #e8eef6;
  border-color: rgba(255, 255, 255, .12);
  font-size: 20px;
  margin-bottom: 20px
}

.judgments-section .section-title::after {
  background: var(--gold-lt)
}

.judgments-section .section-title span.accent {
  color: var(--gold-lt)
}

.judgment-list {
  display: flex;
  flex-direction: column
}

.judgment-item {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  cursor: pointer;
  transition: padding-left var(--tr)
}

.judgment-item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.judgment-item:hover {
  padding-left: 6px
}

.judgment-num {
  font-size: 26px;
  font-weight: 800;
  color: rgba(155, 27, 48, .4);
  font-family: var(--serif);
  min-width: 36px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0
}

.judgment-content {
  flex: 1;
  min-width: 0
}

.judgment-court {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 5px
}

.judgment-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: #e8eef6 !important;
  line-height: 1.35;
  margin-bottom: 6px
}

.judgment-title a {
  color: #e8eef6;
  transition: color .2s
}

.judgment-title a:hover {
  color: var(--gold-lt)
}

.judgment-summary {
  font-size: 12px;
  color: #7a9abb;
  line-height: 1.55
}

.judgment-date {
  font-size: 10.5px;
  color: #4a6a8a;
  margin-top: 5px
}

/* ═══════════════════════════════════════════════════════════
   OPINIONS / ARTICLES (Homepage)
   ═══════════════════════════════════════════════════════════ */
.opinion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 28px;
  animation: fadeUp .6s .3s ease both
}

.opinion-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm)
}

.opinion-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: #c4ccd8
}

.opinion-card-img {
  height: 165px;
  overflow: hidden;
  position: relative
}

.opinion-card-img img {
  height: 100%;
  transition: transform .45s
}

.opinion-card:hover .opinion-card-img img {
  transform: scale(1.06)
}

.opinion-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--crimson))
}

.opinion-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.opinion-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px
}

.opinion-label::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--crimson)
}

.opinion-headline {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-pri);
  margin-bottom: 10px;
  flex: 1
}

.opinion-headline a {
  color: inherit;
  transition: color .2s
}

.opinion-headline a:hover {
  color: var(--crimson)
}

.opinion-preview {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.58;
  margin-bottom: 14px
}

.author-row {
  display: flex;
  align-items: center;
  gap: 10px
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-shade)
}

.author-info .author-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy)
}

.author-info .author-role {
  font-size: 10.5px;
  color: var(--text-muted)
}

/* ═══════════════════════════════════════════════════════════
   VISUAL GRID (Homepage)
   ═══════════════════════════════════════════════════════════ */
.visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px
}

.visual-card {
  position: relative;
  height: 185px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm)
}

.visual-card img {
  height: 100%;
  transition: transform .45s
}

.visual-card:hover img {
  transform: scale(1.09)
}

.visual-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 15, 40, .88) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px
}

.visual-card-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 5px
}

.visual-card-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — nv-sidebar (Home)
   ═══════════════════════════════════════════════════════════ */
.nv-sidebar {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 22px
}

.nv-widget {
  background: #fff;
  border: 1px solid #ece7df;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(17, 24, 39, .04)
}

.nv-widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  background: linear-gradient(135deg, #081c45 0%, #102b63 100%);
  border-bottom: 3px solid #b51d34
}

.nv-widget-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff
}

.nv-widget-icon {
  color: #d4a017;
  display: flex;
  align-items: center;
  justify-content: center
}

.nv-widget-body {
  padding: 6px 18px 14px
}

.nv-trending-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #f1ece5;
  text-decoration: none;
  transition: all .25s ease
}

.nv-trending-item:last-child {
  border-bottom: none;
  padding-bottom: 6px
}

.nv-trending-item:hover {
  transform: translateX(4px)
}

.nv-trending-number {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b51d34, #d43750);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(181, 29, 52, .25);
  flex-shrink: 0
}

.nv-trending-content {
  flex: 1
}

.nv-trending-title {
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
  color: #182230;
  transition: color .25s
}

.nv-trending-item:hover .nv-trending-title {
  color: #b51d34
}

.nv-trending-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  color: #8a8f98
}

.nv-most-read-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f2ece5;
  text-decoration: none
}

.nv-most-read-item:last-child {
  border-bottom: none
}

.nv-read-rank {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  background: #081c45;
  color: #d4a017;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0
}

.nv-read-title {
  color: #1c2735;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
  transition: color .25s
}

.nv-most-read-item:hover .nv-read-title {
  color: #b51d34
}

.nv-read-meta {
  margin-top: 6px;
  font-size: 11px;
  color: #9097a3
}

.nv-newsletter-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #081c45 0%, #102b63 50%, #07152f 100%);
  padding: 26px 22px;
  box-shadow: 0 10px 30px rgba(8, 28, 69, .18)
}

.nv-newsletter-overlay {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(rgba(181, 29, 52, .35), transparent 70%)
}

.nv-newsletter-content {
  position: relative;
  z-index: 2
}

.nv-newsletter-heading {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px
}

.nv-newsletter-text {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.75;
  margin-bottom: 16px
}

.nv-newsletter-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  outline: none;
  font-family: var(--sans);
  font-size: 13.5px
}

.nv-newsletter-input::placeholder {
  color: rgba(255, 255, 255, .4)
}

.nv-newsletter-btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #b51d34, #d43750);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease
}

.nv-newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(181, 29, 52, .3)
}

.nv-newsletter-note {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  text-align: center
}

.nv-ad-card {
  border-radius: var(--radius-lg);
  overflow: hidden
}

.nv-ad-placeholder {
  height: 260px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #f8f4ee, #f2ece3);
  border: 1px dashed #d5cab8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.nv-ad-placeholder.small {
  height: 160px
}

.nv-ad-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7f8692
}

.nv-ad-size {
  font-size: 12px;
  color: #b0b4bc
}

/* Sidebar for listing pages */
.sidebar-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.widget-title {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-inv);
  background: var(--navy);
  padding: 13px 16px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 8px
}

.widget-body {
  padding: 14px 16px
}

.trending-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer
}

.trending-item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.trending-item:hover .trending-headline {
  color: var(--crimson)
}

.trending-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--bg-deep);
  font-family: var(--serif);
  line-height: 1;
  min-width: 28px
}

.trending-headline {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-pri);
  transition: color .2s
}

.trending-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px
}

.mr-item,
.most-read-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer
}

.mr-item:last-child,
.most-read-item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mr-item:hover .mr-hl,
.most-read-item:hover .mr-headline {
  color: var(--crimson)
}

.mr-rank {
  width: 22px;
  height: 22px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px
}

.mr-hl,
.mr-headline {
  font-size: 12.5px;
  line-height: 1.38;
  color: var(--text-pri);
  font-weight: 500;
  transition: color .2s
}

.newsletter-outer {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2e5a 100%)
}

.newsletter-widget .widget-title {
  background: rgba(0, 0, 0, .15)
}

.newsletter-body {
  padding: 16px
}

.newsletter-text {
  font-size: 12.5px;
  color: #aab8cc;
  line-height: 1.55;
  margin-bottom: 14px
}

.newsletter-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  outline: none;
  transition: border-color .2s;
  font-family: var(--sans)
}

.newsletter-input::placeholder {
  color: #5a7a9c
}

.newsletter-input:focus {
  border-color: var(--gold)
}

.newsletter-btn {
  width: 100%;
  background: var(--crimson);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--tr);
  font-family: var(--sans)
}

.newsletter-btn:hover {
  background: var(--crimson-lt)
}

.ad-box {
  background: repeating-linear-gradient(45deg, #f0ebe0, #f0ebe0 10px, #e8e2d6 10px, #e8e2d6 20px);
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px
}

.ad-box-label,
.ad-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted)
}

.ad-box-size,
.ad-size {
  font-size: 10px;
  color: #aaa
}

.topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.topic-pill {
  font-size: 11.5px;
  padding: 5px 13px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--tr);
  color: var(--text-sec)
}

.topic-pill:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (dark — listing pages)
   ═══════════════════════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1428 100%);
  padding: 44px 0 36px;
  position: relative;
  overflow: hidden
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(155, 27, 48, .15) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(184, 134, 11, .08) 0%, transparent 50%)
}

.page-hero-inner {
  position: relative;
  z-index: 1
}

.breadcrumb,
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #5a7a9c;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.breadcrumb a,
.breadcrumb-nav a {
  color: #5a7a9c;
  transition: color .2s
}

.breadcrumb a:hover,
.breadcrumb-nav a:hover {
  color: #aab8cc
}

.bc-sep {
  color: #3a5a7a
}

.page-title {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 10px
}

.page-title em {
  color: var(--gold-lt);
  font-style: italic
}

.page-subtitle {
  font-size: 14px;
  color: #7a9abb;
  max-width: 560px;
  line-height: 1.65
}

.page-hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.stat-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.stat-label {
  font-size: 11px;
  color: #5a7a9c;
  letter-spacing: .5px;
  margin-top: 3px
}

/* Listing page hero (light) */
.listing-hero {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 36px 0 28px;
  margin-bottom: 36px
}

.listing-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.listing-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--text-muted)
}

.listing-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s
}

.listing-breadcrumb a:hover {
  color: var(--crimson)
}

.listing-breadcrumb .bc-chevron {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0
}

.listing-breadcrumb .bc-current {
  color: var(--navy);
  font-weight: 600
}

.listing-page-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  border-left: 5px solid var(--crimson);
  padding-left: 16px;
  margin: 0
}

.listing-page-title span {
  color: var(--crimson)
}

.listing-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  padding-left: 21px;
  margin: 0;
  line-height: 1.65
}

/* ═══════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════ */
.filter-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  position: sticky;
  top: 118px;
  z-index: 90;
  box-shadow: var(--shadow-sm)
}

.filter-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px
}

.filter-select {
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 7px 32px 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-pri);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: var(--tr);
  outline: none
}

.filter-select:focus,
.filter-select:hover {
  border-color: var(--navy)
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--tr);
  background: transparent;
  color: var(--text-sec)
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.result-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap
}

.result-count strong {
  color: var(--navy)
}

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT (listing pages)
   ═══════════════════════════════════════════════════════════ */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  padding: 32px 0 48px
}

.content-col {
  min-width: 0
}

/* Lead Story */
.lead-story {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: var(--shadow-sm);
  animation: fadeUp .5s ease both
}

.lead-story:hover {
  box-shadow: var(--shadow-lg)
}

.lead-img {
  height: 100%;
  min-height: 270px;
  overflow: hidden
}

.lead-img img {
  height: 100%;
  transition: transform .45s
}

.lead-story:hover .lead-img img {
  transform: scale(1.04)
}

.lead-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.lead-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px
}

.lead-time {
  font-size: 11px;
  color: var(--text-muted)
}

.lead-headline {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-pri);
  margin-bottom: 12px;
  flex: 1
}

.lead-headline:hover {
  color: var(--crimson)
}

.lead-summary {
  font-family: var(--body-serif);
  font-size: 13.5px;
  color: var(--text-sec);
  line-height: 1.68;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.lead-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bg-shade)
}

.author-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0
}

.author-name-sm {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy)
}

.read-min {
  font-size: 11px;
  color: var(--text-muted)
}

/* News row (3-col) */
.news-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  animation: fadeUp .5s .08s ease both
}

.news-card-h {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: var(--shadow-sm)
}

.news-card-h:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px)
}

.nc-img {
  height: 155px;
  overflow: hidden;
  position: relative
}

.nc-img img {
  height: 100%;
  transition: transform .4s
}

.news-card-h:hover .nc-img img {
  transform: scale(1.06)
}

.nc-img .tag {
  position: absolute;
  top: 8px;
  left: 8px
}

.nc-body {
  padding: 14px
}

.nc-headline {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-pri);
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.nc-desc {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px
}

.nc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--bg-shade);
  padding-top: 8px
}

.nc-author {
  font-weight: 600;
  color: var(--navy)
}

/* Compact List */
.compact-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  animation: fadeUp .5s .16s ease both
}

.compact-header {
  background: var(--navy);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.compact-header-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: #e8eef6;
  display: flex;
  align-items: center;
  gap: 8px
}

.compact-header-more {
  font-size: 11px;
  color: #7a9abb;
  cursor: pointer;
  transition: color .2s
}

.compact-header-more:hover {
  color: #fff
}

.compact-item {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer;
  transition: var(--tr)
}

.compact-item:last-child {
  border-bottom: none
}

.compact-item:hover {
  background: var(--bg-shade)
}

.compact-item:hover .ci-headline {
  color: var(--crimson)
}

.ci-thumb {
  width: 72px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden
}

.ci-thumb img {
  height: 100%
}

.ci-content {
  flex: 1;
  min-width: 0
}

.ci-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px
}

.ci-headline {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-pri);
  transition: color .2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.ci-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px
}

/* Timeline */
.timeline {
  margin-bottom: 22px
}

.timeline-group {
  margin-bottom: 28px
}

.timeline-date-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px
}

.tdh-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .5px;
  background: var(--bg-shade);
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap
}

.tdh-line {
  flex: 1;
  height: 1px;
  background: var(--border)
}

.timeline-item {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border)
}

.timeline-item:last-child {
  border-bottom: none
}

.ti-time {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 52px;
  padding-top: 2px;
  flex-shrink: 0;
  font-weight: 600
}

.ti-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 0 3px rgba(155, 27, 48, .15)
}

.ti-content {
  flex: 1
}

.ti-headline {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-pri);
  line-height: 1.35;
  margin-bottom: 5px;
  cursor: pointer;
  transition: color .2s
}

.ti-headline:hover {
  color: var(--crimson)
}

.ti-desc {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.ti-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px
}

.ti-author {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy)
}

.ti-read {
  font-size: 11px;
  color: var(--text-muted)
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border)
}

.page-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tr);
  color: var(--text-sec);
  background: transparent
}

.page-btn:hover {
  border-color: var(--navy);
  color: var(--navy)
}

.page-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.page-btn.prev,
.page-btn.next {
  width: auto;
  padding: 0 14px;
  font-size: 12px
}

.page-dots {
  color: var(--text-muted);
  padding: 0 4px
}

/* Premium Article Card (listing pages) */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 40px
}

.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s cubic-bezier(.4, 0, .2, 1), border-color .26s;
  box-shadow: var(--shadow-sm)
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: #c4ccd8
}

.article-card-thumb {
  display: block;
  text-decoration: none;
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--bg-shade);
  flex-shrink: 0
}

.article-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25, .46, .45, .94)
}

.article-card:hover .article-card-thumb img {
  transform: scale(1.07)
}

.card-cat-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.card-cat-pill {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(13, 27, 62, .82);
  color: var(--gold-lt);
  border: 1px solid rgba(200, 150, 42, .3);
  backdrop-filter: blur(4px);
  white-space: nowrap
}

.card-cat-pill.breaking {
  background: rgba(155, 27, 48, .88);
  color: #fff;
  border-color: rgba(255, 255, 255, .2)
}

.article-card-body {
  padding: 18px 16px 14px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.article-card-headline {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.38;
  color: var(--text-pri);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.article-card-headline a {
  color: inherit;
  text-decoration: none;
  transition: color .2s
}

.article-card-headline a:hover {
  color: var(--crimson)
}

.article-card-excerpt {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.58;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
  flex: 1
}

.article-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--bg-shade);
  padding-top: 10px;
  margin-top: auto;
  font-size: 10.5px;
  color: var(--text-muted);
  flex-wrap: wrap
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 5px
}

.meta-left svg {
  color: var(--crimson);
  flex-shrink: 0
}

.meta-author {
  font-weight: 700;
  color: var(--navy);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px
}

.meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0
}

.meta-reading {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 10.5px;
  white-space: nowrap
}

/* ═══════════════════════════════════════════════════════════
   JUDGMENT CARDS (listing page)
   ═══════════════════════════════════════════════════════════ */
.judgment-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 16px;
  transition: var(--tr);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: fadeUp .5s ease both
}

.judgment-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--crimson);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s
}

.judgment-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(3px)
}

.judgment-card:hover::before {
  transform: scaleY(1)
}

.judgment-card:nth-child(2) {
  animation-delay: .05s
}

.judgment-card:nth-child(3) {
  animation-delay: .1s
}

.judgment-card:nth-child(4) {
  animation-delay: .15s
}

.judgment-card:nth-child(5) {
  animation-delay: .2s
}

.jc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px
}

.jc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.jc-court {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy)
}

.jc-date {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px
}

.jc-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0
}

.jc-case-num {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--body-serif);
  font-style: italic
}

.jc-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-pri);
  line-height: 1.28;
  margin-bottom: 10px
}

.jc-title a {
  color: inherit;
  transition: color .2s
}

.jc-title a:hover,
.jc-title:hover {
  color: var(--crimson)
}

.jc-vs {
  color: var(--crimson);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  margin: 0 6px
}

.jc-summary {
  font-family: var(--body-serif);
  font-size: 13.5px;
  color: var(--text-sec);
  line-height: 1.68;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.jc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.jc-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.jc-actions {
  display: flex;
  gap: 8px
}

.jc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  color: var(--text-sec);
  cursor: pointer;
  transition: var(--tr);
  background: transparent
}

.jc-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--bg-shade)
}

.jc-btn.primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.jc-btn.primary:hover {
  background: var(--navy-mid)
}

.jc-bench {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px
}

.jc-bench strong {
  color: var(--text-sec)
}

.judgment-card.featured {
  border: 2px solid var(--navy);
  background: linear-gradient(to right, rgba(13, 27, 62, .03), transparent)
}

.judgment-card.featured::before {
  background: var(--gold);
  transform: scaleY(1)
}

.featured-crown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px
}

/* ═══════════════════════════════════════════════════════════
   OPINIONS/INTERVIEWS LISTING
   ═══════════════════════════════════════════════════════════ */
.ph-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 36px
}

.ph-title {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 12px
}

.ph-title em {
  color: var(--crimson);
  font-style: italic
}

.ph-subtitle {
  font-family: var(--body-serif);
  font-size: 15px;
  color: var(--text-sec);
  line-height: 1.65;
  max-width: 480px
}

.ph-right {
  display: flex;
  flex-direction: column
}

.opinion-feature {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 22px;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: var(--shadow-sm);
  animation: fadeUp .5s ease both
}

.opinion-feature:hover {
  box-shadow: var(--shadow-lg)
}

.of-img {
  position: relative;
  min-height: 320px;
  overflow: hidden
}

.of-img img {
  height: 100%;
  transition: transform .45s
}

.opinion-feature:hover .of-img img {
  transform: scale(1.04)
}

.of-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 45, .6) 0%, transparent 60%)
}

.of-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column
}

.of-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crimson);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px
}

.of-type::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--crimson)
}

.of-headline {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-pri);
  margin-bottom: 14px;
  flex: 1
}

.of-preview {
  font-family: var(--body-serif);
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.72;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 20px
}

.of-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-shade)
}

.of-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-shade)
}

.of-avatar img {
  height: 100%
}

.of-author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy)
}

.of-author-role {
  font-size: 11px;
  color: var(--text-muted)
}

.of-read-info {
  margin-left: auto;
  text-align: right
}

.of-read-min {
  font-size: 11px;
  color: var(--text-muted)
}

.of-read-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--crimson);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s
}

.of-read-link:hover {
  gap: 8px
}

.oc-img {
  height: 170px;
  overflow: hidden;
  position: relative
}

.oc-img img {
  height: 100%;
  transition: transform .4s
}

.opinion-card:hover .oc-img img {
  transform: scale(1.06)
}

.oc-type-bar {
  height: 3px
}

.oc-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.oc-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px
}

.oc-type::before {
  content: "";
  display: block;
  width: 16px;
  height: 2px
}

.oc-headline {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--text-pri);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1
}

.oc-preview {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.58;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px
}

.oc-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-shade)
}

.oc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-shade)
}

.oc-avatar img {
  height: 100%
}

.oc-author {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy)
}

.oc-date {
  font-size: 10.5px;
  color: var(--text-muted)
}

.opinion-list-item {
  display: flex;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: var(--tr);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.opinion-list-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--crimson);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s
}

.opinion-list-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(3px)
}

.opinion-list-item:hover::after {
  transform: scaleY(1)
}

.oli-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-shade)
}

.oli-avatar img {
  height: 100%
}

.oli-body {
  flex: 1;
  min-width: 0
}

.oli-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 4px
}

.oli-headline {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--text-pri);
  margin-bottom: 6px
}

.oli-headline:hover {
  color: var(--crimson)
}

.oli-preview {
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px
}

.oli-meta {
  display: flex;
  align-items: center;
  gap: 10px
}

.oli-author {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy)
}

.oli-date,
.oli-read {
  font-size: 11px;
  color: var(--text-muted)
}

.interview-feature {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1428 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 280px 1fr;
  animation: fadeUp .5s .16s ease both;
  box-shadow: var(--shadow-lg)
}

.if-img {
  position: relative;
  overflow: hidden
}

.if-img img {
  height: 100%;
  min-height: 300px;
  transition: transform .4s;
  opacity: .8;
  filter: grayscale(20%)
}

.interview-feature:hover .if-img img {
  transform: scale(1.04)
}

.if-img::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent, #0a1428)
}

.if-body {
  padding: 32px 32px 28px
}

.if-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-lt);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px
}

.if-label::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold-lt)
}

.if-headline {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 14px
}

.if-quote {
  font-family: var(--body-serif);
  font-size: 15px;
  font-style: italic;
  color: #aab8cc;
  line-height: 1.72;
  padding-left: 18px;
  border-left: 3px solid var(--crimson);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.if-author {
  display: flex;
  align-items: center;
  gap: 12px
}

.if-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .2)
}

.if-avatar img {
  height: 100%
}

.if-author-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #e8eef6
}

.if-author-role {
  font-size: 11px;
  color: #7a9abb
}

.if-read-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--gold-lt);
  transition: gap .2s
}

.if-read-btn:hover {
  gap: 10px;
  color: #fff
}

/* Author spotlight */
.author-spotlight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm)
}

.as-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy)
}

.as-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.as-card {
  text-align: center;
  cursor: pointer;
  transition: var(--tr)
}

.as-card:hover {
  transform: translateY(-3px)
}

.as-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 10px;
  border: 3px solid var(--bg-shade);
  transition: border-color .2s
}

.as-card:hover .as-avatar {
  border-color: var(--crimson)
}

.as-avatar img {
  height: 100%
}

.as-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px
}

.as-role {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3
}

.as-count {
  font-size: 10px;
  color: var(--crimson);
  font-weight: 600;
  margin-top: 4px
}

/* Sidebar items */
.s-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer;
  transition: var(--tr)
}

.s-author:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.s-author:hover .sa-name {
  color: var(--crimson)
}

.sa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-shade)
}

.sa-avatar img {
  height: 100%
}

.sa-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  transition: color .2s
}

.sa-role {
  font-size: 10.5px;
  color: var(--text-muted)
}

.sa-count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--crimson);
  font-weight: 600;
  white-space: nowrap
}

.court-links {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.court-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer;
  transition: var(--tr)
}

.court-link:last-child {
  border-bottom: none
}

.court-link:hover .cl-name {
  color: var(--crimson)
}

.cl-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-pri);
  transition: color .2s
}

.cl-count {
  font-size: 11px;
  background: var(--bg-shade);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600
}

.recent-judgment {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer
}

.recent-judgment:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.rj-court {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold)
}

.rj-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-pri);
  transition: color .2s
}

.recent-judgment:hover .rj-title {
  color: var(--crimson)
}

.rj-date {
  font-size: 10.5px;
  color: var(--text-muted)
}

.stat-panel {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1428 100%);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 22px
}

.stat-panel-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: #c8d5e8;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-dark)
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.stat-row:last-child {
  border-bottom: none
}

.sr-label {
  font-size: 12px;
  color: #7a9abb
}

.sr-val {
  font-size: 13px;
  font-weight: 700;
  color: #e8eef6
}

/* Category tabs */
.cat-tabs,
.type-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--border);
  gap: 0
}

.cat-tabs::-webkit-scrollbar,
.type-tabs::-webkit-scrollbar {
  display: none
}

.cat-tab,
.type-tab {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: var(--tr);
  white-space: nowrap
}

.cat-tab:hover,
.type-tab:hover {
  color: var(--navy)
}

.cat-tab.active,
.type-tab.active {
  color: var(--crimson);
  border-bottom-color: var(--crimson)
}

/* Live pill */
.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--crimson);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: blink 1s infinite
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE DETAIL PAGE
   ═══════════════════════════════════════════════════════════ */
.article-hero-section {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 36px 0 28px
}

.article-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px
}

.article-type-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crimson);
  padding: 3px 12px;
  border: 1.5px solid rgba(155, 27, 48, .2);
  border-radius: 20px;
  background: rgba(155, 27, 48, .06)
}

.ah-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.ah-headline {
  font-family: var(--serif);
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -.3px
}

.ah-standfirst {
  font-family: var(--body-serif);
  font-size: 18px;
  color: var(--text-sec);
  line-height: 1.72;
  margin-bottom: 20px;
  font-weight: 400
}

.ah-meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-shade)
}

.ah-author-row {
  display: flex;
  align-items: center;
  gap: 10px
}

.ah-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-shade)
}

.ah-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ah-author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy)
}

.ah-author-role {
  font-size: 11px;
  color: var(--text-muted)
}

.ah-pub-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto
}

.ah-pub-info span {
  display: flex;
  align-items: center;
  gap: 4px
}

.ah-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-sec);
  transition: var(--tr);
  font-family: var(--sans)
}

.action-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--bg-shade)
}

.article-cover-wrap {
  max-width: 1000px;
  margin: 0 auto
}

.article-cover-img {
  max-height: 300px;
  overflow: hidden
}

.article-cover-img img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: center top;
  display: block
}

/* Body text content constraints — prevent embedded HTML from breaking layout */
.body-text img, .adc-body-text img, .qa-body img, .opinion-body img {
  max-width: 100% !important;
  max-height: 380px !important;
  height: auto !important;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
.body-text iframe, .adc-body-text iframe, .qa-body iframe, .opinion-body iframe,
.body-text embed, .adc-body-text embed {
  max-width: 100% !important;
  max-height: 480px !important;
  width: 100%;
  display: block;
  border-radius: 4px;
}
/* Prevent arbitrary flex/grid card layouts in content from escaping container */
.body-text > *, .adc-body-text > * { max-width: 100% !important; }
.body-text [style*="display:flex"], .adc-body-text [style*="display:flex"],
.body-text [style*="display: flex"], .adc-body-text [style*="display: flex"] {
  flex-wrap: wrap !important;
}
.body-text [style*="width"], .adc-body-text [style*="width"] { max-width: 100% !important; }

/* Responsive meta bar inside article body */
@media (max-width: 640px) {
  .ah-meta-bar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .ah-pub-info { flex-wrap: wrap; }
  .adh-author-card { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .adh-meta-right { flex-wrap: wrap; gap: 8px; }
  .adh-actions { width: 100%; justify-content: flex-start; }
}

.article-cover-caption {
  max-width: 860px;
  margin: 10px auto 0;
  padding: 0 24px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55
}

.article-two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  padding: 36px 0 48px;
  max-width: 1140px;
  margin: 0 auto
}

.article-body-col {
  min-width: 0
}

/* Article body */
.body-text {
  font-family: var(--body-serif);
  font-size: 18px;
  line-height: 1.82;
  color: var(--text-pri);
  max-width: 700px
}

.body-text p {
  margin-bottom: 1.4em
}

.body-text h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 1.8em 0 .7em;
  line-height: 1.25
}

.body-text h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 1.5em 0 .6em;
  line-height: 1.3
}

.body-text blockquote {
  border-left: 4px solid var(--crimson);
  padding: 12px 20px;
  margin: 1.5em 0;
  background: var(--bg-shade);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--text-sec)
}

.body-text ul,
.body-text ol {
  margin: 1em 0 1.4em 1.5em
}

.body-text li {
  margin-bottom: .6em
}

.body-text strong {
  font-weight: 700;
  color: var(--text-pri)
}

.body-text a {
  color: var(--crimson);
  text-decoration: underline;
  text-underline-offset: 2px
}

/* ── Rich-text content: Tables ────────────────────────────────────────────────
   Applied to ALL content areas: body-text, adc-body-text, jd-section-content,
   opinion-body, qa-body, cb-text, cb-table-wrap.
   Tiptap wraps cell text in <p> — reset that margin inside cells.
──────────────────────────────────────────────────────────────────────────── */

.body-text table,
.adc-body-text table,
.jd-section-content table,
.opinion-body table,
.qa-body table,
.cb-text table,
.cb-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.25em 0;
  font-size: .92em;
  line-height: 1.55;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #dee2e6;
}

.body-text table th,
.adc-body-text table th,
.jd-section-content table th,
.opinion-body table th,
.qa-body table th,
.cb-text table th,
.cb-table-wrap table th {
  background: #f0f2f5;
  font-weight: 700;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #374151;
  text-align: left;
  padding: .65rem 1rem;
  border-bottom: 2px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

.body-text table th:last-child,
.adc-body-text table th:last-child,
.jd-section-content table th:last-child,
.opinion-body table th:last-child,
.qa-body table th:last-child,
.cb-text table th:last-child,
.cb-table-wrap table th:last-child {
  border-right: none;
}

.body-text table td,
.adc-body-text table td,
.jd-section-content table td,
.opinion-body table td,
.qa-body table td,
.cb-text table td,
.cb-table-wrap table td {
  padding: .6rem 1rem;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  color: #374151;
  vertical-align: top;
}

.body-text table td:last-child,
.adc-body-text table td:last-child,
.jd-section-content table td:last-child,
.opinion-body table td:last-child,
.qa-body table td:last-child,
.cb-text table td:last-child,
.cb-table-wrap table td:last-child {
  border-right: none;
}

.body-text table tr:last-child td,
.adc-body-text table tr:last-child td,
.jd-section-content table tr:last-child td,
.opinion-body table tr:last-child td,
.qa-body table tr:last-child td,
.cb-text table tr:last-child td,
.cb-table-wrap table tr:last-child td {
  border-bottom: none;
}

/* Alternating row zebra */
.body-text table tbody tr:nth-child(even) td,
.adc-body-text table tbody tr:nth-child(even) td,
.jd-section-content table tbody tr:nth-child(even) td,
.opinion-body table tbody tr:nth-child(even) td,
.qa-body table tbody tr:nth-child(even) td,
.cb-text table tbody tr:nth-child(even) td,
.cb-table-wrap table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

/* Row hover */
.body-text table tbody tr:hover td,
.adc-body-text table tbody tr:hover td,
.jd-section-content table tbody tr:hover td,
.opinion-body table tbody tr:hover td,
.qa-body table tbody tr:hover td,
.cb-text table tbody tr:hover td,
.cb-table-wrap table tbody tr:hover td {
  background: #f0f4ff;
}

/* Remove paragraph margin Tiptap injects inside cells */
.body-text table p,
.adc-body-text table p,
.jd-section-content table p,
.opinion-body table p,
.qa-body table p,
.cb-text table p,
.cb-table-wrap table p {
  margin: 0;
}

/* Responsive: wrap tables in a scroll container via JS or CSS */
.body-text table,
.adc-body-text table,
.jd-section-content table,
.opinion-body table,
.qa-body table,
.cb-text table {
  max-width: 100%;
  display: table;
}

@media (max-width: 768px) {
  .body-text table,
  .adc-body-text table,
  .jd-section-content table,
  .opinion-body table,
  .qa-body table,
  .cb-text table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* cb-table-wrap already provides the scroll container */
.cb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25em 0;
}

.cb-table-wrap table {
  display: table;
  min-width: 480px;
}

/* ── Rich-text content: headings for opinion/interview content areas ──────── */
.opinion-body h2, .qa-body h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 1.5em 0 .6em;
  color: var(--text-pri, #1a1a2e);
  line-height: 1.3;
}
.opinion-body h3, .qa-body h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.3em 0 .5em;
  color: var(--text-pri, #1a1a2e);
}
.opinion-body h4, .qa-body h4 {
  font-size: .95rem;
  font-weight: 700;
  margin: 1.1em 0 .4em;
  color: var(--text-pri, #1a1a2e);
}

/* ── Rich-text content: underline (Tiptap extension) ──────────────────────── */
.body-text u, .adc-body-text u,
.jd-section-content u, .opinion-body u, .qa-body u {
  text-underline-offset: 3px;
}

/* Article tags */
.article-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 28px 0;
  padding: 20px 0;
  border-top: 1px solid var(--border)
}

.article-tags-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted)
}

.art-tag {
  font-size: 11.5px;
  padding: 5px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-sec);
  cursor: pointer;
  transition: var(--tr)
}

.art-tag:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

/* Share section */
.share-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px 24px;
  background: var(--bg-shade);
  border-radius: var(--radius-md);
  margin: 28px 0;
  border: 1px solid var(--border)
}

.ssb-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy)
}

.ssb-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.ssb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--tr);
  border: none;
  font-family: var(--sans)
}

.ssb-x {
  background: #000;
  color: #fff
}

.ssb-wa {
  background: #25d366;
  color: #fff
}

.ssb-li {
  background: #0a66c2;
  color: #fff
}

.ssb-fb {
  background: #1877f2;
  color: #fff
}

.ssb-copy {
  background: var(--navy);
  color: #fff
}

.ssb-btn:hover {
  opacity: .85;
  transform: translateY(-1px)
}

.ssb-btn.copied {
  background: var(--gold) !important
}

/* Author bio */
.article-author-bio {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: 28px;
  box-shadow: var(--shadow-sm)
}

.bio-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bg-shade)
}

.bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.bio-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 4px
}

.bio-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px
}

.bio-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px
}

.bio-text {
  font-size: 13.5px;
  color: var(--text-sec);
  line-height: 1.65;
  margin-bottom: 12px
}

.bio-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.bio-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--crimson);
  border-bottom: 1.5px solid rgba(155, 27, 48, .3);
  padding-bottom: 1px;
  transition: var(--tr)
}

.bio-link:hover {
  color: var(--crimson-lt);
  border-color: var(--crimson-lt)
}

/* Article sticky sidebar */
.article-sidebar-sticky {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: flex-start
}

.rp-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm)
}

.rp-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px
}

.rp-bar {
  height: 6px;
  background: var(--bg-shade);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px
}

.rp-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 3px;
  transition: width .15s linear
}

.rp-pct {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right
}

.sidebar-widget-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.swb-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-inv);
  background: var(--navy);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 7px
}

.swb-body {
  padding: 0
}

.saw-widget {
  padding: 16px;
  text-align: center
}

.saw-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 10px;
  border: 3px solid var(--bg-shade);
  background: var(--navy);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center
}

.saw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.saw-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3px
}

.saw-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px
}

.saw-btn {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 8px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: var(--tr);
  text-decoration: none
}

.saw-btn:hover {
  background: var(--crimson)
}

.sri-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg-shade);
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none
}

.sri-item:last-child {
  border-bottom: none
}

.sri-item:hover {
  background: var(--bg-shade)
}

.sri-thumb {
  width: 64px;
  height: 50px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-shade)
}

.sri-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.sri-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 3px
}

.sri-headline {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-pri);
  margin-bottom: 4px;
  transition: color .2s
}

.sri-item:hover .sri-headline {
  color: var(--crimson)
}

.sri-date {
  font-size: 10.5px;
  color: var(--text-muted)
}

/* More articles */
.more-articles-row {
  background: var(--bg-shade);
  padding: 44px 0;
  border-top: 1px solid var(--border)
}

.more-articles-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 24px
}

.more-articles-title span {
  color: var(--crimson)
}

.more-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.mac-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none;
  box-shadow: var(--shadow-sm)
}

.mac-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px)
}

.mac-img {
  height: 170px;
  overflow: hidden;
  background: var(--bg-shade)
}

.mac-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s
}

.mac-card:hover .mac-img img {
  transform: scale(1.06)
}

.mac-body {
  padding: 16px;
  flex: 1
}

.mac-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 6px
}

.mac-headline {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-pri);
  line-height: 1.35;
  margin-bottom: 8px
}

.mac-author {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px
}

.mac-date {
  font-size: 11px;
  color: var(--text-muted)
}

/* Float share */
.float-share {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 98;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px
}

.float-share.visible {
  display: flex
}

.float-share-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s
}

.float-share-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.float-share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-sec);
  transition: var(--tr);
  white-space: nowrap;
  font-family: var(--sans)
}

.float-share-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(-2px)
}

.float-share-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: var(--tr)
}

.float-share-btn:hover {
  background: var(--crimson);
  transform: scale(1.08)
}

/* ═══════════════════════════════════════════════════════════
   SEARCH MODAL
   ═══════════════════════════════════════════════════════════ */
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 31, .92);
  z-index: 999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  backdrop-filter: blur(6px)
}

.search-modal.open {
  display: flex
}

.search-modal-inner {
  width: 100%;
  max-width: 660px;
  padding: 0 24px
}

.search-input-wrap {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl)
}

.search-input-wrap input {
  width: 100%;
  padding: 20px 70px 20px 22px;
  font-size: 19px;
  border: none;
  outline: none;
  font-family: var(--body-serif);
  color: var(--text-pri)
}

.search-submit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: var(--crimson);
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr)
}

.search-submit:hover {
  background: var(--crimson-lt)
}

.search-hint {
  font-size: 12.5px;
  color: #7a9abb;
  text-align: center;
  margin-top: 14px;
  line-height: 1.65
}

.search-close {
  position: absolute;
  top: 60px;
  right: 40px;
  color: #aaa;
  font-size: 28px;
  cursor: pointer;
  transition: color .2s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center
}

.search-close:hover {
  color: #fff
}

/* ═══════════════════════════════════════════════════════════
   SCROLL TO TOP
   ═══════════════════════════════════════════════════════════ */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--tr);
  z-index: 97;
  border: none
}

.scroll-top.visible {
  display: flex
}

.scroll-top:hover {
  background: var(--crimson);
  transform: translateY(-3px)
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAVIGATION (Mobile)
   ═══════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(13, 27, 62, .08);
  padding: 0 0 env(safe-area-inset-bottom, 0)
}

.bn-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 60px;
  max-width: 480px;
  margin: 0 auto
}

.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: capitalize;
  transition: var(--tr);
  position: relative;
  text-decoration: none;
  border-radius: var(--radius-sm)
}

.bn-item:hover,
.bn-item.active {
  color: var(--crimson)
}

.bn-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.bn-active-dot {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--crimson);
  opacity: 0;
  transition: opacity var(--tr)
}

.bn-item.active .bn-active-dot {
  opacity: 1
}

.bn-ai {
  color: var(--navy)
}

.bn-ai-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 2px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(13, 27, 62, .25);
  transition: var(--tr);
  position: relative
}

.bn-item.bn-ai:hover .bn-ai-wrap,
.bn-item.bn-ai.active .bn-ai-wrap {
  background: var(--crimson);
  box-shadow: 0 4px 16px rgba(155, 27, 48, .3)
}

.bn-ai-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  background: var(--gold);
  color: #fff;
  padding: 1px 5px;
  border-radius: 10px;
  border: 1.5px solid #fff
}

.bn-item.bn-ai .bn-active-dot {
  display: none
}

.bn-item.bn-ai span:not(.bn-active-dot):not(.bn-ai-badge) {
  font-size: 9px;
  color: var(--text-muted)
}

/* ═══════════════════════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════════════════════ */
.img-fluid {
  max-width: 100%;
  height: auto;
  object-fit: cover
}

.page-layout {
  padding: 32px 0 48px
}

.article-title {
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem
}

.judgment-title-h1 {
  font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem
}

.text-inherit {
  color: inherit
}

.text-decoration-none {
  text-decoration: none
}

.featured-author-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  transition: var(--tr);
  margin-bottom: 12px
}

.featured-author-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px)
}

.fac-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid var(--bg-shade)
}

.fac-avatar img {
  height: 100%
}

.fac-type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 4px
}

.fac-title {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-pri);
  line-height: 1.3;
  margin-bottom: 4px
}

.fac-author {
  font-size: 11.5px;
  color: var(--navy);
  font-weight: 600
}

.fac-meta {
  font-size: 10.5px;
  color: var(--text-muted)
}

/* Pre-footer (old structure) */
.pre-footer {
  background: var(--navy-mid);
  padding: 20px 0;
  border-top: 3px solid var(--crimson)
}

.pre-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.pf-text {
  font-size: 13px;
  color: #aab8cc
}

.pf-text strong {
  color: #fff
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero-grid {
  animation: fadeUp .55s ease both
}

.news-grid {
  animation: fadeUp .55s .08s ease both
}

.judgments-section {
  animation: fadeUp .55s .16s ease both
}

.opinion-grid {
  animation: fadeUp .55s .24s ease both
}

.visual-grid {
  animation: fadeUp .55s .32s ease both
}

.lead-story {
  animation: fadeUp .5s ease both
}

.news-row {
  animation: fadeUp .5s .08s ease both
}

.compact-list {
  animation: fadeUp .5s .16s ease both
}

.opinion-feature {
  animation: fadeUp .5s ease both
}

.interview-feature {
  animation: fadeUp .5s .16s ease both
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1200px) {
  .container {
    padding: 0 20px
  }

  .hero-grid {
    grid-template-columns: 1fr 260px
  }

  .as-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .article-two-col {
    grid-template-columns: 1fr 260px;
    gap: 28px
  }
}

@media(max-width:1024px) {
  .main-content {
    grid-template-columns: 1fr !important
  }

  .main-layout {
    grid-template-columns: 1fr !important
  }

  .nv-sidebar {
    position: relative;
    top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
  }

  .sidebar-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }

  .ph-inner {
    grid-template-columns: 1fr !important
  }

  .ph-right {
    display: none
  }

  .article-two-col {
    grid-template-columns: 1fr
  }

  .article-sidebar-sticky {
    position: relative;
    top: 0
  }

  .more-articles-grid {
    grid-template-columns: 1fr 1fr
  }

  .bottom-nav {
    display: block
  }

  body {
    padding-bottom: 60px
  }
}

@media(max-width:840px) {
  .main-nav {
    display: none !important
  }

  .hamburger {
    display: flex !important
  }

  .util-bar {
    display: none !important
  }

  .subscribe-btn {
    display: none
  }

  .container {
    padding: 0 16px
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .hero-main {
    flex-direction: column;
    min-height: unset
  }

  .hero-img-wrap {
    width: 100%;
    height: 240px;
    flex-shrink: 0
  }

  .hero-text-panel {
    padding: 24px 20px
  }

  .hero-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px
  }

  .side-story {
    flex: 1 1 45%
  }

  .hero-headline {
    font-size: 22px !important
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .visual-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .opinion-grid {
    grid-template-columns: 1fr !important
  }

  .opinion-feature {
    grid-template-columns: 1fr !important
  }

  .of-img {
    min-height: 220px
  }

  .interview-feature {
    grid-template-columns: 1fr !important
  }

  .if-img {
    min-height: 200px
  }

  .if-img::after {
    display: none
  }

  .as-grid {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .lead-story {
    grid-template-columns: 1fr
  }

  .lead-img {
    min-height: 220px;
    height: 220px
  }

  .news-row {
    grid-template-columns: 1fr 1fr
  }

  .article-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px
  }

  .more-articles-grid {
    grid-template-columns: 1fr
  }

  .ph-title {
    font-size: 30px !important
  }

  .page-title {
    font-size: 28px
  }

  .section-title {
    font-size: 19px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center
  }

  .footer-bottom-links {
    justify-content: center
  }
}

@media(max-width:600px) {
  .container {
    padding: 0 14px
  }

  .breaking-label {
    padding: 0 12px;
    font-size: 9px;
    letter-spacing: 1px
  }

  .logo-name {
    font-size: 22px !important
  }

  .logo-tagline,
  .logo-rule {
    display: none
  }

  .hero-img-wrap {
    height: 200px
  }

  .hero-text-panel {
    padding: 20px 18px
  }

  .hero-headline {
    font-size: 19px !important
  }

  .hero-side {
    display: none
  }

  .news-grid {
    grid-template-columns: 1fr !important
  }

  .visual-grid {
    grid-template-columns: 1fr
  }

  .visual-card {
    height: 150px
  }

  .article-grid {
    grid-template-columns: 1fr !important
  }

  .sidebar-col {
    grid-template-columns: 1fr !important
  }

  .nv-sidebar {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr !important
  }

  .pre-footer .container {
    flex-direction: column;
    text-align: center;
    gap: 16px
  }

  .search-modal-inner {
    padding: 0 14px
  }

  .search-input-wrap input {
    font-size: 15px;
    padding: 14px 56px 14px 14px
  }

  .ssb-btns {
    gap: 6px
  }

  .ssb-btn {
    font-size: 10.5px;
    padding: 6px 10px
  }

  .ah-standfirst {
    font-size: 16px
  }

  .body-text {
    font-size: 16px
  }

  .listing-hero {
    padding: 26px 0 20px;
    margin-bottom: 24px
  }

  .more-articles-row {
    padding: 28px 0
  }

  .scroll-top {
    bottom: 70px
  }
}

@media(max-width:480px) {
  body {
    font-size: 14px
  }

  .hero-img-wrap {
    height: 180px
  }

  .hero-headline {
    font-size: 17px !important
  }

  .ah-headline {
    font-size: 22px !important
  }

  .ah-standfirst {
    font-size: 15px
  }

  .article-author-bio {
    flex-direction: column
  }

  .bio-avatar {
    width: 56px;
    height: 56px
  }

  .more-articles-grid {
    grid-template-columns: 1fr
  }

  .page-hero-stats {
    flex-wrap: wrap;
    gap: 16px
  }

  .filter-inner {
    flex-wrap: wrap;
    gap: 6px
  }

  .scroll-top {
    bottom: 72px;
    width: 40px;
    height: 40px;
    right: 14px
  }

  .float-share {
    right: 14px;
    bottom: 80px
  }

  .as-grid {
    grid-template-columns: repeat(2, 1fr) !important
  }
}

/* Admin panel responsive */
@media(max-width:840px) {

  .admin-table-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }
}

/* ─── Top Stories Section ────────────────────────────── */
.top-stories-section {
  margin-bottom: 32px
}

/* Shared image placeholder */
.ts-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted)
}

/* Shared type label */
.ts-type-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--crimson);
  display: block
}

/* Shared time row */
.ts-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted)
}

/* ── Layout: big left + side stack right ── */
.ts-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start
}

/* ── Main (priority 1) card ── */
.ts-main-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--tr), transform var(--tr)
}

.ts-main-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px)
}

.ts-main-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-shade);
  flex-shrink: 0
}

.ts-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease
}

.ts-main-card:hover .ts-main-img img {
  transform: scale(1.04)
}

.ts-main-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ts-main-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-pri);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

/* ── Side list (priorities 2–4) ── */
.ts-sidelist {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.ts-side-card {
  display: flex;
  gap: 12px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--tr), transform var(--tr)
}

.ts-side-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px)
}

.ts-side-thumb {
  width: 80px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-shade)
}

.ts-side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s
}

.ts-side-card:hover .ts-side-thumb img {
  transform: scale(1.07)
}

.ts-side-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center
}

.ts-side-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-pri);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

/* ── Responsive ── */
@media(max-width:860px) {
  .ts-layout {
    grid-template-columns: 1fr 260px
  }
}

@media(max-width:640px) {
  .ts-layout {
    grid-template-columns: 1fr
  }

  .ts-sidelist {
    flex-direction: row;
    flex-wrap: wrap
  }

  .ts-side-card {
    flex: 1 1 45%
  }
}

@media(max-width:400px) {
  .ts-sidelist {
    flex-direction: column
  }

  .ts-side-card {
    flex: unset
  }
}

/* ════════════════════════════════════════════════════
   FOOTER STYLES (from partials/footer.blade.php)
════════════════════════════════════════════════════ */

    :root {
        --f-navy: #050d1f;
        --f-navy-mid: #0b1529;
        --f-navy-lite: #112040;
        --f-gold: #c9a84c;
        --f-gold-lite: #e0c070;
        --f-crimson: #c0272d;
        --f-text: #8898aa;
        --f-text-mid: #aab8cc;
        --f-text-hi: #d8e2ee;
        --f-border: rgba(255, 255, 255, .07);
        --f-border-mid: rgba(255, 255, 255, .12);
        --f-radius: 8px;
        --f-transition: .22s cubic-bezier(.4, 0, .2, 1);
    }

    .pf-strip {
        background: linear-gradient(135deg, #0b1529 0%, #050d1f 60%, #0e0516 100%);
        border-top: 1px solid var(--f-border-mid);
        border-bottom: 1px solid var(--f-border);
        padding: 40px 0;
        position: relative;
        overflow: hidden;
    }

    .pf-strip::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 70% 50%, rgba(201, 168, 76, .06) 0%, transparent 60%);
        pointer-events: none;
    }

    .pf-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 12px 28px;
        position: relative;
    }

    .pf-badge {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: inline-flex;
        align-items: center;
        padding: 5px 12px;
        background: rgba(201, 168, 76, .12);
        border: 1px solid rgba(201, 168, 76, .3);
        border-radius: 20px;
        color: var(--f-gold);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        white-space: nowrap;
        align-self: center;
    }

    .pf-headline {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
    }

    .pf-headline strong {
        color: var(--f-text-hi);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .pf-headline span {
        color: var(--f-text);
        font-size: 14px;
        line-height: 1.5;
    }

    .pf-form {
        grid-column: 3;
        grid-row: 1 / span 2;
        display: flex;
        gap: 8px;
        align-self: center;
    }

    .pf-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    .pf-input-icon {
        position: absolute;
        left: 13px;
        color: var(--f-text);
        pointer-events: none;
        flex-shrink: 0;
    }

    .pf-email {
        padding: 11px 16px 11px 38px;
        border: 1.5px solid var(--f-border-mid);
        border-radius: var(--f-radius);
        background: rgba(255, 255, 255, .05);
        color: #fff;
        font-size: 14px;
        width: 250px;
        outline: none;
        transition: border-color var(--f-transition), background var(--f-transition);
    }

    .pf-email::placeholder {
        color: rgba(255, 255, 255, .35);
    }

    .pf-email:focus {
        border-color: var(--f-gold);
        background: rgba(255, 255, 255, .08);
    }

    .pf-submit {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 11px 20px;
        background: var(--f-gold);
        border: none;
        border-radius: var(--f-radius);
        color: #050d1f;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        letter-spacing: .01em;
        white-space: nowrap;
        transition: background var(--f-transition), transform var(--f-transition), box-shadow var(--f-transition);
    }

    .pf-submit:hover {
        background: var(--f-gold-lite);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(201, 168, 76, .28);
    }

    .pf-submit:active {
        transform: translateY(0);
    }

    .pf-consent {
        grid-column: 2;
        grid-row: 2;
        font-size: 11.5px;
        color: rgba(255, 255, 255, .32);
        margin: 0;
    }

    .pf-consent a {
        color: var(--f-text);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--f-transition);
    }

    .pf-consent a:hover {
        color: var(--f-gold);
    }

    .site-footer {
        background: var(--f-navy);
        color: var(--f-text);
        font-size: 14px;
        position: relative;
    }

    .footer-accent-bar {
        height: 3px;
        background: linear-gradient(90deg, var(--f-crimson) 0%, #8b1a1e 40%, transparent 100%);
    }

    .site-footer .container {
        padding-top: 56px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1.15fr 1.15fr 1.5fr;
        gap: 0;
        padding-bottom: 0;
    }

    .footer-grid>* {
        padding: 0 32px 48px 0;
    }

    .footer-grid>*:not(:last-child) {
        border-right: 1px solid var(--f-border);
        margin-right: 32px;
    }

    .footer-about {
        padding-right: 36px !important;
    }

    .footer-logo-wrap {
        display: inline-block;
        text-decoration: none;
        margin-bottom: 16px;
    }

    .footer-logo-wordmark {
        font-size: 22px;
        font-weight: 800;
        color: #fff;
        letter-spacing: -.03em;
        line-height: 1;
    }

    .footer-logo-wordmark span {
        color: var(--f-gold);
    }

    .footer-logo-rule {
        width: 36px;
        height: 2px;
        background: var(--f-gold);
        margin: 8px 0 6px;
        border-radius: 1px;
    }

    .footer-logo-tagline {
        font-size: 10.5px;
        color: #4a5f78;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-weight: 500;
    }

    .footer-desc {
        font-size: 13.5px;
        line-height: 1.8;
        color: var(--f-text);
        margin: 0 0 18px;
    }

    .footer-trust {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 22px;
    }

    .footer-trust-pill {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 20px;
        font-size: 10.5px;
        color: #5a7090;
        letter-spacing: .04em;
        font-weight: 500;
    }

    .footer-social {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }

    .fsb {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .09);
        color: var(--f-text);
        text-decoration: none;
        transition: background var(--f-transition),
            border-color var(--f-transition),
            color var(--f-transition),
            transform var(--f-transition),
            box-shadow var(--f-transition);
        flex-shrink: 0;
    }

    .fsb svg {
        width: 15px;
        height: 15px;
        transition: transform var(--f-transition);
    }

    .fsb:hover {
        transform: translateY(-3px) scale(1.08);
    }

    .fsb--x:hover {
        background: #000;
        border-color: #444;
        color: #fff;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
    }

    .fsb--linkedin:hover {
        background: #0a66c2;
        border-color: #0a66c2;
        color: #fff;
        box-shadow: 0 6px 16px rgba(10, 102, 194, .4);
    }

    .fsb--facebook:hover {
        background: #1877f2;
        border-color: #1877f2;
        color: #fff;
        box-shadow: 0 6px 16px rgba(24, 119, 242, .4);
    }

    .fsb--instagram:hover {
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 16px rgba(214, 36, 159, .35);
    }

    .fsb--youtube:hover {
        background: #ff0000;
        border-color: #ff0000;
        color: #fff;
        box-shadow: 0 6px 16px rgba(255, 0, 0, .35);
    }

    .fsb--telegram:hover {
        background: #26a5e4;
        border-color: #26a5e4;
        color: #fff;
        box-shadow: 0 6px 16px rgba(38, 165, 228, .35);
    }

    .fsb--whatsapp:hover {
        background: #25d366;
        border-color: #25d366;
        color: #fff;
        box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
    }

    .fsb:hover svg {
        transform: scale(1.1);
    }

    .footer-col-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .footer-col-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--f-text-hi);
        text-transform: uppercase;
        letter-spacing: .12em;
        margin: 0;
        position: relative;
        padding-bottom: 10px;
    }

    .footer-col-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 20px;
        height: 2px;
        background: var(--f-gold);
        border-radius: 1px;
        transition: width var(--f-transition);
    }

    .footer-col:hover .footer-col-title::after,
    .footer-col-title:focus::after {
        width: 32px;
    }

    .footer-col-title--secondary {
        margin-top: 28px;
        font-size: 11px;
    }

    .footer-col-toggle {
        display: none;
        background: none;
        border: none;
        color: var(--f-text);
        padding: 4px;
        cursor: pointer;
        transition: transform var(--f-transition), color var(--f-transition);
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .footer-links a {
        color: var(--f-text);
        text-decoration: none;
        font-size: 13.5px;
        padding: 5px 0;
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
        transition: color var(--f-transition), padding-left var(--f-transition);
        border-bottom: 1px solid transparent;
    }

    .footer-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 0;
        background: var(--f-gold);
        border-radius: 1px;
        transition: height var(--f-transition);
    }

    .footer-links a:hover {
        color: var(--f-text-hi);
        padding-left: 10px;
    }

    .footer-links a:hover::before {
        height: 14px;
    }

    .footer-contact-list {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .footer-contact-list li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--f-text);
    }

    .fc-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--f-border);
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--f-gold);
        opacity: .85;
        transition: background var(--f-transition), opacity var(--f-transition);
    }

    .footer-contact-list li:hover .fc-icon {
        background: rgba(201, 168, 76, .1);
        opacity: 1;
    }

    .footer-contact-list a {
        color: var(--f-text);
        text-decoration: none;
        transition: color var(--f-transition);
    }

    .footer-contact-list a:hover {
        color: var(--f-gold);
    }

    .footer-app-section {
        margin-top: 4px;
        padding-top: 20px;
        border-top: 1px solid var(--f-border);
    }

    .footer-app-label {
        font-size: 10.5px;
        color: #4a5f78;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-weight: 600;
        margin: 0 0 10px;
    }

    .footer-app-badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .footer-store-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 14px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--f-radius);
        color: var(--f-text-mid);
        text-decoration: none;
        font-size: 12.5px;
        font-weight: 600;
        transition: border-color var(--f-transition), color var(--f-transition),
            background var(--f-transition), transform var(--f-transition);
        line-height: 1.25;
    }

    .footer-store-btn svg {
        flex-shrink: 0;
    }

    .footer-store-btn small {
        display: block;
        font-size: 9px;
        font-weight: 400;
        letter-spacing: .04em;
        color: var(--f-text);
        text-transform: uppercase;
    }

    .footer-store-btn:hover {
        border-color: var(--f-gold);
        color: var(--f-gold);
        background: rgba(201, 168, 76, .06);
        transform: translateY(-1px);
    }

    .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0 20px;
        gap: 16px;
        flex-wrap: wrap;
        border-top: 1px solid var(--f-border);
    }

    .footer-bottom-left {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .footer-copy {
        font-size: 12.5px;
        color: #3a4f65;
    }

    .footer-bottom-sep {
        color: #2a3a4a;
        font-size: 12px;
    }

    .footer-issn {
        font-size: 11.5px;
        color: #2e4258;
        letter-spacing: .04em;
    }

    .footer-bottom-links {
        display: flex;
        gap: 0;
        flex-wrap: wrap;
    }

    .footer-bottom-links a {
        color: #3a4f65;
        text-decoration: none;
        font-size: 11.5px;
        padding: 2px 12px;
        border-right: 1px solid #1e2f3f;
        transition: color var(--f-transition);
        white-space: nowrap;
    }

    .footer-bottom-links a:last-child {
        border-right: none;
        padding-right: 0;
    }

    .footer-bottom-links a:first-child {
        padding-left: 0;
    }

    .footer-bottom-links a:hover {
        color: var(--f-gold);
    }

    @media (max-width: 1100px) {
        .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }

        .footer-grid>* {
            padding: 0 24px 36px 0;
        }

        .footer-grid> :nth-child(2n) {
            border-right: none;
            margin-right: 0;
            padding-right: 0;
        }

        .footer-grid> :nth-child(2n+1) {
            border-right: 1px solid var(--f-border);
            margin-right: 24px;
        }

        .footer-grid> :nth-child(3),
        .footer-grid> :nth-child(4) {
            padding-top: 28px;
            border-top: 1px solid var(--f-border);
        }

        .pf-inner {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto;
        }

        .pf-badge {
            grid-column: 1;
            grid-row: 1;
            align-self: flex-start;
        }

        .pf-headline {
            grid-column: 1;
            grid-row: 2;
        }

        .pf-form {
            grid-column: 1;
            grid-row: 3;
            justify-self: flex-start;
        }

        .pf-consent {
            grid-column: 1;
            grid-row: 4;
        }
    }

    @media (max-width: 640px) {
        .pf-strip {
            padding: 32px 0;
        }

        .pf-email {
            width: 100%;
        }

        .pf-form {
            width: 100%;
            flex-direction: column;
        }

        .pf-submit {
            width: 100%;
            justify-content: center;
        }

        .footer-grid {
            grid-template-columns: 1fr;
        }

        .footer-grid>* {
            padding: 0 0 0 0 !important;
            border-right: none !important;
            margin-right: 0 !important;
            border-top: 1px solid var(--f-border);
        }

        .footer-about {
            border-top: none !important;
            padding-bottom: 28px !important;
        }

        .footer-col {
            padding-bottom: 0 !important;
        }

        .footer-col-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-col-title {
            padding-bottom: 0;
            margin-bottom: 0;
        }

        .footer-col-title::after {
            display: none;
        }

        .footer-col-header {
            padding: 16px 0;
            margin-bottom: 0;
            cursor: pointer;
        }

        .footer-links-wrap {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
            overflow: hidden;
        }

        .footer-links-wrap>* {
            min-height: 0;
        }

        .footer-col.is-open .footer-links-wrap {
            grid-template-rows: 1fr;
        }

        .footer-col.is-open .footer-links-wrap>* {
            padding-bottom: 18px;
        }

        .footer-col.is-open .footer-col-toggle {
            transform: rotate(180deg);
            color: var(--f-gold);
        }

        .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .footer-bottom-links {
            gap: 0;
            column-gap: 0;
        }

        .footer-bottom-links a {
            padding: 3px 10px 3px 0;
            border-right: none;
        }

        .footer-col--contact .footer-links-wrap>* {
            padding-bottom: 18px;
        }
    }

    @media (max-width: 400px) {
        .footer-app-badges {
            flex-direction: column;
        }

        .footer-store-btn {
            width: 100%;
        }
    }

/* ════════════════════════════════════════════════════
   STATIC PAGE SHARED STYLES (from partials/_static-page-styles.blade.php)
════════════════════════════════════════════════════ */
/* ── Static Page Shared Styles ────────────────────────────── */
.sp-hero {
    background: linear-gradient(135deg, #0d1b3e 0%, #1a2e5a 50%, #0d1b3e 100%);
    padding: 72px 0 56px;
    position: relative;
    overflow: hidden;
}
.sp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 50%, rgba(184,134,11,.09) 0%, transparent 60%);
    pointer-events: none;
}
.sp-hero-inner { position: relative; max-width: 720px; }
.sp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255,255,255,.4);
    margin-bottom: 18px;
    letter-spacing: .04em;
}
.sp-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.sp-breadcrumb a:hover { color: #b8860b; }
.sp-breadcrumb .sep { color: rgba(255,255,255,.22); }
.sp-hero-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(184,134,11,.12);
    border: 1px solid rgba(184,134,11,.28);
    border-radius: 20px;
    color: #b8860b;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.sp-hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 5vw, 42px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -.02em;
}
.sp-hero-desc {
    font-size: 16px;
    color: rgba(255,255,255,.6);
    line-height: 1.75;
    max-width: 560px;
    margin: 0;
}

/* ── Content Body ─────────────────────────────────────────── */
.sp-body { background: #f8f6f1; padding: 56px 0 80px; }

/* ── Card / Section ───────────────────────────────────────── */
.sp-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px 44px;
    border: 1px solid #e8e0d4;
    box-shadow: 0 2px 8px rgba(13,27,62,.04);
    height: 100%;
}
.sp-card-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(155,27,48,.08);
    border-radius: 4px;
    color: #9b1b30;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.sp-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 700;
    color: #0d1b3e;
    margin: 0 0 14px;
    line-height: 1.3;
}
.sp-card-title.lg { font-size: clamp(22px, 4vw, 32px); margin-bottom: 18px; }
.sp-card-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 15.5px;
    line-height: 1.85;
    color: #3d3d3d;
    margin: 0 0 14px;
}
.sp-card-text:last-child { margin-bottom: 0; }

/* ── Lists ────────────────────────────────────────────────── */
.sp-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sp-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    line-height: 1.7;
    color: #3d3d3d;
}
.sp-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    min-width: 7px;
    background: #9b1b30;
    border-radius: 50%;
    margin-top: 7px;
}
.sp-list--check li::before {
    content: '';
    width: 18px;
    height: 18px;
    min-width: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239b1b30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    background-color: rgba(155,27,48,.08);
    border-radius: 50%;
    margin-top: 2px;
}

/* ── Divider ──────────────────────────────────────────────── */
.sp-divider {
    height: 1px;
    background: #e8e0d4;
    margin: 28px 0;
}

/* ── Forms ────────────────────────────────────────────────── */
.sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-form-group { margin-bottom: 18px; }
.sp-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    letter-spacing: .02em;
}
.sp-label .req { color: #9b1b30; }
.sp-input, .sp-textarea, .sp-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d8d0c4;
    border-radius: 8px;
    font-size: 14.5px;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: 'DM Sans', sans-serif;
    appearance: none;
}
.sp-input:focus, .sp-textarea:focus, .sp-select:focus {
    border-color: #0d1b3e;
    box-shadow: 0 0 0 3px rgba(13,27,62,.08);
}
.sp-input.error, .sp-textarea.error { border-color: #9b1b30; }
.sp-textarea { resize: vertical; min-height: 130px; }
.sp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.sp-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13.5px;
    color: #444;
    line-height: 1.6;
}
.sp-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 1px;
    accent-color: #0d1b3e;
    cursor: pointer;
}
.sp-checkbox a { color: #9b1b30; }
.sp-error-msg { font-size: 12.5px; color: #9b1b30; margin-top: 4px; }

/* ── Alerts ───────────────────────────────────────────────── */
.sp-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14.5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sp-alert--success {
    background: rgba(22,163,74,.08);
    border: 1px solid rgba(22,163,74,.25);
    color: #166534;
}
.sp-alert--error {
    background: rgba(155,27,48,.07);
    border: 1px solid rgba(155,27,48,.2);
    color: #9b1b30;
}

/* ── Buttons ──────────────────────────────────────────────── */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border: none;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    text-decoration: none;
    letter-spacing: .01em;
    font-family: 'DM Sans', sans-serif;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn--navy { background: #0d1b3e; color: #fff; }
.sp-btn--navy:hover { background: #1a2e5a; box-shadow: 0 6px 20px rgba(13,27,62,.22); color: #fff; }
.sp-btn--crimson { background: #9b1b30; color: #fff; }
.sp-btn--crimson:hover { background: #b8233a; box-shadow: 0 6px 20px rgba(155,27,48,.25); color: #fff; }
.sp-btn--gold { background: #b8860b; color: #fff; }
.sp-btn--gold:hover { background: #d4a017; box-shadow: 0 6px 20px rgba(184,134,11,.25); color: #fff; }
.sp-btn--outline {
    background: transparent;
    border: 1.5px solid #0d1b3e;
    color: #0d1b3e;
}
.sp-btn--outline:hover { background: #0d1b3e; color: #fff; }

/* ── Info Grid ────────────────────────────────────────────── */
.sp-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.sp-info-item {
    background: #f8f6f1;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e8e0d4;
    text-align: center;
}
.sp-info-item-num {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 800;
    color: #0d1b3e;
    line-height: 1;
    margin-bottom: 4px;
}
.sp-info-item-label { font-size: 12.5px; color: #777; letter-spacing: .04em; }

/* ── Contact Info ─────────────────────────────────────────── */
.sp-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0ebe3;
}
.sp-contact-item:last-child { border-bottom: none; }
.sp-contact-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: rgba(13,27,62,.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d1b3e;
}
.sp-contact-label { font-size: 11.5px; font-weight: 600; color: #9b9b9b; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.sp-contact-value { font-size: 15px; color: #1a1a1a; }
.sp-contact-value a { color: #9b1b30; text-decoration: none; }
.sp-contact-value a:hover { text-decoration: underline; }

/* ── CTA Banner ───────────────────────────────────────────── */
.sp-cta {
    background: linear-gradient(135deg, #0d1b3e, #1a2e5a);
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 24px;
}
.sp-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(184,134,11,.1) 0%, transparent 65%);
    pointer-events: none;
}
.sp-cta-inner { position: relative; }
.sp-cta-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}
.sp-cta-desc { font-size: 15px; color: rgba(255,255,255,.62); margin: 0 0 22px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 992px) {
    .sp-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sp-hero { padding: 44px 0 36px; }
    .sp-card { padding: 28px 22px; }
    .sp-form-row { grid-template-columns: 1fr; gap: 0; }
    .sp-cta { padding: 32px 22px; }
    .sp-info-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 480px) {
    .sp-card { padding: 22px 16px; }
    .sp-hero-title { font-size: 24px; }
}

/* ════════════════════════════════════════════════════
   INTERVIEW DETAIL STYLES (from pages/interview-detail.blade.php)
════════════════════════════════════════════════════ */
/* ── Interview-specific styles ───────────────────────────────────── */
.interview-hero-photo {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
    display: block;
    margin-bottom: 0;
}
.interview-photo-wrap {
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
}
.interviewee-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--bg-card, #f8f8f8);
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.interviewee-card .ic-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--crimson, #9b1b30);
}
.interviewee-card .ic-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--navy, #1a1a2e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 3px solid var(--crimson, #9b1b30);
}
.interviewee-card .ic-body { flex: 1; min-width: 0; }
.interviewee-card .ic-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy, #1a1a2e);
    margin-bottom: 3px;
}
.interviewee-card .ic-role {
    font-size: 0.875rem;
    color: var(--text-muted, #777);
    line-height: 1.45;
}
.interviewee-card .ic-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--crimson, #9b1b30);
    font-weight: 700;
    margin-bottom: 4px;
}

/* Q&A styling */
.qa-body p { margin-bottom: 20px; line-height: 1.85; }
.qa-body .qa-q {
    font-weight: 700;
    color: var(--crimson, #9b1b30);
    font-size: 1.05rem;
    margin-bottom: 6px;
    display: block;
}
.qa-body .qa-a {
    font-size: 1.05rem;
    color: var(--text-pri, #1a1a2e);
    padding-left: 16px;
    border-left: 3px solid var(--border, #e5e5e5);
    margin-bottom: 22px;
    display: block;
    line-height: 1.85;
}

/* Interview conductor strip */
.interview-conductor-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted, #777);
    padding: 14px 0;
    border-top: 1px solid var(--border, #e5e5e5);
    border-bottom: 1px solid var(--border, #e5e5e5);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.interview-conductor-strip a {
    color: var(--navy, #1a1a2e);
    font-weight: 600;
    text-decoration: none;
}
.interview-conductor-strip a:hover { color: var(--crimson, #9b1b30); }

/* ════════════════════════════════════════════════════
   JUDGMENT HERO ALIGNMENT
════════════════════════════════════════════════════ */
.jd-hero-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
.jd-hero-sidebar-spacer { display: block; }
@media (max-width: 991px) {
    .jd-hero-grid { grid-template-columns: 1fr 260px; gap: 28px; }
}
@media (max-width: 767px) {
    .jd-hero-grid { grid-template-columns: 1fr; }
    .jd-hero-sidebar-spacer { display: none; }
}

/* ════════════════════════════════════════════════════
   JUDGMENT DETAIL STYLES (from pages/judgment-detail.blade.php)
════════════════════════════════════════════════════ */
/* ── Judgment detail styles ──────────────────────────────── */
.judgment-meta-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e5e5);
    border-left: 4px solid var(--navy, #0d1b3e);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px 24px;
}

.jmc-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted, #777);
    font-weight: 700;
    margin-bottom: 4px;
}

.jmc-value {
    font-size: .9rem;
    font-weight: 600;
    color: var(--navy, #0d1b3e);
    line-height: 1.4;
}

.jmc-value.court-val {
    color: var(--crimson, #9b1b30);
    font-size: .95rem;
}

/* PDF download button */
.judgment-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--crimson, #9b1b30);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-bottom: 28px;
}

.judgment-pdf-btn:hover {
    background: #7e1526;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Headnotes / key holdings box */
.judgment-holdings {
    background: linear-gradient(135deg, #fdfaf4 0%, #fffef8 100%);
    border: 1px solid #e8dfc0;
    border-left: 4px solid #c0a030;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.judgment-holdings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    color: #806020;
    margin-bottom: 12px;
}

.judgment-holdings p,
.judgment-holdings div {
    font-size: .925rem;
    line-height: 1.75;
    color: var(--text-pri, #1a1a2e);
    margin-bottom: 0;
}

/* Key takeaways box */
.judgment-takeaways {
    background: #f0f4ff;
    border: 1px solid #c7d4f5;
    border-left: 4px solid #3b5bdb;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.judgment-takeaways-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    color: #2c3e7a;
    margin-bottom: 12px;
}

.judgment-takeaways ol {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.judgment-takeaways ol li {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--text-pri, #1a1a2e);
}

/* Structured section blocks */
.jd-section {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border, #e5e5e5);
}

.jd-section:last-of-type {
    border-bottom: none;
}

.jd-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif, 'Playfair Display', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy, #0d1b3e);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border, #e5e5e5);
}

.jd-section-title .section-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: rgba(13, 27, 62, .07);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy, #0d1b3e);
    font-size: .85rem;
}

.jd-section-content {
    font-family: var(--body-serif, 'Source Serif 4', Georgia, serif);
    font-size: .95rem;
    line-height: 1.85;
    color: var(--text-sec, #333);
}

.jd-section-content img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.jd-section-content p {
    margin-bottom: .75rem;
}

.jd-section-content p:last-child {
    margin-bottom: 0;
}

.jd-section-content h2,
.jd-section-content h3,
.jd-section-content h4 {
    font-family: var(--serif, Georgia, serif);
    font-weight: 700;
    margin: 1.2em 0 .5em;
    color: var(--navy, #0d1b3e);
}
.jd-section-content h2 { font-size: 1.15rem; }
.jd-section-content h3 { font-size: 1rem; }
.jd-section-content h4 { font-size: .9rem; }

.jd-section-content ul,
.jd-section-content ol {
    margin: .75em 0 .75em 1.5em;
}
.jd-section-content li { margin-bottom: .4em; }

.jd-section-content strong { font-weight: 700; color: var(--text-pri, #1a1a2e); }
.jd-section-content em { font-style: italic; }

/* cb-heading: block builder headings */
.cb-heading { font-family: var(--serif, Georgia, serif); font-weight: 700; margin: 1.25em 0 .5em; color: var(--navy, #0d1b3e); }
.cb-h2 { font-size: 1.35rem; }
.cb-h3 { font-size: 1.1rem; }
.cb-h4 { font-size: .95rem; }

/* cb-quote: block builder blockquote */
.cb-quote {
    border-left: 4px solid var(--crimson, #9b1b30);
    padding: .75rem 1.25rem;
    margin: 1.25em 0;
    color: #555;
    font-style: italic;
    background: #fdf6f6;
    border-radius: 0 6px 6px 0;
}

/* cb-text: block builder paragraph block */
.cb-text {
    margin: .75em 0;
    line-height: 1.8;
}

/* cb-image: block builder image block */
.cb-image { margin: 1.5em 0; text-align: center; }
.cb-image img { max-width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.cb-image figcaption { font-size: .82rem; color: #9aa3af; margin-top: .5rem; }

/* cb-citations: block builder citation list */
.cb-citations { margin: 1em 0 1em 1.5em; }
.cb-citations li { margin-bottom: .4em; font-size: .88rem; color: #555; }

/* cb-pdf-btn: block builder PDF download button */
.cb-pdf-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--crimson, #9b1b30); color: #fff;
    padding: .6rem 1.25rem; border-radius: 8px;
    font-size: .875rem; font-weight: 600;
    text-decoration: none;
    margin: 1em 0;
    transition: opacity .15s;
}
.cb-pdf-btn:hover { opacity: .88; color: #fff; }

/* Responsive blocks wrap */
.cb-blocks-wrap { line-height: 1.8; }

/* Issues list */
.issues-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.issues-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--text-sec, #333);
}

.issues-list li::before {
    content: attr(data-num);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: var(--navy, #0d1b3e);
    color: #fff;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Citations list */
.citations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: citation-counter;
}

.citations-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-sec, #333);
    padding: 8px 12px;
    background: var(--bg-shade, #f8f6f1);
    border-radius: 6px;
    border-left: 3px solid var(--gold, #b8860b);
}

.citations-list li span.cite-num {
    min-width: 20px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--gold, #b8860b);
    flex-shrink: 0;
}

/* Final decision highlight */
.final-decision-block {
    background: linear-gradient(135deg, #fff8f8 0%, #fff 100%);
    border: 1.5px solid #f5c6c6;
    border-left: 5px solid var(--crimson, #9b1b30);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

.final-decision-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--crimson, #9b1b30);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.final-decision-text {
    font-family: var(--body-serif, 'Source Serif 4', Georgia, serif);
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text-pri, #1a1a2e);
}

/* Court badge in hero */
.judgment-court-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--navy, #0d1b3e);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* Cover image in hero */
.judgment-hero-cover {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .judgment-meta-card {
        grid-template-columns: 1fr 1fr;
    }

    .jd-section-title {
        font-size: 1rem;
    }
}

/* ════════════════════════════════════════════════════
   JUDGMENTS LISTING STYLES (from pages/judgments.blade.php)
════════════════════════════════════════════════════ */
/* ── Judgment Listing Hero ─────────────────────────── */
.listing-hero--dark {
    background: linear-gradient(135deg, var(--navy) 0%, #0a1632 100%);
    border-bottom: 3px solid var(--crimson);
    padding: 40px 0 30px;
    margin-bottom: 40px;
}

/* ── Judgment Filter Tabs ─────────────────────────── */
.jf-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 24px;
}
.jf-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
    border: 1.5px solid var(--border);
    color: var(--text-sec);
    background: var(--bg-card);
    transition: background .18s, color .18s, border-color .18s;
}
.jf-tab:hover {
    border-color: var(--crimson);
    color: var(--crimson);
    background: rgba(155,27,48,.05);
}
.jf-tab.active {
    background: var(--crimson);
    border-color: var(--crimson);
    color: #fff;
}

.judgment-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .judgment-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .judgment-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.judgment-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.26s cubic-bezier(0.4, 0, 0.2, 1),
        border-top-color 0.26s;
}

.judgment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 38px rgba(13, 27, 62, 0.13);
    border-top-color: var(--crimson);
}

.judgment-card-header {
    padding: 16px 16px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.court-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
}

.court-badge svg {
    flex-shrink: 0;
}

/* Supreme Court - crimson */
.court-badge.supreme {
    background: rgba(155, 27, 48, 0.1);
    color: var(--crimson);
    border: 1px solid rgba(155, 27, 48, 0.25);
}

/* High Court - navy */
.court-badge.high {
    background: rgba(13, 27, 62, 0.08);
    color: var(--navy);
    border: 1px solid rgba(13, 27, 62, 0.2);
}

/* Tribunal / other */
.court-badge.tribunal {
    background: rgba(11, 87, 54, 0.08);
    color: #0b5736;
    border: 1px solid rgba(11, 87, 54, 0.22);
}

.court-badge.default {
    background: rgba(90, 90, 90, 0.08);
    color: #555;
    border: 1px solid rgba(90, 90, 90, 0.18);
}

.judgment-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.judgment-card-title {
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-pri);
    line-height: 1.36;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.judgment-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.judgment-card-title a:hover {
    color: var(--crimson);
}

.judgment-card-excerpt {
    font-size: 12px;
    color: var(--text-sec);
    line-height: 1.58;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.judgment-citation {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    background: var(--bg-shade);
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid var(--border);
    letter-spacing: 0.2px;
}

.judgment-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--bg-shade);
    padding: 10px 16px 12px;
    font-size: 10.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.decided-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--navy);
    font-size: 10.5px;
}

.decided-date svg {
    color: var(--crimson);
    flex-shrink: 0;
}

.bench-info {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* ════════════════════════════════════════════════════
   OPINION DETAIL STYLES (from pages/opinion-detail.blade.php)
════════════════════════════════════════════════════ */
/* ── Opinion-specific styles ─────────────────────────────────────── */

/* Prominent author byline block */
.opinion-byline-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--navy, #1a1a2e) 0%, #2a2a45 100%);
    border-radius: 10px;
    margin-bottom: 28px;
    color: #fff;
    flex-wrap: wrap;
}
.opinion-byline-hero .obh-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.opinion-byline-hero .obh-initials {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,0.25);
}
.opinion-byline-hero .obh-body { flex: 1; min-width: 0; }
.opinion-byline-hero .obh-tag {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--crimson, #9b1b30);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
    font-weight: 700;
}
.opinion-byline-hero .obh-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
}
.opinion-byline-hero .obh-name:hover { color: rgba(255,255,255,0.85); }
.opinion-byline-hero .obh-role {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.72);
    margin-bottom: 8px;
    line-height: 1.4;
}
.opinion-byline-hero .obh-meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.opinion-byline-hero .obh-meta span { display: flex; align-items: center; gap: 4px; }

/* Opinion disclaimer badge */
.opinion-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff8e6;
    border: 1px solid #f0c040;
    border-left: 4px solid #e0a000;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.8rem;
    color: #6b5a00;
    line-height: 1.55;
    margin-bottom: 28px;
}
.opinion-disclaimer svg { flex-shrink: 0; margin-top: 1px; color: #c07800; }

/* Pull quote styling */
.opinion-body blockquote,
.opinion-pull-quote {
    border-left: none !important;
    background: transparent;
    text-align: center;
    padding: 28px 32px !important;
    margin: 32px 0 !important;
    position: relative;
}
.opinion-body blockquote::before,
.opinion-pull-quote::before {
    content: '\201C';
    font-size: 6rem;
    color: var(--crimson, #9b1b30);
    opacity: 0.18;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.opinion-body blockquote p,
.opinion-pull-quote p {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.1rem, 2.8vw, 1.35rem) !important;
    font-style: italic;
    color: var(--navy, #1a1a2e);
    line-height: 1.6;
    font-weight: 500;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}
.opinion-body blockquote cite,
.opinion-pull-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
    font-style: normal;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════
   TOP STORIES PARTIAL STYLES (from partials/home/top-stories.blade.php)
════════════════════════════════════════════════════ */
/* ── Top Stories Section ───────────────────────────────────── */
.top-stories-section{margin-bottom:32px}

.ts-divider{
    height:2px;background:var(--bg-deep);border-radius:1px;
    margin-bottom:18px;position:relative;
}
.ts-divider::before{
    content:'';position:absolute;left:0;top:0;
    width:48px;height:2px;background:var(--crimson);border-radius:1px;
}

/* ── Layout: main card left, side stack right ──────────────── */
.ts-layout{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:16px;
    align-items:stretch;
}

/* ── Main Card ──────────────────────────────────────────────── */
.ts-main-card{
    display:flex;flex-direction:column;text-decoration:none;
    border-radius:var(--radius-md);overflow:hidden;
    background:var(--bg-card);border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    transition:box-shadow var(--tr),transform var(--tr);
}
.ts-main-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}

.ts-main-img{
    width:100%;height:280px;overflow:hidden;flex-shrink:0;
    background:linear-gradient(135deg,#0d1b3e 0%,#1a2e5a 100%);
}
.ts-main-img img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
.ts-main-card:hover .ts-main-img img{transform:scale(1.04)}

/* Text panel below image */
.ts-main-body{
    padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;
}
.ts-main-title{
    font-family:var(--serif);font-size:18px;font-weight:700;
    color:var(--text-pri);line-height:1.35;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .2s;
}
.ts-main-card:hover .ts-main-title{color:var(--crimson)}

/* ── Placeholder (no image) ─────────────────────────────────── */
.ts-img-placeholder{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.2);
}
.ts-thumb-placeholder{background:var(--bg-shade);color:var(--text-muted)}

/* ── Type Label ─────────────────────────────────────────────── */
.ts-type-label{
    display:inline-block;
    font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
    color:var(--crimson);
}

/* ── Time ───────────────────────────────────────────────────── */
.ts-time{
    display:flex;align-items:center;gap:4px;
    font-size:11px;color:var(--text-muted);
}
.ts-time-light{color:rgba(255,255,255,.65)}

/* ── Side List ──────────────────────────────────────────────── */
.ts-sidelist{display:flex;flex-direction:column;gap:10px}

/* ── Side Card ──────────────────────────────────────────────── */
.ts-side-card{
    display:flex;gap:12px;align-items:center;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:12px;
    text-decoration:none;
    transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr);
    box-shadow:var(--shadow-sm);flex:1;
}
.ts-side-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:#c4ccd8}

.ts-side-thumb{
    width:80px;height:64px;flex-shrink:0;
    border-radius:var(--radius-sm);overflow:hidden;
    background:linear-gradient(135deg,#0d1b3e,#1a2e5a);
}
.ts-side-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.ts-side-card:hover .ts-side-thumb img{transform:scale(1.07)}

.ts-side-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}

.ts-side-title{
    font-family:var(--serif);font-size:14px;font-weight:600;
    line-height:1.35;color:var(--text-pri);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .2s;
}
.ts-side-card:hover .ts-side-title{color:var(--crimson)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){
    .ts-layout{grid-template-columns:1fr 300px}
    .ts-main-img{height:240px}
}
@media(max-width:840px){
    .ts-layout{grid-template-columns:1fr}
    .ts-main-img{height:220px}
    .ts-sidelist{flex-direction:row;flex-wrap:wrap}
    .ts-side-card{flex:1 1 calc(50% - 5px);min-width:0}
}
@media(max-width:560px){
    .ts-main-img{height:180px}
    .ts-main-title{font-size:16px}
    .ts-sidelist{flex-direction:column}
    .ts-side-card{flex:none}
}

/* ════════════════════════════════════════════════════
   HOME JUDGMENTS PARTIAL STYLES (from partials/home/judgments.blade.php)
════════════════════════════════════════════════════ */
/* ── Section Shell ─────────────────────────────────────────── */
.hcs-section{margin-bottom:28px}

.hcs-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;margin-bottom:14px;flex-wrap:wrap;
}
.hcs-title-group{min-width:0}
.hcs-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}

.hcs-divider{height:2px;background:var(--bg-deep);border-radius:1px;margin-bottom:22px;position:relative}
.hcs-divider::before{content:'';position:absolute;left:0;top:0;width:48px;height:2px;background:var(--crimson);border-radius:1px}

/* Filter dropdown */
.hcs-filter-wrap{
    display:flex;align-items:center;gap:7px;
    background:var(--bg-card);border:1.5px solid var(--border);
    border-radius:20px;padding:5px 14px 5px 10px;
    transition:border-color .22s;
}
.hcs-filter-wrap:focus-within{border-color:var(--navy)}
.hcs-filter-select{
    font-family:var(--sans);font-size:12px;font-weight:600;
    color:var(--text-sec);border:none;background:transparent;
    outline:none;cursor:pointer;appearance:none;
    padding-right:4px;
}

/* ── Card Grid ─────────────────────────────────────────────── */
.hcs-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* ── Card ──────────────────────────────────────────────────── */
.hcs-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    display:flex;flex-direction:column;
    cursor:pointer;
    transition:transform .26s cubic-bezier(.4,0,.2,1),
               box-shadow .26s cubic-bezier(.4,0,.2,1),
               border-color .26s;
    box-shadow:var(--shadow-sm);
}
.hcs-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-xl);
    border-color:#c4ccd8;
}
.hcs-card[style*="display:none"]{display:none!important}

/* ── Card Image / Visual ───────────────────────────────────── */
.hcs-card-img{
    display:block;
    text-decoration:none;
    height:170px;
    position:relative;overflow:hidden;flex-shrink:0;
    background:linear-gradient(135deg,#0d1b3e 0%,#1a2e5a 100%);
}
.hcs-img-supreme{background:linear-gradient(135deg,#0d1b3e 0%,#1a3060 100%)}
.hcs-img-high{background:linear-gradient(135deg,#1e0a10 0%,#9b1b30 100%)}

.hcs-card-img img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .45s cubic-bezier(.25,.46,.45,.94);
    opacity:.9;
}
.hcs-card:hover .hcs-card-img img{transform:scale(1.06)}

/* Placeholder icon when no image */
.hcs-img-placeholder{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.18);
}

/* Court badge (in card body, not on image) */
.hcs-court-pill{
    display:inline-block;
    font-size:9px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
    padding:3px 10px;border-radius:20px;white-space:nowrap;margin-bottom:7px;
}
.hcs-pill-supreme{background:rgba(13,27,62,.1);color:var(--navy);border:1px solid rgba(13,27,62,.2)}
.hcs-pill-high{background:rgba(155,27,48,.1);color:var(--crimson);border:1px solid rgba(155,27,48,.2)}

/* ── Card Body ─────────────────────────────────────────────── */
.hcs-card-body{padding:16px 16px 14px;flex:1;display:flex;flex-direction:column}

.hcs-card-court{
    font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
    color:var(--gold);margin-bottom:7px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.hcs-card-title{
    font-family:var(--serif);font-size:15.5px;font-weight:700;
    line-height:1.36;color:var(--text-pri);margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    flex:1;
}
.hcs-card-title a{color:inherit;text-decoration:none;transition:color .2s}
.hcs-card-title a:hover{color:var(--crimson)}

.hcs-card-excerpt{
    font-size:12.5px;color:var(--text-sec);line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:12px;
}

.hcs-card-meta{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;border-top:1px solid var(--bg-shade);padding-top:10px;
    margin-top:auto;
}

.hcs-meta-date{
    display:flex;align-items:center;gap:4px;
    font-size:11px;color:var(--text-muted);
}

.hcs-read-link{
    font-size:11px;font-weight:700;color:var(--crimson);
    display:flex;align-items:center;gap:4px;
    transition:gap .18s,color .18s;text-decoration:none;
    flex-shrink:0;
}
.hcs-read-link:hover{gap:7px;color:var(--crimson-lt)}
.hcs-read-link svg{transition:transform .18s}
.hcs-read-link:hover svg{transform:translateX(2px)}

/* ── No-results ────────────────────────────────────────────── */
.hcs-empty,.hcs-no-results{
    grid-column:1/-1;text-align:center;
    padding:32px 20px;color:var(--text-muted);
}
.hcs-empty svg{margin:0 auto 12px;opacity:.3}
.hcs-empty p,.hcs-no-results p{font-size:13.5px}
.hcs-reset-filter{
    background:none;border:none;color:var(--crimson);cursor:pointer;
    font-size:13.5px;font-weight:600;text-decoration:underline;
    font-family:var(--sans);padding:0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px){.hcs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:840px){
    .hcs-header{gap:12px}
    .hcs-controls{gap:8px}
}
@media(max-width:600px){
    .hcs-grid{grid-template-columns:1fr}
    .hcs-filter-wrap{padding:4px 10px 4px 8px}
    .hcs-filter-select{font-size:11px}
}

/* ════════════════════════════════════════════════════
   ARTICLE DETAIL STYLES (from pages/article-detail.blade.php)
════════════════════════════════════════════════════ */

            /* ── Hero Section ─────────────────────────────────────────── */
            .adh-section {
                background: linear-gradient(160deg, #fff 0%, var(--bg) 100%);
                padding: 36px 0 0;
                border-bottom: 1px solid var(--border);
                animation: fadeUpArticle 0.45s ease both;
            }

            .adh-inner {
                max-width: 760px;
                margin: 0 auto;
                padding: 0 24px 32px;
            }

            /* Breadcrumb */
            .adh-breadcrumb {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 11.5px;
                color: var(--text-muted);
                margin-bottom: 18px;
                flex-wrap: wrap;
            }

            .adh-breadcrumb a {
                color: var(--text-muted);
                text-decoration: none;
                transition: color 0.2s;
            }

            .adh-breadcrumb a:hover {
                color: var(--crimson);
            }

            .adh-breadcrumb svg {
                opacity: 0.4;
                flex-shrink: 0;
            }

            .adh-breadcrumb span {
                color: var(--navy);
                font-weight: 600;
            }

            /* Category pills */
            .adh-pills {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                flex-wrap: wrap;
            }

            .adh-cat-pill {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 1.8px;
                text-transform: uppercase;
                color: var(--crimson);
                background: rgba(155, 27, 48, 0.06);
                border: 1px solid rgba(155, 27, 48, 0.18);
                padding: 5px 12px;
                border-radius: 50px;
            }

            .adh-cat-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--crimson);
                flex-shrink: 0;
            }

            .adh-feat-pill {
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: 1.2px;
                text-transform: uppercase;
                color: var(--gold);
                background: rgba(184, 134, 11, 0.1);
                border: 1px solid rgba(184, 134, 11, 0.25);
                padding: 5px 12px;
                border-radius: 50px;
            }

            /* Headline */
            .adh-headline {
                font-family: var(--serif);
                font-size: clamp(28px, 4.5vw, 40px);
                font-weight: 800;
                color: var(--navy);
                line-height: 1.1;
                margin-bottom: 18px;
                letter-spacing: -0.3px;
            }

            /* Standfirst */
            .adh-standfirst {
                font-family: var(--body-serif);
                font-size: 18px;
                color: var(--text-sec);
                line-height: 1.7;
                margin-bottom: 26px;
                font-style: italic;
                font-weight: 300;
                opacity: 0.88;
            }

            /* Author card */
            .adh-author-card {
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 16px 18px;
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 6px;
                flex-wrap: wrap;
            }

            .adh-author-left {
                display: flex;
                align-items: center;
                gap: 12px;
                flex: 1;
                min-width: 0;
            }

            .adh-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                overflow: hidden;
                border: 2px solid var(--bg-shade);
                flex-shrink: 0;
                background: var(--navy);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 700;
                font-family: var(--sans);
                font-size: 16px;
            }

            .adh-avatar img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                display: block;
            }

            .adh-author-text {
                min-width: 0;
            }

            .adh-author-name {
                font-size: 13.5px;
                font-weight: 700;
                color: var(--navy);
            }

            .adh-author-role {
                font-size: 11.5px;
                color: var(--text-muted);
            }

            .adh-meta-right {
                display: flex;
                align-items: center;
                gap: 14px;
                flex-wrap: wrap;
            }

            .adh-meta-item {
                font-size: 11.5px;
                color: var(--text-muted);
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .adh-meta-item svg {
                opacity: 0.55;
                flex-shrink: 0;
            }

            .adh-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-left: auto;
            }

            .adh-action-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 11px;
                font-weight: 600;
                padding: 7px 13px;
                border: 1.5px solid var(--border);
                border-radius: 50px;
                cursor: pointer;
                transition: all 0.2s;
                background: transparent;
                color: var(--text-sec);
                text-decoration: none;
                font-family: var(--sans);
                white-space: nowrap;
            }

            .adh-action-btn:hover {
                background: var(--navy);
                color: #fff;
                border-color: var(--navy);
            }

            .adh-share-btn {
                background: var(--navy);
                color: #fff;
                border-color: var(--navy);
            }

            .adh-share-btn:hover {
                background: var(--crimson);
                border-color: var(--crimson);
            }

            /* ── Cover Image ──────────────────────────────────────────── */
            .adc-cover-wrap {
                margin-bottom: 0;
                line-height: 0;
            }

            .adc-cover-img {
                width: 100%;
                max-height: 340px;
                overflow: hidden;
            }

            .adc-cover-img img {
                width: 100%;
                max-height: 340px;
                object-fit: cover;
                object-position: center top;
                display: block;
            }

            /* ── Main Layout ──────────────────────────────────────────── */
            .adc-layout {
                display: grid;
                grid-template-columns: 52px 1fr 280px;
                gap: 0 40px;
                max-width: 1120px;
                margin: 0 auto;
                padding: 44px 0 64px;
                animation: fadeUpArticle 0.45s 0.1s ease both;
            }

            /* ── Left Share Sidebar (sticky, desktop) ─────────────────── */
            .adc-share-sidebar {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                position: sticky;
                top: 100px;
                height: fit-content;
                padding-top: 6px;
            }

            .adss-label {
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: var(--text-muted);
                margin-bottom: 2px;
            }

            .adss-btns {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .adss-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1.5px solid var(--border);
                background: var(--bg-card);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-sec);
                text-decoration: none;
                cursor: pointer;
                transition: all 0.2s;
                flex-shrink: 0;
            }

            .adss-btn:hover {
                transform: scale(1.1);
                box-shadow: var(--shadow-sm);
            }

            .adss-x:hover {
                background: #000;
                border-color: #000;
                color: #fff;
            }

            .adss-wa:hover {
                background: #25D366;
                border-color: #25D366;
                color: #fff;
            }

            .adss-li:hover {
                background: #0A66C2;
                border-color: #0A66C2;
                color: #fff;
            }

            .adss-fb:hover {
                background: #1877F2;
                border-color: #1877F2;
                color: #fff;
            }

            .adss-copy:hover {
                background: var(--navy);
                border-color: var(--navy);
                color: #fff;
            }

            .adss-copy.copied {
                background: #1b6b3a;
                border-color: #1b6b3a;
                color: #fff;
            }

            /* ── Body Column ──────────────────────────────────────────── */
            .adc-body-col {
                min-width: 0;
            }

            /* Mobile reading progress (hidden on desktop) */
            .adc-rp-mobile {
                display: none;
                margin-bottom: 24px;
            }

            .adc-rp-bar {
                height: 3px;
                background: var(--bg-shade);
                border-radius: 4px;
                overflow: hidden;
            }

            .adc-rp-fill {
                height: 100%;
                background: linear-gradient(90deg, var(--crimson), var(--gold));
                width: 0%;
                transition: width 0.25s;
            }

            /* Body text */
            .adc-body-text {
                font-family: var(--body-serif);
                font-size: 17px;
                line-height: 1.82;
                color: var(--text-sec);
            }

            .adc-body-text p {
                margin-bottom: 1.5em;
            }

            /* Drop-cap on first paragraph only; suppress inside tables/lists/headings */
            .adc-body-text > p:first-child::first-letter {
                font-family: var(--serif);
                font-size: 62px;
                font-weight: 700;
                color: var(--navy);
                float: left;
                line-height: 0.88;
                margin-right: 8px;
                margin-top: 7px;
                padding: 0 3px;
            }

            /* Never drop-cap inside blocks */
            .adc-body-text blockquote p:first-child::first-letter,
            .adc-body-text li p:first-child::first-letter,
            .adc-body-text td p:first-child::first-letter,
            .adc-body-text th p:first-child::first-letter,
            .adc-body-text pre p:first-child::first-letter { font-size: inherit; float: none; margin: 0; padding: 0; }

            .adc-body-text h2 {
                font-family: var(--serif);
                font-size: 25px;
                font-weight: 700;
                color: var(--navy);
                margin: 38px 0 14px;
                padding-bottom: 8px;
                border-bottom: 2px solid var(--border);
            }

            .adc-body-text h3 {
                font-family: var(--serif);
                font-size: 20px;
                font-weight: 700;
                color: var(--navy);
                margin: 30px 0 10px;
            }

            .adc-body-text blockquote {
                border-left: 4px solid var(--crimson);
                margin: 32px 0;
                padding: 18px 24px;
                background: var(--bg-shade);
                border-radius: 0 5px 5px 0;
            }

            .adc-body-text blockquote p {
                font-size: 18px;
                font-style: italic;
                color: var(--navy);
                margin-bottom: 6px;
                font-weight: 500;
            }

            .adc-body-text blockquote cite {
                font-size: 12px;
                color: var(--text-muted);
                font-style: normal;
                font-family: var(--sans);
            }

            /* Pull quote via <figure class="pull-quote"> */
            .adc-body-text figure.pull-quote {
                border-left: 5px solid var(--crimson);
                margin: 32px 0;
                padding: 16px 22px;
                background: rgba(155, 27, 48, 0.04);
                border-radius: 0 4px 4px 0;
            }

            .adc-body-text figure.pull-quote figcaption {
                font-size: 11.5px;
                color: var(--text-muted);
                font-style: normal;
                font-family: var(--sans);
                margin-top: 8px;
                font-weight: 600;
            }

            /* Image captions */
            .adc-body-text img {
                max-width: 100%;
                height: auto;
                max-height: 420px;
                object-fit: contain;
                border-radius: 4px;
                display: block;
            }

            .adc-body-text iframe,
            .adc-body-text embed,
            .adc-body-text object {
                max-width: 100%;
                width: 100%;
                height: 400px;
                max-height: 500px;
                border-radius: 4px;
                border: 1px solid var(--border);
                display: block;
                pointer-events: none;
            }

            .adc-body-text figure {
                margin: 28px 0;
            }

            .adc-body-text figure img {
                border-radius: 4px;
            }

            .adc-body-text figcaption {
                font-size: 11.5px;
                color: var(--text-muted);
                text-align: center;
                font-style: italic;
                margin-top: 8px;
                font-family: var(--sans);
                line-height: 1.5;
            }

            .adc-body-text ul,
            .adc-body-text ol {
                margin: 0 0 1.5em 26px;
                list-style: revert;
            }

            .adc-body-text li {
                margin-bottom: 8px;
                line-height: 1.7;
            }

            .adc-body-text a {
                color: var(--crimson);
                text-decoration: underline;
                text-underline-offset: 2px;
                text-decoration-style: dotted;
            }

            .adc-body-text a:hover {
                text-decoration-style: solid;
            }

            .adc-body-text strong {
                color: var(--text-pri);
                font-weight: 600;
            }

            .adc-body-text em {
                font-style: italic;
            }

            /* Tables inside article body */
            .adc-body-text table {
                width: 100%;
                border-collapse: collapse;
                border-spacing: 0;
                margin: 1.5em 0;
                font-size: .9rem;
                line-height: 1.55;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 0 0 1px #dee2e6;
            }
            .adc-body-text table th {
                background: #f0f2f5;
                font-weight: 700;
                font-size: .78rem;
                text-transform: uppercase;
                letter-spacing: .05em;
                color: #374151;
                text-align: left;
                padding: .65rem 1rem;
                border-bottom: 2px solid #dee2e6;
                border-right: 1px solid #dee2e6;
            }
            .adc-body-text table th:last-child { border-right: none; }
            .adc-body-text table td {
                padding: .6rem 1rem;
                border-bottom: 1px solid #e9ecef;
                border-right: 1px solid #e9ecef;
                color: #374151;
                vertical-align: top;
            }
            .adc-body-text table td:last-child { border-right: none; }
            .adc-body-text table tr:last-child td { border-bottom: none; }
            .adc-body-text table tbody tr:nth-child(even) td { background: #fafbfc; }
            .adc-body-text table tbody tr:hover td { background: #f0f4ff; transition: background .12s; }
            .adc-body-text table p { margin: 0; }

            /* Drop-cap should not apply inside tables */
            .adc-body-text table td p:first-child::first-letter,
            .adc-body-text table th p:first-child::first-letter {
                font-size: inherit;
                float: none;
                line-height: inherit;
                margin: 0;
                font-weight: inherit;
            }

            /* Tags row */
            .adc-tags-row {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                margin: 36px 0;
                padding: 18px 0;
                border-top: 1px solid var(--border);
                border-bottom: 1px solid var(--border);
            }

            .adc-tags-label {
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 1px;
                text-transform: uppercase;
                color: var(--text-muted);
                flex-shrink: 0;
            }

            .adc-tag {
                font-size: 11.5px;
                padding: 5px 13px;
                border: 1.5px solid var(--border);
                border-radius: 50px;
                cursor: pointer;
                transition: all 0.2s;
                color: var(--text-sec);
                text-decoration: none;
                display: inline-block;
            }

            .adc-tag:hover {
                background: var(--navy);
                color: #fff;
                border-color: var(--navy);
            }

            /* ── Share Bar (below article) ────────────────────────────── */
            .adc-share-bar {
                background: var(--bg-shade);
                border-radius: 8px;
                padding: 20px 24px;
                margin: 28px 0;
                border: 1px solid var(--border);
            }

            .adc-share-bar-text {
                font-size: 14px;
                font-weight: 600;
                color: var(--navy);
                font-family: var(--serif);
                margin-bottom: 14px;
            }

            .adc-share-bar-btns {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            .adc-ssb-pill {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 11.5px;
                font-weight: 600;
                padding: 8px 16px;
                border-radius: 50px;
                cursor: pointer;
                transition: all 0.2s;
                text-decoration: none;
                font-family: var(--sans);
                border: 1.5px solid transparent;
            }

            .adc-ssb-x {
                background: transparent;
                color: #000;
                border-color: #000;
            }

            .adc-ssb-x:hover {
                background: #000;
                color: #fff;
            }

            .adc-ssb-wa {
                background: transparent;
                color: #128c4c;
                border-color: #25D366;
            }

            .adc-ssb-wa:hover {
                background: #25D366;
                color: #fff;
            }

            .adc-ssb-li {
                background: transparent;
                color: #0A66C2;
                border-color: #0A66C2;
            }

            .adc-ssb-li:hover {
                background: #0A66C2;
                color: #fff;
            }

            .adc-ssb-fb {
                background: transparent;
                color: #1877F2;
                border-color: #1877F2;
            }

            .adc-ssb-fb:hover {
                background: #1877F2;
                color: #fff;
            }

            .adc-ssb-copy {
                background: transparent;
                color: var(--text-sec);
                border-color: var(--border);
            }

            .adc-ssb-copy:hover,
            .adc-ssb-copy.copied {
                background: var(--navy);
                color: #fff;
                border-color: var(--navy);
            }

            /* ── Author Bio ───────────────────────────────────────────── */
            .adc-author-bio {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 8px;
                padding: 24px;
                margin: 28px 0;
                display: flex;
                gap: 20px;
                align-items: flex-start;
            }

            .adc-bio-avatar {
                width: 76px;
                height: 76px;
                border-radius: 50%;
                overflow: hidden;
                flex-shrink: 0;
                border: 3px solid var(--bg-shade);
                background: var(--navy);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                font-family: var(--serif);
            }

            .adc-bio-avatar img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            .adc-bio-body {
                flex: 1;
                min-width: 0;
            }

            .adc-bio-label {
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: var(--crimson);
                margin-bottom: 4px;
            }

            .adc-bio-name {
                font-family: var(--serif);
                font-size: 17px;
                font-weight: 700;
                color: var(--navy);
                margin-bottom: 2px;
            }

            .adc-bio-role {
                font-size: 11.5px;
                color: var(--text-muted);
                margin-bottom: 9px;
            }

            .adc-bio-text {
                font-size: 13px;
                color: var(--text-sec);
                line-height: 1.65;
                margin-bottom: 4px;
            }

            .adc-bio-links {
                display: flex;
                gap: 10px;
                margin-top: 10px;
                flex-wrap: wrap;
            }

            .adc-bio-link {
                font-size: 11.5px;
                font-weight: 600;
                color: var(--crimson);
                text-decoration: underline;
                text-underline-offset: 2px;
                cursor: pointer;
                transition: color 0.2s;
                text-decoration-style: dotted;
            }

            .adc-bio-link:hover {
                color: var(--navy);
                text-decoration-style: solid;
            }

            /* ── Comments ─────────────────────────────────────────────── */
            .adc-comments {
                margin-top: 40px;
                padding-top: 30px;
                border-top: 2px solid var(--border);
            }

            .adc-comments-title {
                font-family: var(--serif);
                font-size: 20px;
                font-weight: 700;
                color: var(--navy);
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .adc-comment-count {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-muted);
                font-family: var(--sans);
            }

            .adc-comment-form {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 6px;
                padding: 20px;
                margin-bottom: 24px;
            }

            .adc-cf-title {
                font-size: 12.5px;
                font-weight: 700;
                color: var(--navy);
                margin-bottom: 12px;
            }

            .adc-cf-input {
                width: 100%;
                padding: 9px 12px;
                border: 1.5px solid var(--border);
                border-radius: 4px;
                font-size: 13px;
                font-family: var(--sans);
                outline: none;
                transition: border-color 0.2s;
                background: var(--bg);
                color: var(--text-pri);
                margin-bottom: 10px;
                display: block;
            }

            .adc-cf-input:focus {
                border-color: var(--navy);
                background: #fff;
            }

            .adc-cf-textarea {
                width: 100%;
                padding: 10px 12px;
                border: 1.5px solid var(--border);
                border-radius: 4px;
                font-size: 13.5px;
                font-family: var(--body-serif);
                outline: none;
                transition: border-color 0.2s;
                background: var(--bg);
                color: var(--text-pri);
                resize: vertical;
                min-height: 96px;
                margin-bottom: 10px;
                line-height: 1.6;
                display: block;
            }

            .adc-cf-textarea:focus {
                border-color: var(--navy);
                background: #fff;
            }

            .adc-cf-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-bottom: 10px;
            }

            .adc-cf-submit {
                background: var(--crimson);
                color: #fff;
                border: none;
                padding: 10px 24px;
                border-radius: 4px;
                font-size: 11.5px;
                font-weight: 700;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                cursor: pointer;
                transition: background 0.2s;
                font-family: var(--sans);
            }

            .adc-cf-submit:hover {
                background: var(--crimson-lt);
            }

            /* ── Right Sidebar ────────────────────────────────────────── */
            .adc-sidebar {
                position: sticky;
                top: 96px;
                height: fit-content;
                display: flex;
                flex-direction: column;
                gap: 18px;
            }

            /* Reading progress widget */
            .adc-rp-widget {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 6px;
                padding: 14px 16px;
            }

            .adc-rp-label {
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: 1px;
                text-transform: uppercase;
                color: var(--text-muted);
                margin-bottom: 9px;
            }

            .adc-rp-track {
                height: 5px;
                background: var(--bg-shade);
                border-radius: 4px;
                overflow: hidden;
            }

            .adc-rp-fill {
                height: 100%;
                background: linear-gradient(90deg, var(--crimson), var(--gold));
                width: 0%;
                transition: width 0.25s;
            }

            .adc-rp-pct {
                font-size: 11px;
                color: var(--text-muted);
                margin-top: 6px;
                text-align: right;
            }

            /* Sidebar widget */
            .adc-widget {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 6px;
                overflow: hidden;
            }

            .adc-widget-head {
                font-family: var(--serif);
                font-size: 12.5px;
                font-weight: 700;
                color: #fff;
                background: var(--navy);
                padding: 10px 14px;
                display: flex;
                align-items: center;
                gap: 7px;
            }

            .adc-widget-body {
                padding: 12px 14px;
            }

            /* Sidebar author widget */
            .adc-saw-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 16px 14px;
            }

            .adc-saw-avatar {
                width: 68px;
                height: 68px;
                border-radius: 50%;
                overflow: hidden;
                border: 3px solid var(--bg-shade);
                margin-bottom: 10px;
                background: var(--navy);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                font-family: var(--serif);
            }

            .adc-saw-avatar img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            .adc-saw-name {
                font-family: var(--serif);
                font-size: 14px;
                font-weight: 700;
                color: var(--navy);
                margin-bottom: 3px;
            }

            .adc-saw-role {
                font-size: 11px;
                color: var(--text-muted);
                margin-bottom: 6px;
            }

            .adc-saw-count {
                font-size: 11px;
                color: var(--crimson);
                font-weight: 600;
                margin-bottom: 12px;
            }

            .adc-saw-btn {
                width: 100%;
                background: var(--navy);
                color: #fff;
                border: none;
                padding: 8px;
                border-radius: 4px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                transition: background 0.2s;
                font-family: var(--sans);
                text-decoration: none;
                display: block;
                text-align: center;
            }

            .adc-saw-btn:hover {
                background: var(--crimson);
                color: #fff;
            }

            /* Sidebar related items */
            .adc-related-item {
                display: flex;
                gap: 10px;
                padding: 10px 0;
                border-bottom: 1px solid var(--bg-shade);
                cursor: pointer;
                transition: all 0.2s;
                text-decoration: none;
                color: inherit;
            }

            .adc-related-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            .adc-related-item:hover .adc-rel-headline {
                color: var(--crimson);
            }

            .adc-rel-thumb {
                width: 58px;
                height: 44px;
                flex-shrink: 0;
                border-radius: 3px;
                overflow: hidden;
                background: var(--bg-shade);
            }

            .adc-rel-thumb img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            .adc-rel-cat {
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 1px;
                text-transform: uppercase;
                color: var(--crimson);
                margin-bottom: 2px;
            }

            .adc-rel-headline {
                font-size: 11.5px;
                font-weight: 600;
                line-height: 1.3;
                color: var(--text-pri);
                transition: color 0.2s;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .adc-rel-date {
                font-size: 10px;
                color: var(--text-muted);
                margin-top: 3px;
            }

            /* ── Related Grid (bottom) ────────────────────────────────── */
            .adc-more-row {
                background: var(--bg-shade);
                padding: 48px 0;
                border-top: 1px solid var(--border);
            }

            .adc-more-title {
                font-family: var(--serif);
                font-size: 20px;
                font-weight: 700;
                color: var(--navy);
                padding-bottom: 12px;
                border-bottom: 3px solid var(--navy);
                display: inline-block;
                margin-bottom: 28px;
            }

            .adc-more-title span {
                color: var(--crimson);
            }

            .adc-more-grid {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
            }

            .adc-more-card {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 6px;
                overflow: hidden;
                cursor: pointer;
                transition: all 0.25s;
                text-decoration: none;
                display: block;
                color: inherit;
                flex: 1 1 220px;
                max-width: 280px;
            }

            .adc-more-card:hover {
                box-shadow: var(--shadow-md);
                transform: translateY(-3px);
            }

            .adc-mc-img {
                height: 150px;
                overflow: hidden;
            }

            .adc-mc-img img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: transform 0.4s;
            }

            .adc-more-card:hover .adc-mc-img img {
                transform: scale(1.06);
            }

            .adc-mc-body {
                padding: 14px;
            }

            .adc-mc-cat {
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: var(--crimson);
                margin-bottom: 6px;
            }

            .adc-mc-headline {
                font-family: var(--serif);
                font-size: 13.5px;
                font-weight: 600;
                line-height: 1.3;
                color: var(--text-pri);
                margin-bottom: 8px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .adc-mc-author {
                font-size: 11px;
                font-weight: 600;
                color: var(--navy);
                margin-bottom: 3px;
            }

            .adc-mc-date {
                font-size: 10px;
                color: var(--text-muted);
            }

            /* ── Responsive ───────────────────────────────────────────── */
            @media (max-width: 1100px) {
                .adc-layout {
                    grid-template-columns: 1fr 260px;
                    gap: 0 32px;
                }

                .adc-share-sidebar {
                    display: none;
                }

                .adc-rp-mobile {
                    display: block;
                }
            }

            @media (max-width: 960px) {
                .adc-layout {
                    grid-template-columns: 1fr;
                    padding: 32px 24px 56px;
                }

                .adc-sidebar {
                    position: static;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 16px;
                }

                .adc-more-grid {
                    gap: 14px;
                }

                .adc-more-card {
                    max-width: 100%;
                }
            }

            @media (max-width: 720px) {
                .adh-headline {
                    font-size: clamp(24px, 7vw, 30px);
                }

                .adh-standfirst {
                    font-size: 15.5px;
                }

                .adh-author-card {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 12px;
                }

                .adh-actions {
                    display: none;
                }

                .adc-cover-img,
                .adc-cover-img img {
                    max-height: 220px;
                }

                .adc-sidebar {
                    grid-template-columns: 1fr;
                }

                .adc-body-text {
                    font-size: 16px;
                }
            }

            @media (max-width: 540px) {
                .adc-more-card {
                    flex: 1 1 100%;
                    max-width: 100%;
                }

                .adc-cf-row {
                    grid-template-columns: 1fr;
                }

                .adc-author-bio {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .adc-body-text {
                    font-size: 15.5px;
                }

                .adc-body-text > p:first-child::first-letter {
                    font-size: 46px;
                }

                .adc-share-bar {
                    padding: 16px 18px;
                }

                .adc-share-bar-btns {
                    gap: 6px;
                }

                .adc-ssb-pill {
                    font-size: 10.5px;
                    padding: 7px 12px;
                }

                .adh-inner {
                    padding: 0 16px 24px;
                }
            }

/* ════════════════════════════════════════════════════
   LATEST NEWS LISTING PAGE
════════════════════════════════════════════════════ */

/* ── Listing Page Hero ─────────────────────────────── */
.listing-hero {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 36px 0 28px;
    margin-bottom: 36px;
}
.listing-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.listing-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.listing-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.listing-breadcrumb a:hover { color: var(--crimson); }
.listing-breadcrumb .bc-chevron {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    flex-shrink: 0;
}
.listing-breadcrumb .bc-current { color: var(--navy); font-weight: 600; }
.listing-page-title {
    font-family: var(--serif);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.15;
    border-left: 5px solid var(--crimson);
    padding-left: 16px;
    margin: 0;
}
.listing-page-title span { color: var(--crimson); }
.listing-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    padding-left: 21px;
    margin: 0;
    line-height: 1.6;
}

/* ── Premium Article Card ──────────────────────────── */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 40px;
}
@media (max-width: 1024px) {
    .article-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
    .article-grid { grid-template-columns: 1fr; gap: 18px; }
}
.article-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.26s cubic-bezier(0.4,0,0.2,1),
                border-color 0.26s;
}
.article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 42px rgba(13,27,62,0.14);
    border-color: #c8d0da;
}
.article-card-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: var(--bg-shade);
    flex-shrink: 0;
}
.article-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.article-card:hover .article-card-thumb img {
    transform: scale(1.07);
}
.card-cat-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.card-cat-pill {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(13,27,62,0.82);
    color: var(--gold-lt);
    border: 1px solid rgba(200,150,42,0.3);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.card-cat-pill.breaking {
    background: rgba(155,27,48,0.88);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.article-card-body {
    padding: 18px 16px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.article-card-headline {
    font-family: var(--serif);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--text-pri);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-headline a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.article-card-headline a:hover { color: var(--crimson); }
.article-card-excerpt {
    font-size: 12.5px;
    color: var(--text-sec);
    line-height: 1.58;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
    flex: 1;
}
.article-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--bg-shade);
    padding-top: 10px;
    margin-top: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.meta-left {
    display: flex;
    align-items: center;
    gap: 5px;
}
.meta-left svg { color: var(--crimson); flex-shrink: 0; }
.meta-author {
    font-weight: 700;
    color: var(--navy);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.meta-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}
.meta-reading {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 10.5px;
    white-space: nowrap;
}
.meta-reading svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   INTERVIEWS LISTING PAGE
════════════════════════════════════════════════════ */

/* ── Interview Card ────────────────────────────────────────── */
/* (shared .listing-hero, .article-grid, .article-card styles already defined above) */
/* interview-specific overrides: none — all classes shared */

/* ════════════════════════════════════════════════════
   OPINIONS LISTING PAGE
════════════════════════════════════════════════════ */

/* opinion card-cat-pill variant */
.card-cat-pill.opinion-variant {
    background: rgba(26,26,46,0.88); color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ════════════════════════════════════════════════════
   ARTICLES LISTING PAGE
════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ARTICLES LISTING — REDESIGNED UI
   ══════════════════════════════════════════════════════════════ */

/* ── Page Hero ────────────────────────────────────────────── */
.aph-wrap {
  background: linear-gradient(160deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 36px 0 0;
}
.aph-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 28px;
  flex-wrap: wrap;
}
.aph-left  { flex: 1; min-width: 260px; }
.aph-right { display: flex; align-items: flex-end; padding-bottom: 6px; }

/* Breadcrumb */
.aph-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.aph-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.aph-breadcrumb a:hover { color: var(--crimson); }
.aph-breadcrumb svg { opacity: 0.45; flex-shrink: 0; }
.aph-breadcrumb span { color: var(--navy); font-weight: 600; }

/* Title */
.aph-heading {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.12;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}
.aph-heading em { color: var(--crimson); font-style: italic; }
.aph-heading-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 2px;
  margin-top: 10px;
}
.aph-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 500px;
  margin-top: 10px;
}

/* Search pill */
.aph-searchbox {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(13,27,62,0.07);
  min-width: 320px;
  padding: 0 6px 0 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.aph-searchbox:focus-within {
  border-color: var(--navy);
  box-shadow: 0 2px 16px rgba(13,27,62,0.12);
}
.aph-search-icon { color: var(--text-muted); flex-shrink: 0; }
.aph-searchbox input {
  flex: 1;
  padding: 11px 10px;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: var(--sans);
  background: transparent;
  color: var(--text-pri);
  min-width: 0;
}
.aph-searchbox button {
  background: var(--crimson);
  border: none;
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--sans);
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.aph-searchbox button:hover { background: var(--crimson-lt); }

/* Category filter pills */
.aph-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 16px 0 18px;
  border-top: 1px solid var(--border);
  flex-wrap: nowrap;
}
.aph-filter-bar::-webkit-scrollbar { display: none; }
.aph-pill {
  flex-shrink: 0;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-sec);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.aph-pill:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(13,27,62,0.04);
}
.aph-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.aph-pill.active:hover {
  background: var(--crimson);
  border-color: var(--crimson);
}

/* ── Main Layout ──────────────────────────────────────────── */
.aml-wrap { padding: 36px 0 64px; }

/* Search result note */
.search-result-note {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-shade);
  padding: 10px 16px;
  border-radius: 6px;
  border-left: 3px solid var(--crimson);
  margin-bottom: 24px;
}
.search-result-note strong { color: var(--navy); }
.srn-clear { color: var(--crimson); margin-left: 8px; text-decoration: underline; }

/* Section headers */
.aml-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.aml-section-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.aml-accent { color: var(--crimson); }
.aml-section-rule { flex: 1; height: 1px; background: transparent; margin: 0 12px; }
.aml-count {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-shade);
  padding: 3px 10px;
  border-radius: 50px;
  flex-shrink: 0;
}

/* ── Featured Card — Split Layout ────────────────────────── */
.feat-card {
  display: grid;
  grid-template-columns: 55% 45%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s, transform 0.25s;
  margin-bottom: 8px;
}
.feat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.feat-img-col {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.feat-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.feat-card:hover .feat-img-col img { transform: scale(1.04); }
.feat-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(13,27,62,0.04));
  pointer-events: none;
}

.feat-body-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px;
  background: var(--bg-card);
}
.feat-category-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 12px;
}
.feat-category-tag::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--crimson);
  vertical-align: middle;
  margin-right: 8px;
}
.feat-headline {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.18;
  margin-bottom: 14px;
}
.feat-excerpt {
  font-family: var(--body-serif);
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.7;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.feat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg-shade);
  flex-shrink: 0;
  background: var(--navy);
}
.feat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-avatar-init {
  width: 100%;
  height: 100%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--sans);
}
.feat-author-info { flex: 1; min-width: 0; }
.feat-author-name { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.feat-author-role { font-size: 11px; color: var(--text-muted); }
.feat-meta { margin-left: auto; }
.feat-read-time {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-shade);
  padding: 3px 10px;
  border-radius: 50px;
}
.feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--crimson);
  padding: 10px 22px;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s;
  width: fit-content;
}
.feat-card:hover .feat-cta { background: var(--crimson-lt); transform: translateX(3px); }

/* ── Article Grid Cards ───────────────────────────────────── */
.art-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.art-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}
.art-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.art-card-img-link {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #f8f8f8;
}

.art-card-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.45s ease;
    display: block;
}

.art-card:hover .art-card-img-link img {
    transform: scale(1.04);
}
.art-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 50px;
  background: var(--gold);
  color: #fff;
}

.art-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.art-card-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 7px;
}
.art-card-headline {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-pri);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card-headline a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.art-card-headline a:hover { color: var(--crimson); }
.art-card-excerpt {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.art-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--bg-shade);
}
.art-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--bg-shade);
  background: var(--navy);
}
.art-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-card-avatar-init {
  width: 100%;
  height: 100%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  font-family: var(--sans);
}
.art-card-author-info { flex: 1; min-width: 0; }
.art-card-author-name { font-size: 11.5px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-card-date { font-size: 10.5px; color: var(--text-muted); }
.art-card-readtime {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-shade);
  padding: 2px 9px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Empty State ──────────────────────────────────────────── */
.aml-empty {
  text-align: center;
  padding: 56px 24px;
}
.aml-empty-icon { margin-bottom: 16px; display: flex; justify-content: center; }
.aml-empty p { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.aml-browse-btn {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: #fff;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.aml-browse-btn:hover { background: var(--crimson); color: #fff; }

/* ── Pagination ───────────────────────────────────────────── */
.aml-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.apg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sec);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.apg-btn:hover:not(.disabled) {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.apg-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.apg-pages { display: flex; align-items: center; gap: 4px; }
.apg-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sec);
  text-decoration: none;
  transition: all 0.2s;
}
.apg-page:hover { background: var(--bg-shade); border-color: var(--navy); color: var(--navy); }
.apg-page.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  pointer-events: none;
}
.apg-ellipsis {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .feat-card { grid-template-columns: 1fr; }
  .feat-img-col { min-height: 220px; height: 240px; }
  .feat-body-col { padding: 22px 24px 24px; }
  .feat-headline { font-size: 22px; }
}
@media (max-width: 760px) {
  .aph-inner { flex-direction: column; gap: 18px; }
  .aph-searchbox { min-width: unset; width: 100%; }
  .aph-heading { font-size: 26px; }
}
@media (max-width: 640px) {
  .art-grid { grid-template-columns: 1fr; }
  .aph-heading { font-size: 22px; }
  .aml-pagination { gap: 4px; }
  .apg-btn { padding: 7px 12px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════
   AUTHOR PAGE
════════════════════════════════════════════════════ */

/* ── Author Hero ───────────────────────────────────── */
.author-hero {
    background: linear-gradient(135deg, var(--navy) 0%, #0f2147 100%);
    padding: 48px 0 36px;
    margin-bottom: 40px;
    border-bottom: 3px solid var(--crimson);
}
.author-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 500; color: #6a88a8; margin-bottom: 28px;
}
.author-breadcrumb a { color: #6a88a8; text-decoration: none; transition: color 0.2s; }
.author-breadcrumb a:hover { color: var(--gold-lt); }
.author-breadcrumb .bc-chevron { width: 12px; height: 12px; stroke: currentColor; fill: none; flex-shrink: 0; }
.author-breadcrumb .bc-current { color: #c8d8e8; font-weight: 600; }

.author-profile {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.author-avatar-wrap {
    flex-shrink: 0;
    position: relative;
}
.author-avatar-wrap img,
.author-avatar-fallback {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.15);
    box-shadow: 0 0 0 2px var(--crimson);
    display: block;
}
.author-avatar-fallback {
    background: linear-gradient(135deg, var(--crimson) 0%, var(--navy-mid) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 2.4rem;
    font-family: var(--serif);
}
.author-details { flex: 1; min-width: 0; }
.author-name {
    font-family: var(--serif);
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 800;
    color: #f0f4f8;
    margin: 0 0 4px;
    line-height: 1.15;
}
.author-designation {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--gold-lt);
    margin-bottom: 12px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.2px;
}
.author-bio-text {
    font-size: 13.5px;
    color: #9ab0c8;
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 18px;
}
.author-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.author-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #7a98b8;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    transition: all 0.22s;
    background: rgba(255,255,255,0.04);
}
.author-social-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
}
.author-social-link svg { flex-shrink: 0; }

/* Stats row */
.author-stats {
    display: flex;
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
}
.author-stat {
    flex: 1;
    text-align: center;
    padding: 0 20px;
    border-right: 1px solid rgba(255,255,255,0.07);
}
.author-stat:first-child { padding-left: 0; text-align: left; }
.author-stat:last-child { border-right: none; }
.stat-number {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 800;
    color: var(--gold-lt);
    line-height: 1;
    display: block;
}
.stat-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5a78a0;
    margin-top: 3px;
    display: block;
}

@media (max-width: 640px) {
    .author-profile { flex-direction: column; align-items: center; text-align: center; }
    .author-bio-text { max-width: 100%; }
    .author-socials { justify-content: center; }
    .author-stats { gap: 10px; flex-wrap: wrap; padding-top: 18px; }
    .author-stat { flex: 0 0 45%; padding: 0; text-align: center; border-right: none; }
    .author-stat:first-child { text-align: center; }
}

/* ── Section heading ───────────────────────────────── */
.content-section-heading {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    border-left: 4px solid var(--crimson);
    padding-left: 12px;
    margin: 0 0 20px;
}

/* author page article grid (3-col) */
.card-cat-pill.navy-pill {
    background: rgba(13,27,62,0.85); color: #fff;
    border-color: rgba(255,255,255,0.15);
}
.card-cat-pill.opinion-pill {
    background: rgba(26,26,46,0.88); color: #fff;
    border-color: rgba(255,255,255,0.15);
}
.article-card-meta svg { color: var(--crimson); flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   COMMUNITY LISTING PAGE
════════════════════════════════════════════════════ */

/* ── Community page hero ─────────────────────────────── */
.community-page-hero {
    background: linear-gradient(135deg, #0d1b3e 0%, #1a2f6b 100%);
    border-radius: 16px;
    padding: 2.5rem 2.5rem 2rem;
    margin: 1.5rem 0 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.community-page-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(201,168,76,.08);
    pointer-events: none;
}

.community-badge-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #c9a84c;
    background: rgba(201,168,76,.12);
    border: 1px solid rgba(201,168,76,.25);
    border-radius: 20px;
    padding: .25rem .75rem;
    margin-bottom: .75rem;
}

.community-page-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .5rem;
    line-height: 1.2;
}

.community-page-subtitle {
    color: rgba(255,255,255,.6);
    font-size: .9rem;
    margin: 0;
}

.community-cta-inline {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-comm-primary {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.25rem;
    background: #c0392b;
    color: #fff;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .1s;
    border: none;
    white-space: nowrap;
}

.btn-comm-primary:hover {
    background: #a93226;
    color: #fff;
    transform: translateY(-1px);
}

.btn-comm-ghost {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.25rem;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s;
    border: 1px solid rgba(255,255,255,.15);
    white-space: nowrap;
}

.btn-comm-ghost:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.btn-comm-outline {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.25rem;
    background: transparent;
    color: #0d1b3e;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
    border: 1.5px solid #d1d5db;
    white-space: nowrap;
}

.btn-comm-outline:hover { background: #f3f4f6; }

/* ── Article grid ────────────────────────────────────── */
.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* ── Article card ────────────────────────────────────── */
.community-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: box-shadow .22s, transform .22s;
    display: flex;
    flex-direction: column;
}

.community-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-3px);
}

.community-card-img-link { display: block; }

.community-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e9ecef;
}

.community-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.community-card:hover .community-card-img img {
    transform: scale(1.04);
}

.community-type-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: #0d1b3e;
    color: #c9a84c;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .22rem .65rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.community-card-body {
    padding: 1.1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.community-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .6rem;
    color: #111827;
}

.community-card-title a { color: inherit; }
.community-card-title a:hover { color: #c0392b; }

.community-card-excerpt {
    font-size: .86rem;
    color: #6b7280;
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}

.community-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .75rem;
    border-top: 1px solid #f3f4f6;
}

.community-card-author {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.community-author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d1b3e, #1a2f6b);
    color: #c9a84c;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.community-author-info {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.community-author-name {
    font-size: .82rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}

.community-author-name a { color: inherit; }
.community-author-name a:hover { color: #c0392b; }

.community-author-date {
    font-size: .75rem;
    color: #9ca3af;
}

.community-read-link {
    font-size: .8rem;
    font-weight: 600;
    color: #c0392b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    transition: gap .2s;
    white-space: nowrap;
}

.community-read-link:hover { gap: .5rem; color: #a93226; }

/* ── Empty state ─────────────────────────────────────── */
.community-empty-state {
    text-align: center;
    padding: 5rem 1rem;
    color: #6b7280;
}

.community-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.community-empty-state h3 {
    font-family: 'Playfair Display', serif;
    color: #374151;
    margin-bottom: .5rem;
}

.community-empty-state p { margin-bottom: 1.5rem; }

/* ── Pagination ──────────────────────────────────────── */
.community-pagination {
    margin: 1.5rem 0 2rem;
    display: flex;
    justify-content: center;
}

/* ── Contribute banner ───────────────────────────────── */
.community-contribute-banner {
    background: linear-gradient(135deg, #f8f9fc 0%, #eef0f8 100%);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.community-contribute-text h5 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0d1b3e;
    margin: 0 0 .4rem;
}

.community-contribute-text p {
    font-size: .88rem;
    color: #6b7280;
    margin: 0;
    max-width: 560px;
    line-height: 1.55;
}

.community-contribute-actions {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991px) {
    .community-grid { grid-template-columns: repeat(2, 1fr); }
    .community-page-hero { flex-direction: column; align-items: flex-start; }
    .community-cta-inline { width: 100%; }
}

@media (max-width: 575px) {
    .community-grid { grid-template-columns: 1fr; }
    .community-page-hero { padding: 1.75rem 1.5rem; border-radius: 12px; }
    .community-page-title { font-size: 1.5rem; }
    .community-contribute-banner { flex-direction: column; }
    .community-contribute-actions { width: 100%; flex-wrap: wrap; }
    .community-cta-inline { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════
   COMMUNITY DETAIL PAGE
════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────── */
.comm-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: #9ca3af;
    margin: 1.5rem 0 1.75rem;
}

.comm-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color .2s;
}

.comm-breadcrumb a:hover { color: #0d1b3e; }
.comm-breadcrumb .bc-sep { color: #d1d5db; font-size: .7rem; }
.comm-breadcrumb .bc-current { color: #374151; }

/* ── Article wrapper ─────────────────────────────────── */
.comm-detail-article {
    max-width: 760px;
    margin: 0 auto;
}

/* ── Top meta ────────────────────────────────────────── */
.comm-detail-meta-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.comm-badge-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #c9a84c;
    background: #0d1b3e;
    border-radius: 20px;
    padding: .28rem .75rem;
}

.comm-meta-dot {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: #9ca3af;
}

.comm-meta-dot i { font-size: .8rem; }

/* ── Title ───────────────────────────────────────────── */
.comm-detail-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.22;
    color: #0d1b3e;
    margin: 0 0 1rem;
}

/* ── Excerpt ─────────────────────────────────────────── */
.comm-detail-excerpt {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    border-left: 3px solid #c9a84c;
    padding-left: 1rem;
}

/* ── Author card ─────────────────────────────────────── */
.comm-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f8f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.75rem;
}

.comm-author-avatar-lg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d1b3e, #1a2f6b);
    color: #c9a84c;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comm-author-card-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.comm-author-card-label {
    font-size: .73rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.comm-author-card-name {
    font-size: .95rem;
    font-weight: 700;
    color: #0d1b3e;
}

.comm-author-card-name a { color: inherit; }
.comm-author-card-name a:hover { color: #c0392b; text-decoration: underline; }

.comm-author-card-bio {
    font-size: .82rem;
    color: #6b7280;
}

/* ── Hero image ──────────────────────────────────────── */
.comm-detail-hero-img {
    margin-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

.comm-detail-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Body ────────────────────────────────────────────── */
.comm-detail-body {
    font-size: 1.05rem;
    line-height: 1.82;
    color: #1f2937;
    margin-bottom: 2rem;
}

/* ── Share row ───────────────────────────────────────── */
.comm-detail-share-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 0;
    border-top: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.comm-share-label {
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Back link ───────────────────────────────────────── */
.comm-back-row {
    max-width: 760px;
    margin: 0 auto 2.5rem;
}

.comm-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .45rem 1rem;
    transition: color .2s, border-color .2s, background .2s;
}

.comm-back-link:hover {
    color: #0d1b3e;
    border-color: #0d1b3e;
    background: #f8f9fc;
}

/* ── Related section ─────────────────────────────────── */
.comm-related { margin-top: 2rem; }

.comm-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.comm-related-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.comm-related-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.comm-related-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #e9ecef;
}

.comm-related-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.comm-related-card:hover .comm-related-img img { transform: scale(1.04); }

.comm-related-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #9ca3af;
}

.comm-related-body { padding: .85rem 1rem .9rem; }

.community-type-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #c9a84c;
    background: #0d1b3e;
    border-radius: 20px;
    padding: .18rem .55rem;
    margin-bottom: .5rem;
}

.comm-related-title {
    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .5rem;
    color: #111827;
}

.comm-related-title a { color: inherit; }
.comm-related-title a:hover { color: #c0392b; }

.comm-related-footer {
    display: flex;
    gap: .75rem;
    font-size: .78rem;
    color: #9ca3af;
}

.comm-related-author { color: #6b7280; font-weight: 500; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991px) {
    .comm-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .comm-detail-title { font-size: 1.55rem; }
    .comm-related-grid { grid-template-columns: 1fr; }
    .comm-author-card { flex-wrap: wrap; }
    .comm-detail-meta-top { gap: .5rem; }
}

/* ════════════════════════════════════════════════════
   CATEGORY PAGE
════════════════════════════════════════════════════ */

/* ── Category Hero ─────────────────────────────────── */
/* (shared .listing-hero, .listing-breadcrumb, .listing-page-title, .listing-subtitle already defined above) */
.cat-color-bar {
    width: 6px; height: 42px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: -16px;
    margin-right: 10px;
}

/* ── Section heading ───────────────────────────────── */
.content-section-heading {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    border-left: 4px solid var(--crimson);
    padding-left: 12px;
    margin: 36px 0 20px;
}
.content-section-heading:first-child { margin-top: 0; }

/* category page card-cat-pill variant */
.card-cat-pill.breaking-pill {
    background: rgba(155,27,48,0.88); color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.article-card-excerpt {
    font-size: 12px; color: var(--text-sec); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 12px;
}

/* ── Judgment Cards (category page) ───────────────── */
.judgment-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 16px;
}
@media (max-width: 1024px) { .judgment-card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px)  { .judgment-card-grid { grid-template-columns: 1fr; gap: 14px; } }
.judgment-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--crimson);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.24s, box-shadow 0.24s;
}
.judgment-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(13,27,62,0.12); }
.judgment-court-badge {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--crimson);
    background: rgba(155,27,48,0.08);
    padding: 3px 9px; border-radius: 3px;
    display: inline-block; width: fit-content;
}
.judgment-card-title {
    font-family: var(--serif); font-size: 15px; font-weight: 700;
    color: var(--text-pri); line-height: 1.36;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.judgment-card-title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.judgment-card-title a:hover { color: var(--crimson); }
.judgment-date-small {
    font-size: 10.5px; color: var(--text-muted); margin-top: auto;
    display: flex; align-items: center; gap: 4px;
}
.judgment-date-small svg { color: var(--crimson); flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   TAG PAGE
════════════════════════════════════════════════════ */

/* ── Tag Hero ──────────────────────────────────────── */
/* (shared .listing-hero, .listing-breadcrumb, .listing-page-title, .listing-subtitle already defined above) */
.listing-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-shade);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-sec);
    margin-left: 21px;
    width: fit-content;
}
.listing-count-badge strong { color: var(--crimson); }

/* ════════════════════════════════════════════════════
   CONTRIBUTOR PROFILE PAGE
════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────── */
.contrib-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: #9ca3af;
    margin: 1.5rem 0 1.75rem;
}

.contrib-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color .2s;
}

.contrib-breadcrumb a:hover { color: #0d1b3e; }
.contrib-breadcrumb .bc-sep { color: #d1d5db; font-size: .7rem; }

/* ── Hero card ───────────────────────────────────────── */
.contrib-hero-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    margin-bottom: 2.5rem;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.contrib-hero-banner {
    height: 130px;
    background: linear-gradient(135deg, #0d1b3e 0%, #1a2f6b 60%, #0a1428 100%);
    position: relative;
}

.contrib-hero-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(201,168,76,.1);
    pointer-events: none;
}

.contrib-hero-body {
    padding: 0 1.75rem 1.75rem;
}

.contrib-hero-top {
    display: flex;
    align-items: flex-end;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ── Avatar ──────────────────────────────────────────── */
.contrib-avatar-wrap {
    margin-top: -52px;
    flex-shrink: 0;
}

.contrib-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    display: block;
}

/* ── Name block ──────────────────────────────────────── */
.contrib-name-block {
    flex: 1;
    padding-bottom: .25rem;
}

.contrib-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #0d1b3e;
    margin: 0 0 .4rem;
    line-height: 1.2;
}

.contrib-role-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.contrib-role-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #c9a84c;
    background: #0d1b3e;
    border-radius: 20px;
    padding: .22rem .7rem;
}

.contrib-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: #9ca3af;
}

/* ── Social links ────────────────────────────────────── */
.contrib-socials {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding-bottom: .25rem;
}

.contrib-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    color: #4b5563;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.contrib-social-btn:hover {
    border-color: #0d1b3e;
    background: #f8f9fc;
    color: #0d1b3e;
}

/* ── Bio ─────────────────────────────────────────────── */
.contrib-bio {
    font-size: .93rem;
    color: #374151;
    line-height: 1.65;
    max-width: 680px;
    margin: 0 0 1.25rem;
}

/* ── Stats row ───────────────────────────────────────── */
.contrib-stats-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1.1rem 1.5rem;
    background: #f8f9fc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.contrib-stat {
    flex: 1;
    text-align: center;
    padding: .35rem .5rem;
    min-width: 100px;
}

.contrib-stat-num {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    color: #0d1b3e;
    line-height: 1.1;
    font-family: 'Playfair Display', serif;
}

.contrib-stat-label {
    display: block;
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .15rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.contrib-stat-divider {
    width: 1px;
    height: 40px;
    background: #e5e7eb;
    flex-shrink: 0;
}

/* ── Articles grid ───────────────────────────────────── */
.contrib-articles-section { margin-bottom: 3rem; }

.contrib-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

/* ── Article card ────────────────────────────────────── */
.contrib-article-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .22s, transform .22s;
}

.contrib-article-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.09);
    transform: translateY(-3px);
}

.contrib-article-img-link { display: block; }

.contrib-article-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #e9ecef;
}

.contrib-article-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .38s ease;
}

.contrib-article-card:hover .contrib-article-img img {
    transform: scale(1.05);
}

.contrib-article-body {
    padding: 1rem 1.15rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contrib-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c9a84c;
    background: #0d1b3e;
    border-radius: 20px;
    padding: .18rem .55rem;
    margin-bottom: .55rem;
    align-self: flex-start;
}

.contrib-article-title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .55rem;
    color: #111827;
    flex: 1;
}

.contrib-article-title a { color: inherit; }
.contrib-article-title a:hover { color: #c0392b; }

.contrib-article-excerpt {
    font-size: .84rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0 0 .85rem;
}

.contrib-article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .7rem;
    border-top: 1px solid #f3f4f6;
}

.contrib-article-meta-row {
    display: flex;
    gap: .75rem;
}

.contrib-article-date,
.contrib-article-views {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    color: #9ca3af;
}

.contrib-read-link {
    font-size: .8rem;
    font-weight: 600;
    color: #c0392b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    transition: gap .2s;
    white-space: nowrap;
}

.contrib-read-link:hover { gap: .5rem; color: #a93226; }

/* ── Pagination ──────────────────────────────────────── */
.contrib-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* ── Empty state ─────────────────────────────────────── */
.contrib-empty-state {
    text-align: center;
    padding: 5rem 1rem;
    color: #6b7280;
}

.contrib-empty-icon {
    font-size: 3.5rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.contrib-empty-state h3 {
    font-family: 'Playfair Display', serif;
    color: #374151;
    margin-bottom: .5rem;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991px) {
    .contrib-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .contrib-hero-top { align-items: flex-start; }
}

@media (max-width: 575px) {
    .contrib-articles-grid { grid-template-columns: 1fr; }
    .contrib-hero-body { padding: 0 1.1rem 1.4rem; }
    .contrib-name { font-size: 1.35rem; }
    .contrib-socials { width: 100%; order: 3; }
    .contrib-stats-row { padding: .85rem 1rem; gap: 0; }
    .contrib-stat-divider { display: none; }
    .contrib-stat { min-width: 80px; }
}

/* ════════════════════════════════════════════════════
   SEARCH PAGE
════════════════════════════════════════════════════ */

/* ── Search hero ──────────────────────────────────────── */
.search-hero {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.search-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #0d1b3e;
    margin: 0 0 1.1rem;
}

.search-form-bar {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.search-input-wrap {
    position: relative;
    flex: 1;
}

.search-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: .8rem 2.75rem .8rem 2.75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    color: #111827;
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.search-input:focus {
    border-color: #c9a84c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    text-decoration: none;
    font-size: .85rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .2s, background .2s;
}

.search-clear-btn:hover { color: #374151; background: #f3f4f6; }

.search-submit-btn {
    padding: .78rem 1.5rem;
    background: #0d1b3e;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, transform .1s;
    flex-shrink: 0;
}

.search-submit-btn:hover { background: #1a2f6b; transform: translateY(-1px); }
.search-submit-btn:active { transform: translateY(0); }

/* ── Meta row ─────────────────────────────────────────── */
.search-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-summary {
    font-size: .92rem;
    color: #374151;
}

.search-term-highlight {
    color: #c0392b;
    font-weight: 600;
}

/* ── Filter chips ─────────────────────────────────────── */
.search-filter-chips {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    font-size: .82rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    background: #fff;
    transition: border-color .2s, background .2s, color .2s;
    white-space: nowrap;
}

.search-chip:hover {
    border-color: #0d1b3e;
    color: #0d1b3e;
    background: #f8f9fc;
}

.search-chip.active {
    background: #0d1b3e;
    border-color: #0d1b3e;
    color: #fff;
}

.chip-count {
    background: rgba(255,255,255,.2);
    border-radius: 10px;
    padding: 0 .4rem;
    font-size: .75rem;
}

.search-chip:not(.active) .chip-count {
    background: #f3f4f6;
    color: #6b7280;
}

/* ── Result item ──────────────────────────────────────── */
.search-results-list { display: flex; flex-direction: column; gap: 0; }

.search-result-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s;
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #fafbfc; }

.search-result-left { flex: 1; min-width: 0; }

.search-result-badges {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}

/* ── Type badges ─────────────────────────────────────── */
.search-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: .22rem .7rem;
}

.type-article   { background: #dbeafe; color: #1d4ed8; }
.type-judgment  { background: #0d1b3e; color: #c9a84c; }
.type-interview { background: #fef9c3; color: #854d0e; }
.type-opinion   { background: #f3e8ff; color: #6b21a8; }
.type-news      { background: #dcfce7; color: #166534; }
.type-community { background: #fee2e2; color: #991b1b; }
.type-default   { background: #e5e7eb; color: #374151; }

.search-category-pill {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 20px;
    padding: .18rem .65rem;
}

.search-result-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .5rem;
    color: #0d1b3e;
}

.search-result-title a { color: inherit; }
.search-result-title a:hover { color: #c0392b; }

.search-result-excerpt {
    font-size: .88rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 .6rem;
}

/* highlighted term in results */
mark.search-hl {
    background: #fef08a;
    color: #854d0e;
    border-radius: 3px;
    padding: 0 2px;
    font-style: normal;
}

.search-result-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-result-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: #9ca3af;
}

.search-result-arrow {
    color: #d1d5db;
    font-size: 1rem;
    padding: .25rem;
    transition: color .2s;
    flex-shrink: 0;
    margin-top: 2px;
}

.search-result-item:hover .search-result-arrow { color: #0d1b3e; }

/* ── Too short notice ─────────────────────────────────── */
.search-too-short {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: #6b7280;
    background: #f8f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .85rem 1.1rem;
    margin: 1rem 0;
}

/* ── Empty state ──────────────────────────────────────── */
.search-empty-state {
    text-align: center;
    padding: 4rem 1rem 3rem;
}

.search-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #9ca3af;
    margin: 0 auto 1.25rem;
}

.search-empty-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: .6rem;
}

.search-empty-sub {
    color: #6b7280;
    font-size: .9rem;
    max-width: 460px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* ── Default state ────────────────────────────────────── */
.search-default-state {
    text-align: center;
    padding: 3rem 1rem 3rem;
}

.search-default-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d1b3e, #1a2f6b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #c9a84c;
    margin: 0 auto 1.25rem;
}

.search-default-text {
    color: #6b7280;
    font-size: .92rem;
    max-width: 480px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* ── Suggestions ──────────────────────────────────────── */
.search-suggestions { margin-bottom: 2rem; }

.search-suggestions-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: .75rem;
}

.search-suggestions-chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.search-suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding: .38rem .9rem;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    font-size: .84rem;
    color: #374151;
    text-decoration: none;
    background: #fff;
    transition: border-color .2s, background .2s, color .2s;
}

.search-suggestion-chip:hover {
    border-color: #c0392b;
    color: #c0392b;
    background: #fef2f2;
}

/* ── Category cards ───────────────────────────────────── */
.search-categories-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.search-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.1rem 1.5rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: .85rem;
    color: #374151;
    min-width: 90px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.search-cat-card i { font-size: 1.35rem; color: #0d1b3e; }
.search-cat-card:hover { border-color: #0d1b3e; box-shadow: 0 4px 14px rgba(0,0,0,.07); }

/* ── Pagination ──────────────────────────────────────── */
.search-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 767px) {
    .search-form-bar { flex-wrap: wrap; }
    .search-submit-btn { width: 100%; justify-content: center; }
    .search-meta-row { flex-direction: column; align-items: flex-start; }
    .search-hero-title { font-size: 1.35rem; }
    .search-result-title { font-size: 1rem; }
    .search-result-arrow { display: none; }
}

@media (max-width: 480px) {
    .search-filter-chips { gap: .35rem; }
    .search-chip { font-size: .78rem; padding: .28rem .65rem; }
    .search-categories-row { gap: .65rem; }
    .search-cat-card { min-width: 75px; padding: .85rem 1rem; }
}

/* ════════════════════════════════════════════════════
   HOME SIDEBAR PARTIAL
════════════════════════════════════════════════════ */

/* =========================================================
                                                                                | ROOT SIDEBAR
                                                                                ========================================================== */

.nv-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* =========================================================
                                                                                | WIDGET CARD
                                                                                ========================================================== */

.nv-widget {
    background: #ffffff;
    border: 1px solid #ece7df;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(17, 24, 39, 0.04);
}

.nv-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 16px 18px;

    background:
        linear-gradient(135deg,
            #081c45 0%,
            #102b63 100%);

    border-bottom: 3px solid #b51d34;
}

.nv-widget-header h4 {
    margin: 0;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #ffffff;
}

.nv-widget-icon {
    color: #d4a017;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-widget-body {
    padding: 8px 18px 14px;
}

/* =========================================================
                                                                                | TRENDING ITEMS
                                                                                ========================================================== */

.nv-trending-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 16px 0;

    border-bottom: 1px solid #f1ece5;

    text-decoration: none;

    transition: all .25s ease;
}

.nv-trending-item:last-child {
    border-bottom: none;
    padding-bottom: 6px;
}

.nv-trending-item:hover {
    transform: translateX(4px);
}

.nv-trending-number {
    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #b51d34,
            #d43750);

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 6px 16px rgba(181, 29, 52, 0.25);
}

.nv-trending-content {
    flex: 1;
}

.nv-trending-title {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;

    color: #182230;

    transition: color .25s ease;
}

.nv-trending-item:hover .nv-trending-title {
    color: #b51d34;
}

.nv-trending-meta {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 8px;

    font-size: 11px;
    color: #8a8f98;
}

/* =========================================================
                                                                                | MOST READ
                                                                                ========================================================== */

.nv-most-read-item {
    display: flex;
    gap: 14px;

    padding: 16px 0;

    border-bottom: 1px solid #f2ece5;

    text-decoration: none;
}

.nv-most-read-item:last-child {
    border-bottom: none;
}

.nv-read-rank {
    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 10px;

    background: #081c45;

    color: #d4a017;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 700;
}

.nv-read-title {
    color: #1c2735;

    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;

    transition: color .25s ease;
}

.nv-most-read-item:hover .nv-read-title {
    color: #b51d34;
}

.nv-read-meta {
    margin-top: 7px;

    font-size: 11px;
    color: #9097a3;
}

/* =========================================================
                                                                                | NEWSLETTER
                                                                                ========================================================== */

.nv-newsletter-box {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            #081c45 0%,
            #102b63 50%,
            #07152f 100%);

    padding: 28px 22px;

    box-shadow:
        0 10px 30px rgba(8, 28, 69, 0.18);
}

.nv-newsletter-overlay {
    position: absolute;

    top: -70px;
    right: -70px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(181, 29, 52, 0.35),
            transparent 70%);
}

.nv-newsletter-content {
    position: relative;
    z-index: 2;
}

.nv-newsletter-heading {
    color: #fff;

    font-size: 22px;
    font-weight: 700;

    margin-bottom: 12px;
}

.nv-newsletter-text {
    color: rgba(255, 255, 255, .75);

    font-size: 13px;
    line-height: 1.8;

    margin-bottom: 18px;
}

.nv-newsletter-input {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, .15);

    background: rgba(255, 255, 255, .08);

    color: #fff;

    height: 48px;

    padding: 0 16px;

    border-radius: 12px;

    margin-bottom: 12px;

    outline: none;
}

.nv-newsletter-input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.nv-newsletter-btn {
    width: 100%;

    height: 48px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(135deg,
            #b51d34,
            #d43750);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    transition: all .25s ease;
}

.nv-newsletter-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(181, 29, 52, .3);
}

.nv-newsletter-note {
    margin-top: 12px;

    font-size: 11px;
    color: rgba(255, 255, 255, .5);

    text-align: center;
}

/* =========================================================
                                                                                | ADS
                                                                                ========================================================== */

.nv-ad-card {
    border-radius: 18px;
    overflow: hidden;
}

.nv-ad-placeholder {
    height: 260px;

    border-radius: 18px;

    background:
        linear-gradient(145deg,
            #f8f4ee,
            #f2ece3);

    border: 1px dashed #d5cab8;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
}

.nv-ad-placeholder.small {
    height: 180px;
}

.nv-ad-badge {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    color: #7f8692;
}

.nv-ad-size {
    font-size: 12px;
    color: #b0b4bc;
}

/* =========================================================
                                                                                | MOBILE RESPONSIVE
                                                                                ========================================================== */

@media(max-width:1024px) {

    .nv-sidebar {
        position: relative;
        top: 0;
    }

}

@media(max-width:768px) {

    .nv-sidebar {
        gap: 18px;
    }

    .nv-widget,
    .nv-newsletter-box,
    .nv-ad-placeholder {
        border-radius: 16px;
    }

    .nv-widget-body {
        padding: 6px 14px 12px;
    }

    .nv-trending-title,
    .nv-read-title {
        font-size: 13px;
        line-height: 1.5;
    }

    .nv-newsletter-heading {
        font-size: 20px;
    }

}

/* ════════════════════════════════════════════════════
   HOME OPINIONS PARTIAL
════════════════════════════════════════════════════ */

/* ── Opinion Grid ───────────────────────────────────────────── */
.nv-opinion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 840px) {
    .nv-opinion-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Card Shell ─────────────────────────────────────────────── */
.nv-opinion-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.18, 0.64, 1), box-shadow 0.3s ease;
    /* Left border accent */
    border-left-width: 4px;
    border-left-style: solid;
}

.nv-border-navy {
    border-left-color: var(--navy);
}

.nv-border-crimson {
    border-left-color: var(--crimson);
}

.nv-opinion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(13, 27, 62, 0.16);
}

/* ── Image ──────────────────────────────────────────────────── */
.nv-opinion-img-wrap {
    display: block;
    text-decoration: none;
    position: relative;
    height: 190px;
    overflow: hidden;
}

.nv-opinion-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.nv-opinion-card:hover .nv-opinion-img {
    transform: scale(1.06);
}

.nv-opinion-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(13, 27, 62, 0.18) 100%);
    pointer-events: none;
}

/* ── Body ───────────────────────────────────────────────────── */
.nv-opinion-body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Label ── */
.nv-opinion-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--crimson);
    margin-bottom: 9px;
}

.nv-opinion-label-dot {
    display: block;
    width: 18px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--crimson);
}

/* Headline ── */
.nv-opinion-headline {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-pri);
    margin-bottom: 10px;
    flex: 1;
    transition: color 0.2s;
}

.nv-opinion-card:hover .nv-opinion-headline {
    color: var(--navy);
}

/* Preview quote ── */
.nv-opinion-preview {
    font-family: var(--body-serif);
    font-size: 13px;
    color: var(--text-sec);
    line-height: 1.65;
    margin-bottom: 16px;
    font-style: italic;
}

/* Author Row ── */
.nv-author-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--bg-shade);
}

.nv-author-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13, 27, 62, 0.12);
}

.nv-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nv-author-initials {
    width: 100%;
    height: 100%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--serif);
}

.nv-author-info {
    min-width: 0;
}

.nv-author-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-author-role {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════
   HOME ARTICLES PARTIAL
════════════════════════════════════════════════════ */

.hcs-img-article-placeholder{background:linear-gradient(135deg,#2c0d1a 0%,#9b1b30 100%)}
.hcs-badge-article{background:rgba(155,27,48,.82);border:1px solid rgba(255,255,255,.2);color:#fff}

/* ════════════════════════════════════════════════════
   SHARE BUTTONS COMPONENT
════════════════════════════════════════════════════ */
.share-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.share-buttons-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted, #777);
    margin-right: 2px;
    flex-shrink: 0;
}
.share-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 50px;
    border: 1.5px solid currentColor;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}
.share-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.share-pill-wa  { color: #128c4c; }
.share-pill-wa:hover  { background: #25D366; color: #fff; border-color: #25D366; }
.share-pill-fb  { color: #1877F2; }
.share-pill-fb:hover  { background: #1877F2; color: #fff; border-color: #1877F2; }
.share-pill-x   { color: #000; }
.share-pill-x:hover   { background: #000; color: #fff; border-color: #000; }
.share-pill-li  { color: #0A66C2; }
.share-pill-li:hover  { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.share-pill-copy { color: #555; border-color: #ccc; }
.share-pill-copy:hover { background: #555; color: #fff; border-color: #555; }
.share-pill-copy.copied { background: #1b6b3a; color: #fff; border-color: #1b6b3a; }
@media (max-width: 480px) {
    .share-pill span { display: none; }
    .share-pill { padding: 8px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RICH TEXT EDITOR (TIPTAP) — Complete output styling for ALL detail pages
   Covers: article (.adc-body-text), judgment (.jd-section-content, .body-text),
   opinion (.opinion-body), interview (.qa-body), news (.body-text)
   ─────────────────────────────────────────────────────────────────────────
   Selector groups are repeated so each area can be tuned independently
   while sharing the same core rules via comma selectors.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Italic / Em ────────────────────────────────────────────────────────── */
.body-text em,
.jd-section-content em,
.opinion-body em,
.qa-body em { font-style: italic; }

/* ── Underline ──────────────────────────────────────────────────────────── */
.body-text u,
.jd-section-content u,
.opinion-body u,
.qa-body u { text-decoration: underline; text-underline-offset: 3px; }

/* ── Strikethrough ──────────────────────────────────────────────────────── */
.body-text s, .adc-body-text s,
.jd-section-content s, .opinion-body s, .qa-body s,
.body-text del, .adc-body-text del,
.jd-section-content del, .opinion-body del, .qa-body del {
    text-decoration: line-through;
    opacity: .7;
}

/* ── H4 (body-text already has h2 and h3; add h4) ─────────────────────── */
.body-text h4 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1rem;
    font-weight: 700;
    margin: 1em 0 .4em;
    color: var(--text-pri, #1a1a2e);
    line-height: 1.3;
}

/* ── Headings for qa-body (interviews) ─────────────────────────────────── */
.qa-body h2 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 1.5em 0 .55em;
    color: var(--text-pri, #1a1a2e);
    line-height: 1.3;
}
.qa-body h3 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.3em 0 .45em;
    color: var(--text-pri, #1a1a2e);
}
.qa-body h4 {
    font-size: .95rem;
    font-weight: 700;
    margin: 1.1em 0 .4em;
    color: var(--text-pri, #1a1a2e);
}

/* ── Lists — opinion-body and qa-body ──────────────────────────────────── */
.opinion-body ul, .opinion-body ol,
.qa-body ul, .qa-body ol {
    margin: .85em 0 .85em 1.6em;
    padding: 0;
    line-height: 1.75;
}
.opinion-body ul { list-style-type: disc; }
.opinion-body ol { list-style-type: decimal; }
.qa-body ul { list-style-type: disc; }
.qa-body ol { list-style-type: decimal; }
.opinion-body li, .qa-body li { margin-bottom: .5em; }

/* ── Nested lists ──────────────────────────────────────────────────────── */
.body-text ul ul, .body-text ul ol,
.body-text ol ul, .body-text ol ol,
.adc-body-text ul ul, .adc-body-text ol ol,
.jd-section-content ul ul, .jd-section-content ol ol,
.opinion-body ul ul, .opinion-body ol ol,
.qa-body ul ul, .qa-body ol ol {
    margin: .35em 0 .35em 1.5em;
}

/* ── Strong / Bold — opinion-body, qa-body ─────────────────────────────── */
.opinion-body strong, .qa-body strong {
    font-weight: 700;
    color: inherit;
}

/* ── Blockquote — jd-section-content ──────────────────────────────────── */
.jd-section-content blockquote {
    border-left: 4px solid var(--crimson, #9b1b30);
    background: #fdf6f6;
    padding: .9rem 1.25rem;
    margin: 1.25em 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444;
}
.jd-section-content blockquote p { margin: 0; }

/* ── Blockquote — qa-body (interviews) ─────────────────────────────────── */
.qa-body blockquote {
    border-left: 3px solid var(--border, #e5e5e5);
    padding: .75rem 1.25rem;
    margin: 1.1em 0;
    color: var(--text-sec, #555);
    font-style: italic;
    background: #fafbfc;
    border-radius: 0 5px 5px 0;
}
.qa-body blockquote p { margin: 0; }

/* ── Inline code ────────────────────────────────────────────────────────── */
.body-text code,
.jd-section-content code,
.opinion-body code,
.qa-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .82em;
    background: #f0f2f5;
    color: #c0392b;
    padding: .15em .45em;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Code blocks (pre > code) ──────────────────────────────────────────── */
.body-text pre,
.adc-body-text pre,
.jd-section-content pre,
.opinion-body pre,
.qa-body pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.1rem 1.4rem;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    font-size: .875rem;
    line-height: 1.65;
    white-space: pre;
}
.body-text pre code,
.adc-body-text pre code,
.jd-section-content pre code,
.opinion-body pre code,
.qa-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    white-space: inherit;
}

/* ── Horizontal rule ────────────────────────────────────────────────────── */
.body-text hr, .adc-body-text hr,
.jd-section-content hr, .opinion-body hr, .qa-body hr {
    border: none;
    border-top: 2px solid var(--border, #e5e5e5);
    margin: 2em 0;
}

/* ── Images inside rich-text content ───────────────────────────────────── */
.jd-section-content img,
.opinion-body img,
.qa-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1.25em auto;
}

/* ── Links in jd-section-content ───────────────────────────────────────── */
.jd-section-content a {
    color: var(--crimson, #9b1b30);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.jd-section-content a:hover { opacity: .8; }

/* ── Links in opinion / interview ──────────────────────────────────────── */
.opinion-body a, .qa-body a {
    color: var(--crimson, #9b1b30);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.opinion-body a:hover, .qa-body a:hover { opacity: .8; }

/* ── adc-body-text (articles): code + inline code ─────────────────────── */
.adc-body-text code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .82em;
    background: #f0f2f5;
    color: #c0392b;
    padding: .15em .45em;
    border-radius: 4px;
}
/* Drop-cap must not fire inside code or pre */
.adc-body-text pre p:first-child::first-letter,
.adc-body-text code p:first-child::first-letter { font-size: inherit; float: none; }

/* ── First-paragraph spacing reset for all rte areas ───────────────────── */
.jd-section-content > p:first-child,
.opinion-body > p:first-child,
.qa-body > p:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE: Rich-text content on small screens
════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Tables already set to display:block + overflow in earlier rule,
       this reinforces font size for narrow screens */
    .body-text table, .adc-body-text table,
    .jd-section-content table, .opinion-body table, .qa-body table {
        font-size: .8rem;
    }

    .body-text table th, .adc-body-text table th,
    .jd-section-content table th, .opinion-body table th, .qa-body table th {
        padding: .5rem .65rem;
    }

    .body-text table td, .adc-body-text table td,
    .jd-section-content table td, .opinion-body table td, .qa-body table td {
        padding: .45rem .65rem;
    }

    /* Code blocks */
    .body-text pre, .adc-body-text pre,
    .jd-section-content pre, .opinion-body pre, .qa-body pre {
        padding: .85rem 1rem;
        font-size: .8rem;
    }

    /* Headings inside content */
    .body-text h2, .jd-section-content h2, .opinion-body h2, .qa-body h2 { font-size: 1.15rem; }
    .body-text h3, .jd-section-content h3, .opinion-body h3, .qa-body h3 { font-size: 1rem; }
    .body-text h4, .jd-section-content h4, .opinion-body h4, .qa-body h4 { font-size: .9rem; }

    /* Blockquotes */
    .body-text blockquote, .jd-section-content blockquote,
    .opinion-body blockquote, .qa-body blockquote {
        padding: .7rem 1rem;
        margin: 1em 0;
    }

    /* Lists */
    .body-text ul, .body-text ol,
    .jd-section-content ul, .jd-section-content ol,
    .opinion-body ul, .opinion-body ol,
    .qa-body ul, .qa-body ol {
        margin-left: 1.25em;
    }

    /* cb-block classes */
    .cb-h2 { font-size: 1.15rem; }
    .cb-h3 { font-size: 1rem; }
    .cb-h4 { font-size: .88rem; }

    .cb-table-wrap { font-size: .82rem; }

    /* Images */
    .jd-section-content img, .opinion-body img, .qa-body img { border-radius: 5px; }

}

@media (max-width: 480px) {

    .body-text { font-size: 16px; }

    .adc-body-text { font-size: 16px; }

    .body-text table th, .adc-body-text table th,
    .jd-section-content table th {
        font-size: .72rem;
        padding: .4rem .5rem;
    }

    .body-text table td, .adc-body-text table td,
    .jd-section-content table td {
        padding: .4rem .5rem;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK BUILDER (cb-text / cb-quote) — Internal Tiptap element styles
   These blocks contain full Tiptap HTML so need the same rich-text rules.
════════════════════════════════════════════════════════════════════════════ */

.cb-text p { margin: 0 0 .85em; }
.cb-text p:last-child { margin-bottom: 0; }

.cb-text strong, .cb-quote strong { font-weight: 700; }
.cb-text em, .cb-quote em { font-style: italic; }
.cb-text u, .cb-quote u { text-decoration: underline; text-underline-offset: 3px; }
.cb-text s, .cb-quote s { text-decoration: line-through; opacity: .7; }

.cb-text h2 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.4em 0 .5em;
    color: var(--navy, #0d1b3e);
}
.cb-text h3 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.2em 0 .4em;
    color: var(--navy, #0d1b3e);
}
.cb-text h4 {
    font-size: .9rem;
    font-weight: 700;
    margin: 1em 0 .35em;
    color: var(--navy, #0d1b3e);
}

.cb-text ul, .cb-text ol {
    margin: .75em 0 .75em 1.5em;
    padding: 0;
    line-height: 1.75;
}
.cb-text ul { list-style-type: disc; }
.cb-text ol { list-style-type: decimal; }
.cb-text li { margin-bottom: .4em; }
.cb-text ul ul, .cb-text ol ol { margin: .3em 0 .3em 1.5em; }

.cb-text blockquote {
    border-left: 4px solid var(--crimson, #9b1b30);
    background: #fdf6f6;
    padding: .75rem 1.25rem;
    margin: 1em 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444;
}
.cb-text blockquote p { margin: 0; }

.cb-text a {
    color: var(--crimson, #9b1b30);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cb-text code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .82em;
    background: #f0f2f5;
    color: #c0392b;
    padding: .15em .45em;
    border-radius: 4px;
}

.cb-text pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    font-size: .875rem;
    line-height: 1.65;
}
.cb-text pre code { background: none; color: inherit; padding: 0; }

/* cb-table-wrap paragraph reset */
.cb-table-wrap p { margin: 0; }