/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Color Variables (from Tailwind config) */
:root {
  --charcoal-darkest: #1a1a1a;
  --charcoal-dark: #434343;
  --charcoal-medium: #5a5a5a;
  --charcoal-light: #9b9b9b;
  --accent-blue: #ababab;
  --accent-blue-dark: #888888;
  --accent-blue-light: #c8c8c8;
  --accent-blue-even-lighter: #d9d9d9;
  --accent-blue-abyss: #272727;
  --off-white: #f7fafc;
  --light-gray: #e2e8f0;
  --nsfl-bg: #4f2e2e;
  --nsfl-text: #fee2e2;
  --nsfl-border: #885252;
  --black: #000;
  --accent-blue-rgb: 171, 171, 171; /* For use with rgba() */
  --charcoal-dark-rgb: 67, 67, 67; /* Greyscale version */
  --charcoal-medium-rgb: 90, 90, 90; /* Greyscale version */
  --font-serif: 'Big Caslon';
  --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Standard hover transition */
  --hover-transition: all 0.3s ease-in-out;
  /* Standard hover scale */
  --hover-scale: 1.02;
  /* Standard shadow */
  --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* Font Families (from Tailwind config) */
body {
  font-family: var(--font-sans);
  margin: 0;
  background: linear-gradient(to bottom, #1a1a1a 0%, #1a1a1a 75%, #000000 100%); /* Dark grey background fading to black */
  color: #E0E0E0; /* Light grey text for contrast */
  line-height: 1.6;
  font-size: 16px; /* Base font size */
}

/* Standard heading styles for consistency */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: .08em;
}

/* White color scheme for all headings */
h1 {
  color: #ffffff;
}

h2 {
  color: #ffffff;
}

h3 {
  color: #ffffff;
}

h4 {
  color: #ffffff;
}

h5 {
  color: #ffffff;
}

h6 {
  color: #ffffff;
}

/* Hover effects removed for all headings */

/* Make all strong elements white */
strong {
  color: #ffffff;
  font-weight: 700;
}

/* Container for main content (approximating Tailwind's w-full mx-auto lg:w-[70%]) */
.main-container {
  max-width: 1000px; /* Consistent max-width */
  margin: 2rem auto; /* Spacing from header and centering */
  padding: 0 1rem; /* Padding on smaller screens */
}

@media (min-width: 1024px) { /* lg breakpoint */
  .main-container {
    width: 70%;
    padding-top: 3rem; /* md:py-12 */
    padding-bottom: 3rem; /* md:py-12 */
  }
}

/* Styles for elements that were previously using Tailwind classes directly */
/* We will add more specific styles as we convert components */

/* Header Styles */
#main-header {
  background-color: rgba(26, 26, 26, 0.95); /* Slightly transparent for blur effect */
  padding: 1rem 2rem; /* Ample padding */
  border-bottom: 1px solid #3a3a3a; /* Subtle border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6); /* Enhanced shadow */
  position: sticky; /* Make header sticky */
  top: 0; /* Stick to top of viewport */
  z-index: 50; /* Ensure it stays above other content */
  backdrop-filter: blur(10px); /* Add blur effect when content scrolls behind */
}

.header-content {
  max-width: 1200px; /* Max width for content */
  margin: 0 auto; /* Center content */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 1024px) { /* lg breakpoint */
  .header-content {
    width: 70%;
  }
}

.site-title {
  font-size: 1.8em; /* Larger site title */
  font-weight: bold;
  color: #d5d5d5; /* Using the same grey as the main title */
  text-decoration: none;
  letter-spacing: 1px; /* Slight letter spacing */
  font-family: var(--font-serif); /* Apply serif font */
  transition: var(--hover-transition);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.site-title:hover {
  color: var(--accent-blue-light);
}

.desktop-nav {
  display: none; /* hidden by default */
}

@media (min-width: 768px) { /* md breakpoint */
  .desktop-nav {
    display: flex;
    gap: 1.5rem; /* space-x-6 */
  }
}

.nav-link,
.nav-link-mobile {
  color: var(--light-gray);
  transition: var(--hover-transition);
  font-weight: 500; /* font-medium */
  text-decoration: none;
  font-family: var(--font-sans); /* Apply sans-serif font */
  position: relative;
}

.nav-link:hover,
.nav-link-mobile:hover {
  color: var(--accent-blue);
  transform: translateY(-1px);
}

/* Add underline effect on hover for nav links */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-blue);
  transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
  width: 100%;
}

.mobile-menu-button-container {
  display: block;
}

@media (min-width: 768px) { /* md breakpoint */
  .mobile-menu-button-container {
    display: none;
  }
}

#mobile-menu-toggle {
  color: var(--light-gray);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  transition: var(--hover-transition);
}

#mobile-menu-toggle:hover {
  color: var(--accent-blue);
  transform: scale(1.1);
}

#mobile-menu-toggle .icon-menu,
#mobile-menu-toggle .icon-close {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
}

.mobile-nav {
  /* display: none; by default due to inline style, controlled by JS */
  background-color: var(--charcoal-dark); /* bg-charcoal-dark */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
  /* Mobile menu is full-width by default */
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
  padding: 0.75rem 1rem; /* px-4 py-3 */
}

.nav-link-mobile {
  color: var(--light-gray);
  transition: var(--hover-transition);
  padding: 0.5rem 0; /* py-2 */
  display: block;
  text-align: center;
  font-weight: 500; /* font-medium */
  text-decoration: none;
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.nav-link-mobile:hover {
  color: var(--accent-blue);
  transform: translateY(-1px);
}

/* Warning Banner Styles */
.warning-banner {
  max-width: 42rem; /* max-w-2xl */
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to bottom right, var(--nsfl-bg), var(--nsfl-border));
  border-top: 4px solid #ef4444; /* border-red-500 (assuming default red-500) */
  color: var(--nsfl-text);
  padding: 1rem; /* p-4 */
  border-radius: 3px; /* rounded-lg */
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* shadow-xl */
  margin-top: 2rem; /* my-8 */
  margin-bottom: 2rem; /* my-8 */
  /* -mt-4 md:-mt-8 adjustments for negative margin - can be complex, will simplify for now */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hover effect removed for warning banner */

.warning-banner-icon-container {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem; /* mb-2 */
}

.warning-icon {
  height: 2.5rem; /* h-10 */
  width: 2.5rem; /* w-10 */
  color: var(--nsfl-text);
  margin-right: 0.75rem; /* mr-3 */
}

.warning-banner-title {
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  letter-spacing: 0.05em; /* tracking-wide */
  font-family: var(--font-sans); /* Apply sans-serif font */
  color: var(--nsfl-text);
}

.warning-banner-text {
  font-size: 0.875rem; /* text-sm */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

@media (min-width: 768px) { /* md breakpoint */
  .warning-banner {
    /* margin-top: -2rem; md:-mt-8 (from App.tsx) - this can overlap header if not careful */
  }
  .warning-icon {
    height: 3rem; /* md:h-12 */
    width: 3rem; /* md:w-12 */
  }
  .warning-banner-title {
    font-size: 1.25rem; /* md:text-xl */
  }
  .warning-banner-text {
    font-size: 1rem; /* md:text-base */
  }
}

/* Title Section Styles */
.title-section {
  margin-top: 3rem; /* mt-12 */
  margin-bottom: 2rem; /* mb-8 */
  text-align: center;
  /* group hover effects will be handled by direct element hover for simplicity */
}

@media (min-width: 768px) { /* md breakpoint */
  .title-section {
    margin-top: 4rem; /* md:mt-16 */
    margin-bottom: 3rem; /* md:mb-12 */
  }
}

.main-title {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700; /* font-bold */
  font-family: var(--font-serif); /* font-serif */
  color: #ffffff;
  margin-bottom: 0.75rem; /* mb-3 */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.1; /* leading-tight */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 8px 16px rgba(0, 0, 0, 0.6);
}

/* Hover effect removed for main title */

.subtitle {
  font-size: 1.125rem; /* text-lg */
  color: var(--accent-blue-even-lighter);
  font-family: 'Georgia Italic'; /* font-sans */
  font-style: italic;
  letter-spacing: 0.01em; /* tracking-wide */
}

/* Hover effect removed for subtitle */

/* Ensure subtitles within allegation descriptions use the main title's subtitle grey color */
.allegation-description .subtitle {
  color: var(--charcoal-light);
}

@media (min-width: 640px) { /* sm breakpoint */
  .main-title {
    font-size: 3rem; /* sm:text-5xl */
  }
}

@media (min-width: 768px) { /* md breakpoint */
  .main-title {
    font-size: 3.75rem; /* md:text-6xl */
  }
  .subtitle {
    font-size: 1.25rem; /* md:text-xl */
  }
}

/* Section Divider Styles */
.section-divider {
  margin-top: 2rem; /* my-8 */
  margin-bottom: 2rem; /* my-8 */
  display: flex;
  align-items: center;
}

@media (min-width: 768px) { /* md breakpoint */
  .section-divider {
    margin-top: 3rem; /* md:my-12 */
    margin-bottom: 3rem; /* md:my-12 */
  }
}

.divider-line {
  flex-grow: 1;
  height: 2px;
  background-color: var(--accent-blue);
}

.divider-center-wrapper {
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
}

.divider-center-element {
  width: 3rem; /* w-12 */
  height: 2px;
  background-color: var(--accent-blue);
  border-radius: 3px; /* rounded-full */
}

@media (min-width: 768px) { /* md breakpoint */
  .divider-center-element {
    width: 4rem; /* md:w-16 */
  }
}

/* Styles for simple inline classes from JSX */
.text-accent-blue-light-inline {
  color: var(--accent-blue-light);
}

.mt-2-sim {
  margin-top: 0.5rem; /* Approximating space-y from Tailwind or mt-2 */
}

/* Section Wrapper Styles (Refined) */
.section-wrapper-base {
  padding-top: 2rem; /* py-8 */
  padding-bottom: 2rem; /* py-8 */
  scroll-margin-top: 5rem; /* scroll-mt-20 (approx 80px, assuming 1rem = 16px) */
}

@media (min-width: 768px) { /* md breakpoint */
  .section-wrapper-base {
    padding-top: 3rem; /* md:py-12 */
    padding-bottom: 3rem; /* md:py-12 */
  }
}

.section-wrapper-container {
  /* Similar to .main-container but without top/bottom padding as it's on the wrapper */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

/* Note: .main-container already has lg:w-[70%], so if SectionWrapper is inside .main-container,
   this lg:w-[70%] might be redundant or need careful consideration.
   The original App.tsx had <main className="... lg:w-[70%]"> and then SectionWrapper inside.
   So, the 70% width is handled by .main-container or a similar parent. */

.section-wrapper-title {
  font-size: 1.75rem; /* Custom size, between text-2xl and text-3xl */
  line-height: 2.25rem; /* leading-9 */
  font-weight: 700; /* font-bold */
  /* Removed color: var(--off-white); so it inherits from h2 styles */
  text-align: center;
  margin-bottom: 1.5rem; /* mb-6 */
  font-family: var(--font-serif); /* Apply serif font */
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 6px 12px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) { /* md breakpoint */
  .section-wrapper-title {
    font-size: 2.25rem; /* md:text-4xl */
    line-height: 2.5rem;
    margin-bottom: 4rem; /* md:mb-16 */
  }
}

.section-wrapper-title-span {
  box-shadow: var(--shadow-md); /* shadow-lg */
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 3px; /* rounded-md */
  color: #ffffff;
  display: inline-block;
  margin-bottom: 0.3em;
  font-size: 1.3em; /* Make PART labels bigger */
}

/* Hover effect removed for section wrapper title span */

.section-wrapper-title .h2,
.section-wrapper-title span + p.h2 {
  margin-top: 0.25em;
}

@media (min-width: 768px) {
  .section-wrapper-title-span {
    margin-bottom: 0.5em;
  }
  .section-wrapper-title .h2,
  .section-wrapper-title span + p.h2 {
    margin-top: 0.4em;
  }
}

.section-wrapper-title-span br {
  display: block;
  margin-top: 0.4em;
}

@media (min-width: 768px) {
  .section-wrapper-title-span br {
    margin-top: 0.7em;
  }
}

/* Quote Block Styles (Refined) */
.quote-block {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Hover effect removed for quote block */

.quote-block.standard {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.75rem 2rem;
  border-left: 3px solid var(--charcoal-medium);
  background: linear-gradient(135deg, 
    rgba(22, 22, 22, 0.95) 0%, 
    rgba(20, 20, 20, 0.95) 100%);
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4);
}

.quote-block.standard::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  color: rgba(171, 171, 171, 0.1);
  font-family: Georgia, serif;
  line-height: 1;
}

/* Hover effect removed for standard quote block */

.quote-text-standard {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--charcoal-light);
  font-family: var(--font-sans);
  margin-bottom: 0.75rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.quote-text-standard strong,
.quote-text-standard b {
  color: #ffffff;
  font-weight: 700;
}

.quote-attribution-standard {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: right;
  font-size: 0.875rem;
  color: var(--charcoal-light);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.025em;
  margin-bottom: 0;
}

.quote-block.flashy {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2.25rem 2.5rem 0.9rem 2.5rem; /* Increased padding */
  border-left: 5px solid var(--charcoal-medium);
  background: linear-gradient(135deg, 
    rgba(22, 22, 22, 0.95) 0%, 
    rgba(20, 20, 20, 0.95) 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 0, 0, 0.5);
  border-radius: 0 0.75rem 0.75rem 0;
  position: relative;
}

.quote-block.flashy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    var(--charcoal-medium) 0%, 
    transparent 50%, 
    var(--charcoal-medium) 100%);
  opacity: 0.3;
}

.quote-block.flashy::after {
  content: '"';
  position: absolute;
  top: -15px;
  left: 20px;
  font-size: 6rem;
  color: rgba(171, 171, 171, 0.08);
  font-family: Georgia, serif;
  line-height: 1;
}

/* Hover effect removed for flashy quote block */

.quote-text-flashy {
  font-size: 1.625rem;
  font-style: italic;
  color: #ffffff;
  line-height: 1.5;
  font-family: var(--font-serif);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.quote-attribution-flashy {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(171, 171, 171, 0.2);
  text-align: right;
  font-size: 1rem;
  font-style: normal;
  color: var(--accent-blue-light);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.9;
  margin-bottom: 0; /* Ensure no bottom margin */
  padding-bottom: 10px;
}

@media (min-width: 768px) { /* md breakpoint */
  .quote-text-standard {
    font-size: 1rem; /* md:text-base */
  }
  .quote-block.flashy {
    padding: 2rem 2.5rem 0.5rem 2.5rem; /* Minimal bottom padding for larger screens (approx 8px) */
  }
  .quote-text-flashy {
    font-size: 1.875rem; /* md:text-3xl */
  }
}


/* Subtle Divider Styles (Refined) */
.subtle-divider-element {
  margin-top: 2rem; /* my-8 */
  margin-bottom: 2rem; /* my-8 */
  height: 1px;
  background-image: linear-gradient(to right, transparent, var(--charcoal-medium), transparent);
  opacity: 0.5;
}

@media (min-width: 768px) { /* md breakpoint */
  .subtle-divider-element {
    margin-top: 3rem; /* md:my-12 */
    margin-bottom: 3rem; /* md:my-12 */
  }
}


/* Citation Badge Styles (Refined) */
.citation-badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.125rem; /* mx-0.5 */
  padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  background-color: var(--charcoal-dark);
  color: var(--off-white);
  border-radius: 3px; /* rounded-md */
  box-shadow: var(--shadow-sm); /* shadow-md */
  transition: var(--hover-transition);
  text-decoration: none;
  line-height: 1; /* leading-none */
  transform-origin: center;
  min-width: 1.5rem; /* style from original component */
  /* vertical-align: baseline; /* Consider if super from previous placeholder is better */
}

.citation-badge-link:hover {
  transform: scale(1.1) translateY(-2px);
  background-color: var(--charcoal-medium);
  box-shadow: var(--shadow-md);
}

.citation-badge-link:focus {
  outline: none; /* focus:outline-none */
  box-shadow: 0 0 0 2px var(--charcoal-darkest), 0 0 0 4px var(--charcoal-medium); /* focus:ring-2 focus:ring-grey focus:ring-offset-2 focus:ring-offset-charcoal-darkest */
}

/* Highlight for clicked citation target */
.highlight-citation {
  /* scroll-margin-top will be defined on the #ref-id elements in ReferencesSection */
  animation: highlight-anim 2s ease-out;
}

@keyframes highlight-anim {
  0%, 100% { background-color: transparent; box-shadow: none; }
  25%, 75% { background-color: var(--accent-blue-abyss); box-shadow: 0 0 15px var(--charcoal-light); }
}

/* Remove old placeholder styles if they conflict or are redundant */
/* .section-wrapper, .section-title, .quote-block, .subtle-divider, .citation-badge (old placeholders) */
/* It is better to remove them if their names are the same as new ones or they are no longer used. */
/* Assuming the new class names are distinct enough or replace the old ones entirely. */

/* ... rest of styles ... */

/* Allegation Item Styles */
.allegation-item {
  /* Add specific styling if needed, for now, relies on content flow */
}

.allegation-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
}

.allegation-number-badge {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(55, 55, 55, 0.7), rgba(85, 85, 85, 0.4));
  color: var(--off-white);
  font-size: 2.5rem; /* Increased from 2rem */
  font-weight: 700;
  font-family: 'Georgia', 'Times New Roman', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-bottom: 5px; /* Nudge text up */
  border-radius: 3px; /* Changed from 50% to 12px for rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Add subtle gradient overlay for depth */
.allegation-number-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Hover effect removed for allegation number badge */

/* Responsive sizing for smaller screens */
@media (max-width: 640px) {
  .allegation-number-badge {
    width: 48px;
    height: 48px;
    font-size: 2rem; /* Increased from 1.5rem */
    border-width: 2px;
    border-radius: 3px; /* Slightly smaller radius for mobile */
  }
  
  .allegation-header {
    gap: 1rem;
  }
}

/* Ensure title aligns properly and has full width */
.allegation-header .allegation-event-title {
  flex: 1;
  margin-bottom: 0; /* Remove default bottom margin since header has margin */
}

.allegation-event-title {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #ffffff;
  margin-bottom: 0.75rem; /* mb-3 */
  font-family: var(--font-serif); /* Apply serif font */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) { /* md breakpoint */
  .allegation-event-title {
    font-size: 1.875rem; /* md:text-3xl */
    line-height: 2.25rem;
  }
}

/* Add subtle hover effect to allegation titles */
/* Hover effect removed for allegation event title */

.allegation-description {
  color: var(--light-gray);
  line-height: 1.75; /* leading-relaxed */
  font-size: 1rem; /* text-base */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.allegation-description p {
  margin-bottom: 0.75rem; /* space-y-3 approx */
}
.allegation-description p:last-child {
  margin-bottom: 0;
}

/* Main Image Display Styles */
.allegation-main-image-container {
  margin-top: 2rem; /* my-8 */
  margin-bottom: 2rem; /* my-8 */
  display: flex;
  justify-content: center;
}

.main-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 0.5rem; /* rounded-lg */
  transition: var(--hover-transition);
  position: relative; /* For warning icon positioning */
}

.main-image-button:focus {
  outline: none; /* focus:outline-none */
  box-shadow: 0 0 0 2px var(--charcoal-darkest), 0 0 0 4px var(--charcoal-medium); /* focus:ring-2 focus:ring-grey focus:ring-offset-2 focus:ring-offset-charcoal-darkest */
}

.main-image-button:hover {
  /* Shadow removed for cleaner hover effect */
}

@media (min-width: 768px) { /* md breakpoint */
  .main-image-button {
    max-width: 90%; /* Limit maximum width but allow shrinking */
  }
}
@media (min-width: 1024px) { /* lg breakpoint */
  .main-image-button {
    max-width: 85%; /* Limit maximum width but allow shrinking */
  }
}
@media (min-width: 1280px) { /* xl breakpoint */
  .main-image-button {
    max-width: 80%; /* Limit maximum width but allow shrinking */
  }
}

.main-image-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 3px;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 20px 40px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  overflow: hidden;
}

.main-image-button:hover .main-image-wrapper {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85), 0 24px 48px rgba(0, 0, 0, 0.7);
}

.main-image-warning-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(127, 29, 29, 0.9);
  backdrop-filter: blur(4px);
  padding: 8px;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Hover effect removed for main image warning icon */

.main-image-warning-icon img {
  width: 32px;
  height: 32px;
  display: block;
}

.main-image-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 500px;
  display: block;
  border-radius: 3px;
  transition: var(--hover-transition);
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.main-image-button:hover .main-image-img {
  transform: scale(1.02);
}

.main-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
  color: var(--off-white);
  padding: 2rem 1rem 1rem;
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.9;
  transition: var(--hover-transition);
  font-family: var(--font-sans);
  border-radius: 0 0 3px 3px;
  line-height: 1.4; /* Restore normal line height for text */
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

/* Image Evidence Gallery Styles */
.image-evidence-gallery {
  margin-top: 2rem; /* my-8 */
  margin-bottom: 2rem; /* my-8 */
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}

.image-evidence-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #ffffff;
  margin-bottom: 1rem; /* mb-4 */
  text-align: center;
  font-family: var(--font-serif); /* Apply serif font */
}

.image-count-indicator {
  font-size: 0.875rem; /* text-sm */
  color: var(--charcoal-light);
  text-align: center;
  margin-bottom: 1rem; /* mb-4 */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

/* Carousel View Styles */
.gallery-content {
  position: relative; /* For control positioning if needed */
  max-width: 64rem; /* max-w-4xl approx. - might need to adjust based on thumbnail sizes */
  margin-left: auto;
  margin-right: auto;
  display: flex; /* For carousel controls and track alignment */
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space-x-2 for controls and track */
}

/* New carousel wrapper styles */
.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.carousel-track-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  overflow: hidden;
  flex-grow: 1;
  max-width: calc(3 * (200px + 0.5rem)); /* Rough estimation: 3 * (thumbnail width + gap) */
}

.carousel-control {
  background-color: rgba(var(--charcoal-medium-rgb), 0.8);
  color: var(--off-white);
  border: 2px solid transparent;
  width: 40px;
  height: 40px;
  border-radius: 3px; /* Changed from 50% */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4);
}

.carousel-control:hover:not(:disabled) {
  background-color: var(--charcoal-light);
  border-color: var(--charcoal-medium);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.carousel-control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.carousel-control:focus {
  outline: 2px solid var(--charcoal-medium);
  outline-offset: 2px;
}

/* Override for existing carousel-controls styles if they exist */
.carousel-controls button {
  background-color: rgba(var(--charcoal-medium-rgb), 0.7); /* bg-charcoal-medium/70 */
  color: var(--off-white);
  border-radius: 3px; /* Changed from 9999px */
  padding: 0.5rem; /* p-2 */
  transition: var(--hover-transition);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.carousel-controls button:hover {
  background-color: var(--charcoal-light);
  transform: scale(1.1);
}

.carousel-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.carousel-controls svg {
  height: 1.5rem; /* h-6 */
  width: 1.5rem; /* w-6 */
}

/* Responsive styles for carousel */
@media (min-width: 640px) { /* sm breakpoint */
  .carousel-track-wrapper {
    gap: 0.75rem; /* sm:gap-3 */
  }
  .gallery-content {
    gap: 0.75rem; /* sm:space-x-3 */
  }
}

@media (min-width: 768px) { /* md breakpoint */
  .carousel-track-wrapper {
    gap: 1rem; /* md:gap-4 */
  }
  .gallery-content {
    gap: 1rem; /* md:space-x-4 */
  }
}

/* Grid View Styles (applied to .gallery-content when not carousel) */
.gallery-content.grid-view {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem; /* gap-4 */
  /* max-w-4xl and mx-auto are on .gallery-content itself */
}

@media (min-width: 640px) { /* sm breakpoint */
  .gallery-content.grid-view {
    grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
  }
}

@media (min-width: 768px) { /* md breakpoint */
  .gallery-content.grid-view {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

@media (min-width: 1024px) { /* lg breakpoint */
  .gallery-content.grid-view {
    grid-template-columns: repeat(4, 1fr); /* lg:grid-cols-4 */
  }
}

/* Force 2x2 grid layout for all galleries */
.gallery-content.grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

/* Hide carousel controls when using grid layout */
.gallery-content.grid-2x2 .carousel-control,
.gallery-content.grid-2x2 .carousel-wrapper {
  display: none !important;
}

/* On very small screens, stack vertically */
@media (max-width: 480px) {
  .gallery-content.grid-2x2 {
    grid-template-columns: 1fr !important;
    max-width: 250px;
  }
}


/* Shared Thumbnail Button Styles (for both carousel and grid) */
.gallery-thumbnail-button {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: var(--hover-transition);
  position: relative;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
}

.gallery-thumbnail-button:focus {
  outline: 2px solid var(--charcoal-medium);
  outline-offset: 2px;
}

.gallery-thumbnail-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 0, 0, 0.5);
}

.gallery-thumbnail-warning-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(127, 29, 29, 0.9);
  backdrop-filter: blur(4px);
  padding: 6px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Hover effect removed for gallery thumbnail warning icon */

.gallery-thumbnail-warning-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

@media (min-width: 640px) {
  .gallery-thumbnail-warning-icon img {
    width: 24px;
    height: 24px;
  }
}

.thumbnail-image-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--charcoal-darkest);
  border-radius: 3px;
  position: relative;
  width: 100%;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--hover-transition);
}

.gallery-thumbnail-button:hover .thumbnail-image-wrapper {
  /* Shadow removed for cleaner hover effect */
}

.gallery-thumbnail-button:hover .thumbnail-img {
  transform: scale(1.05);
}

.thumbnail-caption-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 0.75rem 0.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  min-height: 2.5rem;
  border-radius: 0 0 3px 3px;
  z-index: 2;
}

.thumbnail-caption-wrapper.empty {
    min-height: 1.25em; /* Ensure space even if empty, adjust as needed */
}

.thumbnail-caption {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  color: var(--off-white);
  line-height: 1.4; /* Custom leading for tight space */
  font-family: var(--font-sans); /* Apply sans-serif font */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}

/* Quote Block (Placeholder) */
.quote-block {
  margin: 1.5rem 0;
  padding: 1rem;
  border-left: 4px solid var(--accent-blue);
  background-color: var(--charcoal-dark);
}
.quote-block.quote-flashy {
  background-color: var(--accent-blue-abyss);
  border-left-color: var(--charcoal-light);
}
.quote-block p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--charcoal-light);
  font-family: var(--font-sans);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.quote-block p strong,
.quote-block p b {
  color: #ffffff;
  font-weight: 700;
}
@media (min-width: 768px) {
  .quote-block p {
    font-size: 1.125rem;
  }
}
.quote-block footer {
  font-size: 0.875rem;
  color: var(--charcoal-light);
}

/* Subtle Divider (Placeholder) */
.subtle-divider {
  border: 0;
  height: 1px;
  background-color: var(--charcoal-medium);
  margin: 2rem 0;
}

/* Citation System - Wikipedia-style */
.citation-number {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  margin-left: 4px;
  margin-right: 2px;
  cursor: pointer;
  text-decoration: none;
  color: var(--off-white);
  background-color: var(--charcoal-dark);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  font-family: var(--font-sans);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  top: 0;
}

.citation-number:hover {
  background-color: var(--charcoal-medium);
  color: var(--off-white);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Reference list citation numbers */
.reference-number {
  display: inline-block;
  font-weight: 600;
  margin-right: 0.5rem;
  color: var(--accent-blue);
  font-family: var(--font-sans);
}

/* Jump target highlight animation */
.citation-highlight {
  animation: citation-flash 2s ease-in-out;
}

@keyframes citation-flash {
  0%, 100% { background-color: transparent; }
  25%, 75% { background-color: rgba(171, 171, 171, 0.2); }
}

/* Simple inline citation links */
.cite-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #ababab;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cite-link:hover {
  color: #d9d9d9;
  text-decoration-color: #d9d9d9;
  text-decoration-thickness: 2px;
}

/* Ensure cite-link works properly in quote blocks */
.quote-text-standard .cite-link,
.quote-text-flashy .cite-link {
  color: inherit;
  font-style: inherit;
}

.quote-text-standard .cite-link:hover {
  color: #ffffff;
}

.quote-text-flashy .cite-link:hover {
  color: inherit;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.4);
}

/* Citation Badge (Placeholder) - keeping for backwards compatibility */
.citation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem; /* Smaller text */
  font-weight: 700; /* Bold */
  color: var(--off-white);
  background-color: var(--charcoal-dark);
  border: 1px solid rgba(var(--accent-blue-rgb), 0.3);
  padding: 0.1rem 0.35rem; /* Smaller padding */
  border-radius: 3px; /* Slightly rounded */
  line-height: 1; /* Ensure tight line height */
  vertical-align: super; /* Position like superscript */
  margin-left: 0.1rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-family: var(--font-sans); /* Apply sans-serif font */
}
.citation-badge:hover {
    background-color: var(--accent-blue);
    transform: scale(1.1) translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.citation-badge:focus {
  outline: none; /* focus:outline-none */
  box-shadow: 0 0 0 2px var(--charcoal-darkest), 0 0 0 4px var(--charcoal-medium); /* focus:ring-2 focus:ring-grey focus:ring-offset-2 focus:ring-offset-charcoal-darkest */
}

/* Lightbox Styles */
.lightbox-hidden {
  display: none !important;
}

#lightbox-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.95); /* Darker, more opaque background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(8px);
}

#lightbox-backdrop {
  position: absolute;
  inset: 0;
  /* Used for click-to-close, no visual style needed if #lightbox-modal has bg */
}

#lightbox-content-wrapper {
  position: relative;
  background-color: var(--charcoal-dark);
  padding: 1.5rem; /* p-4 */
  border-radius: 3px; /* More rounded */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); /* Enhanced shadow with border */
  max-width: 90vw; /* Better responsiveness */
  width: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) { /* md breakpoint */
  #lightbox-content-wrapper {
    padding: 2rem; /* md:p-6 */
  }
}

#lightbox-close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--light-gray);
  background-color: rgba(85, 85, 85, 0.8);
  border-radius: 3px; /* Changed from 50% */
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

#lightbox-close-button:hover {
  color: var(--off-white);
  background-color: rgba(85, 85, 85, 0.95);
  transform: scale(1.1);
}

#lightbox-close-button svg {
  width: 20px;
  height: 20px;
}

#lightbox-image-area {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#lightbox-image {
  max-width: 85vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}

#lightbox-info {
  text-align: center;
  width: 100%;
  max-width: 600px;
}

#lightbox-caption-text {
  color: var(--light-gray);
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-sans);
  margin-bottom: 1rem;
  min-height: 1.5em;
}

@media (min-width: 768px) {
  #lightbox-caption-text {
    font-size: 1.125rem;
  }
}

/* Navigation controls container */
#lightbox-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 0.5rem;
}

/* Previous and Next buttons */
#lightbox-prev-button,
#lightbox-next-button {
  color: var(--off-white);
  background-color: rgba(171, 171, 171, 0.2);
  padding: 0.75rem;
  width: 48px;
  height: 48px;
  border-radius: 3px; /* Changed from 50% */
  border: 2px solid var(--accent-blue);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

#lightbox-prev-button:hover:not(:disabled),
#lightbox-next-button:hover:not(:disabled) {
  background-color: var(--accent-blue);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(171, 171, 171, 0.4);
}

#lightbox-prev-button:disabled,
#lightbox-next-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--charcoal-medium);
}

#lightbox-prev-button svg,
#lightbox-next-button svg {
  width: 20px;
  height: 20px;
}

/* Image counter styling */
#lightbox-counter {
  color: var(--off-white);
  font-size: 1.125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  margin: 0;
  padding: 0.5rem 1.5rem;
  background-color: rgba(55, 55, 55, 0.8);
  border-radius: 3px;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#lightbox-counter .current-image {
  color: var(--accent-blue-light);
  font-weight: 700;
  font-size: 1.25rem;
}

#lightbox-counter .separator {
  color: var(--charcoal-light);
  margin: 0 0.25rem;
}

#lightbox-counter .total-images {
  color: var(--light-gray);
}

@media (min-width: 768px) {
  #lightbox-prev-button,
  #lightbox-next-button {
    width: 56px;
    height: 56px;
  }
  
  #lightbox-prev-button svg,
  #lightbox-next-button svg {
    width: 24px;
    height: 24px;
  }
  
  #lightbox-counter {
    font-size: 1.25rem;
  }
  
  #lightbox-counter .current-image {
    font-size: 1.5rem;
  }
}

/* Remove old positioning styles */
#lightbox-prev-button {
  /* Remove old absolute positioning */
}

#lightbox-next-button {
  /* Remove old absolute positioning */
}

/* ... rest of styles ... */

/* Pattern of Behavior Section - Timeline Event Item Styles */
.timeline-event-item {
  margin-bottom: 2rem; /* Add some space between timeline items */
  /* Additional styling if needed */
}

.timeline-event-period {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: var(--accent-blue);
  margin-bottom: 0.25rem; /* mb-1 */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.timeline-event-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #ffffff;
  margin-bottom: 0.5rem; /* mb-2 */
  font-family: var(--font-serif); /* Apply serif font */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) { /* md breakpoint */
  .timeline-event-title {
    font-size: 1.875rem; /* md:text-3xl */
    line-height: 2.25rem;
  }
}

/* Hover effect removed for timeline event title */

.timeline-event-description {
  color: var(--light-gray);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.timeline-event-description p {
    margin-bottom: 0.75rem;
}
.timeline-event-description p:last-child {
    margin-bottom: 0;
}

/* Main Section Divider (to distinguish from SubtleDivider) */
.section-divider-main {
  margin-top: 3.5rem; /* Increased space above divider */
  margin-bottom: 2rem; /* my-8 */
  height: 3px;
  background-color: var(--accent-blue);
  border-radius: 1.5px; /* Half of height for perfectly rounded ends */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* Hide the child elements since we're using a solid line */
.section-divider-main .divider-line,
.section-divider-main .divider-center-wrapper,
.section-divider-main .divider-center-element {
  display: none;
}

@media (min-width: 768px) { /* md breakpoint */
  .section-divider-main {
    margin-top: 4.5rem; /* Increased space above divider on larger screens */
    margin-bottom: 3rem; /* md:my-12 */
  }
}

/* .divider-line, .divider-center-wrapper, .divider-center-element are reused from previous SectionDivider styling */
/* Ensure they are globally available or duplicate if necessary, assuming they are general now */

/* ... rest of styles ... */

/* Footer Styles */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem 1rem;
  margin-top: 1rem;
}

.footer-text {
  font-size: 1rem;
  color: var(--light-gray);
  font-family: var(--font-sans);
  margin: 0;
}

.footer-email {
  color: var(--accent-blue);
  text-decoration: none;
  transition: var(--hover-transition);
}

.footer-email:hover {
  color: var(--accent-blue-light);
  text-decoration: underline;
}

/* Story Changes Section Styles */
.story-change-item {
  margin-bottom: 3rem; /* Space between story change entries */
  display: flex;
  flex-direction: column;
  isolation: isolate; /* Prevent rendering issues between items */
}

.story-change-toggle {
  align-self: flex-end;
}

.story-change-topic {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #ffffff;
  margin-bottom: 1rem; /* mb-4 */
  font-family: var(--font-serif); /* Apply serif font */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) { /* md breakpoint */
  .story-change-topic {
    font-size: 1.875rem; /* md:text-3xl */
    line-height: 2.25rem;
  }
}

/* Hover effect removed for story change topic */

.claim-block {
  margin-bottom: 1.5rem; /* mb-6 */
  padding: 1rem; /* p-4 */
  border-left: 2px solid rgba(var(--accent-blue-rgb), 0.5); /* border-grey/50 */
  background-image: linear-gradient(to bottom right, rgba(55, 55, 55, 0.6), rgba(55, 55, 55, 0.4), rgba(85, 85, 85, 0.3)); /* from-grey-dark/60 via-grey-dark/40 to-grey-medium/30 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Hover effect removed for claim block */

.claim-heading {
  font-size: 1rem; /* text-base */
  font-weight: 600; /* font-semibold */
  color: var(--accent-blue);
  margin-bottom: 0.5rem; /* mb-2 */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.claim-text {
  font-size: 0.9375rem; /* text-sm leading to text-base */
  color: var(--light-gray);
  line-height: 1.6;
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.claim-text p {
    margin-bottom: 0.5rem; /* space-y-2 */
}
.claim-text p:last-child {
    margin-bottom: 0;
}

.analysis-block {
  margin-top: 2rem; /* mt-8 */
  /* No special background/border by default, plain text block */
}

.analysis-heading {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: #ffffff;
  margin-bottom: 0.5rem; /* mb-2 */
  display: flex;
  align-items: center;
  font-family: var(--font-serif); /* Apply serif font */
}

@media (min-width: 768px) { /* md breakpoint */
  .analysis-heading {
    text-align: left; /* md:text-left */
  }
}

.analysis-text {
  font-size: 0.9375rem;
  color: var(--light-gray);
  line-height: 1.6;
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.analysis-text p {
    margin-bottom: 0.5rem;
}
.analysis-text p:last-child {
    margin-bottom: 0;
}

/* ... rest of styles ... */

/* References Section Styles */
.references-list {
  list-style: none; /* Remove default ol numbering, we add our own */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.reference-item {
  background-image: linear-gradient(to right, rgba(var(--charcoal-dark-rgb), 0.5), rgba(var(--charcoal-medium-rgb), 0.3)); /* from-grey-dark/50 to-grey-medium/30 */
  padding: 1rem; /* p-4 */
  border-radius: 3px; /* rounded-lg */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  scroll-margin-top: 6rem; /* scroll-mt-24 (24 * 0.25rem = 6rem), adjust if header height changes */
  display: flex;
  align-items: flex-start; /* Align number and content to the top */
  transition: var(--hover-transition);
}

.reference-item:hover {
  box-shadow: var(--shadow-md); /* hover:shadow-xl */
  background-image: linear-gradient(to right, rgba(var(--charcoal-dark-rgb), 0.7), rgba(var(--charcoal-medium-rgb), 0.5)); /* hover:bg-grey-dark/70 */
  transform: scale(var(--hover-scale));
}

.reference-number {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  color: var(--accent-blue);
  margin-right: 0.75rem; /* mr-3 */
  flex-shrink: 0;
  font-family: var(--font-sans); /* Apply sans-serif font */
}

@media (min-width: 768px) { /* md breakpoint */
  .reference-number {
    font-size: 1rem; /* md:text-base */
  }
}

.reference-content {
  flex-grow: 1;
}

.reference-text-link {
  color: var(--light-gray);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--hover-transition);
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.reference-text-link:hover {
  color: var(--accent-blue-light);
  text-decoration: underline;
  transform: translateX(2px);
}

.reference-text-link:focus {
  outline: 1px solid var(--accent-blue-light);
  outline-offset: 1px; /* focus:ring-offset-1 */
  border-radius: 2px; /* focus:rounded (slightly rounded for focus ring) */
  color: var(--accent-blue-light);
}


@media (min-width: 768px) { /* md breakpoint */
  .reference-text-link {
    font-size: 1rem; /* md:text-base */
  }
}

.reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* gap-2 */
  align-items: center;
}

.reference-action-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem; /* py-1.5 px-3 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  border-radius: 0.375rem; /* rounded-md */
  text-decoration: none;
  transition: var(--hover-transition);
  color: var(--accent-blue-light);
  background-color: var(--charcoal-medium);
  border: 1px solid rgba(var(--accent-blue-rgb), 0.3);
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.reference-action-badge:hover {
  background-color: var(--accent-blue);
  color: var(--off-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.reference-action-badge:focus {
  outline: 2px solid var(--charcoal-medium);
  outline-offset: 2px; /* focus:ring-offset-2 */
  /* focus:ring-offset-charcoal-darkest implied by body background or section background */
}

.reference-action-badge.disabled-badge {
  opacity: 0.7;
  cursor: not-allowed;
}

.reference-action-badge.disabled-badge:hover {
  background-color: var(--charcoal-medium); /* Keep original background */
  color: var(--accent-blue-light); /* Keep original color */
  transform: none; /* Prevent transform on hover for disabled badges */
  box-shadow: none; /* Keep original shadow */
}

.action-badge-icon {
  width: 0.875rem; /* w-3.5 h-3.5 */
  height: 0.875rem;
  margin-right: 0.375rem; /* mr-1.5 */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

.no-references-message {
  text-align: center;
  color: var(--charcoal-light);
  font-style: italic;
  padding: 2rem 1rem; /* p-8 sm:p-4 */
  font-family: var(--font-sans); /* Apply sans-serif font */
}

/* ... rest of styles ... */

/* Emphasized text within body content */
.allegation-description strong,
.timeline-event-description strong,
.claim-text strong,
.analysis-text strong,
.reference-content p strong {
  color: #ffffff;
}

/* ... rest of styles ... */

/* Inline Title Style */
.inline-title {
  font-family: var(--font-serif);
  font-size: 1.5rem; /* Example size - adjust as needed */
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: .06em;
  /* Optional: display: inline-block; */
  /* Optional: margin-bottom: 0.25rem; */
}

/* Styles for StaticContentLoader */
.loading-container,
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
  min-height: 200px; /* Ensure it takes some space */
}

.loading-text,
.error-text {
  font-size: 1.25rem; /* text-xl */
  color: var(--light-gray); /* Or another suitable color from your scheme */
}

.error-text {
  color: var(--warning-red); /* Or a distinct error color */
  font-weight: bold;
}

/* Added for image styling */
.image-container {
  width: 100%;
  max-width: 800px; /* Adjust as needed */
  margin: 2rem auto; /* Center the image container with some margin */
  padding: 1rem;
  border: 1px solid var(--charcoal-medium);
  border-radius: 0.5rem;
}

.styled-image {
  display: block; /* Remove extra space below image */
  width: 100%;   /* Make image responsive */
  height: auto;  /* Maintain aspect ratio */
  border-radius: 0.25rem;
}

/* Footer removed */

/* General Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #1a1a1a; /* Dark grey background */
    color: #E0E0E0; /* Light grey text for contrast */
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}

/* Header Styles */
#main-header {
    background-color: rgba(26, 26, 26, 0.95); /* Slightly transparent for blur effect */
    padding: 1rem 2rem; /* Ample padding */
    border-bottom: 1px solid #3a3a3a; /* Subtle border */
    box-shadow: var(--shadow-sm); /* Soft shadow for depth */
    position: sticky; /* Make header sticky */
    top: 0; /* Stick to top of viewport */
    z-index: 50; /* Ensure it stays above other content */
    backdrop-filter: blur(10px); /* Add blur effect when content scrolls behind */
}

.header-content {
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center content */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Mobile menu button */
.mobile-menu-button {
    display: block;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--light-gray);
    transition: var(--hover-transition);
}

.mobile-menu-button:hover {
    color: var(--accent-blue);
}

.mobile-menu-button .menu-icon {
    width: 24px;
    height: 24px;
}

/* Mobile menu button always visible */
.mobile-menu-button {
    display: block;
}

/* Navigation styles */
.header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #3a3a3a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    z-index: 40;
}

/* Show navigation when active */
.header-nav.active {
    display: block;
}

/* Navigation always uses dropdown style */
.header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #3a3a3a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    z-index: 40;
}

.header-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.header-nav li {
    margin: 0;
}

.header-nav a {
    display: block;
    text-decoration: none;
    color: #b0b0b0;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    padding: 1rem 2rem;
}

.header-nav a:hover,
.header-nav a:focus {
    color: #a8a8a8;
    transform: translateY(-2px);
}

/* Menu hover effect */
.header-nav a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #a8a8a8;
}

/* Removed desktop-only underline effect since menu is always dropdown */

/* Main Container Styles */
.main-container {
    max-width: 1000px; /* Consistent max-width */
    margin: 2rem auto; /* Spacing from header and centering */
    padding: 0 1rem; /* Padding on smaller screens */
}

/* Content Warning Banner Styles - Enhanced */
.content-warning-banner {
    background: linear-gradient(135deg, #4a1414 0%, #5a1818 100%);
    color: #e8e8e8;
    border: 1px solid #6a2020;
    border-radius: 3px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Remove pattern overlay for cleaner look */

/* Hover effect removed for content warning banner */

.warning-icon-container {
    margin-right: 1.25rem;
    z-index: 1;
}

.warning-svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    opacity: 0.9;
}

.warning-text-container {
    z-index: 1;
    flex: 1;
}

.warning-text-container h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
    font-weight: 600;
    color: #f0f0f0;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.warning-text-container p {
    margin-bottom: 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: #d8d8d8;
}

/* Content Disclaimer Banner Styles - Blue Version */
.content-disclaimer-banner {
    background: linear-gradient(135deg, #2a3f5f 0%, #3a4f6f 100%);
    color: #e8e8e8;
    border: 1px solid #4a5f7f;
    border-radius: 3px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.disclaimer-icon-container {
    margin-right: 1.25rem;
    z-index: 1;
}

.disclaimer-svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    opacity: 0.9;
    color: #a8c8f0;
    flex-shrink: 0;
}

.disclaimer-text-container {
    z-index: 1;
    flex: 1;
}

.disclaimer-text-container h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
    font-weight: 600;
    color: #f0f0f0;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.disclaimer-text-container p {
    margin-bottom: 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: #d8d8d8;
}

/* Main Title and Subtitle Styles */
.main-title-container {
    text-align: center;
    margin-bottom: 2.5rem; /* Increased space below the title section */
}

.main-title-container h1 {
    font-size: 3.5em; /* Very large main title */
    color: #ffffff; /* White for the title */
    margin-bottom: 0.2em; /* Balanced space between title and subtitle */
    font-weight: bold;
    text-transform: uppercase; /* Uppercase for impact */
    letter-spacing: 1px;
    font-family: var(--font-serif); /* Apply serif font */
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.8), 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* Hover effect removed for main title container h1 */

.main-title-container h2 {
  margin-bottom: 0.5rem;
}

.main-title-container .subtitle {
    font-size: 1.5em; /* Larger subtitle */
    color: #a0a0a0; /* Softer grey for subtitle */
    font-style: italic;
    margin-top: 0;
}

/* Divider After Main Title */
.divider-after-main-title {
    height: 2px;
    background-color: #4a4a4a; /* Dark grey divider */
    margin: 2rem 0; /* Space around the divider */
    border-radius: 1px;
}

/* Additional consistency improvements */

/* General button hover consistency */
button {
  transition: var(--hover-transition);
}

/* General link consistency */
a {
  transition: var(--hover-transition);
}

/* Ensure consistent use of shadows in remaining elements */
.header-nav a:hover {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Ensure carousel controls have consistent hover effects */
.carousel-controls button:hover {
  background-color: var(--charcoal-light);
  transform: scale(1.1);
}

/* Ensure lightbox buttons have consistent hover effects */
#lightbox-close-button:hover,
#lightbox-prev-button:hover,
#lightbox-next-button:hover {
  transform: scale(1.1);
}

p b, p strong {
  color: #ffffff;
}

p {
  color: var(--accent-blue-light);
  margin-bottom: 1em;
}

/* ADD COLLAPSIBLE CSS FOR STORY CHANGE ITEMS */
.story-change-item .analysis-block,
.story-change-item .allegation-main-image-container,
.story-change-item .image-evidence-gallery {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
}

.story-change-item.expanded .analysis-block,
.story-change-item.expanded .allegation-main-image-container,
.story-change-item.expanded .image-evidence-gallery {
  max-height: 10000px;
  opacity: 1;
  transition: max-height 0.5s ease-in, opacity 0.3s ease-in 0.1s;
}

.story-change-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  color: var(--accent-blue);
  cursor: pointer;
  background: rgba(var(--accent-blue-rgb), 0.1);
  border: 1px solid rgba(var(--accent-blue-rgb), 0.3);
  border-radius: 0.375rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: var(--hover-transition);
  position: relative;
}

.story-change-toggle:hover {
  color: var(--accent-blue-light);
  background: rgba(var(--accent-blue-rgb), 0.2);
  border-color: var(--charcoal-medium);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.story-change-toggle:focus {
  outline: 2px solid var(--charcoal-medium);
  outline-offset: 2px;
}

.story-change-toggle::after {
  content: '▼';
  font-size: 0.75rem;
  transition: transform 0.3s ease;
  margin-left: 0.25rem;
}

.story-change-item.expanded .story-change-toggle::after {
  transform: rotate(180deg);
}

.main-title-line {
  display: block;
  font-size: 1.5em;
  color: inherit;
  font-weight: bold;
}

.main-title-subtitle {
  display: block;
  font-size: 1em;
  color: #fff;
  opacity: 0.85;
  font-weight: normal;
  margin-top: 0.2em;
}

#story-changes .allegation-item:last-child {
  margin-bottom: 0;
}
#story-changes .story-change-item:last-child {
  margin-bottom: 0;
}
#story-changes .subtle-divider-element:last-child {
  margin-bottom: 0;
}

.spaced-list {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 2em;
  padding-left: 1.5em;
  line-height: 1.8;
}
.spaced-list li {
  margin-bottom: 0.75em;
}

/* Reduce spacing on last quote block before section divider */
section > .quote-block:last-child {
  margin-bottom: 0.5rem;
}