/* ==========================================================================
   Ebb and Flow - Core Styles
   Complete stylesheet for the Ebb and Flow storytelling site
   Colors and design tokens defined in colortheme-flowstate.css

   Breakpoint Strategy:
   - xs: < 480px  (small mobile)
   - sm: < 768px  (mobile/tablet portrait)
   - md: < 992px  (tablet landscape)
   - lg: < 1100px (small desktop)
   - xl: >= 1100px (desktop)

   Mobile-first approach: base styles for mobile, media queries for larger screens
   ========================================================================== */

/* ===== CSS Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Canvas elements need special handling - Chart.js manages dimensions for crisp rendering */
canvas {
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

ul, ol {
  list-style: none;
}

/* ===== Base Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary-dark);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* ===== Form Elements ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 95, 122, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-light);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a6670' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-text);
}

fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 0 0 1.5rem 0;
}

legend {
  font-weight: 600;
  color: var(--color-primary-dark);
  padding: 0 0.5rem;
}

/* Buttons */
button,
.button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  color: var(--color-bg);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

button:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(1px);
}

.keyboard-user button:focus,
.keyboard-user .button:focus,
.keyboard-user input[type="submit"]:focus,
.keyboard-user input[type="button"]:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

button:disabled,
.button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  background-color: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* ===== Container ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* Safe area insets for notched phones in landscape */
  padding-left: max(1rem, env(safe-area-inset-left, 1rem));
  padding-right: max(1rem, env(safe-area-inset-right, 1rem));
}

@media (min-width: 576px) {
  .container {
    padding-left: max(1.5rem, env(safe-area-inset-left, 1.5rem));
    padding-right: max(1.5rem, env(safe-area-inset-right, 1.5rem));
  }
}

/* ===== Grid System ===== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Column classes - mobile first */
.col-lg-3, .col-lg-4, .col-lg-8, .col-lg-9,
.col-md-4, .col-md-8, .col-md-10 {
  width: 100%;
}

/* Medium breakpoint (768px) */
@media (min-width: 768px) {
  .col-md-4 { width: 33.333333%; }
  .col-md-8 { width: 66.666667%; }
  .col-md-10 { width: 83.333333%; }
}

/* Large breakpoint (992px) */
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.333333%; }
  .col-lg-8 { width: 66.666667%; }
  .col-lg-9 { width: 75%; }
}

/* ===== Utilities ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Skip to Content Link ===== */
#skip-to-content {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-skip-to-content);
}

#skip-to-content a {
  position: absolute;
  left: -9999px;
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
}

#skip-to-content a:focus {
  left: 1rem;
  top: 1rem;
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ===== Global Link Styles ===== */
/* Remove selection highlight on linked images */
a img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ===== Keyboard Focus System (WCAG 2.4.7) ===== */
/* Focus outlines appear only when Tab is the most recent interaction.
   The .keyboard-user class is added to <html> on Tab keydown, and removed
   on mouse/touch/blur. This is stricter than browser :focus-visible, which
   can false-fire on tab-switch, modifier keys, and programmatic .focus(). */

/* Suppress all browser-managed focus outlines — we handle them via JS */
:focus, :focus-visible {
  outline: none;
}

/* Show focus outlines only when user is actively Tab-navigating */
.keyboard-user :focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* For image links, move focus indicator to the image itself */
.keyboard-user a:has(img):focus {
  outline: none;
}

.keyboard-user a:has(img):focus img {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Site title: keep unified focus on the link, not separate for text/image */
.keyboard-user .site-title:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.keyboard-user .site-title:focus img {
  outline: none;
}

/* Prevent blue highlight when clicking/dragging on image links */
a:has(img) {
  user-select: none;
}

/* ===== Article Breakout Sections ===== */
/* Colored sections that extend left to browser edge, stay within article column */

/* Base section - shared layout for all breakout sections */
.section {
  padding: 2.5rem 2rem 2.5rem calc(50vw - 50% + 2rem);
  margin: 3rem 0 3rem calc(-50vw + 50%);
  margin-right: 0;
  overflow: hidden; /* Clearfix for floated charts */
}

/* Modifier: removes bottom margin so next section butts up flush */
.section--flush-next {
  margin-bottom: 0;
}

/* Modifier: removes top margin so section butts up to previous */
.section--flush-prev {
  margin-top: 0;
}

.article-content .section h2 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.section p {
  margin-bottom: 1.5rem;
}

.section p:last-of-type {
  margin-bottom: 0;
}

.section .article-figure,
.section .article-figure img {
  background: transparent;
}

@media (max-width: 767px) {
  .section {
    margin-left: -1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Section background colors */
.section-dark { background: var(--color-section-dark); }
.section-teal { background: var(--color-section-teal); }
.section-olive { background: var(--color-section-olive); }
.section-pacific { background: var(--color-section-pacific); }
.section-slate { background: var(--color-section-slate); }
.section-earth { background: var(--color-section-earth); }
.section-gold { background: var(--color-section-gold); }
.section-granite { background: var(--color-section-granite); }
.section-light { background: var(--color-section-light); }
.section-warm { background: var(--color-section-warm); }
.section-sfbay { background: #f0fcf7; }
.section-klamath { background: #f0faff; }

/* ==========================================================================
   Dark Section Theming (.on-dark)

   All dark background sections share the same text styling.
   To add a new dark section color:
   1. Add the background color class above (e.g., .section-new { background: ...; })
   2. Add the class to the .on-dark selector list below

   This consolidates all dark theme text/link/element styling into one place.
   ========================================================================== */

/* Define which sections use dark theme styling */
.section-dark,
.section-teal,
.section-olive,
.section-pacific,
.section-slate,
.section-earth,
.section-gold,
.section-granite {
  /* Mark as dark section for all descendant styling */
}

/* Base text color */
.on-dark,
.section-dark,
.section-teal,
.section-olive,
.section-pacific,
.section-slate,
.section-earth,
.section-gold,
.section-granite {
  color: var(--color-text-on-dark);
}

/* Headings and bold text */
/* Second selector needed to override .article-content h2 specificity */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) :is(h1, h2, h3, h4, h5, h6, strong, b),
.article-content :is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-on-dark-heading);
}

/* Body text elements */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) :is(p, li, blockquote, figcaption, dd, small, ul, ol) {
  color: var(--color-text-on-dark-muted);
}

/* Table headers and captions */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) :is(dt, th, caption) {
  color: var(--color-text-on-dark-heading);
}

/* Table cells, code, and preformatted text */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) :is(td, code, pre) {
  color: var(--color-text-on-dark);
}

/* Horizontal rules and table borders */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) :is(hr, table, th, td) {
  border-color: var(--color-overlay-medium);
}

/* Data tables */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .data-table {
  background: var(--color-overlay-light);
  box-shadow: none;
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .data-table thead {
  background: rgba(0, 0, 0, 0.3);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .data-table td {
  border-color: var(--color-overlay-medium);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .data-table tbody tr:nth-child(even) {
  background: var(--color-overlay-light);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .data-table tbody tr:hover {
  background: var(--color-overlay-medium);
}

/* Links */
/* Second selector needed to override .article-content a specificity */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) a,
.article-content :is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) a {
  color: var(--color-link-on-dark);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) a:hover,
.article-content :is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) a:hover {
  color: var(--color-link-on-dark-hover);
}

/* ===== Chart Containers ===== */
.chart-container {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}

.chart-container h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}

.chart-container .chart-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.chart-wrapper {
  position: relative;
  width: 100%;
  min-height: 200px; /* Prevent charts from getting too small to read */
}

/* Ensure canvas has minimum dimensions */
.chart-wrapper canvas {
  min-height: 180px;
}

/* Full width chart - slightly narrower than text for visual distinction */
.chart-container.chart-full {
  clear: both;
  margin-left: 2rem;
  margin-right: 2rem;
}

/* ===== Flex-based Chart + Text Layout ===== */
/* More reliable than floats for chart interactivity */
.content-with-chart {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 2rem 0;
}

.content-with-chart .chart-container {
  flex: 0 0 45%;
  min-width: 300px;
  margin: 0;
}

.content-with-chart .chart-adjacent-text {
  flex: 1;
  min-width: 0;
}

.content-with-chart .chart-adjacent-text p:first-child {
  margin-top: 0;
}

.content-with-chart .chart-adjacent-text p:last-child {
  margin-bottom: 0;
}

/* Chart on right side */
.content-with-chart.chart-right {
  flex-direction: row-reverse;
}

/* Responsive - stack on smaller screens */
@media (max-width: 1000px) {
  .content-with-chart {
    flex-direction: column;
  }

  .content-with-chart.chart-right {
    flex-direction: column;
  }

  .content-with-chart .chart-container {
    flex: 1 1 100%;
    width: 100%;
    min-width: unset;
  }

  .site-tagline {
    display: none;
  }
}

/* Chart in dark sections */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .chart-container {
  background: var(--color-overlay-light);
  border-color: var(--color-overlay-medium);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .chart-container h3 {
  color: var(--color-text-on-dark-heading);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .chart-container .chart-description {
  color: var(--color-text-on-dark-muted);
}

/* Accessible data table fallback */
.chart-data-table {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.chart-data-table:focus-within {
  position: static;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}

.chart-data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.chart-data-table th,
.chart-data-table td {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.chart-data-table caption {
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Chart legend adjustments */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.85rem;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Chart source citations */
.chart-source {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
}

.chart-source a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chart-source a:hover {
  color: var(--color-primary-hover);
}

/* Chart sources in dark sections */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .chart-source {
  color: var(--color-text-on-dark-muted);
  border-top-color: var(--color-overlay-medium);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .chart-source a {
  color: var(--color-link-on-dark);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .chart-source a:hover {
  color: var(--color-link-on-dark-hover);
}

/* Responsive charts - mobile */
@media (max-width: 767px) {
  .chart-container {
    padding: 1rem;
  }

  .chart-container.chart-full {
    margin-left: 0;
    margin-right: 0;
  }

  .chart-container h3 {
    font-size: 1rem;
  }

  .chart-container .chart-description {
    font-size: 0.85rem;
  }

  .chart-wrapper {
    min-height: 280px;
  }

  .chart-wrapper canvas {
    min-height: 250px;
  }

  .chart-source {
    font-size: 0.7rem;
  }

  .methodology-btn {
    font-size: 0.7rem;
    padding: 0.35rem 0.6rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .chart-wrapper {
    min-height: 300px;
  }

  .chart-wrapper canvas {
    min-height: 270px;
  }

  .chart-container h3 {
    font-size: 0.95rem;
  }
}

/* ===== Water Quality Interactive Timeline ===== */
.wq-timeline-wrapper {
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.wq-timeline-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 1rem;
  text-align: center;
}

/* Legend */
.wq-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.wq-timeline-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wq-timeline-legend-dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

.wq-timeline-legend-dot--board {
  width: 10px;
  height: 10px;
  background: #3A5FD4;
}

.wq-timeline-legend-dot--state {
  width: 10px;
  height: 10px;
  background: #7BA3E8;
}

.wq-timeline-legend-dot--federal {
  width: 10px;
  height: 10px;
  background: #e07a5f;
}

/* Timeline list */
.wq-timeline {
  list-style: none;
  counter-reset: none;
  position: relative;
  padding-left: 40px;
  margin: 0;
}

.wq-timeline > li {
  list-style-type: none;
}

.wq-timeline > li::marker {
  content: none;
}

/* Vertical spine */
.wq-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}

/* Event item */
.wq-timeline-event {
  position: relative;
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.wq-timeline-event--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Node circles on the spine */
.wq-timeline-node {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

/* Water Board Actions — largest nodes */
.wq-timeline-event--board .wq-timeline-node {
  width: 20px;
  height: 20px;
  background: #3A5FD4;
  left: -35px;
  top: 12px;
}

/* California Legislation — medium nodes */
.wq-timeline-event--state .wq-timeline-node {
  width: 14px;
  height: 14px;
  background: #7BA3E8;
  left: -32px;
  top: 15px;
}

/* Federal Legislation — small nodes */
.wq-timeline-event--federal .wq-timeline-node {
  width: 10px;
  height: 10px;
  background: #e07a5f;
  left: -30px;
  top: 17px;
}

/* Dickey Act — gold node with pulse */
.wq-timeline-event--dickey .wq-timeline-node {
  background: #FFD700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  animation: wqTimelinePulse 2s ease-in-out infinite;
}

@keyframes wqTimelinePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.8); }
}

/* Card button */
.wq-timeline-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-overlay-medium);
  border-radius: 6px;
  color: #f0f0f0;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.wq-timeline-card:hover {
  background: var(--color-overlay-medium);
}

.keyboard-user .wq-timeline-card:focus {
  outline: 2px solid #FFD700;
  outline-offset: 2px;
}

.wq-timeline-year {
  font-weight: 700;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  min-width: 3rem;
  flex-shrink: 0;
}

.wq-timeline-card-title {
  flex: 1;
  font-weight: 600;
}

/* Dickey Act card title highlight */
.wq-timeline-event--dickey .wq-timeline-card-title {
  color: #FFD700;
}

/* Chevron */
.wq-timeline-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.wq-timeline-card[aria-expanded="true"] .wq-timeline-chevron {
  transform: rotate(45deg);
}

/* Detail panel */
.wq-timeline-detail {
  padding: 0.6rem 0.8rem 0.8rem;
  margin-top: -1px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-overlay-medium);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  transition: height 0.25s ease;
}

/* When expanded, round only the card's top corners */
.wq-timeline-card[aria-expanded="true"] {
  border-radius: 6px 6px 0 0;
}

.wq-timeline-detail p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .wq-timeline-wrapper {
    padding: 0 0.5rem;
  }

  .wq-timeline-title {
    font-size: 1.15rem;
  }

  .wq-timeline-legend {
    gap: 0.6rem 1rem;
    font-size: 0.78rem;
  }

  .wq-timeline {
    padding-left: 32px;
  }

  .wq-timeline::before {
    left: 11px;
  }

  .wq-timeline-event--board .wq-timeline-node {
    width: 16px;
    height: 16px;
    left: -28px;
    top: 13px;
  }

  .wq-timeline-event--state .wq-timeline-node {
    width: 12px;
    height: 12px;
    left: -26px;
    top: 15px;
  }

  .wq-timeline-event--federal .wq-timeline-node {
    width: 8px;
    height: 8px;
    left: -24px;
    top: 17px;
  }

  .wq-timeline-card {
    font-size: 0.82rem;
    padding: 0.5rem 0.6rem;
  }

  .wq-timeline-year {
    font-size: 0.78rem;
    min-width: 2.6rem;
  }

  .wq-timeline-detail p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .wq-timeline {
    padding-left: 26px;
  }

  .wq-timeline::before {
    left: 8px;
  }

  .wq-timeline-event--board .wq-timeline-node {
    width: 14px;
    height: 14px;
    left: -23px;
    top: 12px;
  }

  .wq-timeline-event--state .wq-timeline-node {
    width: 10px;
    height: 10px;
    left: -21px;
    top: 14px;
  }

  .wq-timeline-event--federal .wq-timeline-node {
    width: 7px;
    height: 7px;
    left: -19.5px;
    top: 16px;
  }

  .wq-timeline-card {
    font-size: 0.78rem;
    padding: 0.45rem 0.5rem;
    gap: 0.4rem;
  }

  .wq-timeline-year {
    font-size: 0.72rem;
    min-width: 2.2rem;
  }
}

/* Reduced motion: disable stagger + pulse animations */
@media (prefers-reduced-motion: reduce) {
  .wq-timeline-event {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wq-timeline-event--dickey .wq-timeline-node {
    animation: none;
  }
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rippleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(8px);
  }
  60% {
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }
}

@keyframes rippleTagline {
  0% {
    opacity: 0;
    filter: blur(3px);
  }
  50% {
    opacity: 0.7;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes wave {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
}

/* ===== Scroll Animations ===== */
/* Elements start visible - JS will add .will-animate to elements below viewport */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* Only elements below viewport get hidden and will animate */
.animate-on-scroll.will-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* Load animations - fade in on page load with stagger */
.animate-load {
  animation: fadeInUp 0.7s ease-out both;
}
.animate-load:nth-child(1) { animation-delay: 0.1s; }
.animate-load:nth-child(2) { animation-delay: 0.2s; }
.animate-load:nth-child(3) { animation-delay: 0.3s; }
.animate-load:nth-child(4) { animation-delay: 0.4s; }

/* ===== Header ===== */
.minimal-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  padding: 1.5rem 0;
  animation: fadeIn 0.6s ease-out;
}

.minimal-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-branding {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-site-title, var(--color-primary-dark));
  text-decoration: none;
  letter-spacing: -0.02em;
  animation: rippleFadeIn 1s ease-out 0.2s both;
}

.site-title:hover {
  color: var(--color-site-title, var(--color-primary));
}

.site-title span {
  transition: color 0.3s ease;
}

.title-text-ripple {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.site-logo-waves {
  height: 2.25rem;
  width: auto;
  vertical-align: middle;
  margin-top: -2px;
}

/* Logo — static SWRCB seal with hover crossfade to wave lines */
.logo-morph-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  flex-shrink: 0;
}

.logo-morph-wrap img {
  height: 2.25rem;
  width: auto;
}

/* Default (leave) state: waves fade out immediately, seal fades in after delay */
.logo-morph-wrap .logo-default {
  transition: opacity 0.5s ease 0.4s;
}

.logo-morph-wrap .logo-hover {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s ease 0s;
}

/* Hover: seal fades out immediately, waves fade in after delay */
.site-title:hover .logo-morph-wrap .logo-default {
  opacity: 0;
  transition: opacity 0.5s ease 0s;
}

.site-title:hover .logo-morph-wrap .logo-hover {
  opacity: 1;
  transition: opacity 0.5s ease 0.4s;
}

.site-tagline {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-wave-dark);
  font-style: italic;
  letter-spacing: 0.01em;
  animation: rippleTagline 1s ease-out 0.6s both;
}

@media (max-width: 1200px) {
  .site-tagline {
    display: none;
  }
}

.minimal-nav {
  display: flex;
  gap: 0.5rem;
}

.minimal-nav li {
  animation: fadeIn 0.5s ease-out both;
}

.minimal-nav li:nth-child(1) { animation-delay: 0.3s; }
.minimal-nav li:nth-child(2) { animation-delay: 0.4s; }
.minimal-nav li:nth-child(3) { animation-delay: 0.5s; }
.minimal-nav li:nth-child(4) { animation-delay: 0.6s; }

.minimal-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.minimal-nav a:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary-dark);
}

/* ===== Hamburger Menu ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: var(--z-hamburger);
}

.hamburger:hover,
.hamburger:focus,
.hamburger:active,
.hamburger.is-active {
  background: transparent;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  padding: 5rem 2rem 2rem;
  /* Safe area insets for notched phones */
  padding-top: calc(5rem + env(safe-area-inset-top, 0));
  padding-right: calc(2rem + env(safe-area-inset-right, 0));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0));
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: var(--z-mobile-nav);
}

.mobile-nav.is-active {
  transform: translateX(0);
}

.mobile-nav li {
  margin-bottom: 1.5rem;
}

.mobile-nav a {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.mobile-nav a:hover {
  color: var(--color-primary);
}

/* Mobile nav logos */
.mobile-nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto 1.5rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.mobile-nav.is-active .mobile-nav-logo {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-logo img {
  height: 60px;
  width: auto;
  display: block;
}

.mobile-nav-logo .morph-svg {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: var(--z-mobile-overlay);
}

.mobile-overlay.is-active {
  opacity: 1;
}

/* ===== Content Area ===== */
.content-area {
  padding: 3rem 0;
}

/* ===== Article List (Index Page) ===== */
.main-article {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.main-article:last-child {
  border-bottom: none;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.article-meta span:last-child::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-right: 0.75rem;
  background: currentColor;
  opacity: 0.35;
  vertical-align: -0.1em;
}

.article-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.article-title a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.article-title a:hover {
  color: var(--color-primary);
}

.article-content-row {
  display: flex;
  gap: 1.5rem;
}

.article-thumb {
  width: 240px;
  height: 160px;
  min-height: 160px;
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-border) 100%);
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.article-content-row a {
  -webkit-tap-highlight-color: transparent;
}

.main-article:hover .article-thumb {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-body {
  flex: 1;
}

.article-excerpt {
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 1rem 0;
}

.read-more {
  color: var(--color-wave-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: var(--color-wave-dark-hover);
  text-decoration: underline;
}

/* ===== Article Detail Page ===== */
.article-hero {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-border) 100%);
  border-radius: 8px;
  margin-bottom: 2.5rem;
  object-fit: cover;
  animation: fadeIn 0.7s ease-out 0.2s both;
}

.article-hero-fullwidth {
  width: 100%;
  height: 500px;
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-border) 100%);
  margin-bottom: 0;
  animation: fadeIn 0.7s ease-out 0.2s both;
  overflow: hidden;
}

.article-hero-fullwidth img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Video hero within fullwidth container */
.article-hero-fullwidth {
  position: relative;
}

.article-hero-fullwidth video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-primary-dark, #1a3a4a);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.article-hero-fullwidth video.video-ready {
  opacity: 1;
}

.article-hero-fullwidth video.video-skipped {
  display: none;
}

.article-hero-fullwidth .video-overlay,
.article-hero-fullwidth .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: var(--z-content);
  pointer-events: none;
}

.article-hero-fullwidth .hero-headline {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: var(--z-content, 2);
  text-align: center;
  color: var(--color-text-on-dark-heading);
  padding: 0 2rem;
}

.article-hero-fullwidth .hero-headline h1 {
  font-size: 2.75rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.15;
  color: var(--color-text-on-dark-heading);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.article-hero-fullwidth .hero-headline .hero-tagline {
  font-size: 1.15rem;
  opacity: 0.92;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Left-aligned headline with semi-transparent dark backdrop */
.article-hero-fullwidth .hero-headline.hero-headline-left {
  text-align: left;
  bottom: auto;
  top: 45%;
  transform: translateY(-50%);
  right: auto;
  width: fit-content;
  max-width: 600px;
  background: rgba(0, 0, 0, 0.7);
  padding: 2rem 2.5rem;
  border-radius: 6px;
  left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
}

.hero-headline-left .article-meta {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.75rem;
}

.hero-headline-left .article-category {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text-on-dark-heading);
}

.hero-headline-left .article-lead {
  color: rgba(255, 255, 255, 0.95);
  border-left-color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  margin-top: 0.75rem;
}

/* Typewriter hero headline animation */
.hero-headline-left .typewriter-cursor::after {
  content: '|';
  animation: blink-cursor 0.6s step-end infinite;
  margin-left: 2px;
  font-weight: 400;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-headline-left .hero-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.hero-headline-left .hero-fade-in.visible {
  opacity: 1;
}

/* Taller hero for panoramic images with overlay text */
.article-hero-tall {
  height: 560px;
  display: flex;
  align-items: center;
}

.article-hero-tall img {
  position: absolute;
  inset: 0;
}

/* Light overlay variant — subtle gradient for bright images */
.article-hero-fullwidth .hero-overlay.hero-overlay-light {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    transparent 65%
  );
}

/* Light backbox — semi-transparent white with dark text */
.article-hero-fullwidth .hero-headline.hero-headline-light {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  top: 50%;
  transform: translateY(-50%);
}

.article-hero-fullwidth .hero-headline-light .article-meta {
  color: var(--color-text-muted);
}

.article-hero-fullwidth .hero-headline-light .article-category {
  background: none;
  color: #444;
  padding: 0;
}

.article-hero-fullwidth .hero-headline-light h1 {
  color: var(--color-primary-dark);
  text-shadow: none;
  font-size: 2.25rem;
  margin: 0 0 0.75rem 0;
  line-height: 1.15;
}

.article-hero-fullwidth .hero-headline-light .article-lead {
  color: var(--color-text);
  text-shadow: none;
  border-left: 3px solid var(--color-wave-dark);
  padding-left: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Poster fallback background for video heroes */
.article-hero-fullwidth.has-video {
  background-size: cover;
  background-position: center;
}

/* Reduced motion: video hidden by consolidated block at end of file */

.article-header {
  margin-bottom: 2.5rem;
  animation: fadeInUp 0.7s ease-out 0.3s both;
}

.article-byline {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-light);
}

.byline-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.byline-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.byline-name:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.article-byline-end {
  justify-content: flex-end;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-top: none;
  padding-top: 0;
}

.article-byline-end .byline-label {
  text-transform: none;
  font-size: 1.125rem;
}

.article-byline-end .byline-name {
  font-size: 1.125rem;
}

/* Newsletter Subscribe Form */
.subscribe-form {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.subscribe-input-group {
  display: flex;
  gap: 0;
  max-width: 480px;
}

.subscribe-input-group input[type="email"] {
  flex: 1;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--color-border-light, #d0d8e8);
  border-right: none;
  border-radius: var(--radius-small, 4px) 0 0 var(--radius-small, 4px);
  color: var(--color-text);
  background: var(--color-bg, #fff);
  outline: none;
  transition: border-color 0.2s ease;
}

.subscribe-input-group input[type="email"]:focus {
  border-color: var(--color-primary);
}

.subscribe-input-group input[type="email"]::placeholder {
  color: var(--color-text-light, #999);
}

.subscribe-btn {
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 0 var(--radius-small, 4px) var(--radius-small, 4px) 0;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.subscribe-btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.subscribe-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .subscribe-input-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .subscribe-input-group input[type="email"] {
    border-right: 2px solid var(--color-border-light, #d0d8e8);
    border-radius: var(--radius-small, 4px);
  }

  .subscribe-input-group input[type="email"]:focus {
    border-color: var(--color-primary);
  }

  .subscribe-btn {
    border-radius: var(--radius-small, 4px);
  }
}

.article-category {
  background: var(--color-wave-dark);
  color: #ffffff;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-header .article-title {
  font-size: 2.75rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.15;
}

.article-lead {
  font-size: 1.35rem;
  color: #4A5A72;
  line-height: 1.6;
  margin: 0;
  border-left: 3px solid var(--color-primary);
  padding-left: 1.25rem;
}

.article-content {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--color-text);
  animation: fadeIn 0.8s ease-out 0.5s both;
}

.article-content p {
  margin-bottom: 1.75rem;
}

.article-content h2 {
  font-size: 1.85rem;
  font-weight: 600;
  margin: 3rem 0 1.25rem 0;
  color: #4A5A72;
  clear: both; /* Clear floated figures before headings */
}

.article-content h3 {
  font-size: 1.65rem;
  margin-bottom: 1.25rem;
  color: #4A5A72;
}

/* Search term highlighting when navigating from search results.
   0.8s delay → fade in (0.4s) → soft pulse (1s) → hold (2s) → fade out (1s).
   Single gentle pulse keeps it WCAG 2.3.1 safe. */
.search-highlight {
  padding: 0.1em 0.15em;
  border-radius: 3px;
  animation: highlight-show 4.4s ease 0.8s both;
}

@keyframes highlight-show {
  /* fade in */
  0% {
    background: transparent;
    color: inherit;
    box-shadow: 0 0 0 0 transparent;
  }
  /* arrive at highlight */
  9% {          /* ~0.4s */
    background: var(--color-search-highlight);
    color: var(--color-text-on-search-highlight);
  }
  /* pulse dip — background fades, text stays solid */
  20% {         /* ~0.9s */
    background: rgba(178, 224, 214, 0.35);
    color: var(--color-text-on-search-highlight);
  }
  /* settle back to full highlight */
  32% {         /* ~1.4s */
    background: var(--color-search-highlight);
    color: var(--color-text-on-search-highlight);
  }
  /* hold */
  77% {         /* ~3.4s */
    background: var(--color-search-highlight);
    color: var(--color-text-on-search-highlight);
  }
  /* fade out */
  100% {
    background: transparent;
    color: inherit;
  }
}

.article-content blockquote {
  border-left: 3px solid var(--color-wave-dark);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 1.35rem;
}

.article-content blockquote p {
  margin-bottom: 0;
}

:is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) blockquote {
  border-left-color: #3A5FD4;
}

.article-content blockquote cite {
  color: var(--color-primary);
  font-size: 0.95em;
}

.article-content blockquote.blockquote-with-portrait {
  border-left: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.blockquote-portrait {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blockquote-with-portrait .blockquote-text {
  border-left: 3px solid var(--color-wave-dark);
  padding-left: 1.5rem;
  margin-left: 1.25rem;
  flex: 1;
  min-width: 0;
}

:is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) blockquote.blockquote-with-portrait .blockquote-text {
  border-left-color: #3A5FD4;
}

@media (max-width: 767px) {
  .article-content blockquote.blockquote-with-portrait {
    flex-direction: column;
    text-align: center;
  }

  .blockquote-with-portrait .blockquote-text {
    border-left: none;
    border-top: 3px solid var(--color-wave-dark);
    padding-left: 0;
    padding-top: 1rem;
    margin-left: 0;
    margin-top: 1rem;
  }

  :is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) blockquote.blockquote-with-portrait .blockquote-text {
    border-top-color: #3A5FD4;
  }
}

:is(.section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) blockquote cite {
  color: #7BA3E8;
}

.article-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.article-content a:hover {
  color: var(--color-primary-hover);
}

.article-content ul,
.article-content ol {
  margin-bottom: 1.75rem;
  padding-left: 1.5rem;
}

.article-content ul {
  list-style-type: disc;
}

.article-content ol {
  list-style-type: decimal;
}

.article-content li {
  margin-bottom: 0.5rem;
}

.article-content li:last-child {
  margin-bottom: 0;
}

/* ===== Article Figures ===== */
/* Base figure styles - no size constraint by default */
.article-figure {
  margin: 1.5rem 0;
  padding: 0;
  border: none;
}

.article-figure img,
.article-figure svg {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.article-figure figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.75rem;
  font-style: italic;
  line-height: 1.4;
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .article-figure figcaption {
  color: var(--color-text-on-dark-muted);
}

/* Size variants */
.article-figure.figure-small {
  max-width: 280px;
}

.article-figure.figure-medium {
  max-width: 400px;
}

.article-figure.figure-large {
  max-width: 560px;
}

.article-figure.full-width {
  max-width: 100%;
  width: 100%;
  margin: 2rem 0;
}

.article-figure.full-width img,
.article-figure.full-width svg {
  max-height: 500px;
  object-fit: cover;
}

/* Responsive video embed (16:9) */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 4px;
}

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

/* Float variants - apply size constraint for floated figures */
.article-figure.float-left {
  float: left;
  max-width: 320px;
  margin: 0.5rem 2rem 1.5rem 0;
}

.article-figure.float-right {
  float: right;
  max-width: 320px;
  margin: 0.5rem 0 1.5rem 2rem;
}

/* ===== Data Tables ===== */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  background: var(--color-bg);
  margin: 1.5rem 0;
  clear: both;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.data-table thead {
  background: var(--color-primary-dark);
  color: var(--color-bg);
}

.data-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}

.data-table tbody tr:hover {
  background: var(--color-bg-muted);
}

/* Highlight rows - use higher specificity instead of !important */
.data-table tbody tr.highlight-row,
.data-table tbody tr.highlight-row:nth-child(even) {
  background: var(--color-highlight-bg);
  font-weight: 500;
}

.data-table tbody tr.highlight-row:hover {
  background: var(--color-highlight-bg-hover);
}

.table-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

/* ===== Author Bio ===== */
.author-bio {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  background: #f0faff;
  border-radius: 8px;
  margin-top: 3rem;
}

.author-avatar {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-border) 100%);
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.author-bio a:hover .author-avatar {
  opacity: 0.8;
}

.author-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.author-info h4 a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.author-info h4 a:hover {
  color: var(--color-primary);
}

.author-info p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ===== Article Navigation ===== */
.article-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border-light);
}

.article-nav a {
  color: var(--color-wave-dark);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: transform 0.3s ease, color 0.2s ease;
}

.article-nav a:hover {
  color: var(--color-wave-dark-hover);
}

.article-nav a:hover {
  text-decoration: underline;
}

.article-nav .prev:hover {
  transform: translateX(-4px);
}

.article-nav .next:hover {
  transform: translateX(4px);
}

.article-nav .prev::before {
  content: "\2190  ";
}

.article-nav .next::after {
  content: " \2192";
}

/* ===== Sidebar ===== */
.sidebar-section {
  margin-bottom: 2rem;
}

.sidebar-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-wave-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
}

.sidebar-item {
  display: flex;
  gap: 0.75rem;
  padding-top: 6px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
}

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

.sidebar-thumb {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  background: var(--color-border);
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
  transition: opacity 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.sidebar-item a {
  -webkit-tap-highlight-color: transparent;
}

.sidebar-item:hover .sidebar-thumb {
  opacity: 0.75;
}

.sidebar-content h4 {
  font-size: 0.9rem;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.sidebar-content h4 a {
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sidebar-content h4 a:hover {
  color: var(--color-primary);
}

.sidebar-content .sidebar-meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Sticky sidebar */
.sidebar-sticky {
  position: sticky;
  top: 2rem;
}

/* Scrollable sidebar content */
.sidebar-articles {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  padding-left: 6px; /* Space for focus outline */
  margin-left: -6px; /* Compensate to maintain alignment */
  padding-top: 6px; /* Space for focus outline on first item */
  padding-bottom: 6px; /* Space for focus outline on last item */
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.sidebar-articles.is-loaded {
  opacity: 1;
}

/* Custom scrollbar for sidebar */
.sidebar-articles::-webkit-scrollbar {
  width: 4px;
}

.sidebar-articles::-webkit-scrollbar-track {
  background: var(--color-bg-subtle);
  border-radius: 2px;
}

.sidebar-articles::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.sidebar-articles::-webkit-scrollbar-thumb:hover {
  background: var(--color-wave-dark);
}

/* ===== Footer Wave Animation ===== */
.footer-waves {
  position: relative;
  width: 100%;
  height: 100px;
  margin-bottom: -2px;
  overflow: hidden;
}

.footer-waves svg {
  position: absolute;
  bottom: -1px;
  width: 200%;
  max-width: none;
  height: calc(100% + 1px);
  display: block;
}

.footer-waves .wave-1 {
  fill: var(--color-wave-dark);
  animation: wave 18s ease-in-out infinite;
}

.footer-waves .wave-2 {
  fill: var(--color-wave-light);
  animation: wave 14s ease-in-out infinite reverse;
}

.footer-waves .wave-3 {
  fill: var(--color-bg-alt);
  animation: wave 10s ease-in-out infinite;
}

/* ===== Footer ===== */
.minimal-footer {
  background: var(--color-bg-alt);
  border-top: none;
  padding: 2rem 0;
  margin-top: 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-primary-dark);
}

/* ===== Special Content Styles ===== */
/* Poetry */
.poem {
  margin: 2.5rem 0;
  padding: 2rem;
  background: var(--color-bg-subtle);
  border-radius: 8px;
}

.poem-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--color-primary-dark);
  font-style: italic;
}

.poem-body {
  font-size: 1.1rem;
  line-height: 2;
  color: var(--color-text);
}

.poem-body .stanza {
  margin-bottom: 1.5rem;
}

.poem-body .stanza:last-child {
  margin-bottom: 0;
}

.poem-body .line {
  display: block;
}

/* Letter style */
.letter {
  background: var(--color-letter-bg);
  border: 1px solid var(--color-letter-border);
  padding: 2rem;
  margin: 2rem 0;
  font-family: Georgia, serif;
  font-style: italic;
  border-radius: 4px;
}

.letter p {
  margin-bottom: 1rem;
}

.letter p:last-child {
  margin-bottom: 0;
}

/* ===== Logo Morph Animation (Flubber) ===== */
.logo-morph {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto 1.5rem;
}

/* About page sidebar column - logo morph sizing */
.about-sidebar-col .logo-morph {
  max-width: 100%;
  margin: 0 0 1.5rem;
}

.about-sidebar-col .morph-pause-btn {
  width: 30px;
  height: 30px;
  bottom: 4px;
  right: 4px;
}

.about-sidebar-col .morph-pause-btn svg {
  width: 16px;
  height: 16px;
}

.logo-morph .morph-svg {
  width: 100%;
  height: auto;
  display: block;
}

.logo-morph .morph-wave {
  transition: fill 0.3s ease;
}

.logo-morph .swrcb-text,
.logo-morph .flow-state-text {
  transition: opacity 0.3s ease;
}

.logo-morph .flow-state-text {
  opacity: 0;
}

/* Pause button for accessibility */
.morph-pause-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-overlay-heavy);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), background-color var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Show on container hover */
.logo-morph:hover .morph-pause-btn {
  opacity: 0.7;
  pointer-events: auto;
}

.logo-morph:hover .morph-pause-btn:hover {
  opacity: 1;
  background: var(--color-bg);
  transform: scale(1.1);
}

/* Show button when focused (for keyboard accessibility) */
.morph-pause-btn:focus {
  opacity: 1;
  pointer-events: auto;
  outline: none;
}

/* Only show focus ring for keyboard navigation */
.keyboard-user .morph-pause-btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.morph-pause-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
  flex-shrink: 0;
}

/* About page sidebar */
.about-sidebar {
  padding-top: 0;
}

.about-sidebar-col .logo-morph {
  animation: fadeIn 2.2s ease-out 0.3s both;
}

.about-sidebar .mission-statement {
  animation: fadeIn 1.4s ease-out 0.6s both;
}

.about-sidebar .sidebar-title {
  margin-top: 0;
}

/* Mission statement */
.mission-statement {
  background: linear-gradient(135deg, rgba(0, 78, 124, 0.03) 0%, rgba(108, 144, 160, 0.06) 100%);
  border-left: 3px solid var(--color-primary);
  padding: 1.25rem;
  border-radius: 0 8px 8px 0;
}

.mission-statement .sidebar-title {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.mission-statement p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.mission-statement .mission-quote {
  font-style: italic;
  color: var(--color-primary);
  border-top: 1px solid rgba(0, 78, 124, 0.15);
  padding-top: 0.75rem;
  margin-bottom: 1rem;
}

.mission-statement .mission-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mission-statement .mission-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ===== Team Grid (About Page) ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0 3rem;
}

.team-member {
  background: var(--color-bg-subtle);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}

.team-member:nth-child(1) { background: #E4EAF5; }  /* Light periwinkle */
.team-member:nth-child(2) { background: #E8ECF4; }  /* Light lavender */
.team-member:nth-child(3) { background: #E2E8F4; }  /* Light blue */
.team-member:nth-child(4) { background: #EAECF2; }  /* Light silver */
.team-member:nth-child(5) { background: #E5E9F3; }  /* Light sky-blue */
.team-member:nth-child(6) { background: #E0E6F0; }  /* Light slate */
.team-member:nth-child(7) { background: #E8EBF5; }  /* Light iris */
.team-member:nth-child(8) { background: #E3E9F2; }  /* Light steel */

.team-avatar {
  width: 140px;
  height: 140px;
  min-height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid var(--color-wave-mid);
}

.team-member h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}

.team-member .team-role {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0 0 0.75rem 0;
}

.team-member p:last-child {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .minimal-nav {
    display: none;
  }

  .hamburger {
    display: flex;
    animation: fadeIn 0.6s ease-out 0.2s both;
  }

  .mobile-nav {
    display: block;
  }

  .mobile-overlay {
    display: block;
    pointer-events: none;
  }

  .mobile-overlay.is-active {
    pointer-events: auto;
  }

  .article-content-row {
    flex-direction: column;
  }

  .article-thumb {
    width: 100%;
    height: 200px;
  }

  .article-header .article-title {
    font-size: 2rem;
  }

  .article-lead {
    font-size: 1.15rem;
  }

  .article-hero {
    height: 250px;
  }

  .article-hero-fullwidth {
    height: 300px;
  }

  .article-hero-tall {
    height: 400px;
  }

  .article-hero-fullwidth video {
    display: none;
  }

  .article-hero-fullwidth .hero-headline h1 {
    font-size: 1.75rem;
  }

  .article-hero-fullwidth .hero-headline .hero-tagline {
    font-size: 1rem;
  }

  .article-hero-fullwidth .hero-headline.hero-headline-left {
    width: auto;
    max-width: none;
    right: 0;
    left: 0;
    top: 50%;
    border-radius: 0;
    padding: 1.25rem 1rem;
  }

  .hero-headline-light .article-title {
    font-size: 1.5rem;
  }

  .hero-headline-left .article-lead {
    font-size: 0.95rem;
  }

  .article-figure.float-left,
  .article-figure.float-right {
    float: none;
    max-width: 100%;
    margin: 2rem 0;
  }

  .article-figure.figure-small,
  .article-figure.figure-medium,
  .article-figure.figure-large {
    max-width: 100%;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .data-table {
    font-size: 0.85rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.5rem 0.75rem;
  }

  .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Add breathing room above sidebar when it stacks below article on mobile */
  .about-sidebar-col {
    margin-top: 2.5rem;
  }
}

/* ===== Modal Component ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal {
  background: var(--color-bg);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-overlay.is-active .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  padding-right: 1rem;
}

.modal-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.modal-close:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary-dark);
}

.keyboard-user .modal-close:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  background: var(--color-bg-muted);
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(85vh - 80px);
}

.modal-body h4 {
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-body h4 .methodology-number {
  background: var(--color-primary);
  color: var(--color-bg);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.modal-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.modal-body .methodology-section {
  padding: 1rem;
  background: var(--color-bg-subtle);
  border-radius: 8px;
  margin-bottom: 1rem;
  border-left: 3px solid var(--color-primary);
}

.modal-body .methodology-section:last-child {
  margin-bottom: 0;
}

.modal-body .methodology-section p:last-child {
  margin-bottom: 0;
}

.modal-body .methodology-source {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.modal-body .methodology-source a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal-body .methodology-source a:hover {
  color: var(--color-primary-hover);
}

/* Methodology wrapper - floats with the chart */
.chart-methodology-wrapper {
  clear: left;
  float: left;
  width: 45%;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* Methodology button */
.methodology-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-top: 0.75rem;
}

.methodology-btn:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.keyboard-user .methodology-btn:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.methodology-btn svg {
  width: 14px;
  height: 14px;
}

/* Methodology button on dark sections */
:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .methodology-btn {
  border-color: var(--color-overlay-strong);
  color: var(--color-text-on-dark);
}

:is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .methodology-btn:hover {
  background: var(--color-overlay-light);
  border-color: var(--color-overlay-heavy);
  color: var(--color-text-on-dark-heading);
}

.keyboard-user :is(.on-dark, .section-dark, .section-teal, .section-olive, .section-pacific, .section-slate, .section-earth, .section-gold, .section-granite) .methodology-btn:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-overlay-heavy);
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Responsive modal & methodology */
@media (max-width: 767px) {
  .chart-methodology-wrapper {
    float: none;
    width: 100%;
    margin-top: 0;
  }

  .modal-overlay {
    padding: 0.5rem;
  }

  .modal {
    max-height: 90vh;
    border-radius: 8px;
  }

  .modal-header {
    padding: 1rem 1rem 0.75rem;
  }

  .modal-header h3 {
    font-size: 1.1rem;
  }

  .modal-body {
    padding: 1rem;
    max-height: calc(90vh - 60px);
  }

  .modal-body p {
    font-size: 0.9rem;
  }

  .modal-body h4 {
    font-size: 0.95rem;
  }

  .modal-body .methodology-section {
    padding: 0.75rem;
  }

  .modal-body .methodology-source {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .modal-header h3 {
    font-size: 1rem;
  }

  .modal-body p {
    font-size: 0.85rem;
  }

  .modal-body h4 {
    font-size: 0.9rem;
  }

  .modal-body .methodology-number {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }
}

/* ===== Search Modal ===== */
/* z-index 1100 to overlay mobile nav (1000) and hamburger (1001) */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-search-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.search-modal {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  background: var(--color-bg);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-20px) scale(0.95);
  transition: transform 0.2s ease;
}

.search-modal-overlay.is-active .search-modal {
  transform: translateY(0) scale(1);
}

.search-modal-header {
  padding: 0;
}

.search-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-align: center;
  margin: 0;
  padding: 1.25rem 1rem 0;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
  margin: 1rem;
  background: var(--color-bg-muted);
  border: 2px solid var(--color-border-light);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.search-input-wrapper:has(.search-input:focus) {
  border-color: var(--color-primary);
}

.search-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  color: var(--color-text);
  outline: none;
  box-shadow: none;
  padding: 0.5rem 0;
  -webkit-appearance: none;
}

.keyboard-user .search-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 4px;
}

.search-input-wrapper:has(.search-input:focus) .search-input {
  outline: none;
}

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

.search-tips {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0.5rem 1rem 0.875rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: center;
}

.search-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  z-index: var(--z-content);
}

.search-modal-close:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.keyboard-user .search-modal-close:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.search-modal-close svg {
  width: 18px;
  height: 18px;
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.5rem 1rem;
}

.search-results-empty,
.search-results-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.search-results-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  animation: fadeIn 0.3s ease-out;
}

.search-wave-icon {
  width: 120px;
  height: auto;
  opacity: 0.5;
}

.search-wave-icon.loading-pulse {
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.98); }
  50% { opacity: 0.6; transform: scale(1); }
}

.search-loading-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.search-results-searching {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  animation: fadeIn 0.2s ease-out;
}

.searching-wave {
  width: 100px;
  height: 24px;
  overflow: visible;
}

.wave-path {
  fill: none;
  stroke: url(#wave-gradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: waveFlow 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: stroke-dashoffset;
}

@keyframes waveFlow {
  0% { stroke-dashoffset: 180; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -180; }
}

.searching-text {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.search-result-item {
  display: block;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.15s ease;
}

.search-result-item:hover,
.search-result-item:focus {
  background: var(--color-bg-muted);
  outline: none;
}

.keyboard-user .search-result-item:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.search-result-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.search-result-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 0 0 0.375rem 0;
  line-height: 1.3;
}

.search-result-section {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: 0.375rem;
}

.search-result-section::before {
  content: "§ ";
  opacity: 0.6;
}

.search-result-snippet {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-snippets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-result-snippets .search-result-snippet {
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border-light);
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
}

.search-result-snippet mark,
.search-result-title mark {
  background: var(--color-search-highlight);
  color: var(--color-text-on-search-highlight);
  padding: 0.05em 0;
  border-radius: 2px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.keyword-match-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0.35rem;
  padding: 0.2rem 0.5rem;
  background: var(--color-bg-muted);
  border-radius: 3px;
  border-left: 2px solid var(--color-primary-light);
}

/* Grouped search results - article with sections */
.search-result-group {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.search-result-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.search-result-header {
  padding: 0.5rem 1rem;
}

.search-result-title-link {
  text-decoration: none;
  color: inherit;
}

.search-result-title-link:hover .search-result-title {
  color: var(--color-primary);
}

.search-result-sections {
  display: flex;
  flex-direction: column;
}

.search-section-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 1rem 0.625rem 1.5rem;
  margin-left: 0.5rem;
  border-left: 2px solid var(--color-border-light);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-section-item:hover {
  background: var(--color-bg-muted);
  border-left-color: var(--color-primary);
}

.search-section-item:focus {
  outline: none;
  background: var(--color-bg-muted);
  border-left-color: var(--color-primary);
}

.keyboard-user .search-section-item:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.search-section-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-secondary);
}

.search-section-title::before {
  content: "§ ";
  opacity: 0.6;
}

.search-section-intro {
  font-style: italic;
  color: var(--color-text-muted);
}

.search-section-intro::before {
  content: "";
}

.search-source-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-left: 0.5rem;
  vertical-align: middle;
  /* Default style - muted */
  background: var(--color-wave-dark);
  color: var(--color-badge-text);
}

/* When badge appears inline at start of snippet (continuation items) */
.search-section-snippet > .search-source-badge:first-child {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* Chart badge - teal */
.search-source-badge--chart {
  background: var(--color-badge-chart);
}

/* Table badge - slate blue */
.search-source-badge--table {
  background: var(--color-badge-table);
}

/* Keywords badge - warm amber */
.search-source-badge--keywords {
  background: var(--color-badge-keywords);
}

/* Title badge - deep teal */
.search-source-badge--title {
  background: var(--color-primary);
}

/* Section title badge - muted sage */
.search-source-badge--section {
  background: var(--color-badge-section);
}

.search-section-item:hover .search-source-badge,
.search-section-item:focus .search-source-badge {
  opacity: 0.9;
}

.search-section-snippet {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-left: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-section-snippet.keyword-match {
  display: inline-block;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.search-section-snippet mark {
  background: var(--color-search-highlight);
  color: var(--color-text-on-search-highlight);
  padding: 0.05em 0;
  border-radius: 2px;
  font-weight: 600;
}

/* Search trigger button in header */
.minimal-header nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  animation: fadeIn 0.5s ease-out 0.7s both;
}

.search-trigger:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary);
}

.keyboard-user .search-trigger:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.search-trigger svg {
  width: 20px;
  height: 20px;
}

/* Responsive search modal - tablet */
@media (max-width: 767px) {
  /* Match hamburger fade timing on mobile */
  .search-trigger {
    animation: fadeIn 0.6s ease-out 0.2s both;
  }

  .search-modal-overlay {
    padding: 0.5rem;
    padding-top: 5vh;
  }

  .search-modal {
    max-height: 80vh;
    border-radius: 10px;
  }

  .search-modal-title {
    font-size: 1.125rem;
    padding: 1rem 1rem 0;
  }

  .search-input {
    font-size: 1rem;
  }

  .search-result-item {
    padding: 0.875rem;
  }

  .search-result-title {
    font-size: 0.95rem;
  }

  .search-result-snippet {
    font-size: 0.85rem;
  }

  .search-wave-icon {
    width: 80px;
  }
}

/* Mobile: centered modal */
@media (max-width: 480px) {
  .search-modal-overlay {
    padding: 1rem;
    padding-top: 15vh;
    align-items: flex-start;
    justify-content: center;
  }

  .search-modal {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  }

  /* Hide title on mobile - search input is self-explanatory */
  .search-modal-title {
    display: none;
  }

  /* Search input - same shape as desktop */
  .search-input-wrapper {
    margin: 1rem;
    margin-right: 3.5rem; /* Space for close button */
    padding: 0.75rem 1rem;
  }

  .search-input {
    font-size: 1rem;
  }

  /* Close button */
  .search-modal-close {
    position: absolute;
    top: 0.875rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
    background: var(--color-bg-muted);
    border-radius: 8px;
  }

  .search-modal-close:hover {
    background: var(--color-border-light);
  }

  .keyboard-user .search-modal-close:focus {
    background: var(--color-border-light);
  }

  .search-modal-close svg {
    width: 18px;
    height: 18px;
  }

  /* Tips styling */
  .search-tips {
    padding: 0 1rem 0.5rem;
    font-size: 0.75rem;
  }

  /* Results container */
  .search-results {
    padding: 0 0.5rem 1rem;
  }

  .search-results-idle {
    padding: 1.5rem;
  }

  .search-wave-icon {
    width: 60px;
  }

  /* Compact result items */
  .search-result-group {
    margin-bottom: 0.5rem;
  }

  .search-result-header {
    padding: 0.5rem 0.75rem;
  }

  .search-section-item {
    padding: 0.625rem 0.75rem;
  }
}

/* ===== Lightbox ===== */

/* Gallery trigger hint */
.lightbox-gallery .article-figure {
  cursor: pointer;
  position: relative;
}

.lightbox-gallery .article-figure::after {
  content: '';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='14' height='14' rx='2'/%3E%3Cpath d='M8 3h9a3 3 0 0 1 3 3v9'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
}

.lightbox-gallery .article-figure:hover::after,
.lightbox-gallery .article-figure:focus-within::after {
  opacity: 1;
}

/* Mosaic gallery: CSS grid with small auto-rows so items can span
   different numbers of rows, breaking up uniform horizontal lines. */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  gap: 0.5rem;
  margin: 1.5rem 0;
  max-width: 100%;
}

.gallery-mosaic .article-figure {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  grid-row: span 2;
  min-width: 0;
}

.gallery-mosaic .article-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.gallery-mosaic .article-figure:hover img {
  transform: scale(1.03);
}

.gallery-mosaic .article-figure figcaption {
  display: none;
}

/* Wide images span 2 columns */
.gallery-mosaic .mosaic-wide {
  grid-column: span 2;
}

/* Tall images span 3 rows */
.gallery-mosaic .mosaic-tall {
  grid-row: span 3;
}

/* Stack to 2 columns on tablets */
@media (max-width: 768px) {
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 90px;
  }

  .gallery-mosaic .mosaic-wide {
    grid-column: span 2;
  }
}

/* Single column on small phones */
@media (max-width: 480px) {
  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: 120px;
  }

  .gallery-mosaic .mosaic-wide,
  .gallery-mosaic .mosaic-tall {
    grid-column: span 1;
    grid-row: span 2;
  }
}

/* ── Gallery Slider ───────────────────────────────────────── */

.gallery-slider {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-subtle, #f5f5f5);
  max-width: 100%;
  margin: 1.5rem 0;
}

.gallery-caption {
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-align: center;
  margin: -0.75rem 0 1.5rem;
  font-style: italic;
}

/* Stack all figures; only .slider-active is visible */
.gallery-slider .article-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 0;
}

/* Outgoing slide directions */
.gallery-slider .article-figure.slider-exit-left {
  transform: translateX(-6%);
}

.gallery-slider .article-figure.slider-exit-right {
  transform: translateX(6%);
}

.gallery-slider .article-figure.slider-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 1;
}

/* Fixed aspect ratio — images fill the frame via object-fit */
.gallery-slider .article-figure img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

@media (max-width: 768px) {
  .gallery-slider .article-figure img {
    height: 360px;
  }
}

@media (max-width: 480px) {
  .gallery-slider .article-figure img {
    height: 260px;
  }
}

/* Hide the gallery icon that appears on hover — counter badge is enough */
.gallery-slider .article-figure::after {
  display: none;
}

/* Caption: hidden by default, slides up when info button is toggled */
.gallery-slider .article-figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.gallery-slider .article-figure figcaption.slider-caption-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.gallery-slider .article-figure figcaption a {
  color: #9dc4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gallery-slider .article-figure figcaption a:hover {
  color: #fff;
}

/* Info button — stays circular, slides up when caption opens */
.slider-info {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background 0.2s ease,
              bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Both icons stacked in the same grid cell, crossfade between them */
.slider-info svg {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-info .slider-icon-info {
  opacity: 1;
  transform: scale(1);
}

.slider-info .slider-icon-chevron {
  opacity: 0;
  transform: scale(0.6);
  width: 14px;
  height: 14px;
}

.slider-info .slider-icon-close {
  opacity: 0;
  transform: scale(0.6);
  width: 14px;
  height: 14px;
}

.slider-info.slider-info-active .slider-icon-info {
  opacity: 0;
  transform: scale(0.6);
}

.slider-info.slider-info-active .slider-icon-chevron {
  opacity: 1;
  transform: scale(1);
}

.slider-info:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* bottom is set by JS when active to sit just above the caption */

/* Focus ring: inherits global .keyboard-user :focus rule (3px solid amber) */

/* Prev / Next buttons */
.slider-prev,
.slider-next {
  position: absolute;
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 2;
}

.slider-prev { left: 0.75rem; }
.slider-next { right: 0.75rem; }

.slider-prev:hover,
.slider-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Focus ring: inherits global .keyboard-user :focus rule (3px solid amber) */

/* Counter badge */
.slider-counter {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}

/* Tablet: anchor buttons to image height so caption expand doesn't shift them */
@media (max-width: 767px) {
  .gallery-slider {
    background: transparent;
  }

  /* Image is 360px — center arrows: 360/2 - 22px = 158px */
  .slider-prev,
  .slider-next {
    top: 158px;
  }

  /* Anchor info button to image bottom */
  .slider-info {
    bottom: auto;
    top: calc(360px - 36px - 0.75rem);
  }

  /* Caption flows below image instead of overlaying */
  .gallery-slider .article-figure figcaption {
    position: relative;
    transform: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 1rem;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .gallery-slider .article-figure figcaption.slider-caption-visible {
    max-height: 500px;
    padding: 0.6rem 1rem;
    border-radius: 8px 8px 0 0;
  }

  /* On mobile: morph info → X (not chevron) when active */
  .slider-info.slider-info-active .slider-icon-chevron {
    opacity: 0;
    transform: scale(0.6);
  }

  .slider-info.slider-info-active .slider-icon-close {
    opacity: 1;
    transform: scale(1);
  }
}

/* Small mobile: smaller buttons, shorter image */
@media (max-width: 480px) {
  /* Image is 260px — center arrows: 260/2 - 18px = 112px */
  .slider-prev,
  .slider-next {
    width: 36px;
    height: 36px;
    top: 112px;
  }

  .slider-prev { left: 0.5rem; }
  .slider-next { right: 0.5rem; }

  .slider-counter {
    font-size: 0.7rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  .slider-info {
    width: 36px;
    height: 36px;
    top: calc(260px - 36px - 0.5rem);
    left: 0.5rem;
  }
}

/* Landscape phones: shorter slider image */
@media (max-width: 767px) and (orientation: landscape) {
  .gallery-slider .article-figure img {
    height: 220px;
  }

  /* Center arrows: 220/2 - 18px = 92px */
  .slider-prev,
  .slider-next {
    top: 92px;
  }

  .slider-info {
    top: calc(220px - 36px - 0.5rem);
  }
}

/* Root overlay */
.lightbox-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-overlay);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 333ms cubic-bezier(.4, 0, .22, 1),
              visibility 333ms cubic-bezier(.4, 0, .22, 1);
  touch-action: none;
}

.lightbox-root.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Separate background div — enables independent opacity during drag */
.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 2;
}

.lightbox-close:hover,
.keyboard-user .lightbox-close:focus {
  background: rgba(255, 255, 255, 0.4);
}

.lightbox-close svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Image wrapper — positions fullscreen button relative to the image */
.lightbox-img-wrap {
  position: relative;
  line-height: 0;
  max-width: calc(100% - 1rem);
}

/* Fullscreen button — corner badge on image (desktop only) */
.lightbox-fullscreen {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 2;
}

.lightbox-fullscreen:hover,
.keyboard-user .lightbox-fullscreen:focus {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

.lightbox-fullscreen:active {
  transform: none;
}

.lightbox-fullscreen svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Nav buttons — in rootEl (not stage) so position is viewport-stable */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: calc(50% + 0.75rem);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}

.lightbox-prev { left: calc(1rem + env(safe-area-inset-left, 0px)); }
.lightbox-next { right: calc(1rem + env(safe-area-inset-right, 0px)); }

.lightbox-prev:hover,
.keyboard-user .lightbox-prev:focus,
.lightbox-next:hover,
.keyboard-user .lightbox-next:focus {
  background: rgba(255, 255, 255, 0.4);
}

/* Override global button :active transform — the global
   button:active { transform: translateY(1px) } has specificity (0,1,1),
   which beats the nav button class selectors (0,1,0). Without this fix,
   clicking a nav button causes it to jump ~50% of the stage height
   mid-click, so mouseup lands on a different element and the lightbox
   closes. */
.lightbox-prev:active,
.lightbox-next:active {
  transform: translateY(-50%);
}

.lightbox-close:active {
  transform: none;
}

.lightbox-prev svg,
.lightbox-next svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Stage area */
.lightbox-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 4.5rem 0;
  padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
  min-height: 0;
  will-change: transform, opacity;
}

.lightbox-image {
  max-width: 100%;
  max-height: 82vh;
  max-height: 82dvh;
  object-fit: contain;
  border-radius: 4px;
  transition: opacity 0.2s ease;
  will-change: transform;
}

/* Info toggle button — sits on the image, bottom-left */
.lightbox-info-btn {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s ease;
}

.lightbox-info-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.lightbox-info-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Caption area — absolutely positioned below the image */
.lightbox-info {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0 0 4px 4px;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-info.is-expanded {
  grid-template-rows: 1fr;
}

.lightbox-caption {
  overflow: hidden;
  min-height: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.lightbox-caption-inner {
  padding: 0.75rem 1rem;
}

.lightbox-caption a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lightbox-caption a:hover,
.keyboard-user .lightbox-caption a:focus {
  color: #fff;
}

.lightbox-counter {
  position: absolute;
  top: calc(0.85rem + env(safe-area-inset-top, 0px));
  left: calc(0.85rem + env(safe-area-inset-left, 0px));
  z-index: 3;
  padding: 0.2rem 0.55rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Thumbnail strip */
.lightbox-thumbs {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.lightbox-thumb.is-active {
  border-color: #fff;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.lightbox-thumb:hover,
.keyboard-user .lightbox-thumb:focus {
  opacity: 0.85;
}

.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Loading spinner */
.lightbox-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.lightbox-loader[aria-hidden="false"] {
  display: flex;
}

.lightbox-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lightbox-spin 0.8s linear infinite;
}

@keyframes lightbox-spin {
  to { transform: rotate(360deg); }
}

/* Zoom controls — bottom-right, stacked vertically */
.lightbox-zoom-controls {
  position: absolute;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  z-index: 3;
}

.lightbox-zoom-in,
.lightbox-zoom-out {
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.lightbox-zoom-in:hover,
.keyboard-user .lightbox-zoom-in:focus,
.lightbox-zoom-out:hover,
.keyboard-user .lightbox-zoom-out:focus {
  background: rgba(0, 0, 0, 0.75);
}

.lightbox-zoom-in:active,
.lightbox-zoom-out:active {
  transform: none;
}

.lightbox-zoom-in:disabled,
.lightbox-zoom-out:disabled {
  opacity: 0.3;
  cursor: default;
}

.lightbox-zoom-in svg,
.lightbox-zoom-out svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Zoomed cursor states */
.lightbox-root.is-zoomed .lightbox-image {
  cursor: grab;
}

.lightbox-root.is-zoomed .lightbox-image:active {
  cursor: grabbing;
}

.lightbox-root.is-zoomed .lightbox-info,
.lightbox-root.is-zoomed .lightbox-info-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Single-image gallery: hide nav, thumbs, counter */
.lightbox-root[data-count="1"] .lightbox-prev,
.lightbox-root[data-count="1"] .lightbox-next,
.lightbox-root[data-count="1"] .lightbox-thumbs,
.lightbox-root[data-count="1"] .lightbox-counter {
  display: none;
}

/* Wide screens: pull controls toward the image but not past it.
   clamp() keeps buttons ≥2rem from edge, ideally near the image boundary,
   and never more than 8rem inward on ultra-wide monitors. */
@media (min-width: 1200px) {
  .lightbox-prev { left: clamp(2rem, calc(50% - 30rem), 8rem); }
  .lightbox-next { right: clamp(2rem, calc(50% - 30rem), 8rem); }
  .lightbox-close { right: clamp(2rem, calc(50% - 30rem), 8rem); }
  .lightbox-counter { left: clamp(2rem, calc(50% - 30rem), 8rem); }
  .lightbox-zoom-controls { right: clamp(2rem, calc(50% - 30rem), 8rem); }

  .lightbox-prev:active { transform: translateY(-50%); }
  .lightbox-next:active { transform: translateY(-50%); }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 38px;
    height: 38px;
  }

  .lightbox-close svg,
  .lightbox-prev svg,
  .lightbox-next svg {
    width: 20px;
    height: 20px;
  }

  .lightbox-fullscreen {
    display: none;
  }

  .lightbox-stage {
    padding: 3rem 2.5rem 0.5rem;
  }

  .lightbox-image {
    max-height: 78vh;
    max-height: 78dvh;
  }

  .lightbox-thumb {
    width: 44px;
    height: 44px;
  }

  .lightbox-thumbs {
    padding: 0.5rem 0.75rem;
    gap: 0.375rem;
  }
}

/* Portrait phones: full-width images, overlay nav */
@media (max-width: 767px) and (orientation: portrait) {
  .lightbox-zoom-controls {
    display: none;
  }

  .lightbox-stage {
    padding: 2.5rem 0 0.25rem;
    padding-top: calc(2.5rem + env(safe-area-inset-top, 0px));
  }

  .lightbox-img-wrap {
    max-width: 100%;
    border-radius: 0;
  }

  .lightbox-image {
    max-height: 85vh;
    max-height: 85dvh;
  }

  .lightbox-prev,
  .lightbox-next {
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.35);
  }

  .lightbox-prev:active,
  .lightbox-next:active {
    transform: translateY(-50%);
  }

  .lightbox-prev:hover,
  .keyboard-user .lightbox-prev:focus,
  .lightbox-next:hover,
  .keyboard-user .lightbox-next:focus {
    background: rgba(0, 0, 0, 0.55);
  }

  .lightbox-prev { left: calc(0.25rem + env(safe-area-inset-left, 0px)); }
  .lightbox-next { right: calc(0.25rem + env(safe-area-inset-right, 0px)); }

  .lightbox-thumbs {
    display: none;
  }

  .lightbox-info {
    border-radius: 0;
  }

  .lightbox-caption {
    font-size: 0.82rem;
  }

  .lightbox-caption-inner {
    padding: 0.5rem 0.75rem;
  }
}

/* Landscape phones: compact layout to give image more room */
@media (max-height: 500px) {
  .lightbox-thumbs {
    display: none;
  }

  .lightbox-image {
    max-height: 85vh;
    max-height: 85dvh;
  }

  .lightbox-stage {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .lightbox-close {
    top: 0.25rem;
    right: 0.25rem;
    width: 32px;
    height: 32px;
  }

  .lightbox-counter {
    top: 0.35rem;
    left: 0.35rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
  }

  .lightbox-zoom-controls {
    display: none;
  }

  /* In landscape, overlay caption on bottom of image instead of below it */
  .lightbox-info {
    top: auto;
    bottom: 0;
    border-radius: 0;
  }

  .lightbox-info-btn {
    bottom: auto;
    top: 0.5rem;
    left: 0.5rem;
  }

  .lightbox-caption {
    font-size: 0.8rem;
  }

  .lightbox-caption-inner {
    padding: 0.35rem 0.75rem;
  }
}

/* Lightbox focus — slightly tighter outline for overlay controls */
.keyboard-user .lightbox-close:focus,
.keyboard-user .lightbox-fullscreen:focus,
.keyboard-user .lightbox-prev:focus,
.keyboard-user .lightbox-next:focus,
.keyboard-user .lightbox-zoom-in:focus,
.keyboard-user .lightbox-zoom-out:focus,
.keyboard-user .lightbox-thumb:focus,
.keyboard-user .lightbox-info-btn:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-info-btn,
  .lightbox-info,
  .lightbox-caption {
    transition: none;
  }
}

/* ===== Back to Top Button ===== */
.return-top {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-return-top);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateX(calc(100% + 4rem));
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.return-top svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.return-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.return-top:hover {
  background-color: var(--color-bg-muted);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.return-top.is-visible:active {
  transform: translateX(0) translateY(1px);
}

.keyboard-user .return-top:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .return-top {
    bottom: 1.5rem;
  }

  .return-top.is-visible {
    right: 1rem;
  }
}

/* ===== Reduce Motion for Accessibility ===== */
/* ===== Collapsible Sections (details/summary) =====
   Full narrative sections — galleries, blockquotes, sub-headings — that
   collapse behind their H2 heading.  Not a small FAQ accordion; these wrap
   entire regions of an article so readers can focus on what interests them. */
.section-collapse {
  margin: 3rem 0 1.25rem 0;
}

.section-collapse summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-left: 4px solid var(--color-primary);
  padding: 0.25rem 0 0.25rem 0.85rem;
}

.section-collapse summary::-webkit-details-marker {
  display: none;
}

.section-collapse summary h2 {
  margin: 0;
  flex: 1;
  font-weight: 600;
  scroll-margin-top: 1.5rem;
  color: #032DB3;
}

.section-collapse summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  border-right: 2.5px solid var(--color-primary-dark);
  border-bottom: 2.5px solid var(--color-primary-dark);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-right: 0.25rem;
}

.section-collapse[open] summary::after {
  transform: rotate(-135deg);
}

.section-collapse-body {
  padding-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  /* Hide hero video; parent background-image serves as static poster fallback */
  .article-hero-fullwidth video {
    display: none;
  }

  .article-hero-fullwidth.has-video {
    background-size: cover;
    background-position: center;
  }
}