/* ==========================================================================
   SCC TIMES — EDITORIAL LEGAL NEWS DESIGN SYSTEM
   Theme: Red (#c00000), White (#ffffff), Black (#111113 / #1a1a1c)
   Content-First Professional Legal News Publication
   ========================================================================== */
:root {
  --black: #111113;
  --ink: #1a1a1c;
  --ink-soft: #2c2c30;
  --white: #ffffff;
  --off: #f7f6f4;
  --band: #f0eee9;
  --line: #dedcd5;
  --line-light: #eceae4;
  --gray: #555459;
  --gray-light: #8e8c92;
  --red: #c00000;
  --red-deep: #8f0000;
  --red-tint: #fef2f2;

  /* Typography */
  --ff-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-head: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --ff-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1200px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.09);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.14);
}

/* ==========================================================================
   DARK MODE
   Dedicated surface/text tokens (kept separate from --black/--white, which
   are already used as fixed dark/light accents elsewhere in this file) so
   toggling theme doesn't invert buttons, tickers, etc. that rely on those.
   ========================================================================== */
:root {
  --surface-page: var(--white);
  --surface-1: #ffffff;
  --surface-2: var(--off);
  --text-1: var(--ink);
  --text-2: var(--gray);
  --divider: var(--line);
}

html[data-theme="dark"] {
  --surface-page: #121214;
  --surface-1: #1a1a1d;
  --surface-2: #202024;
  --text-1: #eeeeef;
  --text-2: #b6b5ba;
  --divider: #302f34;
}

html[data-theme="dark"] body {
  background: var(--surface-page);
  color: var(--text-1);
}

html[data-theme="dark"] header.site,
html[data-theme="dark"] .nav-level,
html[data-theme="dark"] .primary,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-box-popup,
html[data-theme="dark"] .header-search-fixed,
html[data-theme="dark"] .nav-dropdown,
html[data-theme="dark"] .mobile-menu {
  background: var(--surface-1);
  border-color: var(--divider);
}

html[data-theme="dark"] .nav-level li + li,
html[data-theme="dark"] .nav-level-1-inline li + li {
  border-color: var(--divider);
}

html[data-theme="dark"] .nav-level-1-inline a,
html[data-theme="dark"] .nav-level a,
html[data-theme="dark"] .mm-item > a,
html[data-theme="dark"] .mm-item > button {
  color: var(--text-1);
}

html[data-theme="dark"] .nav-dropdown-col a {
  color: var(--text-1);
}

html[data-theme="dark"] .nav-dropdown-promo {
  background: var(--surface-2);
  border-color: var(--divider);
}

html[data-theme="dark"] .nav-dropdown-promo-body {
  background: var(--surface-1);
}

html[data-theme="dark"] .nav-dropdown-promo-title {
  color: var(--text-1);
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .header-search-fixed input {
  color: var(--text-1);
}

html[data-theme="dark"] .search-icon-btn,
html[data-theme="dark"] .theme-toggle-btn {
  color: #000000;
}
html[data-theme="dark"] .hamburger span {
  background: var(--text-1);
}

html[data-theme="dark"] .hamburger {
  background: var(--surface-2);
  border-color: var(--divider);
}

html[data-theme="dark"] .logo {
  background: #fff;
  padding: 4px 10px;
  border-radius: 4px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  overflow-x: clip;
  position: relative;
  top: 0 !important; /* Prevent Google Translate toolbar displacement */
}

/* Hide Google Translate Default Banner & Top Bar */
.goog-te-banner-frame {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

.goog-tooltip, .goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#google_translate_element {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  /* padding: 0 20px; */
}

@media(max-width: 768px) {
  .wrap {
    padding: 0 16px;
  }
}
/* =========================
   MAIN NAVIGATION
========================= */

.primary {
  background: #fff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

/* Both levels */
.nav-level {
  background: #fff;
}

.nav-level .wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================
   LEVEL 1
========================= */

.nav-level-1 {
  border-bottom: 1px solid #eeeeee;
}

.nav-level-1 ul,
.nav-level-2 ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Main menu height */
.nav-level-1 ul {
  min-height: 68px;
}

/* =========================
   LEVEL 2
========================= */

.nav-level-2 ul {
  min-height: 34px;
}

/* =========================
   MENU ITEMS
========================= */

.nav-level li {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-level li + li {
  border-left: 1px solid #e8e8e8;
  height: 20px;
}

/* Links */
.nav-level a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

/* Level 1 links */
.nav-level-1 a {
  height: 68px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Level 2 links */
.nav-level-2 a {
  height: 34px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 500;
}


/* Hover */
.nav-level a:hover {
  color: #d71920;
}

/* =========================
   HOME
========================= */

.home-item {
  border-left: 0 !important;
}

.home-item a {
  width: 60px;
  justify-content: center;
  padding: 0 !important;
}

.home-icon {
  color: #d71920;
  font-size: 27px;
  line-height: 1;
}

/* =========================
   CARET
========================= */

.caret {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -7px;
}

/* Make the first row spread naturally */
.nav-level-1 ul {
  justify-content: flex-start;
}

/* Second row slightly more compact */
.nav-level-2 ul {
  justify-content: flex-start;
}

/* First-level separators */
.nav-level-1 li + li {
  margin-left: 0;
}

/* Second-level separators */
.nav-level-2 li + li {
  margin-left: 0;
}

/* =========================
   LEVEL 1 MEGA DROPDOWN
   (only Level 1 items open a submenu; Level 2 is a plain static row)
========================= */

.nav-level-1 .has-dropdown {
  position: relative;
}

.nav-level-1 .has-dropdown > .nav-dropdown {
  position: absolute;
  /* drop below BOTH the Level 1 row and the Level 2 row, so Level 2
     stays fully visible as a plain static bar underneath it */
  top: calc(100% + 49px);
  left: 0;
  width: max-content;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 1000;
}

/* .nav-level-1 .has-dropdown:hover > .nav-dropdown,
.nav-level-1 .has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
} */

.nav-level-1 .has-dropdown:hover > .nav-dropdown,
.nav-level-1 .has-dropdown:focus-within > .nav-dropdown,
.nav-level-1 .has-dropdown.menu-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* .nav-level-1 .has-dropdown:hover > a .caret,
.nav-level-1 .has-dropdown:focus-within > a .caret {
  transform: rotate(225deg);
  margin-top: 2px;
} */

.nav-level-1 .has-dropdown:hover > a .caret,
.nav-level-1 .has-dropdown:focus-within > a .caret,
.nav-level-1 .has-dropdown.menu-open > a .caret {
  transform: rotate(225deg);
  margin-top: 2px;
}



.nav-dropdown-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: auto;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  transition: color .15s ease, transform .15s ease;
}

.nav-dropdown-col a:hover {
  color: var(--red);
  transform: translateX(2px);
}

.nav-dropdown-col a .sub-chev {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--gray-light);
  border-bottom: 1.5px solid var(--gray-light);
  transform: rotate(-45deg);
  transition: border-color .15s ease;
}

.nav-dropdown-col a:hover .sub-chev {
  border-color: var(--red);
}

/* =========================
   MEGA MENU — FEATURED PROMO CARD
========================= */

.nav-dropdown-promo {
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  width: 220px;
  text-decoration: none;
  color: inherit;
  /* border: 1px solid var(--line-light);
  background: var(--off); */
  transition: box-shadow .15s ease;
}

.nav-dropdown-promo:hover {
  box-shadow: var(--shadow-sm);
}

.nav-dropdown-promo-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  /* Fallback for when aspect-ratio doesn't apply (older/limited renderers) —
     without this the box collapses to 0 height, hiding the image, badge,
     and card background entirely, leaving only bare floating text. */
  min-height: 138px;
  overflow: hidden;
  background: var(--line-light);
}

.nav-dropdown-promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-dropdown-promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-head);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.nav-dropdown-promo-body {
  padding: 12px 14px 14px;
  background: #fff;
}

.nav-dropdown-promo-title {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.32;
  margin-bottom: 6px;
  /* Clamp so a long real headline can never grow the card into a
     wall of text — keeps the image + short-caption look. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-dropdown-promo-desc {
  font-size: 11.5px;
  color: var(--gray);
  line-height: 1.45;
  /* Same clamp for the description line. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================
   BREAKING NEWS MARQUEE (below the menu)
========================= */

.news-ticker {
  background: var(--black);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.ticker-wrap {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 30px;
}

.ticker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 10px;
  margin-right: 16px;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}

.ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.ticker-track {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
  will-change: transform;
}

.news-ticker:hover .ticker-track,
.ticker-track:focus-within {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  color: #f0eee9;
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  padding-right: 48px;
  position: relative;
}

.ticker-item::after {
  content: "•";
  position: absolute;
  right: 20px;
  color: var(--red);
}

.ticker-item:hover {
  color: #fff;
  text-decoration: underline;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .ticker-label span { display: none; }
  .ticker-item { font-size: 11.5px; padding-right: 32px; }
}

/* ==========================================================================
   STANDARDIZED SECTION HEADING + "SEE MORE" COMPONENT PATTERN
   ========================================================================== */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.section-head .htext {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.section-title {
  font-family: var(--ff-title);
  font-weight: 700;
  font-style: italic; /* Major section headings italic */
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--black);
  /* margin: 0; */
  white-space: nowrap;
  margin-top: 2px;
}

.section-title .accent {
  color: var(--red);
  font-style: italic;
}

.section-rule {
  height: 1.5px;
  background: var(--line);
  flex: 1;
  min-width: 20px;
  align-self: center;
  margin-top: 1px;
}

.see-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--red);
  background: transparent;
  color: var(--red);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 15px;
  transition: all 0.22s ease;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}

.see-more:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(192, 0, 0, 0.25);
}

.see-more.sm {
  padding: 5px 12px;
  font-size: 10px;
}

.see-more svg {
  transition: transform 0.2s ease;
}

.see-more:hover svg {
  transform: translateX(3px);
}

/* Sub-section headers */
.sub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--black);
}

.sub-head h3 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  margin: 0;
}

/* ==========================================================================
   UI ELEMENT DIFFERENTIATION: Tags, Category Labels & Buttons
   ========================================================================== */
.ui-tag {
  display: inline-flex;
  align-items: center;
  background: var(--off);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 2px;
  line-height: 1.2;
}

.ui-tag.red {
  background: var(--red-tint);
  border-color: rgba(192, 0, 0, 0.25);
  color: var(--red);
}

.ui-tag.solid-red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.ui-tag.dark {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.ui-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background 0.2s ease, transform 0.15s ease;
  line-height: 1;
}

.ui-btn-primary:hover {
  background: var(--red-deep);
  color: #fff;
}

/* ==========================================================================
   STICKY HEADER CLUSTER: Topbar, Site Header, Compact Nav
   ========================================================================== */

.sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: #fff;

  transform: translate3d(0, 0, 0);
  transition: transform 0.22s ease-out;

  will-change: transform;
  backface-visibility: hidden;

  /* Prevent browser repaint flicker */
  -webkit-transform: translate3d(0, 0, 0);
}

.sticky-wrap.header-hidden {
  transform: translate3d(0, -100%, 0);
}


/* Keep the masthead and both navigation rows aligned with the sticky topbar. */
.sticky-wrap .site {
  transform: none;
  transition: none;
}

.sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.sticky-wrap.stuck {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* Topbar */
.topbar {
  background: var(--black);
  color: #cfcfd2;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar-left span.date-indicator {
  color: #ffffff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-left a {
  color: #ffffff;
  transition: color 0.15s;
}

.topbar-left a:hover {
  color: #fff;
}

/* Write to Us Dropdown (Topbar) */
.write-wrap {
  position: relative;
}

.write-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  color: #ffffff;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s;
}

.write-toggle-btn:hover {
  color: var(--red);
}

.write-caret {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.write-wrap.open .write-caret {
  transform: rotate(180deg);
}

.write-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  width: 240px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 1060;
}

.write-wrap.open .write-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.write-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 2px;
  transition: background 0.15s;
}

.write-item:hover {
  background: var(--off);
}

.write-item-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.write-item:hover .write-item-label {
  color: var(--red);
}

.write-item-email {
  font-size: 11px;
  color: var(--gray);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-right a {
  color: #ffffff;
  transition: color 0.15s;
}

.topbar-right a:hover {
  color: var(--white);
}

.topbar-right a.highlight {
  color: #fd2520;
  font-weight: 600;
}

/* Main Site Header */
header.site {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  flex: 0 0 auto;
}

.logo img {
  height: 36px;
  width: auto;
}

.logo-badge {
  background: var(--red);
  color: #fff;
  font-family: var(--ff-head);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  padding: 7px 10px 5px;
  text-align: center;
  letter-spacing: 0.02em;
}

.logo-badge small {
  display: block;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 1px;
}

.logo-div {
  width: 1px;
  height: 36px;
  background: var(--line);
}

.logo-word {
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--black);
  letter-spacing: 0.02em;
  line-height: 1;
}

.logo-tagline {
  font-family: var(--ff-body);
  font-size: 11px;
  color: var(--gray);
  /* margin-top: 3px; */
  display: block;
  font-weight: 400;
}

/* Search Box */
.search-box-center {
  justify-self: center;
  width: 100%;
  max-width: 440px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--off);
  border: 1px solid var(--line);
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.search-box:focus-within {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08);
}

.search-box input {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  width: 100%;
  font-family: inherit;
  color: var(--ink);
}

.search-box input::placeholder {
  color: var(--gray-light);
}

.search-box svg {
  flex-shrink: 0;
  color: var(--gray);
}

/* =========================
   THEME TOGGLE BUTTON
========================= */

.theme-toggle-btn {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
  background: var(--off);
  color: var(--red);
}

.theme-icon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.theme-icon-moon {
  opacity: 0;
  transform: rotate(-40deg) scale(0.6);
}

[data-theme="dark"] .theme-icon-sun {
  opacity: 0;
  transform: rotate(40deg) scale(0.6);
}

[data-theme="dark"] .theme-icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* =========================
   HEADER SEARCH — icon toggle → expanding bar
========================= */

.header-search {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Fixed, always-visible search bar (replaces the icon-toggle popup) */
.header-search-fixed {
  /* flex: 22 1 220px; */
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--off);
  border: 1px solid var(--line);
  padding: 7px 12px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.header-search-fixed svg {
  flex-shrink: 0;
  color: var(--gray);
}
.promo-card h4{
  color:#ffff;
}
.header-search-fixed input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
}
.row-foot span{
      color: rgb(10, 10, 10);
}

.header-search-fixed input::placeholder {
  color: var(--gray-light);
}

.header-search-fixed:focus-within {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08);
}

@media (max-width: 1100px) {
  .header-search-fixed {
    flex-basis: 160px;
  }
}

.search-icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.search-icon-btn:hover {
  background: var(--off);
  color: var(--red);
}

.header-search.open .search-icon-btn {
  background: var(--off);
  color: var(--red);
}

.search-box-popup {
  position: absolute;
  top: 50%;
  right: 0;
  width: 220px;
  max-width: min(88vw, 420px);
  transform: translateY(-50%) scaleX(0.85);
  transform-origin: right center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1200;
}

.header-search.open .search-box-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scaleX(1);
}
a.highlight {
    font-weight: 600;
    background: var(--red);
    color: #fff;
    height: 18px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    border-radius: 2px;
}
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-logo{
    flex-direction: row;
}
.logo-tagline {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #111111;
    /* margin-top: 5px; */
    white-space: nowrap;
}
.search-close-btn {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--gray-light);
  line-height: 1;
  padding: 4px;
}
.language-bar{
  color: hwb(0 0% 99%) !important;

}
.language-bar:hover{
  color: hwb(0 5% 6%) !important;
  
}

.search-close-btn:hover {
  color: var(--red);
}

@media (max-width: 480px) {
  .search-box-popup {
    width: min(80vw, 300px);
  }
}

/* =========================
   LEVEL 1 MENU — slim, inline in the header
========================= */

.nav-level-1-inline {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.nav-level-1-inline ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 36px;
}

.nav-level-1-inline li {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.nav-level-1-inline li + li {
  border-left: 1px solid #ececec;
}

.nav-level-1-inline a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-level-1-inline a::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-level-1-inline a:hover {
  color: var(--red);
}

.nav-level-1-inline a:hover::after {
  transform: scaleX(1);
}

.nav-level-1-inline .home-item {
  border-left: 0 !important;
}

.nav-level-1-inline .home-item a {
  width: 40px;
  justify-content: center;
  padding: 0 !important;
}

.nav-level-1-inline .home-item a::after {
  display: none;
}

.nav-level-1-inline .home-icon {
  color: var(--red);
  font-size: 20px;
  line-height: 1;
}

/* "More" — three-dot icon trigger instead of a text link */
.nav-level-1-inline .more-item a {
  width: 36px;
  padding: 0 !important;
  justify-content: center;
  color: var(--gray);
}

.nav-level-1-inline .more-item a::after {
  display: none;
}

.nav-level-1-inline .more-item:hover > a,
.nav-level-1-inline .more-item:focus-within > a,
.nav-level-1-inline .more-item.menu-open > a {
  color: var(--red);
}

.nav-dropdown-right {
  left: auto !important;
  right: 0;
}

/* ===== DROPDOWN: anchor + panel ===== */
.nav-level-1-inline .has-dropdown { position: relative; }

.nav-level-1-inline .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--dd-bg, #fffef7);
  border: 1px solid rgba(0, 0, 0, .07);
  border-top: 3px solid var(--red, #c8102e);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28),
              0 4px 10px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.nav-level-1-inline .nav-dropdown.nav-dropdown-right { left: auto; right: 0; }

@keyframes ddIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-level-1-inline .has-dropdown:hover > .nav-dropdown,
.nav-level-1-inline .has-dropdown:focus-within > .nav-dropdown {
  animation: ddIn .18s ease-out;
}

.nav-level-1-inline .caret { transition: transform .2s ease; }
.nav-level-1-inline .has-dropdown:hover > a .caret { transform: rotate(180deg); }

/* ===== COLUMNS ===== */
.nav-dropdown-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, max-content);
  gap: 0 32px;
  padding: 16px 22px 18px;
  text-align: left;
}
.nav-dropdown-col { min-width: 0; }

.nav-dropdown-col + .nav-dropdown-col {
  padding-left: 32px;
  border-left: 1px solid rgba(0, 0, 0, .07);
  margin-left: -16px;
}

/* ===== HEADINGS ===== */
.nav-dropdown-col h6 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red, #c8102e);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.nav-dropdown-col h6::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--red, #c8102e);
}

/* ===== LIST RESET ===== */
.nav-level-1-inline .nav-dropdown-col ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-level-1-inline .nav-dropdown-col li {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
/* anchor for the panel */
.xmore-item { position: relative; }

/* panel */
.xmore-item .xmore-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 440px;
  background: var(--dd-bg, #fffef7) !important;;
  border-top: 3px solid #c00000;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
}
.xmore-item:hover > .xmore-panel,
.xmore-item:focus-within > .xmore-panel { display: block; }

/* two columns */
.xmore-item .xmore-grid {
  display: flex;
  flex-direction: row;
  padding: 12px 0;
}
.xmore-item .xmore-col { flex: 1 1 0; padding: 0 8px; }
.xmore-item .xmore-col + .xmore-col { border-left: 1px solid rgba(0,0,0,.1); }

/* vertical list */
.xmore-item .xmore-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xmore-item .xmore-li {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.xmore-item .xmore-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #222;
  white-space: nowrap;
  text-decoration: none;
  background: none;
}
.xmore-item .xmore-link:hover { color: #c00000; }

/* chevron for items with a submenu */
.xmore-item .xmore-chev::after {
  content: "›";
  margin-left: 16px;
  color: #888;
}

/* mobile */
@media (max-width: 768px) {
  .xmore-item .xmore-panel { position: static; min-width: 0; width: 100%; }
  .xmore-item .xmore-grid { flex-direction: column; }
  .xmore-item .xmore-col + .xmore-col { border-left: 0; border-top: 1px solid rgba(0,0,0,.1); }
}
/* ===== LINKS (same in every dropdown, including the dots menu) ===== */
.nav-level-1-inline .nav-dropdown .nav-dropdown-col li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: auto;
  height: auto;
  margin: 0 -7px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
  color: inherit;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-level-1-inline .nav-dropdown .nav-dropdown-col li a:hover,
.nav-level-1-inline .nav-dropdown .nav-dropdown-col li a:focus-visible {
  background: rgba(200, 16, 46, .07);
  color: var(--red, #c8102e);
  padding-left: 16px;
}

/* ===== ARROW ===== */
.nav-dropdown-col li a .sub-chev {
  flex: none;
  margin-left: auto;
  width: 6px;
  height: 6px;
  background: none;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  transition: transform .15s ease, opacity .15s ease;
}
.nav-dropdown-col li a:hover .sub-chev {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}

/* ===== HIGH COURTS: one heading, 3 columns ===== */
.nav-dropdown-col.cols-3 { grid-column: auto; width: 780px; max-width: 100%; }
.nav-dropdown-col.cols-3 ul { column-count: 3; column-gap: 28px; }
.nav-dropdown-col.cols-3 li { break-inside: avoid; }


.nav-level-1-inline .has-dropdown:hover > a,
.nav-level-1-inline .has-dropdown:focus-within > a,
.nav-level-1-inline .has-dropdown.menu-open > a {
  color: var(--red);
}

.nav-level-1-inline .has-dropdown:hover > a::after,
.nav-level-1-inline .has-dropdown:focus-within > a::after,
.nav-level-1-inline .has-dropdown.menu-open > a::after {
  transform: scaleX(1);
}

.nav-level-1-inline .has-dropdown > .nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: max-content;
  max-width: 775px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  /* padding: 16px 18px; */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  /* Must be higher than nav.primary's z-index (1020), otherwise the
     secondary nav bar underneath paints over the top of this dropdown
     and it looks cut off / floating too low. */
  z-index: 1040;
  border-top: 3px solid var(--red, #c8102e) !important;
}


/* ===== DOTS MENU: force same look as the other dropdowns ===== */
.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown {
  background: var(--dd-bg, #fffef7) !important;
  border: 1px solid rgba(0, 0, 0, .07) !important;
  border-top: 3px solid var(--red, #c8102e) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28),
              0 4px 10px rgba(0, 0, 0, .06) !important;
  left: auto !important;
  right: 0 !important;
  width: max-content !important;
  overflow: hidden;
}

.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown .nav-dropdown-inner {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, max-content);
  gap: 0 32px;
  padding: 16px 22px 18px !important;
}

.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown .nav-dropdown-col h6 {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px !important;
  padding: 0 0 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--red, #c8102e) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown .nav-dropdown-col ul {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown .nav-dropdown-col li {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown .nav-dropdown-col li a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: auto !important;
  height: auto !important;
  margin: 0 -10px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  color: inherit;
  border-radius: 6px;
}
.nav-level-1-inline .has-dropdown.more-item > .nav-dropdown .nav-dropdown-col li a:hover {
  background: rgba(200, 16, 46, .07);
  color: var(--red, #c8102e);
  padding-left: 16px !important;
}
/* ===== HIGH COURTS: word break ===== */
.nav-level-1-inline .nav-dropdown .nav-dropdown-col.cols-3 li a {
  white-space: normal !important;   /* nowrap hata kar wrap allow karta hai */
  word-break: normal;               /* words beech se nahi tootenge */
  overflow-wrap: break-word;        /* sirf bahut lamba word ho to todega */
  hyphens: auto;
}

/* ek court ka naam do columns mein split na ho */
.nav-level-1-inline .nav-dropdown .nav-dropdown-col.cols-3 li {
  break-inside: avoid;
}

.nav-level-1-inline .has-dropdown:hover > .nav-dropdown,
.nav-level-1-inline .has-dropdown:focus-within > .nav-dropdown,
.nav-level-1-inline .has-dropdown.menu-open > .nav-dropdown {
  background: var(--dd-bg, #fffef7) !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-level-1-inline .has-dropdown:hover > a .caret,
.nav-level-1-inline .has-dropdown:focus-within > a .caret,
.nav-level-1-inline .has-dropdown.menu-open > a .caret {
  transform: rotate(225deg);
  margin-top: 2px;
}


/* Header Tools: Connect, Subscribe, Language */
.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connect-wrap {
  position: relative;
}

.connect-btn {
  background: var(--black);
  color: #fff;
  padding: 0px 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  transition: background 0.2s ease;
  border-radius: 2px;
}

.connect-btn:hover {
  background: var(--red);
}

.connect-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  width: 250px;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 1060;
}

.connect-wrap.open .connect-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.connect-pop h6 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}

.connect-social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.connect-social-grid a {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--off);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.18s ease;
}

.connect-social-grid a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.connect-login-link {
  display: block;
  padding: 8px 12px;
  background: var(--off);
  border-left: 3px solid var(--red);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.15s;
}

.connect-login-link:hover {
  background: var(--red-tint);
  color: var(--red);
}

.subscribe-btn {
  background: var(--red);
  color: #fff;
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  border-radius:2px;
}

.subscribe-btn:hover {
  background: var(--red-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* Language Selector (With Active Flag & Google Translate Engine) */
.header-language {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 5px;
  background: #000000;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  transition: border-color 0.2s, background 0.2s;
  border-radius: 2px;
}

.lang-toggle-btn:hover {
  /* border-color: var(--ink);
  background: var(--off); */
}

.lang-caret {
  width: 10px;
  height: 10px;
  margin-left: 2px;
  color: #FFFFFF;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.header-language.open .lang-caret {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 1060;
}

.header-language.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
  border-radius: 2px;
  transition: background 0.15s;
  color:#000000;
}

.flag-icon {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 1.5px;
  /* box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.25); */
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.lang-item:hover {
  background: var(--off);
  color: var(--red);
}

.lang-item.active {
  font-weight: 700;
  color: var(--red);
  background: var(--red-tint);
}

/* ==========================================================================
   PRIMARY NAVIGATION (COMPACT, BALANCED & REFINED MEGA MENUS)
   ========================================================================== */
nav.primary {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1020;
}

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

nav.primary > .wrap > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 0;
}

nav.primary > .wrap > ul > li {
  position: relative;
}

nav.primary > .wrap > ul > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 11px;
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.18s ease;
}

nav.primary > .wrap > ul > li:hover > a,
nav.primary > .wrap > ul > li > a.active {
  color: var(--red);
}

nav.primary > .wrap > ul > li > a::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0px;
  height: 2.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

nav.primary > .wrap > ul > li:hover > a::after,
nav.primary > .wrap > ul > li > a.active::after {
  transform: scaleX(1);
}

nav.primary .caret {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform 0.2s ease;
}

nav.primary > .wrap > ul > li:hover > a .caret {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* Mega Menus */
nav.primary .mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 1050;
  width: max-content;
  min-width: 660px;
  max-width: min(1040px, 95vw);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

nav.primary > .wrap > ul > li:hover > .mega,
nav.primary > .wrap > ul > li:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}



nav.primary .mega.mega-feat {
  grid-template-columns: 180px 200px 270px;
}

.mega-col {
  min-width: 0;
}

.mega-col h5 {
  margin: 0 0 12px;
  color: var(--red);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.mega-col > a {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.15s ease, transform 0.15s ease;
}

.mega-col > a:hover {
  color: var(--red);
  transform: translateX(4px);
}

.mega-col ul.tier2 {
  display: flex;
  flex-direction: column;
}

.mega-col ul.tier2 li {
  position: relative;
}

.mega-col ul.tier2 li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.mega-col ul.tier2 li:hover > a {
  color: var(--red);
}

.mega-col .t3-arrow {
  width: 5px;
  height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.6;
  transition: transform 0.18s ease;
}

.whatsapp-btn {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}

.whatsapp-btn:hover {
  background: #1ebe5d;
  border-color: #1ebe5d;
  color: #fff;
}

.apple-btn {
  background: #111;
  border-color: #111;
  color: #fff;
}

.apple-btn:hover {
  background: #000;
  border-color: #000;
}

.mega-col ul.tier2 li:hover > a .t3-arrow {
  transform: rotate(-45deg) translate(2px, 2px);
  opacity: 1;
}

.mega-col .tier3 {
  position: absolute;
  top: -8px;
  left: calc(100% + 14px);
  z-index: 1060;
  min-width: 190px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  pointer-events: none;
  transition: all 0.18s ease;
}

.mega-col .tier3::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 14px;
}

.mega-col ul.tier2 > li:hover > .tier3 {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.mega-col .tier3 a {
  display: block;
  padding: 5px 0;
  color: var(--gray);
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.15s ease, transform 0.15s ease;
}

.mega-col .tier3 a:hover {
  color: var(--red);
  transform: translateX(3px);
}

.mega-feature-card {
  background: var(--off);
  padding: 12px;
  border: 1px solid var(--line);
}

.mega-feature-card .feat-thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--black);
}

.mega-feature-card .feat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.mega-feature-card .feat-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  text-transform: uppercase;
}

.mega-feature-card h6 {
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 4px;
}

.mega-feature-card p {
  font-size: 11.5px;
  color: var(--gray);
  line-height: 1.4;
  margin: 0;
}

/* Mobile Hamburger Button */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--off);
  border: 1px solid var(--line);
  margin-left: 8px;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 2px 0;
  background: var(--black);
  transition: all 0.25s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Drawer */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(17, 17, 19, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: min(340px, 86vw);
  padding: 20px;
  overflow-y: auto;
  background: #fff;
  box-shadow: -10px 0 35px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.mobile-menu-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.mobile-menu-close button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off);
  border: 1px solid var(--line);
  font-size: 16px;
}

.mm-item > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

.mm-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: var(--off);
}

.mm-item.open > .mm-sub {
  max-height: 800px;
}

.mm-sub a {
  display: block;
  padding: 9px 16px;
  color: var(--gray);
  font-size: 13px;
  border-bottom: 1px dashed var(--line);
}

.mm-sub a:hover {
  color: var(--red);
}

/* ==========================================================================
   HERO SECTION (LEFT SLIDER + RIGHT SIDEBAR & RUNNING AD CAROUSEL)
   ========================================================================== */
.hero-section {
  padding: 24px 0 14px;
}

.hero-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--black);
  aspect-ratio: 10/0;
  border: 1px solid var(--line);
}

.write-toggle-btn:hover{
  color:#fd2520 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 7s ease;
}

.hero-slide.active img {
  transform: scale(1.08);
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(10, 10, 12, 0.95) 0%,
    rgba(10, 10, 12, 0.7) 40%,
    rgba(10, 10, 12, 0.15) 75%,
    transparent 100%
  );
  z-index: 1;
}

.hero-tags {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 20px 24px 0;
}

.hero-text {
  position: relative;
  z-index: 2;
  padding: 12px 24px 22px;
  margin-top: auto;
}

.hero-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 8px;
  max-width: 620px;
  letter-spacing: -0.01em;
}

.hero-desc {
  font-family: var(--ff-serif);
  color: #d8d8dc;
  font-size: 14px;
  line-height: 1.5;
  max-width: 580px;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-meta {
  color: #0a0a0a;
  font-size: 11.5px;
  font-weight: 500;
  margin: 6px 12px 2px;

}

.hero-controls {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: 24px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.hero-dots {
  display: flex;
  gap: 6px;
}

.hero-dots button {
  width: 22px;
  height: 4px;
  background: rgba(255,255,255,0.4);
  transition: all 0.2s ease;
  border-radius: 1px;
}

.hero-dots button.active {
  background: var(--red);
  width: 32px;
}

.hero-arrows {
  /* display: flex; */
  display: none !important;
  gap: 6px;
}

.hero-arrows button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(26, 26, 28, 0.75);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.hero-arrows button:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.05);
}

/* Hero Sidebar */
.hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-card {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--line);
}

.promo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  transition: transform 0.5s ease;
}

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

.promo-card .pc-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  color: #fff;
}

.promo-card .pc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.promo-card h4 {
  font-family: var(--ff-head);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* Running Advertisement Carousel */
.ad-carousel-container {
  position: relative;
  border: 1px solid #8f8c88;
  background: var(--off);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  box-shadow:	0 2px 10px rgba(0,0,0,0.05);
}

.ad-disclaimer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.ad-track-wrapper {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.ad-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateX(12px);
  text-decoration: none;
}

.ad-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}

.ad-thumb {
  width: 122px;
  height: 172px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

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

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

.ad-content h5 {
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 4px;
  transition: color 0.15s;
}

.ad-slide:hover .ad-content h5 {
  color: var(--red);
}

.ad-content p {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-cta-link {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-indicators {
  position: absolute;
  bottom: 6px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 5;
}

.ad-indicators span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  transition: all 0.2s ease;
}

.ad-indicators span.active {
  background: var(--red);
  width: 12px;
  border-radius: 3px;
}

/* ==========================================================================
   APP DOWNLOAD BANNER (BELOW HERO SECTION: APP STORE & GOOGLE PLAY)
   ========================================================================== */
.app-banner-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #111113 0%, #200000 100%);
  color: #fff;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-sm);
  margin-top: 6px;
}

.app-banner-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.app-icon-badge {
  width: 44px;
  height: 44px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
}

.app-banner-title {
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

.app-banner-sub {
  font-size: 12px;
  color: #c5c5ca;
  margin: 0;
}

.app-banner-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.store-badge-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 7px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.store-badge-btn:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(192, 0, 0, 0.35);
  color: #fff;
}

.store-icon {
  flex-shrink: 0;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.store-btn-text small {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfcfd2;
}

.store-btn-text strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   AUTHENTIC SVG SOCIAL SHARE POPOVER
   ========================================================================== */
.share-wrap {
  position: relative;
  display: inline-flex;
}

.share-trigger {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  background: #fff;
  transition: all 0.18s ease;
}

.share-trigger:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-tint);
}

.share-trigger.sm {
  width: 22px;
  height: 22px;
  padding: 0;
}

.share-trigger.sm svg {
  width: 10px;
  height: 10px;
}

.share-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.18s ease;
  z-index: 100;
}

.share-wrap.open .share-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.share-pop a,
.share-pop button {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off);
  color: var(--ink);
  transition: all 0.15s ease;
}

.share-pop a:hover,
.share-pop button:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-1px);
}

.share-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--black);
  color: #fff;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  border-left: 3px solid var(--red);
  box-shadow: var(--shadow-lg);
  transform: translateY(60px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
}

.share-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
/* ==========================================================================
   LATEST STORIES SECTION (ORIGINAL 2x2 GRID)
   ========================================================================== */

.latest-stories-section {
  padding: 34px 0 24px;
  clear: both;
}

.latest-stories-layout {
  display: grid !important;
  grid-template-columns: 1.0fr 1.0fr !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Left Anchor: Featured Story (Image on top, text below) */
.featured-story-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff !important;
  width: 100% !important;
}

.featured-story-thumb {
  width: 100% !important;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
  background: var(--off) !important;
  border: 1px solid var(--line) !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

.featured-story-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.featured-story-card:hover .featured-story-thumb img {
  transform: scale(1.04) !important;
}

.featured-story-body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.featured-story-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.featured-story-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.featured-story-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.24;
  color: var(--black);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  transition: color 0.18s ease;
}

.featured-story-card:hover .featured-story-title {
  color: var(--red);
}

.featured-story-excerpt {
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: #38383c;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-story-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--line-light);
}

.featured-story-byline {
  font-size: 12px;
  color: #000000;
  font-weight: 500;
}

/* Right Column: Vertical Editorial Story List */
.latest-stories-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
}

.latest-story-row {
  display: grid !important;
  grid-template-columns: 105px 1fr !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  transition: background-color 0.15s ease;
}

.latest-story-row:first-child {
  padding-top: 0 !important;
}

.latest-story-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.latest-story-row .row-thumb {
  width: 105px !important;
  height: 74px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  background: var(--off) !important;
  border: 1px solid var(--line) !important;
}

.latest-story-row .row-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.latest-story-row:hover .row-thumb img {
  transform: scale(1.06) !important;
}

.latest-story-row .row-body {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.latest-story-row .row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--gray);
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.latest-story-row .row-meta .cat {
  color: var(--red);
  font-weight: 700;
}

.latest-story-row .row-title {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--black);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
  transition: color 0.18s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-story-row:hover .row-title {
  color: var(--red);
}

.latest-story-row .row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-light);
  font-weight: 500;
}

.stories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.story-card {
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

.story-card .thumb {
  width: 140px;
  height: 100px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--off);
  border: 1px solid var(--line);
}

.story-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.story-card:hover .thumb img {
  transform: scale(1.08);
  opacity: 1;
}

.story-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.story-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.story-tags span {
  border: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  color: var(--gray);
  line-height: 1;
}

.story-tags span.red {
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red);
}

.story-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.34;
  margin-bottom: 8px;
  color: var(--black);
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card:hover .story-title {
  color: var(--red);
}

.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.card-byline {
  font-size: 11.5px;
  color: var(--gray-light);
  font-weight: 500;
}

/* ==========================================================================
   EXPERTS CORNER (COLUMNIST RAIL)
   ========================================================================== */
.band {
  background: var(--band);
  padding: 44px 0;
}

.columnist-rail {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
}

.columnist-feature {
  position: relative;
  display: block;
  aspect-ratio: 5/4;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--line);
  text-decoration: none;
}

.experts-layout {
  display: grid;
  grid-template-columns: 1fr 300px;   /* ad ki width yahan se change karo */
  gap: 24px;
  align-items: stretch;
}

.experts-main { min-width: 0; }

/* sirf is section mein grid 3 columns ka */
.experts-main .law-grid {
  grid-template-columns: repeat(3, 1fr);
}

.ad-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #f5f5f5;
  border: 1px dashed #ccc;
  overflow: hidden;
}
.ad-label {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  padding: 6px 0;
}
.ad-link { display: block; width: 100%; flex: 1; }
.ad-link img { display: block; width: 100%; height: 95%; object-fit: cover;  margin-top:-11px;}

/* tablet / mobile: ad cards ke neeche aa jayega */
@media (max-width: 1024px) {
  .experts-layout { grid-template-columns: 1fr; }
  .experts-main .law-grid { grid-template-columns: repeat(2, 1fr); }
  .ad-card { min-height: 250px; }
}
@media (max-width: 600px) {
  .experts-main .law-grid { grid-template-columns: 1fr; }
}

.columnist-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.columnist-feature:hover img {
  transform: scale(1.05);
}

.columnist-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,10,12,0.94) 0%, rgba(10,10,12,0.2) 60%);
}

.cf-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px;
  z-index: 2;
  color: #fff;
}

.cf-quote {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 0.6;
  color: var(--red);
  margin-bottom: 10px;
  display: block;
}

.cf-body h3 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.28;
  margin-bottom: 10px;
  color: #fff;
  letter-spacing: -0.01em;
}

.cf-byline {
  font-size: 12px;
  color: #d8d8da;
  font-weight: 500;
}

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

.columnist-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  text-decoration: none;
}

.columnist-row:first-child {
  padding-top: 0;
}

.columnist-row:last-child {
  border-bottom: none;
}

.cr-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff;
  background: var(--off);
}

.cr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.columnist-row:hover .cr-avatar img {
  transform: scale(1.12);
}

.cr-title {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 4px;
  transition: color 0.18s;
}

.columnist-row:hover .cr-title {
  color: var(--red);
}

.cr-byline {
  font-size: 11.5px;
  color: var(--gray);
}

/* ==========================================================================
   CONTENT LAYOUT + STICKY ASIDE
   ========================================================================== */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}

.main-col {
  min-width: 0;
}

.main-col .block + .block {
  margin-top: 48px;
}


/* Facebook */
.facebook-btn {
  color: #ffffff !important;
  border-color: #1877F2 !important;
    background-color: #1877F2 !important;
}

.facebook-btn:hover {
  color: #ffffff;
  background-color: #1877F2;
  border-color: #1877F2;
}


/* X */
.x-btn {
  color: #000000;
  border-color: #000000;
  background-color: transparent;
}

.x-btn:hover {
  color: #ffffff;
  background-color: #000000;
  border-color: #000000;
}


/* YouTube */
.youtube-btn {
  color: #ffffff !important;
  border-color: #FF0000 !important;
  background-color: #FF0000 !important;
}

.youtube-btn:hover {
  color: #ffffff;
  background-color: #FF0000;
  border-color: #FF0000;
}
.facebook-btn {
  background: #1877F2;
  color: #fff;
}

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

.youtube-btn {
  background: #FF0000;
  color: #fff;
}

.sticky-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 180px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.aside-block {
  background: var(--off);
  padding: 20px;
  border: 1px solid var(--line);
}

.aside-block h5 {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  /* text-transform: uppercase; */
  /* margin-bottom: 14px; */
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--black);
}

.aside-block h5::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
  margin-bottom: 10px;
  margin-right: 0px;
}

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

.trend-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.15s ease;
}

.trend-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trend-row:hover {
  color: var(--red);
}

.trend-row .tn {
  font-family: var(--ff-head);
  font-weight: 800;
  color: var(--red);
  font-size: 14px;
  flex-shrink: 0;
}

.newsletter-block p {
  font-family: var(--ff-serif);
  font-size: 13px;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 14px;
  font-style: italic;
}

.newsletter-block form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-block input {
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  outline: none;
}

.newsletter-block input:focus {
  border-color: var(--red);
}

/* ==========================================================================
   NEWSLETTER + "WHAT'S NEW TODAY" — SPLIT CARD
   Divided horizontally: Newsletter signup on top, today's highlights below,
   separated by a horizontal rule (each part spans the full card width).
   ========================================================================== */

.today-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
}
.today-slider .today-featured {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin-bottom: 0;
}


/* ===== CARD SHELL ===== */
.newsletter-split {
  display: flex;
  flex-direction: column;
  padding: 0 !important;          /* sections bleed to the card edges */
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.newsletter-half {
  width: 100%;
}

/* ===== 1. SUBSCRIBE PANEL ===== */
.newsletter-half-sub {
  position: relative;
  padding: 22px 20px 18px;
  background: linear-gradient(135deg, #111 0%, #1d1d22 100%);
  color: #fff;
  overflow: hidden;
}

/* decorative red glow */
.newsletter-half-sub::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--red) 0%, transparent 70%);
  opacity: 0.45;
  pointer-events: none;
}

.sub-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08);
}

.newsletter-half-sub h5 {
  position: relative;
  margin: 0 0 6px;
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: #fff;
}

.newsletter-half-sub h5::before {
  display: none;                   /* remove the small red dash */
}

.newsletter-half-sub p {
  position: relative;
  margin: 0 0 14px;
  font-family: var(--ff-serif);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* joined input + button */
.newsletter-half-form {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.newsletter-half-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  color: #111;
  outline: none;
}

.newsletter-half-form input:focus {
  box-shadow: inset 0 0 0 2px var(--red);
}

.newsletter-half-form button {
  flex-shrink: 0;
  border: 0;
  padding: 0 18px;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 0;
  transition: filter 0.2s ease;
}

.newsletter-half-form button:hover {
  filter: brightness(1.15);
}

.sub-points {
  position: relative;
  display: flex;
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.sub-points li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.sub-points li::before {
  content: "✓";
  color: var(--red);
  font-weight: 800;
}

/* ===== 2. WHAT'S NEW TODAY ===== */
.newsletter-half-today {
  padding: 0px 0px 0px;
  background: #fff;
}

.newsletter-half-today h5 {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--black);
}

.newsletter-half-today h5::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
  margin-right: 6px;
}

.today-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.today-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: todayPulse 1.6s ease-out infinite;
}

@keyframes todayPulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* spotlight card */
.today-spotlight {
  margin: -18px 0 0px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.today-spotlight:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.today-spotlight-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.today-spotlight-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.today-spotlight:hover .today-spotlight-link img {
  transform: scale(1.06);
}

/* shine sweep */
.today-spotlight-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: todayShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes todayShine {
  0%, 60% { left: -75%; }
  100%    { left: 130%; }
}

.today-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.today-hover-cta {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.today-spotlight:hover .today-hover-cta {
  opacity: 1;
}

/* bottom action bar (always visible, works on touch) */
.today-spotlight-bar {
  display: flex;
  align-items: stretch;
}

.today-bar-read {
  flex: 1;
  padding: 10px 12px;
  background: var(--black);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.2s ease;
}

.today-bar-read:hover {
  background: var(--red);
}

.today-bar-pdf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  background: #fff;
  color: var(--black);
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 700;
  border-left: 1px solid var(--line);
  transition: background 0.2s ease, color 0.2s ease;
}

.today-bar-pdf:hover {
  background: var(--red);
  color: #fff;
}

.today-list-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
}

.today-list-more svg { transition: transform 0.2s ease; }
.today-list-more:hover { color: var(--red); }
.today-list-more:hover svg { transform: translateX(3px); }

/* ===== RESPONSIVE / ACCESSIBILITY ===== */
@media (max-width: 420px) {
  .newsletter-half-form {
    flex-direction: column;
  }
  .newsletter-half-form button {
    padding: 11px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-live i,
  .today-spotlight-link::before { animation: none; }
  .today-spotlight,
  .today-spotlight-link img { transition: none; }
}

/* ===== COMPACT HEIGHT + FIXES (put at the END of your CSS) ===== */

/* Subscribe panel: icon sits beside the heading instead of above it */
.aside-block.newsletter-split .newsletter-half-sub {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px 18px;
  background: #fff4dc;              /* matches your page; change if needed */
}

.aside-block.newsletter-split .sub-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  margin: 0;
  box-shadow: none;
}

.aside-block.newsletter-split .sub-icon svg {
  width: 17px;
  height: 17px;
  stroke: #fff;                     /* mail icon was not showing */
}

.aside-block.newsletter-split .newsletter-half-sub h5 {
  grid-column: 2;
  margin: 0 0 2px;
  font-size: 14.5px;
  color: var(--black);
}

.aside-block.newsletter-split .newsletter-half-sub p {
  grid-column: 2;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #3a3a3a;
  font-weight: 700;
}

.aside-block.newsletter-split .newsletter-half-form,
.aside-block.newsletter-split .sub-points {
  grid-column: 1 / -1;
}

.aside-block.newsletter-split .newsletter-half-form input {
  padding: 10px 12px;
}

.aside-block.newsletter-split .newsletter-half-form button {
  padding: 0 16px;
}

/* Trust points were invisible (white text on cream) */
.aside-block.newsletter-split .sub-points {
  margin: 8px 0 0;
  gap: 12px;
}

.aside-block.newsletter-split .sub-points li {
  color: #444;
  font-size: 10.5px;
}

/* Smaller red glow so it doesn't add visual weight */
.aside-block.newsletter-split .newsletter-half-sub::before {
  width: 110px;
  height: 110px;
  top: -40px;
  right: -40px;
  opacity: 0.3;
}

/* What's New Today: shorter image and tighter spacing */
.aside-block.newsletter-split .newsletter-half-today {
  /* padding: 12px 16px 12px; */
}

.aside-block.newsletter-split .newsletter-half-today h5 {
  margin-bottom: 8px;
}

.aside-block.newsletter-split .today-spotlight {
  /* margin-bottom: 8px; */
}

.aside-block.newsletter-split .today-spotlight-link {
  aspect-ratio: 2 / 1;              /* was 16 / 10; try 21 / 9 for even shorter */
}

.aside-block.newsletter-split .today-bar-read {
  padding: 8px 12px;
}
.newsletter-split {
  display: flex;
  flex-direction: column;
}

.newsletter-half {
  width: 100%;
}

.newsletter-half h5 {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  color: var(--black);
  margin-bottom: 10px;
}

.newsletter-half h5::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
  margin-right: 6px;
}

.newsletter-half p {
  font-family: var(--ff-serif);
  font-size: 12.5px;
  font-style: italic;
  color: #070708;
  line-height: 1.55;
  margin-bottom: 12px;
}

.newsletter-half-form {
  display: flex;
  flex-direction: row;
  /* gap: 8px; */
}

.newsletter-half-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  outline: none;
}

.newsletter-half-form input:focus {
  border-color: var(--red);
}

.newsletter-half-form button {
  flex-shrink: 0;
}

.newsletter-half-today {
  /* margin-top: 18px; */ 
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* ===== Visible card edge ===== */
.aside-block.newsletter-split {
  background: #fff;
  border: 1px solid #e6d9b8;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Optional: remove the red glow smudge in the top-right corner */
.aside-block.newsletter-split .newsletter-half-sub::before {
  display: none;
}
.today-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.today-list li {
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.today-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.today-list li a {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.15s ease;
}

.today-list li a:hover {
  color: var(--red);
}

.today-list-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
}

.today-list-more svg {
  transition: transform 0.2s ease;
}

.today-list-more:hover {
  color: var(--red);
}

.today-list-more:hover svg {
  transform: translateX(3px);
}

@media (max-width: 420px) {
  .newsletter-half-form {
    flex-direction: column;
  }
}

/* ==========================================================================
   CASE ANALYSES — DOCKET LIST
   ========================================================================== */
.docket-list {
  display: flex;
  flex-direction: column;
}

.docket-row {
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 14px;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s ease;
}

.docket-row:hover {
  background: var(--off);
}

.docket-num {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.docket-thumb {
  width: 70px;
  height: 65px;
  overflow: hidden;
  background: #eee;
}

.docket-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.docket-row:hover .docket-thumb img {
  transform: scale(1.08);
}

.docket-body {
  min-width: 0;
  padding-right: 8px;
}

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

.docket-title {
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  transition: color 0.15s;
}

.docket-row:hover .docket-title {
  color: var(--red);
}

.docket-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--gray);
  font-weight: 500;
}

.docket-author {
  color: var(--gray);
  font-weight: 600;
}

.docket-dot {
  color: var(--line);
  font-size: 10px;
}

.docket-read {
  color: var(--gray-light);
}

.docket-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gray);
  font-size: 11px;
  transition: all 0.15s ease;
}

.docket-row:hover .docket-arrow {
  color: #fff;
  border-color: var(--red);
  background: var(--red);
}
.law-news-see{
  margin-top: 30px !important ;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--red);
  background: transparent;
  color: var(--red);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 15px;
  transition: all 0.22s ease;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
 

}
/* ==========================================================================
   LAW SCHOOL NEWS + ORGANIZATION NEWS — DIGEST PANEL
   ========================================================================== */
.digest-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid var(--divider);
  background: var(--surface-1);
}

.digest-col {
  padding: 22px 26px;
}

.digest-col-alt {
  border-left: 1px solid var(--divider);
  background: var(--surface-2);
}

.digest-subhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--black);
}

.digest-subhead h3 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-1);
  margin: 0;
}

.digest-count {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--gray-light);
}

.digest-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 20px;
  align-items: center;
  column-gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--divider);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.2s ease;
}

.digest-col .digest-row:last-of-type {
  border-bottom: none;
}

.digest-row:hover {
  padding-left: 6px;
}

.digest-media {
  position: relative;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.digest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.digest-row:hover .digest-media img {
  transform: scale(1.07);
}

.digest-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 6px 2px;
  max-width: 100%;
}

.digest-tag-alt {
  background: var(--black);
}

.digest-content {
  min-width: 0;
}

.digest-heading {
  font-family: var(--ff-serif);
  font-size: 12.5px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 6px;
  transition: color 0.15s ease;
}

.digest-row:hover .digest-heading {
  color: var(--red);
}

.digest-context {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.digest-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-light);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}

.digest-row:hover .digest-chevron {
  opacity: 1;
  transform: translateX(0);
  color: var(--red);
}

.digest-promo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding: 20px;
  background: var(--surface-1);
  border: 1px dashed var(--divider);
  text-decoration: none;
}

.digest-promo-label {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
}

.digest-promo h4 {
  font-family: var(--ff-title);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--text-1);
  margin: 0;
}

.digest-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--black);
}

.digest-promo:hover .digest-promo-link {
  color: var(--red);
}

.digest-promo:hover .digest-promo-link svg {
  transform: translateX(3px);
}

.digest-promo-link svg {
  transition: transform 0.2s ease;
}

@media (max-width: 860px) {
  .digest-panel {
    grid-template-columns: 1fr;
  }
  .digest-col-alt {
    border-left: none;
    border-top: 1px solid var(--divider);
  }
}

@media (max-width: 520px) {
  .digest-row {
    grid-template-columns: 60px minmax(0, 1fr) 16px;
  }
  .digest-media {
    width: 60px;
    height: 60px;
  }
  .digest-heading {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   INTERVIEWS — CINEMATIC CAROUSEL
   ========================================================================== */
.interview-scroll-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.interview-scroll-nav button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.18s ease;
}

.interview-scroll-nav button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.interview-scroll {
  overflow: hidden;
  padding-bottom: 12px;
  position: relative;
}

.interview-track {
  display: flex;
  gap: 16px;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.interview-slide {
  flex: 0 0 210px;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  display: block;
  border: 1px solid var(--line);
  text-decoration: none;
}

.interview-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
  filter: grayscale(35%);
}

.interview-slide:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

.interview-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.1) 60%);
}

.is-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
}

.is-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  z-index: 2;
  color: #fff;
}

.is-body h4 {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.28;
  margin: 0;
}
/* ---------- Layout: the two colored strips side by side ---------- */
.ad-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px !important;
  margin-top: 24px;
}


.ad-strip-a, .ad-strip-b {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ad-strip-a:hover, .ad-strip-b:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.2);
}

.ad-strip-a {
  background: linear-gradient(125deg, #7a0000 0%, #c00000 100%);
}

.ad-strip-b {
  background: linear-gradient(125deg, #050505 0%, #232323 100%);
    padding: 16px 24px !important;
}

.ad-strip h4 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  margin: 0;
  padding-right: 18px;
  margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.22);
  white-space: nowrap;
  flex-shrink: 0;
}

.ad-strip p {
  font-size: 12px;
  opacity: 0.9;
  margin: 0;
}

.store-btn-row,
.follow-btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding-left: 30px;
}
.store-btn-row h6 {
    padding-top: 7px;
}
.follow-btn-row h6{
  
    padding-top: 7px;
}
/* ---------- Strip A: App Store / Google Play badges ---------- */
.store-badge-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 7px 16px;
  border-radius: 7px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}

.store-badge-btn:hover {
  transform: translateY(-2px);
}
.store-icon {
  flex-shrink: 0;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.store-btn-text small {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfcfd2;
}

.store-btn-text strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.apple-btn {
  background: #111;
  border-color: #111;
  color: #fff;
}

.store-badge-btn.apple-btn:hover {
  background: #000;
  border-color: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.store-badge-btn.playstore-btn:hover {
  background: #01875f;
  border-color: #01875f;
  box-shadow: 0 6px 16px rgba(1,135,95,0.4);
}

.playstore-btn:hover {
  background: #01875f;
  border-color: #01875f;
}

/* ---------- Strip B: compact follow chips (WhatsApp/Telegram/Instagram/LinkedIn) ---------- */
.follow-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.follow-chip-btn .follow-icon {
  flex-shrink: 0;
}

.follow-chip-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

.follow-chip-btn.whatsapp-btn {
  background: #25D366;
  border-color: #25D366;
}

.follow-chip-btn.whatsapp-btn:hover {
  background: #1ebe5d;
  border-color: #1ebe5d;
}

.follow-chip-btn.telegram-btn {
  background: #229ED9;
  border-color: #229ED9;
}

.follow-chip-btn.telegram-btn:hover {
  background: #1c87ba;
  border-color: #1c87ba;
}

.follow-chip-btn.instagram-btn {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
  background-origin: border-box;
  background-clip: border-box;
  border: 0;                 /* no border, so nothing can show at the edge */
  border-radius: 50%;        /* keep the circle */
  background-repeat: no-repeat;
  overflow: hidden;
}

.promo-card.video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.80) 100%
  );
}


.follow-chip-btn.instagram-btn:hover {
  filter: brightness(1.1);
}

.follow-chip-btn.linkedin-btn {
  background: #0A66C2;
  border-color: #0A66C2;
}

.follow-chip-btn.linkedin-btn:hover {
  background: #08529b;
  border-color: #08529b;
}

/* ---------- Mobile: stack the two strips ---------- */
@media (max-width: 768px) {
  .ad-strip {
    grid-template-columns: 1fr;
  }
}

/* Mid-Page Editorial Ad Strip */
.ad-strip {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr;
  gap: 16px;
  margin-top: 24px;
}

.ad-strip-a, .ad-strip-b {
  padding: 18px 22px;
  color: #fff;
  border: 1px solid var(--line);
}

.ad-strip-a {
  background: linear-gradient(125deg, #7a0000 0%, #c00000 100%);
}

.ad-strip-b {
  background: var(--black);
}

.ad-strip h4 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.ad-strip p {
  font-size: 12px;
  opacity: 0.9;
  margin: 0;
}
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.split-col {
  min-width: 0;
  padding: 0 24px;
}
.split-col:first-child { padding-left: 0; }
.split-col:last-child  {
  padding-right: 0;
  border-left: 1px solid #e3e3e3;   /* divider line between the two sections */
}

/* 2 cards per row inside each half */
.split-col .law-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Tablet / mobile: stack the two sections */
@media (max-width: 1024px) {
  .split-section { grid-template-columns: 1fr; }
  .split-col { padding: 0; }
  .split-col:last-child {
    border-left: 0;
    border-top: 1px solid #e3e3e3;
    margin-top: 32px;
    padding-top: 32px;
  }
}
@media (max-width: 600px) {
  .split-col .law-grid { grid-template-columns: 1fr; }
}

/* Takes the space of the 3 removed columns (works if .footer-main is a grid) */
.footer-products {
  grid-column: span 3;
  min-width: 0;
}

.product-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 12px;
}

/* White tile so white-bg logos look intentional on the dark footer */
.product-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.product-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

/* Tablet / mobile */
@media (max-width: 1024px) {
  .footer-products { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .product-logos { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
   OP. Ed. PERSPECTIVES (HIGH-CONTRAST MAGAZINE EDITORIAL)
   ========================================================================== */
.oped-column {
  display: flex;
  flex-direction: column;
  /* border-top: 2px solid var(--black); */
}

.oped-entry {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.15s ease;
}
span.gt_float_switcher-arrow {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform .2s ease;
}
span.gt_float_switcher:hover {
    transform: rotate(225deg);
    margin-top: 3px;
}
.oped-entry:hover {
  background: rgba(0,0,0,0.015);
}

.oped-entry:last-child {
  border-bottom: none;
}
.mr-list {
    padding-top: 5px;
}
.oped-idx {
  font-family: var(--ff-head);
  font-weight: 900;
  font-size: 20px;
  color: var(--black);
  line-height: 1;
  transition: color 0.18s ease;
}

.oped-entry:hover .oped-idx {
  color: var(--red);
}

.oped-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.32;
  color: var(--black);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
  transition: color 0.18s ease;
}

.oped-entry:hover .oped-title {
  color: var(--red);
}

.oped-excerpt {
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 400;
  color: #333336; /* High contrast readable dark text */
  line-height: 1.6;
  margin-bottom: 10px;
  max-width: 680px;
}

.oped-byline {
  font-size: 11px;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oped-byline::before {
  content: "—";
  color: var(--red);
  font-weight: 900;
}

/* ==========================================================================
   MOST READ + VIDEO DESK
   ========================================================================== */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 36px;
}

.mr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.mr-row:first-child {
  padding-top: 0;
}

.mr-num {
  font-family: var(--ff-head);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--gray-light);
  flex-shrink: 0;
  width: 42px;
  transition: all 0.2s ease;
}

.mr-row:hover .mr-num {
  -webkit-text-stroke: 1.2px var(--red);
  color: var(--red-tint);
}

.mr-thumb {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--off);
}

.mr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mr-row:hover .mr-thumb img {
  transform: scale(1.1);
}

.mr-title {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.15s;
}

.mr-row:hover .mr-title {
  color: var(--red);
}

/* Video Desk Layout */
.video-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.section-head {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.htext {
  flex-shrink: 0;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: #d8d5ce;
}

.see-more {
  flex-shrink: 0;
  margin: 0 !important;
  border-radius: 2px;
}


.video-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
}

.video-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--black);
  border: 1px solid var(--line);
}
.video-main-card {
  height: 100%;
}

.video-main-card .video-thumb {
  aspect-ratio: unset;
  flex: 1 1 auto;
  min-height: 0;
}

.video-main-card .video-main-body {
  flex: 0 0 auto;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  filter: brightness(0.8);
}

.video-card:hover .video-thumb img {
  transform: scale(1.06);
}

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

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--red);
  color: #fff;
}

.play-btn svg {
  margin-left: 2px;
}

.video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(10, 10, 12, 0.85);
  color: #fff;
  font-size: 9.5px;
  padding: 2px 5px;
  font-weight: 600;
}
a.news-card{
  background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.news-card:hover {
    border-color: var(--red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.news-img{
    aspect-ratio: 4 / 3 !important;
    position: relative;
    overflow: hidden;
    background: var(--off);
}
h4.news-title {
font-family: var(--ff-head);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 8px;
    transition: color 0.15s;
    margin-top:10px;
}
span.news-date {
    font-size: 10.5px;
    color: var(--gray-light);
    margin-top: auto;
    font-weight: 600;
    text-transform: uppercase;
}
.news-card .news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.video-cat {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  z-index: 2;
}

.video-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.28;
  margin: 6px 12px 2px;
  color: var(--ink);
  transition: color 0.15s;
}

.video-card:hover .video-title {
  color: var(--red);
}

.video-side .video-title {
  font-size: 13px;
  margin: 6px 12px 2px;
}

/* ==========================================================================
   VIDEO PLAYER POPUP MODAL
   ========================================================================== */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.video-modal-box {
  position: relative;
  background: var(--black);
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 25px 60px rgba(0,0,0,0.6);
  border-top: 3px solid var(--red);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.video-modal-overlay.open .video-modal-box {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 10;
  transition: all 0.2s ease;
}

.video-modal-close:hover {
  background: var(--red);
  transform: scale(1.1);
}

.video-player-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background: #000;
}

.video-player-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal-details {
  padding: 18px 24px;
  background: var(--black);
  color: #fff;
}

.video-modal-cat {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.video-modal-title {
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.video-modal-meta {
  font-size: 12px;
  color: var(--gray-light);
  margin: 0;
}

/* ==========================================================================
   NEWS SECTION — COMPLETE CARD REDESIGN
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.news-card-editorial {
  position: relative;
  aspect-ratio: 4/3.8;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.news-card-editorial img.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  opacity: 0.88;
}

.news-card-editorial:hover img.card-bg {
  transform: scale(1.08);
  opacity: 0.95;
}

.news-card-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(10, 10, 12, 0.96) 0%,
    rgba(10, 10, 12, 0.82) 13%,
    rgba(10, 10, 12, 0.25) 33%,
    rgba(8, 10, 12, 0.1) 51%
  );
  z-index: 1;
  transition: background 0.3s ease;
}

.news-card-editorial:hover::before {
  /* background: linear-gradient(
    0deg,
    rgba(10, 10, 12, 0.98) 0%,
    rgba(10, 10, 12, 0.86) 50%,
    rgba(10, 10, 12, 0.3) 80%,
    rgba(10, 10, 12, 0.15) 100%
  ); */
}

.news-card-editorial .card-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-card-editorial .card-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.news-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 6px;
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.8); */
  transition: color 0.18s ease;
}

.news-card-editorial:hover .news-title {
  /* color: #ff9999; */
}

.news-excerpt {
  font-family: var(--ff-serif);
  font-size: 11.5px;
  color: #e2e2e6;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b0b0b6;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   LEGISLATION UPDATES SECTION
   ========================================================================== */
.legis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.legis-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.legis-card:hover {
  border-color: var(--red);
  background: var(--off);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.legis-thumb {
  width: 120px;
  height: 132px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--off);
  border: 1px solid var(--line);
}
.laww-school img{

  width: 120px;
  height: 168px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--off);
  border: 1px solid var(--line);
  object-fit:cover;
}
.digest-count-see-more {
  margin-left: auto;      /* isse hi right side push hoga */
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.digest-count-see-more:hover {
  color: var(--ink);
  text-decoration: underline;
}
.main-law-body{
  padding-top:10px;
}
.law-subhead{
  padding-top:10px;
}
.legis-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.legis-card:hover .legis-thumb img {
  transform: scale(1.08);
}

.legis-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.legis-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.legis-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 5px;
  transition: color 0.15s;
}

.legis-card:hover .legis-title {
  color: var(--red);
}

.legis-desc {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.45;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.legis-date {
  font-size: 11px;
  color: var(--gray-light);
  margin-top: auto;
  font-weight: 500;
}

/* ==========================================================================
   LAW SCHOOL & ORGANIZATION NEWS — DIGEST PANEL (scoped, safe to edit)
   Reuses the .legis-grid/.legis-card layout but every rule below is scoped
   under .digest-panel so it never affects the Legislation Updates section
   above, which uses the same base classes unscoped.
   ========================================================================== */
.digest-panel .digest-subhead:first-of-type {
  margin-top: 4px;
}

.digest-panel .digest-subhead {
  margin-top: 26px;
}

.digest-panel .legis-grid {
  margin-bottom: 4px;
}

.digest-panel .legis-card {
  background: var(--surface-1, #fff);
}

@media (max-width: 640px) {
  .digest-panel .legis-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LAW SCHOOL NEWS SECTION
   ========================================================================== */
.law-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.law-card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all 0.2s ease;
}

.law-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.law-card .card-img {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: var(--off);
}

.law-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.law-card:hover .card-img img {
  transform: scale(1.08);
}

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

.law-card .card-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
  transition: color 0.15s;
}

.law-card:hover .card-title {
  color: var(--red);
}

.law-card .card-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.law-card .card-meta {
  font-size: 10.5px;
  color: var(--gray-light);
  margin-top: auto;
  font-weight: 600;
  text-transform: uppercase;
}

/* Bottom Feature Ad Banner */
.bottom-ad {
  background: linear-gradient(120deg, #111113 0%, #300000 100%);
  color: #fff;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,0.1);
}

.bottom-ad h4 {
  font-family: var(--ff-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}

.bottom-ad p {
  font-size: 13px;
  color: #d0d0d4;
  margin: 0;
}

.bottom-ad .cta {
  background: var(--red);
  color: #fff;
  padding: 11px 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background 0.2s;
}

.bottom-ad .cta:hover {
  background: var(--red-deep);
  color: #fff;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  background: linear-gradient(135deg, #111113 0%, #200000 100%);
  color: #d3d3d5;
  border-top: 3px solid var(--red);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
  padding: 25px 0 15px;
  border-bottom: 1px solid #3c3c40;
}

.footer-logo .logo-word {
  color: #fff;
}

.footer-desc {
  font-family: var(--ff-serif);
  font-size: 13px;
  color: #eaeaec;
  line-height: 1.7;
  margin: 14px 0 18px;
  max-width: 280px;
}

.footer-newsletter-form {
  display: flex;
  border: 1px solid #4c4c50;
  max-width: 280px;
}

.footer-newsletter-form input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
}

.footer-newsletter-form button {
  background: var(--red);
  color: #fff;
  padding: 0 14px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
}

.footer-newsletter-form button:hover {
  background: var(--red-deep);
}

.footer-col h6 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  position: relative;
  padding-bottom: 6px;
}

.footer-col h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 2px;
  background: var(--red);
}

.footer-col a, .footer-col p {
  display: block;
  font-size: 12.5px;
  color: #eaeaec;
 
  /* padding: 4px 0; */
  transition: color 0.15s, transform 0.15s;
}
.footer-link{
  margin-bottom:none!important;
}
.footer-col a:hover {
  color: var(--red);
  transform: translateX(3px);
}

.footer-social-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.footer-social-row a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #4c4c50;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d3d3d5;
  transition: all 0.2s;
  padding: 0;
}

.footer-social-row a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.footer-app-badges {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.footer-app-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #45454a;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
}

.footer-app-badge:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--red);
  color: #fff;
}

.footer-disclaimer {
  font-size: 13px;
  color: #eaeaec;
  line-height: 1.7;
  padding: 16px 0;
  border-bottom: 1px solid #3c3c40;
}

.footer-bottom {
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-size: 12.5px;
  color: #eaeaec;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   SUBSCRIBE POPUP MODAL
   ========================================================================== */
.subscribe-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(17, 17, 19, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.subscribe-modal-box {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  box-shadow: var(--shadow-lg);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.subscribe-modal-overlay.open .subscribe-modal-box {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ink);
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.modal-header-badge {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.modal-title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--black);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.modal-sub {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 20px;
}

.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.plan-card {
  position: relative;
  border: 1.5px solid var(--line);
  padding: 14px 10px;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.plan-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-card:hover {
  border-color: var(--red);
  background: var(--red-tint);
}

.plan-card.active,
.plan-card:has(input:checked) {
  border-color: var(--red);
  background: var(--red-tint);
  box-shadow: 0 0 0 1px var(--red);
}

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  white-space: nowrap;
}

.plan-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.plan-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.plan-price {
  font-family: var(--ff-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 4px;
}

.plan-price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray);
}

.plan-desc {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.3;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-form input,
.modal-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--off);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}

.modal-form input:focus,
.modal-form select:focus {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08);
}

.modal-submit-btn {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 0;
  margin-top: 4px;
  transition: background 0.2s, transform 0.15s;
}

.modal-submit-btn:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
}

.modal-perks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--gray);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--ff-body);
  font-size: 11.5px;
}

.card-info p {
  margin: 0;
}
/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
  border-radius:5px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
/* Header nav switches to hamburger earlier now that Level-1 lives
   inline in the header row alongside the logo and search — this
   keeps it from ever needing its own inner horizontal scroll. */
@media (max-width: 1100px) {
  .nav-level-1-inline,
  .nav-level-2 {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .search-box-center {
    display: none;
  }
}

@media (max-width: 1080px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-sidebar {
    flex-direction: row;
  }
  .promo-card {
    aspect-ratio: 16/9;
    flex: 1;
  }
  .ad-carousel-container {
    flex: 1;
  }
  .columnist-rail {
    grid-template-columns: 1fr;
  }
  .content-layout {
    grid-template-columns: 1fr;
  }
  .sticky-aside {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }
  .aside-block {
    flex: 1;
    min-width: 260px;
  }
  .split-2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .legis-grid {
    grid-template-columns: 1fr;
  }
  .law-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-logo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .stories-grid {
    grid-template-columns: 1fr;
  }
  .latest-stories-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .video-grid {
    grid-template-columns: 1fr;
  }
  .app-banner-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .app-banner-buttons {
    width: 100%;
    justify-content: flex-start;
  }
  .plan-cards-grid {
    grid-template-columns: 1fr;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .topbar-left {
    display: none;
  }
  .header-row {
    justify-content: space-between;
  }
  .logo img {
    height: 30px;
  }
  .hero-sidebar {
    flex-direction: column;
  }
  .hero-title {
    font-size: 21px;
  }
  .section-title {
    font-size: 21px;
  }
  .featured-story-title {
    font-size: 19px;
  }
  .latest-story-row {
    grid-template-columns: 88px 1fr !important;
    gap: 12px !important;
  }
  .latest-story-row .row-thumb {
    width: 88px !important;
    height: 64px !important;
  }
  .latest-story-row .row-title {
    font-size: 13.5px;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
  .law-grid {
    grid-template-columns: 1fr;
  }
  .footer-main {
    grid-template-columns: 1fr;
  }
  .bottom-ad {
    flex-direction: column;
    align-items: flex-start;
  }
  .ad-strip {
    grid-template-columns: 1fr;
  }
  .docket-row {
    grid-template-columns: 24px 54px minmax(0, 1fr);
    column-gap: 8px;
  }
  .docket-arrow {
    display: none;
  }
  .oped-entry {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }
  .oped-idx {
    font-size: 22px;
  }
  .hero-arrows {
    display: none !important;
  }
}

/* ==========================================================================
   INTERNAL PAGES DESIGN SYSTEM (PRESTIGIOUS LAWFUL AESTHETIC)
   ========================================================================== */

/* --- READING PROGRESS BAR --- */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--red);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* --- 1. BREADCRUMBS --- */
.breadcrumbs-wrap {
  background: #f8f9fa;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  font-size: 12px;
  color: var(--gray);
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs-list a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.breadcrumbs-list a:hover {
  color: var(--red);
}

.breadcrumbs-list .sep {
  color: #bbb;
  font-size: 11px;
}

.breadcrumbs-list .current {
  color: var(--red);
  font-weight: 700;
}

/* --- LEGAL BADGES & LABELS --- */
.legal-seal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #11141d;
  color: #f1f3f7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-left: 3px solid var(--red);
}

.neutral-citation-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f4f5f8;
  border: 1px solid #dcdfe6;
  color: #1a1e28;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 9.5px;
  padding: 3px 9px;
  border-radius: 2px;
}

.neutral-citation-pill strong {
  color: var(--red);
}

.aside-block.precedent-block {
  border: 1px solid var(--line);
  padding: 20px;
  background: #fff;
}

.precedent-heading {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.precedent-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.precedent-item {
  text-decoration: none;
  color: inherit;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.precedent-number {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  flex-shrink: 0;
}

.precedent-content {
  flex: 1;
}

.precedent-title {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.3;
}

.precedent-meta {
  font-size: 11px;
  color: var(--gray);
}


/* --- 2. CATEGORY / COURT ARCHIVE PAGE --- */
.category-hero {
  background: linear-gradient(135deg, #0b0d13 0%, #161a24 100%);
  color: #fff;
  padding: 46px 0 38px;
  border-bottom: 4px solid var(--red);
  position: relative;
}

.category-hero-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.category-tag-pill {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 2px;
}

.category-hero-title {
  font-family: var(--ff-head);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.category-hero-desc {
  font-family: var(--ff-body);
  font-size: 12px;
  color: #c4c8d4;
  max-width: 680px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.category-stats-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #a0a6b5;
  font-weight: 600;
}

.category-stats-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-stats-strip strong {
  color: #fff;
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-follow-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-follow-topic:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.archive-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-tab {
  background: #f8f9fa;
  border: 1px solid var(--line);
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}

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

.archive-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray);
  font-weight: 700;
}

.archive-sort select {
  padding: 6px 12px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: var(--ink);
}

.archive-featured-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 24px;
  margin-bottom: 34px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.archive-featured-card .thumb-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--off);
  border: 1px solid var(--line);
}

.archive-featured-card .thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.archive-featured-card:hover .thumb-wrap img {
  transform: scale(1.04);
}

.archive-featured-card .body-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.archive-featured-card h3 {
  font-family: var(--ff-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--black);
  margin-bottom: 10px;
  transition: color 0.15s;
}

.archive-featured-card:hover h3 {
  color: var(--red);
}

.archive-featured-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 16px;
}

.archive-feed-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.archive-story-item {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  align-items: start;
}

.archive-story-item .thumb {
  aspect-ratio: 16/11;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--off);
}

.archive-story-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.archive-story-item:hover .thumb img {
  transform: scale(1.05);
}

.archive-story-item h4 {
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.34;
  color: var(--black);
  margin-bottom: 8px;
  transition: color 0.15s;
}

.archive-story-item:hover h4 {
  color: var(--red);
}

.archive-story-item p {
  font-size: 13.5px;
  color: #4a4a52;
  line-height: 1.55;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination */
.pagination-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  /* padding-top: 24px; */
  /* border-top: 1px solid var(--line); */
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.15s;
}

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

/* --- 3. ARTICLE SINGLE VIEW (CASE ANALYSIS) --- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 44px;
  align-items: start;
}

.article-header {
  margin-bottom: 24px;
}

.article-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.article-main-title {
  font-family: var(--ff-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.18;
  color: var(--black);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.article-deck {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: #383842;
  margin-bottom: 22px;
  border-left: 3px solid var(--red);
  padding-left: 16px;
}

.article-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
  background: #fafbfc;
  padding: 14px 16px;
}

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

.author-avatar-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.author-name-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--black);
}

.author-name-title a {
  color: inherit;
  text-decoration: none;
}

.author-name-title a:hover {
  color: var(--red);
}

.author-role-sub {
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 2px;
}

.article-reading-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.font-size-ctrl {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.font-size-ctrl button {
  background: #fff;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.font-size-ctrl button:hover {
  background: var(--off);
}

.card-share-btn {
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.card-share-btn:hover {
  color: var(--red);
  background: rgba(204,0,0,0.08);
}

/* --- SHARE DROPDOWN POPOVER --- */
.share-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-top: 3px solid var(--red);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s ease;
}

.share-dropdown-wrap.open .share-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.share-popover-header {
  font-family: var(--ff-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--line-light);
}

.share-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  transition: background 0.15s ease;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.share-popover-item:hover {
  background: #f4f6fa;
  color: var(--red);
}

.share-popover-item svg {
  flex-shrink: 0;
}

/* --- INTERACTIVE AUDIO BRIEFING PLAYER --- */
.article-audio-player {
  background: #0d1117;
  color: #fff;
  border-radius: 4px;
  padding: 8px 3px;
  margin: 22px 0 26px;
  border-left: 4px solid var(--red);
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.audio-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.audio-left-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.audio-play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  flex-shrink: 0;
}

.audio-play-btn:hover {
  background: #e60000;
  transform: scale(1.06);
}

.audio-meta-title {
  font-family: var(--ff-head);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-meta-sub {
  font-size: 11.5px;
  color: #a0a6b5;
}

.audio-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-speed-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.audio-speed-btn:hover {
  background: var(--red);
  border-color: var(--red);
}

.btn-toggle-transcript {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-toggle-transcript:hover {
  background: #fff;
  color: var(--black);
  border-color: #fff;
}

/* Audio Scrubber Track */
.audio-scrubber-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  margin-right: 10px;
  /* margin-top: 12px; */
}

.audio-scrubber-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  transition: width 0.1s linear;
}

.audio-time-pill {
  font-size: 11px;
  font-family: var(--ff-head);
  font-weight: 700;
  color: #c4c8d4;
  white-space: nowrap;
}

/* --- AUDIO TRANSCRIPT ACCORDION / DRAWER --- */
.audio-transcript-drawer {
  display: none;
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: 22px 24px;
  margin-top: -16px;
  margin-bottom: 28px;
  border-radius: 0 0 4px 4px;
}

.audio-transcript-drawer.open {
  display: block;
  animation: fadeIn 0.25s ease-in;
}

.transcript-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 14px;
}

.transcript-header h5 {
  font-family: var(--ff-head);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.transcript-body {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 8px;
}

.transcript-cue {
  display: flex;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 3px;
  transition: background 0.15s ease;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3b3f4d;
  cursor: pointer;
  margin-bottom: 4px;
}

.transcript-cue:hover {
  background: #f0f3f8;
}

.transcript-cue.active {
  background: #fef2f2;
  border-left: 3px solid var(--red);
  color: var(--black);
  font-weight: 600;
}

.transcript-time {
  font-family: var(--ff-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  padding-top: 2px;
}

.article-hero-media {
  margin: 24px 0 28px;
}

.article-hero-media img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid var(--line);
}

.media-caption {
  font-size: 12px;
  color: var(--gray);
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 24px;
  line-height: 1.4;
}

/* Formal Legal Citation Box */
.citation-callout {
  background: #f5f7fa;
  border: 1px solid #dbe0ea;
  border-left: 4px solid #1a2233;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.citation-text {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
}

.citation-text span {
  color: var(--red);
}

.btn-cite-copy {
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 2px;
  transition: all 0.15s;
}

.btn-cite-copy:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

/* Bench Coram Box */
.bench-coram-box {
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-left: 4px solid var(--black);
  padding: 16px 20px;
  margin-bottom: 28px;
}

.bench-coram-box h5 {
  font-family: var(--ff-head);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bench-coram-box p {
  font-family: var(--ff-serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
  line-height: 1.4;
}

.bench-coram-box .meta-sub {
  font-size: 12px;
  color: var(--gray);
}

/* Key Takeaways Box */
.takeaways-box {
  background: #fcf6f6;
  border: 1px solid #f2caca;
  border-left: 4px solid var(--red);
  padding: 24px 26px;
  margin: 28px 0;
}

.takeaways-box h4 {
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.takeaways-box ul {
  margin: 0;
  padding-left: 20px;
}

.takeaways-box li {
  margin-bottom: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #2b2b30;
}

.takeaways-box li:last-child {
  margin-bottom: 0;
}

/* Article Body Typography */
.article-body-content {
  font-family: var(--ff-serif);
  font-size: 14.5px;
  line-height: 1.8;
  color: #222228;
}

.article-body-content > p:first-of-type::first-letter {
  font-family: var(--ff-title);
  font-size: 52px;
  line-height: 42px;
  float: left;
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 0px;
  font-weight: 800;
  color: var(--red);
}

.article-body-content p {
  margin-bottom: 22px;
}

.article-body-content h2,
.article-body-content h3 {
  font-family: var(--ff-head);
  font-weight: 800;
  color: var(--black);
  margin: 36px 0 16px;
  line-height: 1.25;
}

.article-body-content h2 {
  font-size: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.article-body-content h3 {
  font-size: 20px;
}

/* Pull Quotes */
.article-pullquote {
  font-family: var(--ff-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--black);
  padding: 26px 32px;
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  background: #fbfbfb;
  margin: 34px 0;
  text-align: center;
}

.article-pullquote cite {
  display: block;
  font-family: var(--ff-head);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-top: 12px;
}

/* Dissent Box */
.dissent-callout {
  background: #f4f5f8;
  border-left: 4px solid #3e4453;
  padding: 20px 24px;
  margin: 28px 0;
}

.dissent-callout h4 {
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: #242938;
  margin-bottom: 10px;
}

.dissent-callout p {
  font-size: 14px;
  line-height: 1.6;
  color: #3b3f4d;
  margin-bottom: 0;
}
.article-body-content{
  font-size:14.5px!important;
}

/* Article Share Bar */
.article-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 36px 0 28px;
  flex-wrap: wrap;
}

.article-share-bar .share-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.btn-share-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.btn-share-social:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}
a.store-badge-btn.apple-btn:hover{
  background: #01875f;
    border-color: #01875f;
    box-shadow: 0 6px 16px rgba(1, 135, 95, 0.4);
}
.nav-dropdown-col + .nav-dropdown-col {
  border-left: 1px solid #e6e1d8;  /* match the Legislations divider colour */
  padding-left: 24px;
  margin-left: 24px;
}
.nav-dropdown-col li a {
  white-space: normal;      /* nowrap hata kar wrap allow karo */
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
}
.btn-share-social.whatsapp:hover {
  background: #1d9b4c;
  border-color: #22a954;
  color: #fff;
}

.btn-share-social.linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #fff;
}

.btn-share-social.twitter:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* Author Bio Card */
.author-bio-card {
  display: flex;
  gap: 22px;
  background: #f9f9fb;
  border: 1px solid var(--line);
  padding: 26px;
  margin: 44px 0;
  align-items: flex-start;
}

.author-bio-card img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
}

.author-bio-card h4 {
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}

.author-bio-card .bio-role {
  font-size: 12px;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 10px;
}

.author-bio-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #555;
  margin-bottom: 12px;
}

/* Case Quick Facts Sidebar Box */
.article-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 170px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-facts-box {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}

.case-facts-box h5 {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  color: var(--black);
}

.fact-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 12.5px;
}

.fact-row:last-child {
  border-bottom: none;
}

.fact-label {
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.fact-value {
  color: var(--black);
  font-weight: 600;
}

/* --- 4. ABOUT US PAGE --- */
.about-hero-section {
  background: linear-gradient(135deg, #0b0d13 0%, #1a202c 100%);
  color: #fff;
  padding: 64px 0 54px;
  text-align: center;
  border-bottom: 4px solid var(--red);
}

.about-hero-section h1 {
  font-family: var(--ff-head);
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.about-hero-section p {
  font-size: 17px;
  color: #cdd2de;
  max-width: 740px;
  margin: 0 auto;
  line-height: 1.6;
}

.stats-counter-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: -32px auto 48px;
  position: relative;
  z-index: 5;
}

.stat-box {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.stat-number {
  font-family: var(--ff-head);
  font-size: 38px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
  letter-spacing: 0.04em;
}

.masthead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}

.masthead-member {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: transform 0.2s ease;
}

.masthead-member:hover {
  transform: translateY(-3px);
}

.masthead-member img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 3px solid #f4f5f8;
}

.masthead-member h4 {
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}

.masthead-member .member-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
}

.masthead-member p {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* Charter Box */
.ethics-charter-box {
  background: #fff;
  border: 2px solid #d0d5dd;
  padding: 40px;
  margin-top: 50px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.ethics-charter-box::before {
  content: "OFFICIAL EDITORIAL CHARTER";
  position: absolute;
  top: -12px;
  left: 30px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 12px;
}

/* --- 5. CONTACT & SUBMISSIONS PAGE --- */
.submissions-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 36px 0;
}

.submission-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 26px 20px;
  border-top: 3px solid var(--red);
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  transition: transform 0.2s;
}

.submission-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

.submission-card .sub-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.submission-card h4 {
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
}

.submission-card p {
  font-size: 13px;
  color: #5a5a66;
  line-height: 1.5;
  margin-bottom: 16px;
}

.submission-card .sub-email {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  background: #fdf2f2;
  padding: 6px 14px;
  border-radius: 2px;
  transition: all 0.15s;
}

.submission-card .sub-email:hover {
  background: var(--red);
  color: #fff;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  align-items: start;
  margin: 40px 0;
}

.form-box {
  background: #fff;
  border: 1px solid var(--line);
  padding: 34px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}

.form-box h3 {
  font-family: var(--ff-head);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--black);
}

.form-box p {
  font-size: 13.5px;
  color: #5a5a66;
  margin-bottom: 24px;
}

.field-group {
  margin-bottom: 18px;
}

.field-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s;
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--red);
}

.btn-primary-submit {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 2px;
}

.btn-primary-submit:hover {
  background: #a30000;
}

.offices-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.office-item {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.office-item h5 {
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}

.office-item p {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
  margin-bottom: 8px;
}

.office-item .phone {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

/* FAQ Accordion */
.faq-accordion {
  margin-top: 30px;
}

.faq-item {
  border: 1px solid var(--line);
  margin-bottom: 12px;
  background: #fff;
}

.faq-question {
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--ff-head);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-answer {
  padding: 0 18px 14px;
  font-size: 13.5px;
  color: #555;
  line-height: 1.55;
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

/* --- 6. SEARCH PAGE --- */
.search-hero-bar {
  background: #f8f9fa;
  border-bottom: 1px solid var(--line);
  padding: 44px 0 38px;
}

.search-input-container {
  max-width: 820px;
  margin: 0 auto;
}

.search-input-flex {
  display: flex;
  gap: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.search-scope-select {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--red);
  border-right: 1px solid #eee;
  background: #fff;
  color: var(--black);
  outline: none;
  cursor: pointer;
}

.search-input-flex input {
  flex: 1;
  padding: 14px 20px;
  font-size: 16px;
  border: 2px solid var(--red);
  border-left: none;
  border-right: none;
  outline: none;
  font-family: var(--ff-body);
}

.search-input-flex button {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  padding: 0 28px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s;
}

.search-input-flex button:hover {
  background: #a30000;
}

.quick-search-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gray);
}

.quick-search-tags a {
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 2px;
  transition: all 0.15s;
}

.quick-search-tags a:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.search-results-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
  padding: 38px 0 60px;
}

.search-filter-aside {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.search-filter-aside h4 {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.filter-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-light);
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-section h6 {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #444;
  margin-bottom: 8px;
  cursor: pointer;
}

.search-result-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.search-result-item:first-child {
  padding-top: 0;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.search-result-title {
  font-family: var(--ff-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

.search-result-title a {
  color: var(--black);
  text-decoration: none;
  transition: color 0.15s;
}

.search-result-title a:hover {
  color: var(--red);
}

.search-result-snippet {
  font-size: 14px;
  color: #444;
  line-height: 1.55;
  margin-bottom: 10px;
}

.search-result-snippet mark {
  background: #fef08a;
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
}

.search-result-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--gray);
}

/* ==========================================================================
   INTERNAL PAGES COMPLETE STYLING SUITE
   ========================================================================== */

/* --- ABOUT US PAGE --- */
.about-hero {
  background: #0d1117;
  color: #fff;
  padding: 56px 0 46px;
  text-align: center;
  border-bottom: 3px solid var(--red);
}

.about-hero-title {
  font-family: var(--ff-head);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.about-hero-lead {
  font-size: 16px;
  color: #c4c9d6;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.6;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: -28px auto 0;
  position: relative;
  z-index: 5;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 28px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.pillar-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.pillar-card h4 {
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 10px;
}

.pillar-card p {
  font-size: 13.5px;
  color: #4a4d57;
  line-height: 1.6;
  margin: 0;
}

.masthead-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: transform 0.2s ease;
}

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

.masthead-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 3px solid #f0f2f5;
  display: block;
}

.masthead-card h5 {
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 2px;
}

.masthead-card .role {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.masthead-card p {
  font-size: 12.5px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.ethics-box {
  background: #fff;
  border: 1px solid #cfd4dc;
  border-left: 4px solid var(--black);
  padding: 34px 38px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

.ethics-box h3 {
  font-family: var(--ff-head);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--black);
  margin-bottom: 12px;
}

/* --- CONTACT & SUBMISSIONS PAGE --- */
.contact-hero {
  background: #0d1117;
  color: #fff;
  padding: 56px 0 46px;
  text-align: center;
  border-bottom: 3px solid var(--red);
}

.contact-hero-title {
  font-family: var(--ff-head);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.contact-hero-lead {
  font-size: 16px;
  color: #c4c9d6;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.dept-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}

.dept-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 24px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}

.dept-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--red);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.dept-card h4 {
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 8px;
}

.dept-card p {
  font-size: 12.5px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.dept-email-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
}

.contact-form-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 38px;
  align-items: start;
}

.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.contact-form-card h3 {
  font-family: var(--ff-head);
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--black);
}

.form-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.form-input-ctrl {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-family: var(--ff-body);
  color: var(--ink);
  background: #fff;
  margin-bottom: 16px;
}

.form-input-ctrl:focus {
  outline: none;
  border-color: var(--red);
}

.btn-submit-form {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-submit-form:hover {
  background: #a30000;
}

.bureau-item {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--black);
  padding: 16px 20px;
  margin-bottom: 14px;
}

.bureau-item h5 {
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--black);
}

.bureau-item p {
  font-size: 12.5px;
  color: #555;
  line-height: 1.45;
  margin: 0;
}

.bureau-item a {
  color: var(--red);
  text-decoration: none;
  font-weight: 700;
}

.faq-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px 22px;
}

/* --- SEARCH PAGE --- */
.search-hero {
  background: #0d1117;
  color: #fff;
  padding: 48px 0 42px;
  text-align: center;
  border-bottom: 3px solid var(--red);
}

.search-hero-title {
  font-family: var(--ff-head);
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.search-hero-lead {
  font-size: 15px;
  color: #c4c9d6;
  max-width: 740px;
  margin: 0 auto 26px;
  line-height: 1.5;
}

.search-main-form {
  display: flex;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

.search-main-input {
  flex: 1;
  padding: 13px 18px;
  font-size: 15px;
  border: 2px solid var(--red);
  border-left: none;
  border-right: none;
  outline: none;
}

.search-main-btn {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  padding: 0 26px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.search-main-btn:hover {
  background: #a30000;
}

.search-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #9aa1b2;
}

.suggest-chip {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 3px 10px;
  color: #fff;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 2px;
  transition: background 0.15s;
}

.suggest-chip:hover {
  background: var(--red);
  border-color: var(--red);
}

.search-facet-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 20px;
}

.facet-group {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-light);
}

.facet-group h6 {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  margin-bottom: 10px;
}

.facet-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #444;
  margin-bottom: 7px;
  cursor: pointer;
}

.facet-checkbox span {
  color: var(--gray);
  font-size: 11px;
  margin-left: auto;
}

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--black);
  margin-bottom: 20px;
  font-size: 13.5px;
}

.res-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.res-title {
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
}

.res-title a {
  color: var(--black);
  text-decoration: none;
}

.res-title a:hover {
  color: var(--red);
}

.res-snippet {
  font-size: 13.5px;
  color: #444;
  line-height: 1.55;
  margin-bottom: 8px;
}

.res-footer-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--gray);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs-wrap {
  background: var(--band);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.breadcrumbs-list li {
  display: inline;
}

.breadcrumbs-list a {
  color: var(--ink);
  transition: color 0.15s;
}

.breadcrumbs-list a:hover {
  color: var(--red);
}

.breadcrumbs-list .sep {
  color: var(--gray-light);
  margin: 0 4px;
}

.breadcrumbs-list .current {
  color: var(--gray);
  font-weight: 600;
}

/* ==========================================================================
   HERO SECTIONS (About, Contact, Article, Category)
   ========================================================================== */
/* .about-hero,
.contact-hero,
.article-hero,
.category-hero {
  background: linear-gradient(135deg, #f7f6f4 0%, #f0eee9 100%);
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
} */

.about-hero,
.contact-hero,
.article-hero,
.category-hero {
  position: relative;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.about-hero::before,
.contact-hero::before,
.article-hero::before,
.category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/lowandorder.jpg") center / cover no-repeat;
  opacity: 0.25; /* adjust opacity */
  z-index: 0;
}

/* Keep the actual content above the background */
.about-hero > *,
.contact-hero > *,
.article-hero > *,
.category-hero > * {
  position: relative;
  z-index: 1;
}


/* .about-hero::before,
.contact-hero::before,
.article-hero::before,
.category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
    url("/assets/breadcrum-image.jpg") center / cover no-repeat;
  z-index: 0;
} */


.about-hero-title,
.contact-hero-title,
.article-hero-title,
.category-hero-title {
  font-family: var(--ff-title);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 12px;
}

.article-hero-title {
  font-size: 28px;
}

.about-hero-lead,
.contact-hero-sub,
.article-hero-sub,
.category-hero-sub {
  font-family: var(--ff-serif);
  font-size: 15px;
  line-height: 1.6;
  color: #ffffff;
  max-width: 700px;
}

.legal-seal-badge {
  display: inline-block;
  background: var(--red-tint);
  color: var(--red);
  padding: 6px 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(192, 0, 0, 0.2);
  border-radius: 3px;
  margin-bottom: 12px;
}

/* ==========================================================================
   ABOUT PAGE STYLES
   ========================================================================== */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* margin-bottom: 48px;
  padding: 30px 0; */
  /* border-top: 1px solid var(--line); */
  /* border-bottom: 1px solid var(--line); */
}

.stat-box {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 6px;
  font-family: var(--ff-head);
}

.stat-label {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  font-weight: 500;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.pillar-card {
  background: var(--off);
  padding: 28px;
  border: 1px solid var(--line);
  text-align: center;
}

.pillar-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.pillar-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--black);
}

.pillar-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #555;
}

.ethics-box {
  background: var(--red-tint);
  border-left: 4px solid var(--red);
  padding: 24px;
  margin-top: 40px;
}

.ethics-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--black);
}

/* ==========================================================================
   CONTACT PAGE STYLES
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.contact-card {
  background: var(--off);
  padding: 24px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
  border-radius: 4px;
}

.contact-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}

.contact-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.contact-card a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-form-box {
  background: var(--off);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.contact-form-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}

.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus,
.contact-form-box select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08);
}

/* ==========================================================================
   AUTHOR PROFILE STYLES
   ========================================================================== */
.author-hero {
  background: linear-gradient(135deg, #111113 0%, #2c2c30 100%);
  color: #fff;
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.author-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.author-stat-item {
  text-align: center;
}

.author-stat-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 4px;
}

.author-stat-label {
  font-size: 12px;
  color: #b0b0b6;
}

/* ==========================================================================
   SEARCH & CATEGORY STYLES
   ========================================================================== */
.search-main-form {
  display: flex;
  gap: 6px;
  margin-bottom: 32px;
}

.search-scope-select,
.search-main-input,
.search-main-btn {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-family: inherit;
}

.search-main-btn {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-main-btn:hover {
  background: var(--red-deep);
}

.search-filters {
  background: var(--off);
  padding: 20px;
  border: 1px solid var(--line);
  margin-bottom: 24px;
}

.filter-group {
  margin-bottom: 20px;
}

.filter-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  color: var(--black);
}

.filter-group input[type="checkbox"] {
  margin-right: 6px;
}

.filter-option {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: #555;
}

.search-results-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}

.search-result {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.search-result:last-child {
  border-bottom: none;
}

.res-date {
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 4px;
  font-weight: 600;
}

.res-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.res-title a {
  color: var(--red);
}

/* ==========================================================================
   SUBSCRIBE MODAL
   ========================================================================== */
.subscribe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.subscribe-modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  max-width: 420px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.subscribe-modal-overlay.open .subscribe-modal-box {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--off);
  border: 1px solid var(--line);
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
}

.modal-close-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.modal-header-badge {
  text-align: center;
  margin-bottom: 20px;
}

.modal-header-badge img {
  max-width: 100px;
  height: auto;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
  color: var(--black);
}

.modal-sub {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 24px;
}

.modal-plan-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.plan-card {
  position: relative;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.plan-card.active {
  border-color: var(--red);
  background: var(--red-tint);
}

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  padding: 3px 10px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px;
  color: var(--black);
}

.plan-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}

.plan-price span {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.modal-form input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.modal-form input:focus {
  outline: none;
  border-color: var(--red);
}

.modal-submit-btn {
  background: var(--red);
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-submit-btn:hover {
  background: var(--red-deep);
}
.social-media-download{
  width: 1210px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;

  
}

/* --- RESPONSIVE MEDIA QUERIES FOR INTERNAL PAGES --- */
@media (max-width: 992px) {
  .archive-featured-card {
    grid-template-columns: 1fr;
  }
  .article-layout {
    grid-template-columns: 1fr;
  }
  .contact-layout,
  .contact-form-layout {
    grid-template-columns: 1fr;
  }
  .about-stats-grid,
  .stats-counter-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .masthead-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dept-cards-grid,
  .submissions-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-results-layout {
    grid-template-columns: 1fr;
  }
  .search-main-form {
    flex-direction: column;
  }
  .search-scope-select,
  .search-main-input,
  .search-main-btn {
    width: 100%;
    border-radius: 0;
  }
  .search-main-btn {
    padding: 12px;
  }
}

@media (max-width: 768px) {
  .about-hero-title,
  .contact-hero-title,
  .search-hero-title {
    font-size: 26px;
  }
  .category-hero-title {
    font-size: 28px;
  }
  .article-main-title {
    font-size: 24px;
  }
  .archive-story-item {
    grid-template-columns: 1fr;
  }
  .about-stats-grid,
  .stats-counter-strip {
    grid-template-columns: 1fr;
  }
  .masthead-grid {
    grid-template-columns: 1fr;
  }
  .dept-cards-grid,
  .submissions-hub-grid {
    grid-template-columns: 1fr;
  }
}

.hero-sidebar > .video-card {
  margin-bottom: 18px;
}


.product-carousel-section {
  width: 100%;
  padding-bottom:25px;
  background: #fff;
}

.product-carousel-container {
  width: 100%;
  max-width: 1210px;
  margin: 0 auto;
}

/* Heading */
.product-carousel-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #222;
  margin: 0 0 30px;
  font-family: var(--ff-title);
}

/* Carousel */
.product-carousel {
  width: 100%;
  overflow: hidden;
}

.product-carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

/* Product box */
.product-logo {
  width: 100px;
height: 90px;
  flex: 0 0 180px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 15px;
  box-sizing: border-box;

  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;

  transition: all 0.3s ease;
}

.product-logo img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-logo:hover {
  transform: translateY(-5px);
  border-color: #ccc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Tablet */
@media (max-width: 1250px) {
  .product-carousel-container {
    max-width: calc(100% - 30px);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .product-carousel-section {
    padding: 30px 0;
  }

  .product-carousel-title {
    font-size: 25px;
    margin-bottom: 20px;
  }

  .product-logo {
    width: 150px;
    height: 85px;
    flex: 0 0 150px;
  }
}



/* ---------- Product carousel ---------- */
.product-carousel-section {
  background: #dee2e6;
  padding: 48px 0 40px;
}
.product-carousel-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.product-carousel-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.product-carousel-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 10px auto 0;
  background: #c8102e;
  border-radius: 2px;
}
.product-carousel {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 24px 0;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: #9f9d98 transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.product-carousel-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: center;
  justify-content: center;
}
.product-carousel .product-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 76px;
  margin-right: 24px;
  padding: 12px 16px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #9f9d989e;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-carousel:focus-visible {
  outline: 3px solid #c8102e;
  outline-offset: 3px;
}
.product-carousel .product-logo:focus-visible {
  outline: 3px solid #c8102e;
  outline-offset: 3px;
}
.product-carousel .product-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(.35);
  opacity: .9;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.product-carousel .product-logo:hover {
  transform: translateY(-4px);
  border-color: #c8102e;
  box-shadow: 0 10px 22px rgba(200, 16, 46, .18);
}
.product-carousel .product-logo:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}
@media (max-width: 600px) {
  .product-carousel .product-logo { width: 120px; height: 62px; margin-right: 16px; padding: 10px 12px; }
  .product-carousel-title { font-size: 22px; }
}
/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(135deg, #140808 0%, #260000 100%);
  border-top: 3px solid #c8102e;
  color: #fff;
  padding: 48px 0 0;
}
.site-footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 36px;
}
.footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 20px;
  padding-bottom: 8px;
  position: relative;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: #c8102e;
}

/* col 1 */
.footer-brand img { display: block; width: 220px; height: auto; margin-bottom: 16px; }
.footer-desc { font-size: 14px; line-height: 1.7; color: #d8d0d0; margin: 0; max-width: 380px; }

/* col 2 */
.footer-sub-item { margin-bottom: 14px; }
.footer-sub-item .head { margin: 0 0 2px; font-size: 12px; color: #a99; text-transform: uppercase; letter-spacing: .6px; }
.footer-sub-item .val  { margin: 0; font-size: 14px; }
.footer-sub-item a, .footer-links a { color: #fff; text-decoration: none; transition: color .2s; }
.footer-sub-item a:hover, .footer-links a:hover { color: #ff6b81; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0; font-size: 14px; }
.footer-social-row { display: flex; gap: 10px; }
.footer-social-row a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: #fff;
  transition: background .2s, border-color .2s, transform .2s;
}
.footer-social-row a:hover { background: #c8102e; border-color: #c8102e; transform: translateY(-2px); }

/* col 3 */
.footer-qr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-qr {
  text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 12px;
  width: 92px;
}
.footer-qr img { display: block; width: 100%; height: auto; background: #fff; border-radius: 8px; padding: 6px; box-sizing: border-box; }
.footer-qr span { display: block; margin-top: 8px; font-size: 12px; color: #e6dede; }

/* bottom */
.footer-disclaimer {
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 22px 16px 8px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #d8d0d0;
}
.footer-bottom {
  padding: 14px 16px 22px !important ;
  text-align: center;
  font-size: 12.5px;
  color: #ffff;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.menu-more {
    position: relative;
}

.menu-more > .nav-dropdown-secondary-more {
    display: none;
}

.menu-more:hover > .nav-dropdown-secondary-more,
.menu-more:focus-within > .nav-dropdown-secondary-more {
    display: block;
}

/* Parent menu item */
nav ul li {
    position: relative;
}

/* Hide dropdown by default */
.nav-dropdown-secondary-more {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 420px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
    z-index: 999;
}

/* Show dropdown on hover */
nav ul li:hover > .nav-dropdown-secondary-more {
    display: block;
}

/* Inner dropdown layout */
.nav-dropdown-secondary-more .nav-dropdown-inner {
    display: flex;
    gap: 30px;
    padding: 20px;
}

/* Two columns */
.nav-dropdown-secondary-more .nav-dropdown-col {
    flex: 1;
}

/* Remove default list styles */
.nav-dropdown-secondary-more ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-dropdown-secondary-more ul li {
    margin: 0;
    padding: 0;
}

/* Dropdown links */
.nav-dropdown-secondary-more ul li a {
    display: block;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

/* Link hover effect */
.nav-dropdown-secondary-more ul li a:hover {
    background: #f5f5f5;
    color: #007bff;
}


/* ==========================================================================
   SCC TIMES — RESPONSIVE LAYER
   Load AFTER style.css:  <link rel="stylesheet" href="responsive.css">
   The desktop layout (above 1300px) is left exactly as designed.
   Breakpoints: 1300 · 1240 · 1080 · 900 · 768 · 720 · 680 · 560 · 520 · 480 · 400
   ========================================================================== */


/* ==========================================================================
   ALWAYS-ON FIXES (any width)
   ========================================================================== */

/* Grid / flex children may shrink instead of pushing the page wider */
.hero-layout > *,
.latest-stories-layout > *,
.latest-stories-columns,
.latest-stories-column,
.split-2 > *,
.content-layout > *,
.experts-layout > *,
.split-section > *,
.footer-grid > * {
  min-width: 0;
}

/* The app / follow strip had a hard-coded 1210px width */
.social-media-download {
  width: min(1210px, calc(100% - 32px));
  max-width: 100%;
}

/* "See More" under Most Read (replaces the old inline 370px margin) */
.see-more.mr-see-more {
  display: flex;
  width: fit-content;
  margin: 10px 0 0 auto !important;
}

/* Keep the product rail spacing consistent with its native horizontal scroll. */
.product-carousel-track {
  gap: 0;
  justify-content: center;
}

/* Mobile drawer (new menu markup) */
.mm-link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
}
.mm-link:hover { color: var(--red); }
.mm-item > button .caret { transition: transform .2s ease; }
.mm-item.open > button .caret { transform: rotate(225deg); }
.mm-item.open > .mm-sub { max-height: 1500px; }   /* High Courts list is long */
.mobile-menu { overscroll-behavior: contain; }


/* ==========================================================================
   ≤ 1300px — compact header (hamburger replaces the inline menu)
   ========================================================================== */
@media (max-width: 1100px) {
  nav.primary { display: none; }                  /* secondary row is hidden here; its links live in the drawer */

  .topbar .wrap { height: 32px; }
  .hamburger { width: 28px; height: 28px; margin-left: 4px; }
  .hamburger span { width: 15px; }

  .header-row { gap: 12px; flex-wrap: nowrap; }
  .header-search-fixed { flex: 1 1 200px; min-width: 0; max-width: 380px; }
}


/* ==========================================================================
   ≤ 1240px — side gutters (the base .wrap padding is commented out)
   !important is needed because several sections carry inline padding.
   ========================================================================== */
@media (max-width: 1240px) {
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ==========================================================================
   ≤ 1080px — tablet
   ========================================================================== */
@media (max-width: 1080px) {

  /* Hero: the carousel had no height once the grid became one column */
  .hero-section { padding-top: 18px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-carousel { aspect-ratio: auto; min-height: 440px; }
  .hero-text { padding-bottom: 44px; }
  .hero-controls {
    right: 50%;
    bottom: 14px;
    transform: translateX(50%);
  }

  .hero-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }
  .hero-sidebar > .video-card { margin-bottom: 0; }
  .promo-card { aspect-ratio: auto; min-height: 250px; }

  /* Main column + sidebar */
  .content-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sticky-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    overflow: visible;
    align-items: start;
  }
  .sticky-aside .aside-block { min-width: 0; flex: none; }
  .sticky-aside .ad-carousel-container { grid-column: 1 / -1; }

  /* Experts Corner: ad drops below the cards, capped width */
  .experts-layout .ad-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Interviews: show 2 cards at a time on tablet (matches the JS visibleCount) */
@media (min-width: 769px) and (max-width: 1080px) {
  .interview-slide { flex: 0 0 calc((100% - 16px) / 2); }
}


/* ==========================================================================
   ≤ 900px — app / follow strip stacks
   ========================================================================== */
@media (max-width: 900px) {
  .ad-strip { grid-template-columns: 1fr; gap: 14px !important; }
  .ad-strip .ad-strip-a,
  .ad-strip .ad-strip-b { padding: 14px 18px !important; }
  .store-btn-row,
  .follow-btn-row { padding-left: 0; }
}


/* ==========================================================================
   ≤ 768px — large phones / small tablets
   ========================================================================== */
@media (max-width: 768px) {
  .band { padding: 32px 0; }
  .latest-stories-section { padding: 24px 0 16px; }
  .split-2 { gap: 28px; }

  /* iOS zooms the page when an input is below 16px */
  .header-search-fixed input,
  .newsletter-half-form input,
  .modal-form input,
  .modal-form select,
  .footer-newsletter-form input { font-size: 16px; }

  /* Video Desk: main video keeps a 16:9 box when the grid is one column */
  .video-main-card .video-thumb { aspect-ratio: 16 / 9; flex: none; }

  /* Interviews: native swipe scrolling instead of arrow buttons */
  .interview-scroll-nav { display: none; }
  .interview-scroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .interview-scroll::-webkit-scrollbar { display: none; }
  .interview-track { transform: none !important; transition: none; }
  .interview-slide { flex: 0 0 min(72%, 280px); scroll-snap-align: start; }
}


/* ==========================================================================
   ≤ 720px — top bar
   ========================================================================== */
@media (max-width: 720px) {
  .topbar-left { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}


/* ==========================================================================
   ≤ 680px — phones
   ========================================================================== */
@media (max-width: 680px) {

  /* Hero */
  .hero-sidebar { grid-template-columns: minmax(0, 1fr); }
  .promo-card { aspect-ratio: 16 / 10; min-height: 0; }
  .hero-carousel { min-height: 460px; }
  .hero-tags { padding: 14px 16px 0; flex-wrap: wrap; }
  .hero-text { padding: 10px 16px 42px; }
  .hero-title { font-size: 20px; }
  .hero-desc { font-size: 13px; -webkit-line-clamp: 3; }
  .hero-foot { gap: 10px; }

  /* Sidebar: single column, ad kept to a sensible width */
  .sticky-aside { grid-template-columns: minmax(0, 1fr); }
  .sticky-aside > .aside-block:first-child {
    width: 100%;
    max-width: 340px;
    justify-self: center;
  }

  .news-card-editorial { aspect-ratio: 4 / 3; }
  .bottom-ad .cta { width: 100%; text-align: center; }
}


/* ==========================================================================
   ≤ 560px
   ========================================================================== */
@media (max-width: 560px) {
  .section-head { gap: 12px; }
  .section-title { font-size: 20px; white-space: normal; }
  .see-more { padding: 6px 11px; }

  .store-btn-row h6,
  .follow-btn-row h6 { width: 100%; padding-top: 0; margin: 0; }

  /* Modals */
  .subscribe-modal-box { padding: 28px 18px 22px; max-height: 92vh; }
  .modal-title { font-size: 18px; }
  .video-modal-overlay { padding: 10px; }
  .video-modal-details { padding: 14px 16px; }
  .video-modal-title { font-size: 15px; }
}


/* ==========================================================================
   ≤ 520px — Connect pop-over spans the screen instead of falling off the left
   ========================================================================== */
@media (max-width: 520px) {
  .topbar { position: relative; }
  .connect-wrap { position: static; }
  .connect-pop {
    top: 100%;
    left: 12px;
    right: 12px;
    width: auto;
    margin-top: 6px;
  }
}


/* ==========================================================================
   ≤ 480px
   ========================================================================== */
@media (max-width: 480px) {
  .logo-tagline { display: none; }               /* no room next to the search bar */
  .section-rule { display: none; }

  .ticker-label { font-size: 10px; padding: 0 7px; margin-right: 10px; }
  .ticker-label svg { display: none; }

  /* Legislation cards: image on top */
  .legis-card { flex-direction: column; }
  .legis-thumb { width: 100%; height: 180px; }
}


/* ==========================================================================
   ≤ 400px — small phones (320–400)
   ========================================================================== */
@media (max-width: 400px) {
  .header-tools { gap: 6px; }
  .subscribe-btn { padding: 0 8px; font-size: 10px; letter-spacing: .03em; }
  .connect-btn { font-size: 11px; }
  .lang-caret { display: none; }

  .hero-title { font-size: 18px; }
  .hero-carousel { min-height: 480px; }
  .footer-qr { width: 84px; }
}


/* ==========================================================================
   FIXES FROM THE DESKTOP / DEVICE REVIEW
   ========================================================================== */

/* "Law Firm News" heading sat directly under the Op-Ed list (no gap) */
.main-col > .section-head { margin-top: 44px; }

/* Hamburger sits on the dark top bar: match it instead of a white box */
@media (max-width: 1300px) {
  .hamburger { background: transparent; border-color: rgba(255, 255, 255, .4); }
  .hamburger span { background: #fff; }
}

/* Video promo card: keep the play button clear of the headline on phones */
@media (max-width: 680px) {
  .promo-card { aspect-ratio: 16 / 12; }
  .promo-card .play-btn { top: 34%; }
}


/* ==========================================================================
   APP / FOLLOW STRIP + NEWSLETTER CARD — all-device pass
   ========================================================================== */

/* Stack earlier: side-by-side halves wrapped badly between ~900 and 1180px */
@media (max-width: 1180px) {
  .ad-strip { grid-template-columns: minmax(0, 1fr); gap: 14px !important; }
  .ad-strip .ad-strip-a,
  .ad-strip .ad-strip-b { padding: 14px 20px !important; }
  .store-btn-row,
  .follow-btn-row { padding-left: 0; flex-wrap: nowrap; }
}

/* Tablet / large phone: keep each row on one line, spaced evenly */
@media (max-width: 768px) {
  .store-btn-row, .follow-btn-row { flex-wrap: wrap; row-gap: 10px; }
  .store-btn-row h6, .follow-btn-row h6 { flex: 0 0 100%; width: 100%; margin: 0; padding-top: 0; }
}

/* Phones: store badges share the row equally, social icons fill one line */
@media (max-width: 560px) {
  .social-media-download { width: calc(100% - 24px); }
  .store-btn-row .store-badge-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .follow-btn-row { display: flex; justify-content: space-between; gap: 6px; }
  .follow-btn-row .follow-chip-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 44px;
    width: auto;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .follow-btn-row .follow-chip-btn svg,
  .follow-btn-row .follow-chip-btn img { width: 18px; height: 18px; flex: none; }
}
@media (max-width: 400px) {
  .store-btn-row { gap: 8px; }
  .store-btn-row .store-badge-btn { padding-left: 8px; padding-right: 8px; transform: none; gap: 6px; }
  .store-btn-row .store-badge-btn * { white-space: nowrap; }
  .store-btn-row .store-badge-btn small, .store-btn-row .store-badge-btn span { font-size: 9px; }
}

/* Newsletter: the stacked Subscribe button collapsed to a thin bar */
@media (max-width: 420px) {
  .newsletter-half-form { gap: 8px; }
  .newsletter-half-form input { min-height: 44px; }
  .aside-block.newsletter-split .newsletter-half-form button,
  .newsletter-half-form button { min-height: 44px; width: 100%; padding: 0 16px; border-radius: 4px; }
}
@media (max-width: 360px) {
  .newsletter-half-sub h5 { font-size: 15px; }
}
@media (max-width: 340px) {
  .follow-btn-row { gap: 4px; }
  .follow-btn-row .follow-chip-btn svg, .follow-btn-row .follow-chip-btn img { width: 14px; height: 14px; }
  .store-btn-row .store-badge-btn { padding-left: 6px; padding-right: 6px; gap: 5px; }
  .store-btn-row .store-badge-btn svg, .store-btn-row .store-badge-btn img { width: 18px; height: 18px; }
}
/* ==========================================================================
   SCC Times — Inner (section) pages · v3  (follows the home page)
   Loaded AFTER style.css. Layout classes are prefixed .ip-.

   TYPOGRAPHY RULE
   Text elements carry the SAME class names as on index.html (row-title,
   card-title, card-desc, row-meta, oped-title, legis-title, aside-block,
   trend-row …) so font family / size / weight come from style.css.
   The small fallbacks below use :where(), i.e. ZERO specificity, so any
   rule from style.css always wins — they only apply if style.css has none.
   ========================================================================== */

.ip-page {
  /* All tokens map to the homepage design system (style.css) */
  --ip-red: var(--red, #c00000);
  --ip-red-deep: var(--red-deep, #8f0000);
  --ip-line: var(--divider, var(--line, #dedcd5));
  --ip-surface: var(--surface-1, #fff);
  --ip-surface-2: var(--surface-2, #f7f6f4);
  --ip-text: var(--text-1, #1a1a1c);
  --ip-muted: var(--text-2, #555459);
  --t1: #111113; --t2: #200000; --ta: #ff5a6e;   /* home dark → deep-red gradient */
  --ip-radius: 2px;                              /* homepage is square-edged/editorial */
  --ip-shadow: var(--shadow-md, 0 10px 28px rgba(0,0,0,.09));
  padding-bottom: 44px;
}
.ip-page a { text-decoration: none; }
.ip-hidden { display: none !important; }

/* ---------- zero-specificity typography fallbacks ---------- */
:where(.ip-page) { font-size: 14px; line-height: 1.55; }
:where(.ip-page) :where(h1, h2, h3, h4, h5) { font-family: var(--ff-head, inherit); font-weight: 700; line-height: 1.3; margin: 0; }
:where(.ip-page) :where(h2) { font-size: 20px; }
:where(.ip-page) :where(h3, h4) { font-size: 15px; }
:where(.ip-page) :where(h5) { font-size: 14.5px; }
:where(.ip-page) :where(p) { font-size: 13px; margin: 0; }
:where(.ip-page) :where(.ip-meta) { font-size: 11.5px; color: var(--ip-muted); }
:where(.ip-page) :where(.ip-tag) { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; background: var(--ip-red); color: #fff; }

.ip-tag { display: inline-block; border-radius: 3px; }
.ip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ip-meta .cat { color: var(--ip-red); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ip-empty { padding: 36px 0; text-align: center; color: var(--ip-muted); }
.ip-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px var(--ff-head, inherit); color: #fff; background: linear-gradient(135deg, var(--t1), var(--ip-red));
}

/* ==========================================================================
   HERO BANNER (behind the breadcrumb)
   ========================================================================== */
.ip-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(118deg, var(--t1) 0%, var(--t2) 100%);
  padding: 30px 0 64px; margin-bottom: -6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
}
.ip-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(520px 260px at 88% 10%, rgba(200,16,46,.55), transparent 62%),
    radial-gradient(460px 260px at 4% 115%, rgba(0,0,0,.45), transparent 62%);
}
.ip-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 95%); mask-image: linear-gradient(to bottom, #000 25%, transparent 95%);
}
.ip-hero .glow { position: absolute; z-index: -1; width: 200px; height: 200px; border-radius: 50%; filter: blur(56px); opacity: .4; background: var(--ip-red); right: 16%; top: -80px; animation: ipGlow 9s ease-in-out infinite; }
.ip-hero .wm { position: absolute; z-index: -1; right: 5%; top: 50%; width: 190px; height: 190px; transform: translateY(-50%); opacity: .12; stroke: #fff; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; animation: ipFloat 11s ease-in-out infinite; }
@keyframes ipFloat { 0%,100% { transform: translateY(-50%) } 50% { transform: translateY(calc(-50% - 10px)) } }
@keyframes ipGlow { 0%,100% { transform: translateY(0) } 50% { transform: translateY(14px) } }

.ip-crumbs {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ip-crumbs a { color: rgba(255,255,255,.85); }
.ip-crumbs a:hover { color: #fff; }
.ip-crumbs .sep { opacity: .55; }
.ip-crumbs .here { color: #fff; }
.ip-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ta); }
.ip-kicker::before { content: ''; width: 28px; height: 2px; background: var(--ta); border-radius: 2px; }
.ip-title { font-family: var(--ff-head, inherit); font-weight: 800; line-height: 1.12; margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 34px); color: #fff; }
.ip-title .accent { color: var(--ta); }
.ip-desc { max-width: 600px; margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.84); }
.ip-hstats { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-hstats span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.16); }
.ip-hstats i { width: 6px; height: 6px; border-radius: 50%; background: var(--ta); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }

/* ==========================================================================
   TOOLBAR
   ========================================================================== */
.ip-body { padding-top: 28px; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ip-chip {
  font: 700 11px/1 var(--ff-body, inherit); letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--ip-radius);
  border: 1px solid var(--ip-line); background: transparent; color: inherit; cursor: pointer; transition: all .18s ease;
}
.ip-chip:hover { border-color: var(--ip-red); color: var(--ip-red); }
.ip-chip.active { background: var(--ip-red); border-color: var(--ip-red); color: #fff; }
.ip-count { font-size: 12px; color: var(--ip-muted); margin: 12px 0 18px; }

/* ==========================================================================
   LAYOUT + SIDEBAR
   ========================================================================== */
.ip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: stretch; }
.ip-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ip-box { border: 1px solid var(--ip-line); border-radius: 10px; padding: 16px; background: var(--ip-surface); }
.ip-adlabel { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ip-muted); text-align: center; }
.ip-ad { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--ip-line); box-shadow: var(--ip-shadow); }
.ip-ad img { display: block; width: 100%; aspect-ratio: 4 / 6; object-fit: cover; transition: transform .5s ease; }
.ip-ad:hover img { transform: scale(1.04); }
.ip-stickywrap { flex: 1; }
.ip-sticky { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 20px; }

.ip-promo { position: relative; overflow: hidden; border-radius: 10px; color: #fff; padding: 20px 18px; background: linear-gradient(150deg, var(--t1), var(--t2)); box-shadow: var(--ip-shadow); }
.ip-promo::before { content: ''; position: absolute; inset: 0; opacity: .25; background: url('assets/ad-engine.jpg') center / cover; mix-blend-mode: soft-light; }
.ip-promo > * { position: relative; }
.ip-promo .lbl { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ta); }
.ip-promo h4 { font-size: 16px; line-height: 1.3; margin: 6px 0 8px; color: #fff; }
.ip-promo p { margin: 0 0 14px; line-height: 1.55; color: rgba(255,255,255,.85); }
.ip-btn { display: inline-block; cursor: pointer; }

/* archives */
.ip-archive form { display: flex; gap: 6px; margin: 10px 0 10px; }
.ip-archive input { flex: 1; min-width: 0; padding: 8px 10px; font: inherit; font-size: 13px; color: inherit; border: 1px solid var(--ip-line); border-radius: 6px; background: transparent; }
.ip-archive input:focus { outline: 2px solid var(--ip-red); outline-offset: 1px; }
.ip-archive form button { width: 36px; border: 0; border-radius: 6px; background: var(--ip-red); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ip-archive details { border-bottom: 1px solid var(--ip-line); }
.ip-archive details:last-of-type { border-bottom: 0; }
.ip-archive summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 10px 2px; font-size: 14px; font-weight: 700; }
.ip-archive summary::-webkit-details-marker { display: none; }
.ip-archive summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-left: 10px; opacity: .6; }
.ip-archive details[open] summary { color: var(--ip-red); }
.ip-archive details[open] summary::after { transform: rotate(-135deg); }
.ip-archive summary span { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ip-muted); }
.ip-archive ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ip-archive li a { display: flex; justify-content: space-between; gap: 6px; padding: 6px 9px; border-radius: 5px; font-size: 12.5px; color: inherit; background: rgba(128,128,128,.09); transition: all .15s ease; }
.ip-archive li a:hover { background: var(--ip-red); color: #fff; }
.ip-archive li a span { opacity: .65; font-size: 11px; }

/* newsletter */
.ip-news { color: #fff; border: 0; background: linear-gradient(145deg, var(--ip-red), #5e0716); position: relative; overflow: hidden; }
.ip-news h5 { color: #fff; margin-bottom: 8px; }
.ip-news p { margin: 0 0 12px; line-height: 1.55; color: rgba(255,255,255,.88); }
.ip-news form { display: flex; flex-direction: column; gap: 8px; }
.ip-news input { padding: 9px 11px; border-radius: 6px; border: 0; font: inherit; font-size: 13px; color: #111; background: #fff; }
.ip-news button { cursor: pointer; background: #111; border-color: #111; }

/* ==========================================================================
   LAYOUT A — Latest Stories
   ========================================================================== */
.ip-lead { position: relative; display: block; border-radius: 12px; overflow: hidden; margin-bottom: 22px; aspect-ratio: 16 / 8.5; color: #fff; background: #111; box-shadow: var(--ip-shadow); }
.ip-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ip-lead:hover img { transform: scale(1.04); }
.ip-lead .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }
.ip-lead .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.ip-lead .badge { align-self: flex-start; display: inline-flex; gap: 7px; align-items: center; }
.ip-lead .badge b { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; background: #fff; color: #111; }
.ip-lead h2 { color: #fff; margin: 0; }
.ip-lead p { max-width: 640px; color: rgba(255,255,255,.85); }
.ip-lead .ip-meta { color: rgba(255,255,255,.75); }

.ip-rows { display: flex; flex-direction: column; }
.ip-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ip-line); color: inherit; }
.ip-row .row-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.ip-row .row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ip-row:hover .row-thumb img { transform: scale(1.06); }
.ip-row .row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ip-row:hover .row-title { color: var(--ip-red); }
.ip-row .ip-ex { color: var(--ip-muted); }

/* ==========================================================================
   LAYOUT B — Case Analysis
   ========================================================================== */
.ip-briefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ip-brief { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 14px; color: inherit; overflow: hidden; border: 1px solid var(--ip-line); border-top: 3px solid var(--ip-red); border-radius: 10px; background: var(--ip-surface); transition: transform .2s ease, box-shadow .2s ease; }
.ip-brief:hover { transform: translateY(-3px); box-shadow: var(--ip-shadow); }
.ip-brief .pic { position: relative; margin: 0 -16px; aspect-ratio: 16 / 9; overflow: hidden; }
.ip-brief .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ip-brief:hover .pic img { transform: scale(1.06); }
.ip-brief .pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); }
.ip-brief .pic .ip-tag { position: absolute; left: 12px; top: 12px; z-index: 2; }
.ip-brief .pic .no { position: absolute; right: 14px; bottom: 6px; z-index: 2; font: 800 24px/1 var(--ff-head, inherit); color: #fff; }
.ip-brief:hover .row-title { color: var(--ip-red); }
.ip-brief .inbrief { padding: 9px 11px; border-left: 3px solid var(--ip-red); border-radius: 0 6px 6px 0; background: rgba(128,128,128,.09); }
.ip-brief .inbrief b { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ip-red); margin-bottom: 3px; }
.ip-brief .inbrief p { color: var(--ip-muted); }
.ip-brief .foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ip-line); }

/* ==========================================================================
   LAYOUT C — Legislation (timeline)
   ========================================================================== */
.ip-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.ip-tl::before { content: ''; position: absolute; left: 31px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--ip-red), var(--ip-line)); }
.ip-tl > li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding-bottom: 18px; }
.ip-tl .node { position: relative; z-index: 1; }
.ip-tl .disc { width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--t1); color: #fff; border: 3px solid var(--ip-red); line-height: 1; }
.ip-tl .disc b { font: 800 19px var(--ff-head, inherit); }
.ip-tl .disc span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-top: 2px; }
.ip-tlcard { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; padding: 14px 16px; color: inherit; border: 1px solid var(--ip-line); border-radius: 10px; background: var(--ip-surface); transition: transform .2s ease, box-shadow .2s ease; }
.ip-tlcard::before { content: ''; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--ip-surface); border-left: 1px solid var(--ip-line); border-bottom: 1px solid var(--ip-line); }
.ip-tlcard:hover { transform: translateX(3px); box-shadow: var(--ip-shadow); }
.ip-tlcard .pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.ip-tlcard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ip-tlcard:hover .pic img { transform: scale(1.07); }
.ip-tlcard .tb { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ip-tlcard .row1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ip-tlcard .status { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ip-red); display: inline-flex; align-items: center; gap: 5px; }
.ip-tlcard .status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ip-red); }
.ip-tlcard:hover .legis-title { color: var(--ip-red); }

/* ==========================================================================
   LAYOUT D — Experts Corner
   ========================================================================== */
.ip-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ip-person { display: flex; flex-direction: column; gap: 11px; padding: 0 0 14px; color: inherit; border: 1px solid var(--ip-line); border-radius: 12px; background: var(--ip-surface); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.ip-person:hover { transform: translateY(-3px); box-shadow: var(--ip-shadow); }
.ip-person > :not(.pic) { margin-left: 16px; margin-right: 16px; }
.ip-person .pic { aspect-ratio: 16 / 9; overflow: hidden; }
.ip-person .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ip-person:hover .pic img { transform: scale(1.06); }
.ip-person .who { display: flex; align-items: center; gap: 11px; }
.ip-person .who .card-info { min-width: 0; }
.ip-person:hover .card-title { color: var(--ip-red); }
.ip-person .cta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ip-line); display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--ip-red); }

/* ==========================================================================
   LAYOUT E — Events & Collaborations
   ========================================================================== */
.ip-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ip-event { display: flex; flex-direction: column; color: inherit; border: 1px solid var(--ip-line); border-radius: 12px; overflow: hidden; background: var(--ip-surface); transition: transform .2s ease, box-shadow .2s ease; }
.ip-event:hover { transform: translateY(-3px); box-shadow: var(--ip-shadow); }
.ip-event .pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ip-event .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ip-event:hover .pic img { transform: scale(1.06); }
.ip-event .date { position: absolute; left: 12px; top: 12px; min-width: 48px; padding: 7px 9px; text-align: center; line-height: 1; border-radius: 8px; background: #fff; color: #111; box-shadow: 0 5px 14px rgba(0,0,0,.25); }
.ip-event .date b { display: block; font: 800 18px var(--ff-head, inherit); color: var(--ip-red); }
.ip-event .date span { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ip-event .pic .ip-tag { position: absolute; right: 12px; top: 12px; }
.ip-event .b { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; flex: 1; }
.ip-event:hover .card-title { color: var(--ip-red); }
.ip-event .foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ip-line); display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; }
.ip-event .go { font-weight: 700; color: var(--ip-red); }

/* ==========================================================================
   LAYOUT F — Law School News
   ========================================================================== */
.ip-hlist { display: flex; flex-direction: column; gap: 14px; }
.ip-hcard { position: relative; display: grid; grid-template-columns: 180px 1fr; color: inherit; overflow: hidden; border: 1px solid var(--ip-line); border-radius: 10px; background: var(--ip-surface); transition: transform .2s ease, box-shadow .2s ease; }
.ip-hcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ip-red); z-index: 2; }
.ip-hcard:hover { transform: translateX(4px); box-shadow: var(--ip-shadow); }
.ip-hcard .pic { overflow: hidden; min-height: 120px; }
.ip-hcard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ip-hcard:hover .pic img { transform: scale(1.07); }
.ip-hcard .b { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.ip-hcard:hover .card-title { color: var(--ip-red); }

/* ==========================================================================
   LAYOUT G — Op-Eds
   ========================================================================== */
.ip-ops { display: flex; flex-direction: column; }
.ip-op { display: grid; grid-template-columns: 52px 1fr 170px; gap: 16px; padding: 20px 0; color: inherit; border-bottom: 1px solid var(--ip-line); }
.ip-op:first-child { padding-top: 0; }
.ip-op .oped-idx { align-self: start; }
.ip-op .mid { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ip-op:hover .oped-title { color: var(--ip-red); }
.ip-op .lede { padding-left: 12px; border-left: 3px solid var(--ip-red); font-style: italic; color: var(--ip-muted); }
.ip-op .by { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ip-op .by .more { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ip-red); white-space: nowrap; }
.ip-op .thumb { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; align-self: start; }
.ip-op .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ip-op:hover .thumb img { transform: scale(1.07); }

/* ==========================================================================
   LAYOUT H — Interviews
   ========================================================================== */
.ip-vidlead { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 8.5; margin-bottom: 20px; color: #fff; background: #111; box-shadow: var(--ip-shadow); }
.ip-vidgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ip-vid { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 4.6; color: #fff; background: #111; }
.ip-vid img, .ip-vidlead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ip-vid:hover img, .ip-vidlead:hover img { transform: scale(1.06); }
.ip-vid::after, .ip-vidlead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 62%, transparent 100%); }
.ip-vid .ip-tag, .ip-vidlead .ip-tag { position: absolute; left: 12px; top: 12px; z-index: 2; }
.ip-vid .play, .ip-vidlead .play { position: absolute; z-index: 2; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: all .2s ease; }
.ip-vid:hover .play, .ip-vidlead:hover .play { background: var(--ip-red); border-color: var(--ip-red); transform: translate(-50%, -50%) scale(1.08); }
.ip-vid .dur, .ip-vidlead .dur { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.7); font-size: 11px; font-weight: 600; }
.ip-vid .body, .ip-vidlead .body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 16px; }
.ip-vid h3, .ip-vidlead h3 { color: #fff; margin: 0 0 6px; }
.ip-vid .ip-meta, .ip-vidlead .ip-meta { color: rgba(255,255,255,.75); }

/* ==========================================================================
   PAGER + ARCHIVE BAND
   ========================================================================== */
.ip-pager { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 30px; flex-wrap: wrap; }
.ip-pager a, .ip-pager span { min-width: 34px; height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ip-line); border-radius: 6px; color: inherit; font-size: 13px; font-weight: 600; transition: all .15s ease; }
.ip-pager a:hover { border-color: var(--ip-red); color: var(--ip-red); }
.ip-pager .current { background: var(--ip-red); border-color: var(--ip-red); color: #fff; }
.ip-pager .gap { border: 0; }

.ip-archband { position: relative; overflow: hidden; margin-top: 44px; padding: 28px 30px; border-radius: 14px; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; background: linear-gradient(120deg, var(--t1), var(--t2)); }
.ip-archband::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 220px at 100% 0%, rgba(200,16,46,.55), transparent 65%); }
.ip-archband > * { position: relative; }
.ip-archband .k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ta); }
.ip-archband h3 { font-size: clamp(17px, 2vw, 21px); margin: 6px 0 6px; color: #fff; }
.ip-archband p { max-width: 500px; line-height: 1.55; color: rgba(255,255,255,.82); }
.ip-years { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; max-width: 340px; }
.ip-years a { padding: 8px 13px; border-radius: 6px; font-weight: 700; font-size: 12.5px; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); transition: all .15s ease; }
.ip-years a:hover { background: var(--ip-red); border-color: var(--ip-red); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .ip-layout { grid-template-columns: 1fr; }
  .ip-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ip-sticky, .ip-stickywrap { position: static; display: contents; }
  .ip-hero .wm { opacity: .07; right: -30px; }
  .ip-archband { grid-template-columns: 1fr; }
  .ip-years { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .ip-hero { padding: 24px 0 56px; }
  .ip-hero .wm { display: none; }
  .ip-aside { grid-template-columns: 1fr; }
  .ip-lead .txt { padding: 14px; }
  .ip-lead p { display: none; }
  .ip-row { grid-template-columns: 110px 1fr; gap: 12px; }
  .ip-row .ip-ex { display: none; }
  .ip-briefs, .ip-people, .ip-events, .ip-vidgrid { grid-template-columns: 1fr; }
  .ip-hcard { grid-template-columns: 1fr; }
  .ip-hcard .pic { aspect-ratio: 16 / 9; }
  .ip-op { grid-template-columns: 34px 1fr; gap: 10px; }
  .ip-op .thumb { grid-column: 2; aspect-ratio: 16 / 9; }
  .ip-tl::before { left: 23px; }
  .ip-tl > li { grid-template-columns: 46px 1fr; gap: 8px; }
  .ip-tl .disc { width: 44px; height: 44px; border-width: 2px; }
  .ip-tl .disc b { font-size: 14px; }
  .ip-tl .disc span { font-size: 8px; }
  .ip-tlcard { grid-template-columns: 90px 1fr; gap: 10px; padding: 10px; }
  .ip-tlcard::before { display: none; }
  .ip-archband { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-hero .glow, .ip-hero .wm { animation: none; }
  .ip-page * { transition: none !important; }
}

/* ---------- zero-specificity fallbacks for home-class text (style.css wins when it has a rule) ---------- */
:where(.ip-op) :where(.oped-idx) { font-family: var(--ff-head, inherit); font-size: 24px; font-weight: 800; line-height: 1; color: var(--ip-red); }
:where(.ip-op) :where(.oped-byline) { font-size: 12px; color: var(--ip-muted); }
:where(.ip-page) :where(.legis-date, .card-meta) { font-size: 11.5px; color: var(--ip-muted); }
:where(.ip-page) :where(.card-firm) { font-size: 11.5px; color: var(--ip-muted); }
:where(.ip-page) :where(.card-author) { font-size: 13px; font-weight: 700; }
:where(.ip-page) :where(.trend-row) { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; line-height: 1.4; color: inherit; border-bottom: 1px solid var(--ip-line); }
:where(.ip-page) :where(.trend-row .tn) { font-weight: 800; color: var(--ip-red); min-width: 22px; }

/* (global !important font-size overrides removed — they leaked to the whole site;
   sizes are now scoped to .ip-page in the alignment layer below) */

/* ==========================================================================
   HOMEPAGE ALIGNMENT LAYER
   Everything below only restyles — it reuses homepage tokens/patterns:
   Playfair italic section titles, red hairline accents, square cards with
   1px border + red hover, uppercase 11px "see more"-style buttons.
   ========================================================================== */

/* ---- Typography ---- */
.ip-page { font-family: var(--ff-body); color: var(--ip-text); }
.ip-page .card-title, .ip-page .row-title { font-size: 15px !important; }
.ip-page .row-title { font-family: var(--ff-head); font-weight: 700; line-height: 1.35; color: var(--ip-text); transition: color .18s ease; }
.ip-page .card-desc { font-family: var(--ff-body); font-size: 12.5px; line-height: 1.55; color: var(--ip-muted); }

/* ---- Hero banner ---- */
.ip-hero { background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 100%); border-bottom: 3px solid var(--ip-red); clip-path: none; padding: 30px 0 38px; margin-bottom: 0; }
.ip-hero .glow { opacity: .28; }
.ip-hero .wrap { padding-left: 16px; padding-right: 16px; }
.ip-crumbs { border-radius: var(--ip-radius); background: rgba(255,255,255,.08); }
.ip-title { font-family: var(--ff-title); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.01em; }
.ip-title .accent { font-style: italic; }
.ip-desc { font-family: var(--ff-serif); font-size: 15px; }
.ip-hstats span { border-radius: var(--ip-radius); background: rgba(255,255,255,.08); letter-spacing: .02em; }

/* ---- Section heading (matches .section-head on home) ---- */
.ip-body .section-head { margin-bottom: 16px; }
.ip-body .section-title { font-size: 23px; }

/* ---- Filter chips ---- */
.ip-chips { gap: 8px; }
.ip-chip { background: var(--ip-surface); color: var(--ip-text); border-color: var(--ip-line); }
.ip-chip:hover { background: var(--red-tint, #fef2f2); }
html[data-theme="dark"] .ip-chip:hover { background: var(--surface-2); }
.ip-chip.active { box-shadow: 0 4px 12px rgba(192,0,0,.22); }
.ip-count { font-weight: 600; letter-spacing: .02em; }

/* ---- Brief cards ---- */
.ip-brief { background: var(--ip-surface); border: 1px solid var(--ip-line); border-top: 3px solid var(--ip-red); border-radius: var(--ip-radius); gap: 12px; padding: 0 0 0; }
.ip-brief:hover { transform: translateY(-3px); border-color: var(--ip-red); box-shadow: var(--ip-shadow); }
.ip-brief .pic { margin: 0; }
.ip-brief .pic .no { font-family: var(--ff-title); font-style: italic; font-size: 26px; opacity: .95; }
.ip-brief > .row-title, .ip-brief > .inbrief, .ip-brief > .foot { margin-left: 16px; margin-right: 16px; }
.ip-brief .inbrief { background: var(--ip-surface-2); border-left: 3px solid var(--ip-red); border-radius: 0; }
.ip-brief .inbrief b { font-family: var(--ff-body); letter-spacing: .12em; }
.ip-brief .foot { margin-bottom: 14px; padding-top: 10px; border-top: 1px solid var(--ip-line); border-style: solid none none; font-size: 11px; }
.ip-brief .foot span, .ip-page .row-foot span { color: var(--ip-muted); font-weight: 500; }
.ip-brief .foot span:first-child { color: var(--ip-text); font-weight: 700; }
.ip-brief .foot span + span::before { content: "•"; color: var(--ip-red); margin-right: 8px; }

/* ---- Sidebar boxes ---- */
.ip-box, .ip-ad, .ip-promo { border-radius: var(--ip-radius); }
.ip-box { background: var(--ip-surface-2); border: 1px solid var(--ip-line); padding: 18px; }
.ip-box h5 { font-family: var(--ff-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ip-box h5::before { margin-bottom: 0; }
.ip-ad img { aspect-ratio: 5 / 8; }
.ip-ad { box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }

.ip-archive input { border-radius: var(--ip-radius); background: var(--ip-surface); }
.ip-archive form button { border-radius: var(--ip-radius); }
.ip-archive li a { border-radius: var(--ip-radius); background: var(--ip-surface); border: 1px solid var(--ip-line); }
.ip-archive li a:hover { border-color: var(--ip-red); }

.ip-news { background: linear-gradient(135deg, var(--t1) 0%, #1d1d22 100%); }
.ip-news::before { content: ""; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--ip-red), transparent 70%); opacity: .4; pointer-events: none; }
.ip-news > * { position: relative; }
.ip-news h5 { font-family: var(--ff-serif); font-size: 16px; text-transform: none; letter-spacing: 0; }
.ip-news h5::before { display: none; }
.ip-news p { font-family: var(--ff-serif); font-style: italic; }
.ip-news input { border-radius: var(--ip-radius); }
.ip-news button { background: var(--ip-red); border-color: var(--ip-red); }
.ip-news button:hover { background: var(--ip-red-deep); }

.ip-page .trend-row { border-color: var(--ip-line); font-weight: 500; }
.ip-page .trend-row:hover { color: var(--ip-red); }
.ip-page .trend-row .tn { font-family: var(--ff-head); }
.ip-promo { background: linear-gradient(135deg, var(--t1), var(--t2)); }
.ip-promo h4 { font-family: var(--ff-title); font-style: italic; }
.ip-promo .ip-btn { border-radius: var(--ip-radius); }

/* ---- Pagination (same look as .page-btn) ---- */
.ip-pager a, .ip-pager span { background: var(--ip-surface); border-radius: var(--ip-radius); height: 38px; min-width: 38px; }
.ip-pager .current { box-shadow: 0 4px 12px rgba(192,0,0,.22); }
.ip-pager .gap { background: none; }

/* ---- Archive band ---- */
.ip-archband { border-radius: var(--ip-radius); background: linear-gradient(135deg, var(--t1), var(--t2)); border-top: 3px solid var(--ip-red); }
.ip-archband h3 { font-family: var(--ff-title); font-style: italic; }
.ip-years a { border-radius: var(--ip-radius); }

/* ---- Accessibility / polish ---- */
.ip-page :focus-visible { outline: 2px solid var(--ip-red); outline-offset: 2px; }
.ip-page img { background: var(--ip-surface-2); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .ip-ad img { aspect-ratio: 16 / 9; }
  .ip-body { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 720px) {
  .ip-hero { padding: 22px 0 28px; }
  .ip-title { font-size: 26px; }
  .ip-desc { font-size: 14px; }
  .ip-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .ip-chips::-webkit-scrollbar { display: none; }
  .ip-chip { flex: 0 0 auto; }
  .ip-brief .pic { aspect-ratio: 16 / 10; }
  .ip-body .section-title { font-size: 20px; }
  .ip-pager a, .ip-pager span { height: 36px; min-width: 36px; }
}
/* ==========================================================================
   ARTICLE / DETAIL PAGE  (.ip-article)
   Reuses the article components in style.css (article-layout, takeaways-box,
   citation-callout, bench-coram-box, case-facts-box …) and aligns them with
   the homepage look: square edges, red hairlines, Playfair headings, dark mode.
   ========================================================================== */
.ip-article { padding-bottom: 56px; }
.ip-article .ip-body { padding-top: 30px; }
.article-layout { gap: 40px; }
.article-main { min-width: 0; }

/* breadcrumb strip */
.breadcrumbs-wrap { background: var(--surface-2, #f7f6f4); border-bottom: 1px solid var(--divider, #dedcd5); }
.breadcrumbs-list a, .breadcrumbs-list .current { color: var(--text-1, #1a1a1c); }
.breadcrumbs-list .current { color: var(--red); max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* header */
.ip-article .article-main-title { font-family: var(--ff-head); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text-1); }
.article-title-heading{
   font-size:20px;
}
.ip-article .article-deck { font-family: var(--ff-body); font-style: normal; font-size: 16px; color: var(--text-2); border-left: 3px solid var(--red); }
.ip-article .legal-seal-badge { background: var(--black); color: #fff; border: 0; border-left: 3px solid var(--red); border-radius: 0; margin: 0; padding: 5px 10px; }
.ip-article .article-meta-row { background: var(--surface-2); border-color: var(--divider); border-radius: 0; }
.ip-article .author-name-title, .ip-article .author-name-title a { color: var(--text-1); }
.ip-article .author-role-sub { color: var(--text-2); }
.ip-article .font-size-ctrl { border-radius: 2px; border-color: var(--divider); }
.ip-article .font-size-ctrl button { background: var(--surface-1); color: var(--text-1); }
.ip-article .font-size-ctrl button:hover { background: var(--red); color: #fff; }
.ip-article .card-share-btn { color: var(--text-2); width: 34px; height: 34px; border: 1px solid var(--divider); border-radius: 2px; background: var(--surface-1); }
.ip-article .card-share-btn:hover { color: #fff; background: var(--red); border-color: var(--red); }
.ip-article .share-popover { background: var(--surface-1); border-color: var(--divider); border-top-color: var(--red); border-radius: 0 0 2px 2px; }
.ip-article .share-popover-item { color: var(--text-1); font-family: inherit; }
.ip-article .share-popover-item:hover { background: var(--surface-2); color: var(--red); }

/* hero image */
.article-hero-media { margin: 22px 0 0; }
.article-hero-media img { border-radius: 0; border: 1px solid var(--divider); }
.media-caption { color: var(--text-2); border-bottom-color: var(--divider); font-style: italic; }

/* citation / bench / takeaways */
.citation-callout, .bench-coram-box { background: var(--surface-2); border-color: var(--divider); border-radius: 0; }
.citation-text, .bench-coram-box p { color: var(--text-1); }
.bench-coram-box h5, .bench-coram-box .meta-sub { color: var(--text-2); }
.btn-cite-copy { background: var(--surface-1); color: var(--text-1); border-color: var(--divider); font-family: inherit; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.btn-cite-copy:hover { background: var(--red); border-color: var(--red); color: #fff; }
.takeaways-box { background: var(--red-tint); border-radius: 0; }
.takeaways-box h4 { font-family: var(--ff-body); }
.takeaways-box li { color: var(--text-1); }
html[data-theme="dark"] .takeaways-box { background: rgba(192,0,0,.12); border-color: rgba(192,0,0,.35); }

/* body copy */
.ip-article .article-body-content { font-family: var(--ff-body); color: var(--text-1); line-height: 1.85; }
.ip-article .article-body-content h2 { font-family: var(--ff-head); font-style: normal; font-weight: 700; font-size: 23px; border-bottom: 1.5px solid var(--divider); color: var(--text-1); }
.ip-article .article-pullquote { background: var(--surface-2); color: var(--text-1); border-radius: 0; font-family: var(--ff-serif); }
.ip-article .dissent-callout { background: var(--surface-2); border-left-color: var(--black); border-radius: 0; }
html[data-theme="dark"] .ip-article .dissent-callout { border-left-color: var(--text-2); }
.ip-article .dissent-callout h4, .ip-article .dissent-callout p { color: var(--text-1); }

/* share bar + author */
.article-share-bar { border-color: var(--divider); }
.article-share-bar .share-label { color: var(--text-1); }
.btn-share-social { background: var(--surface-1); color: var(--text-1); border-color: var(--divider); font-family: inherit; }
.author-bio-card { background: var(--surface-2); border-color: var(--divider); border-radius: 0; align-items: center; }
.author-bio-card h4 { color: var(--text-1); font-family: var(--ff-head); }
.author-bio-card p { color: var(--text-2); }
.author-bio-card .see-more { display: inline-flex; }

/* sidebar */
.article-aside { top: 150px; gap: 20px; }
.case-facts-box { background: var(--surface-1); border-color: var(--divider); border-top-color: var(--red); border-radius: 0; }
.case-facts-box h5 { color: var(--text-1); border-bottom-color: var(--divider); font-family: var(--ff-body); }
.fact-row { border-bottom-color: var(--divider); }
.fact-value { color: var(--text-1); }
.article-aside .ip-box { border-radius: 0; }

/* related */
.ip-related { margin-top: 44px; }
.ip-related .ip-briefs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ip-related .ip-brief .pic { aspect-ratio: 16 / 10; }
.ip-related .ip-brief .row-title { font-size: 14px !important; }
.ip-related .ip-brief .foot { margin-top: auto; }

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .article-aside .ip-adwrap { grid-column: 1 / -1; }
  .ip-related .ip-briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-related .ip-brief:nth-child(3) { display: none; }
  .ip-article .ip-body { padding-left: 16px; padding-right: 16px; }
  .breadcrumbs-wrap .wrap { padding: 0 16px; }
}
@media (max-width: 720px) {
  .article-aside { grid-template-columns: 1fr; }
  .ip-related .ip-briefs { grid-template-columns: 1fr; }
  .ip-related .ip-brief:nth-child(3) { display: flex; }
  .ip-article .article-main-title { font-size: 24px; }
  .ip-article .article-deck { font-size: 14.5px; }
  .article-meta-row { flex-direction: column; align-items: flex-start; }
  .author-bio-card { flex-direction: column; align-items: flex-start; }
  .citation-callout { flex-direction: column; align-items: flex-start; }
  .ip-article .article-body-content h2 { font-size: 20px; }
  .ip-article .article-pullquote { padding: 20px 16px; }
  .breadcrumbs-list .current { max-width: 24ch; }
}
@media print {
  .sticky-wrap, .topbar, .news-ticker, .article-aside, .article-share-bar, .ip-related, .article-reading-tools, .product-carousel-section, .site-footer, .reading-progress-bar { display: none !important; }
  .article-layout { display: block; }
}

/* ==========================================================================
   INTERVIEWS LISTING  (.ip-vid / .ip-vidlead) — homepage video-card language:
   thumbnail with red play button, white card body underneath, square edges.
   ========================================================================== */
.ip-vidlead, .ip-vid { border-radius: var(--ip-radius); }

/* ---- Featured lead ---- */
.ip-vidlead { aspect-ratio: 16 / 8; margin-bottom: 24px; border-bottom: 3px solid var(--ip-red); box-shadow: var(--ip-shadow); }
.ip-vidlead::after { background: linear-gradient(to top, rgba(10,10,12,.94) 0%, rgba(10,10,12,.45) 45%, rgba(10,10,12,.05) 100%); }
.ip-vidlead .body { padding: 22px 26px; max-width: 760px; }
.ip-vidlead h3.video-title { font-family: var(--ff-title); font-weight: 700; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.25; margin: 0 0 8px; color: #fff; }
.ip-vidlead .play { width: 64px; height: 64px; top: 46%; background: var(--ip-red); border: 3px solid rgba(255,255,255,.85); box-shadow: 0 8px 24px rgba(0,0,0,.4); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ip-vidlead .play svg { width: 24px; height: 24px; margin-left: 3px; }
.ip-vidlead:hover .play { background: var(--ip-red-deep); border-color: #fff; transform: translate(-50%, -50%) scale(1.08); }
.ip-vidlead .dur, .ip-vid .dur { border-radius: 2px; background:#f2f2f2; font-size: 10.5px; letter-spacing: .04em; padding: 3px 7px; }
.ip-vidlead .ip-tag, .ip-vid .ip-tag { border-radius: 2px; }
.ip-vidlead .ip-meta, .ip-vid .ip-meta { color: rgba(255,255,255,.8); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Grid cards: thumbnail on top, text underneath ---- */
.ip-vidgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ip-vid { display: flex; flex-direction: column; aspect-ratio: auto; color: inherit; background: var(--ip-surface); border: 1px solid var(--ip-line); border-top: 3px solid var(--ip-red); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ip-vid::after { display: none; }
.ip-vid:hover { transform: translateY(-3px); border-color: var(--ip-red); box-shadow: var(--ip-shadow); }
.ip-vid .thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.ip-vid .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: transform .5s ease, filter .3s ease; }
.ip-vid:hover .thumb img { transform: scale(1.06); filter: brightness(.95); }
.ip-vid .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,12,.55), transparent 55%); }
.ip-vid .thumb .ip-tag { left: 12px; top: 12px; z-index: 2; }
.ip-vid .thumb .dur { right: 12px; top: 12px; bottom: auto; z-index: 2; }
.ip-vid .thumb .play { top: 50%; width: 46px; height: 46px; z-index: 2; background: var(--ip-red); border: 2px solid rgba(255,255,255,.9); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.ip-vid .thumb .play svg { margin-left: 2px; }
.ip-vid:hover .thumb .play { background: var(--ip-red-deep); transform: translate(-50%, -50%) scale(1.1); }
.ip-vid .body { position: static; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ip-vid h3.video-title { font-family: var(--ff-head); font-weight: 700; font-size: 15px; line-height: 1.38; margin: 0; color: var(--ip-text); transition: color .18s ease; }
.ip-vid:hover h3.video-title { color: var(--ip-red); }
.ip-vid .ip-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ip-line); color: var(--ip-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ip-vid .ip-meta .date::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--ip-red); vertical-align: 1px; }

@media (max-width: 720px) {
  .ip-vidlead { aspect-ratio: 4 / 3.4; }
  .ip-vidlead .body { padding: 16px; }
  .ip-vidlead .play { width: 52px; height: 52px; }
  .ip-vidgrid { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   COMMENTS  (.comments-section) — article detail page
   Square edges, red hairlines, theme tokens so dark mode works automatically.
   ========================================================================== */
.comments-section { margin-top: 44px; }
.comments-section .comments-count { font-family: var(--ff-body); font-style: normal; font-size: 15px; font-weight: 600; color: var(--text-2); }

.comment-form { padding: 20px; background: var(--surface-2); border: 1px solid var(--divider); border-top: 3px solid var(--red); border-radius: 0; }
.comment-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.comment-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.comment-field label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-1); }
.comment-field label small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.comment-field .req { color: var(--red); }
.comment-field input, .comment-field textarea, .comment-toolbar select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text-1);
  background: var(--surface-1); border: 1px solid var(--divider); border-radius: 0; transition: border-color .18s ease, box-shadow .18s ease;
}
.comment-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.comment-field input:focus, .comment-field textarea:focus, .comment-toolbar select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,0,0,.14); }
.comment-form-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 18px; font-size: 11.5px; color: var(--text-2); }
.comment-charcount { margin-left: auto; }
.comment-replying b { color: var(--red); }
.comment-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); cursor: pointer; }
.comment-link-btn:hover { text-decoration: underline; }
.comment-error { margin: 0 0 12px; padding: 8px 12px; font-size: 13px; color: var(--red); background: var(--red-tint, #fef2f2); border-left: 3px solid var(--red); }
html[data-theme="dark"] .comment-error { background: rgba(192,0,0,.12); }
.comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.comment-note { margin: 0; font-size: 12px; color: var(--text-2); }
.comment-submit { flex: none; padding: 11px 22px; font: 700 11px/1 var(--ff-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red); border: 1px solid var(--red); border-radius: 0; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.comment-submit:hover { background: var(--red-deep, #8f0000); box-shadow: 0 4px 12px rgba(192,0,0,.22); }

.comment-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 22px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.comment-toolbar select { width: auto; padding: 6px 10px; font-size: 12.5px; }

.comment-list, .comment-children { list-style: none; margin: 0; padding: 0; }
.comment { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--divider); }
.comment-av { width: 40px; height: 40px; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.comment-author { font-family: var(--ff-head); font-weight: 700; font-size: 14.5px; color: var(--text-1); }
.comment-time { font-size: 11.5px; color: var(--text-2); }
.comment-text { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-children { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--red); }
.comment-reply { padding: 14px 0 4px; border-bottom: 0; }
.comment-reply .comment-av { width: 32px; height: 32px; font-size: 11px; }
.comment-empty { padding: 28px 0; text-align: center; font-size: 13.5px; color: var(--text-2); }

@media (max-width: 720px) {
  .comment-form { padding: 16px; }
  .comment-form-row { grid-template-columns: 1fr; gap: 0; }
  .comment-form-foot { flex-direction: column; align-items: stretch; }
  .comment-submit { width: 100%; }
  .comment-children { padding-left: 10px; }
}
@media print { .comments-section { display: none !important; } }