@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   GHOST CONTENT CARDS
   ============================================================ */
.kg-width-wide {
  margin-left: -50vw;
  margin-right: -50vw;
}
.kg-width-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.kg-width-full img {
  width: 100%;
  height: auto;
}

.kg-image { max-width: 100%; }
.kg-image-card { margin: 1.5em 0; }
.kg-image-card img { border-radius: var(--r-md); }

.kg-gallery-container { display: flex; flex-direction: column; max-width: 1040px; width: 100%; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.kg-embed-card iframe { max-width: 100%; }

.kg-card figcaption {
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-subtle);
  padding: var(--space-6) 0 0;
}

.kg-bookmark-card { width: 100%; margin: 1.5em 0; }
.kg-bookmark-container {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  transition: box-shadow 0.25s;
}
.kg-bookmark-container:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.kg-bookmark-content { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16); flex: 1; }
.kg-bookmark-title { font-size: 14px; font-weight: 600; color: var(--color-text); }
.kg-bookmark-description { font-size: 12px; color: var(--color-text-muted); }
.kg-bookmark-metadata { display: flex; align-items: center; gap: var(--space-6); font-size: 11px; color: var(--color-text-subtle); }
.kg-bookmark-icon { width: 16px; height: 16px; }
.kg-bookmark-thumbnail { width: 160px; flex-shrink: 0; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.kg-callout-card {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--r-md);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-light);
  margin: 1.5em 0;
}
.kg-callout-emoji { font-size: 20px; line-height: 1.4; flex-shrink: 0; }
.kg-callout-text { font-size: 14px; line-height: 1.7; color: var(--color-text); }

.kg-toggle-card {
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 1.5em 0;
}
.kg-toggle-heading-text { font-size: 15px; font-weight: 600; padding: var(--space-14) var(--space-16); cursor: pointer; }
.kg-toggle-content { padding: 0 var(--space-16) var(--space-14); font-size: 14px; color: var(--color-text-muted); }

.kg-video-card { margin: 1.5em 0; }
.kg-video-card video { width: 100%; border-radius: var(--r-md); }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --gh-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --gh-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Brand */
  --color-primary: #5F263E;
  --color-primary-dark: #4A1E30;
  --color-primary-light: #F5E8ED;
  --color-accent: #A05A7A;
  --color-on-primary: #ffffff;

  /* Light mode surfaces */
  --color-bg: #f0f2f5;
  --color-surface: #ffffff;
  --color-surface-2: #f8f9fa;
  --color-surface-3: #eef0f3;

  /* Light mode text */
  --color-text: #0d1117;
  --color-text-muted: #5a6473;
  --color-text-subtle: #8b949e;

  /* Light mode borders */
  --color-border: #dce1e9;
  --color-border-light: #eef0f3;

  /* Glass (light) */
  --glass-bg: rgba(255, 255, 255, 0.80);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px) saturate(180%);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;


  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.16);
  --shadow-brand: 0 8px 22px rgba(95, 38, 62, 0.24);

  /* Timing */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --duration: 0.25s;
  --transition: var(--duration) var(--ease);

  /* Layout */
  --site-max: 1400px;
  --content-max: 1200px;
  --sidebar-w: 320px;
  --gap: 20px;
  --header-h: 52px;
}

/* Dark mode */
[data-theme="dark"] {
  --color-bg: #090d12;
  --color-surface: #0d1117;
  --color-surface-2: #131920;
  --color-surface-3: #1a2027;

  --color-text: #e6edf3;
  --color-text-muted: #a7b0bd;
  --color-text-subtle: #8b949e;

  --color-border: #21293a;
  --color-border-light: #181f2a;

  --color-primary: #C68A9F;
  --color-primary-dark: #A05A7A;
  --color-primary-light: #1F1838;
  --color-accent: #D4A8B9;
  --color-on-primary: #1b1117;

  --glass-bg: rgba(13, 17, 23, 0.82);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-brand: 0 10px 28px rgba(198, 138, 159, 0.28);

  --shadow-xs: 0 1px 4px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.6);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}
body.search-open { overflow: hidden; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); letter-spacing: -0.02em; line-height: 1.25; }
p { line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: var(--font-sans); cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
    SITE WRAPPER
   ============================================================ */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   READING PROGRESS
   ============================================================ */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

/* ============================================================
    STICKY AD BAR - Glassmorphism design
    ============================================================ */
.header-ad-wrapper {
  position: sticky;
  top: 0;
  z-index: 2000;
  /* Glassmorphism effect */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.header-ad-bar {
  padding: var(--space-8) 0;
  text-align: center;
  background: transparent;
}

.header-ad-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-16);
  display: flex;
  justify-content: center;
  align-items: center;
}

.leaderboard-carousel {
  width: 728px;
  height: 90px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
}

.leaderboard-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.leaderboard-slide {
  flex: 0 0 100%;
  width: 728px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--r-sm);
}

.leaderboard-carousel { min-height: 90px; }

.leaderboard-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 728px;
  height: 90px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: all var(--transition);
}

.leaderboard-ad.ad-filled {
  background: transparent;
  border: none;
}

.leaderboard-ad .ad-link {
  display: block;
  width: 100%;
  height: 100%;
}

.leaderboard-ad .ad-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--r-sm);
}

.ad-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
    GLASSMORPHISM HEADER - Below ad bar
    ============================================================ */
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---------- header-row (flex container) ---------- */
.header-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-16);
  height: var(--header-h);
  min-height: var(--header-h);
  transition: transform 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
  /* Glassmorphism effect */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.header-row.header-hidden {
  transform: translateY(-100%);
}

.header-ad-wrapper.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.header-ad-wrapper {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Ad bar is always sticky - never hidden */

.header-row-left {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.header-row-right {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
  flex-shrink: 0;
}

/* ---------- Hamburger / Nav Toggle (all screen sizes) ---------- */
.nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-on-primary);
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(95, 38, 62, 0.18);
}
.nav-toggle-btn:hover { 
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}
.nav-toggle-btn[aria-expanded="true"] {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 16px;
}
.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transition: all var(--transition);
}
.nav-toggle-btn[aria-expanded="true"] .hamburger-icon {
  gap: 0;
}
.nav-toggle-btn[aria-expanded="true"] .hamburger-icon span {
  background: currentColor;
}
.nav-toggle-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Logo (image-based, light/dark switch) ---------- */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  text-decoration: none;
  transition: opacity var(--transition);
  line-height: 0;
}
.logo:hover { opacity: 0.8; }

.logo-img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 210px;
  object-fit: contain;
}
.logo-light { display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

/* ---------- Category Bar (inside header-row) ---------- */
.category-bar {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  justify-content: center;
  padding: 0 var(--space-16);
}
.category-bar::-webkit-scrollbar { display: none; }

.cat-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-6) var(--space-10);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.cat-link:hover, .cat-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ---------- Dark Toggle ---------- */
.dark-toggle-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark-toggle-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
.dark-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Events Button ---------- */
.events-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-primary);
  padding: var(--space-6) var(--space-14);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  flex-shrink: 0;
  border: 1px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(95, 38, 62, 0.25);
}
.events-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.events-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.events-btn .events-icon {
  color: currentColor;
}
.events-icon {
  font-size: 14px;
}
.events-text {
  display: none;
}

/* Show events text on larger screens */
@media (min-width: 769px) {
  .events-text {
    display: inline;
  }
}

/* ---------- Search Button ---------- */
.search-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.search-toggle-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}
.search-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
    SEARCH MODAL — glassmorphism design, theme consistent
    ============================================================ */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 10000;
  padding: var(--space-20);
}
.search-modal[aria-hidden="false"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.search-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(9, 13, 18, 0.58);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  z-index: 0;
  cursor: pointer;
}

.search-modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  max-height: min(78vh, 780px);
  margin-top: 48px;
  animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--color-border);
  overflow: hidden;
  z-index: 1;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

.search-input {
  flex: 1;
  padding: var(--space-14) var(--space-16);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--r-sm);
  font-size: 16px;
  color: var(--color-text);
  font-family: inherit;
  transition: all var(--transition);
}
.search-input::placeholder {
  color: var(--color-text-muted);
}
.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  background: var(--color-surface);
}

.search-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  border-radius: var(--r-sm);
  transition: all var(--transition);
}
.search-close-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-xs);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-16) var(--space-20) var(--space-20);
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
}

.search-hint,
.search-loading,
.search-no-results,
.search-more-results {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-32) var(--space-16);
  font-size: 14px;
}
.search-loading {
  color: var(--color-primary);
  font-weight: 700;
}
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.search-results-header span:last-child {
  min-width: 32px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 800;
  text-align: center;
}

.search-result-item {
  display: block;
  padding: var(--space-16);
  margin-bottom: var(--space-12);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
  cursor: pointer;
}
.search-result-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.search-result-kicker,
.search-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-result-title {
  font-weight: 800;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  font-size: 15px;
  line-height: 1.35;
}

.search-result-excerpt {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: var(--space-12);
}

.search-result-type {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-weight: 800;
  font-size: 10px;
}
.search-result-event {
  border-left: 3px solid var(--color-primary);
}
.search-result-footer {
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
}
.search-result-footer span:last-child {
  color: var(--color-primary);
}
.search-more-results {
  padding: var(--space-16);
  border: 1px dashed var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
}

/* Dark mode */
[data-theme="dark"] .search-modal-content {
  background: var(--color-surface);
}
[data-theme="dark"] .search-results {
  background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
}
[data-theme="dark"] .search-result-item {
  background: var(--color-surface-2);
}

/* ============================================================
   NAV PANEL — toggled via hamburger, all screen sizes
   ============================================================ */
.nav-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-16) 0;
  display: none;
  z-index: 1500;
}
.nav-panel[aria-hidden="false"] { display: block; }

.nav-panel-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-12);
  align-items: center;
}
.nav-panel-inner a {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-8) var(--space-14);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: all var(--transition);
}
.nav-panel-inner a:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Events link — highlighted in panel */
.nav-panel-event {
  color: var(--color-on-primary) !important;
  background: var(--color-primary) !important;
  font-weight: 700 !important;
}
.nav-panel-event:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-on-primary) !important;
}

.nav-panel-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ============================================================
    MAIN LAYOUT — content + sidebar
    ============================================================ */
.main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-20) var(--space-16) 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.content { 
  min-width: 0;
}

/* ============================================================
    POSTS GRID — Simple 2-col layout
    ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

.posts-grid .card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.posts-grid .hero-card {
  min-height: 400px;
  grid-column: 1 / -1;
}

/* Read More button - primary color, rounded, with hover */
.read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition);
}

.read-more:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
  color: var(--color-on-primary);
}

/* Card base styling */
.card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border-light);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
}

/* Card image */
.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  flex-shrink: 0;
}

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

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

.card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  opacity: 0.3;
}

/* Card body */
.card-body {
  padding: var(--space-12) var(--space-14);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-6);
}

.card-body h3 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card:hover .card-body h3 {
  color: var(--color-primary);
}

.card-excerpt {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.post-date {
  font-size: 10px;
  color: var(--color-text-subtle);
}

/* Badge */
.badge,
.post-tag-badge,
.post-tag,
.related-post-tag,
.event-card-tag,
.event-tag-badge {
  --tag-bg: rgba(95, 38, 62, 0.12);
  --tag-text: var(--color-primary);
  --tag-border: rgba(95, 38, 62, 0.24);
}

.badge {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: calc(100% - var(--space-16));
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  padding: 4px 8px;
  border-radius: var(--r-full);
  color: var(--tag-text, #334155);
  background: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)), var(--tag-bg, rgba(255, 255, 255, 0.82));
  border: 1px solid var(--tag-border, rgba(148, 163, 184, 0.32));
  letter-spacing: 0.065em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--tag-accent, currentColor);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-accent, currentColor) 16%, transparent);
  flex: 0 0 auto;
}

.card-img .badge {
  background: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)), var(--tag-bg, rgba(255, 255, 255, 0.82));
  border-color: var(--tag-border, rgba(255, 255, 255, 0.58));
}

.tag-markets, .badge-markets, .tag-macro, .badge-macro, .tag-finance, .badge-finance, .tag-fin, .badge-fin { --tag-bg: rgba(22, 163, 74, 0.12); --tag-text: #15803D; --tag-border: rgba(22, 163, 74, 0.28); }
.tag-banking, .badge-banking, .tag-institutional, .badge-institutional { --tag-bg: rgba(30, 64, 175, 0.12); --tag-text: #1E40AF; --tag-border: rgba(30, 64, 175, 0.28); }
.tag-fintech, .badge-fintech, .tag-technology, .badge-technology, .tag-tech, .badge-tech { --tag-bg: rgba(147, 51, 234, 0.12); --tag-text: #7E22CE; --tag-border: rgba(147, 51, 234, 0.28); }
.tag-payments, .badge-payments, .tag-news, .badge-news, .tag-grid, .badge-grid, .tag-infrastructure, .badge-infrastructure { --tag-bg: rgba(2, 132, 199, 0.12); --tag-text: #0369A1; --tag-border: rgba(2, 132, 199, 0.28); }
.tag-wealth, .badge-wealth, .tag-analysis, .badge-analysis { --tag-bg: rgba(202, 138, 4, 0.14); --tag-text: #A16207; --tag-border: rgba(202, 138, 4, 0.30); }
.tag-insurance, .badge-insurance { --tag-bg: rgba(13, 148, 136, 0.12); --tag-text: #0F766E; --tag-border: rgba(13, 148, 136, 0.28); }
.tag-policy, .badge-policy, .tag-policy-regulation, .badge-policy-regulation, .tag-regulation, .badge-regulation, .tag-regulatory, .badge-regulatory, .tag-reg, .badge-reg { --tag-bg: rgba(100, 116, 139, 0.14); --tag-text: #475569; --tag-border: rgba(100, 116, 139, 0.30); }
.tag-crypto, .badge-crypto { --tag-bg: rgba(245, 158, 11, 0.14); --tag-text: #B45309; --tag-border: rgba(245, 158, 11, 0.30); }
.tag-company-updates, .badge-company-updates, .tag-business, .badge-business, .tag-biz, .badge-biz { --tag-bg: rgba(100, 116, 139, 0.12); --tag-text: #475569; --tag-border: rgba(100, 116, 139, 0.26); }
.tag-research, .badge-research, .tag-res, .badge-res, .tag-semiconductors, .badge-semiconductors { --tag-bg: rgba(79, 70, 229, 0.12); --tag-text: #4338CA; --tag-border: rgba(79, 70, 229, 0.28); }
.tag-product-launch, .badge-product-launch, .tag-cloud, .badge-cloud, .tag-storage, .badge-storage { --tag-bg: rgba(8, 145, 178, 0.12); --tag-text: #0E7490; --tag-border: rgba(8, 145, 178, 0.28); }
.tag-ai, .badge-ai, .tag-transition, .badge-transition { --tag-bg: rgba(124, 58, 237, 0.12); --tag-text: #6D28D9; --tag-border: rgba(124, 58, 237, 0.28); }
.tag-cybersecurity, .badge-cybersecurity { --tag-bg: rgba(220, 38, 38, 0.12); --tag-text: #B91C1C; --tag-border: rgba(220, 38, 38, 0.28); }
.tag-coal, .badge-coal, .tag-oil-gas, .badge-oil-gas { --tag-bg: rgba(180, 83, 9, 0.13); --tag-text: #92400E; --tag-border: rgba(180, 83, 9, 0.30); }
.tag-sponsored, .badge-sponsored, .tag-default, .badge-default { --tag-bg: rgba(100, 116, 139, 0.14); --tag-text: #475569; --tag-border: rgba(100, 116, 139, 0.30); }

[data-theme="dark"] .badge,
[data-theme="dark"] .post-tag-badge,
[data-theme="dark"] .post-tag,
[data-theme="dark"] .related-post-tag,
[data-theme="dark"] .event-card-tag,
[data-theme="dark"] .event-tag-badge {
  --tag-bg: rgba(198, 138, 159, 0.18);
  --tag-text: var(--color-accent);
  --tag-border: rgba(198, 138, 159, 0.34);
}

[data-theme="dark"] .badge {
  background: linear-gradient(var(--tag-bg), var(--tag-bg)), rgba(15, 23, 42, 0.74);
}

[data-theme="dark"] .tag-markets, [data-theme="dark"] .badge-markets, [data-theme="dark"] .tag-macro, [data-theme="dark"] .badge-macro, [data-theme="dark"] .tag-finance, [data-theme="dark"] .badge-finance, [data-theme="dark"] .tag-fin, [data-theme="dark"] .badge-fin { --tag-bg: rgba(22, 163, 74, 0.20); --tag-text: #86EFAC; --tag-border: rgba(22, 163, 74, 0.36); }
[data-theme="dark"] .tag-banking, [data-theme="dark"] .badge-banking, [data-theme="dark"] .tag-institutional, [data-theme="dark"] .badge-institutional { --tag-bg: rgba(30, 64, 175, 0.20); --tag-text: #93C5FD; --tag-border: rgba(30, 64, 175, 0.36); }
[data-theme="dark"] .tag-fintech, [data-theme="dark"] .badge-fintech, [data-theme="dark"] .tag-technology, [data-theme="dark"] .badge-technology, [data-theme="dark"] .tag-tech, [data-theme="dark"] .badge-tech { --tag-bg: rgba(147, 51, 234, 0.20); --tag-text: #D8B4FE; --tag-border: rgba(147, 51, 234, 0.36); }
[data-theme="dark"] .tag-payments, [data-theme="dark"] .badge-payments, [data-theme="dark"] .tag-news, [data-theme="dark"] .badge-news, [data-theme="dark"] .tag-grid, [data-theme="dark"] .badge-grid, [data-theme="dark"] .tag-infrastructure, [data-theme="dark"] .badge-infrastructure { --tag-bg: rgba(2, 132, 199, 0.20); --tag-text: #7DD3FC; --tag-border: rgba(2, 132, 199, 0.36); }
[data-theme="dark"] .tag-wealth, [data-theme="dark"] .badge-wealth, [data-theme="dark"] .tag-analysis, [data-theme="dark"] .badge-analysis { --tag-bg: rgba(202, 138, 4, 0.20); --tag-text: #FDE68A; --tag-border: rgba(202, 138, 4, 0.36); }
[data-theme="dark"] .tag-insurance, [data-theme="dark"] .badge-insurance { --tag-bg: rgba(13, 148, 136, 0.20); --tag-text: #5EEAD4; --tag-border: rgba(13, 148, 136, 0.36); }
[data-theme="dark"] .tag-policy, [data-theme="dark"] .badge-policy, [data-theme="dark"] .tag-policy-regulation, [data-theme="dark"] .badge-policy-regulation, [data-theme="dark"] .tag-regulation, [data-theme="dark"] .badge-regulation, [data-theme="dark"] .tag-regulatory, [data-theme="dark"] .badge-regulatory, [data-theme="dark"] .tag-reg, [data-theme="dark"] .badge-reg { --tag-bg: rgba(148, 163, 184, 0.20); --tag-text: #CBD5E1; --tag-border: rgba(148, 163, 184, 0.36); }
[data-theme="dark"] .tag-crypto, [data-theme="dark"] .badge-crypto { --tag-bg: rgba(245, 158, 11, 0.20); --tag-text: #FCD34D; --tag-border: rgba(245, 158, 11, 0.36); }
[data-theme="dark"] .tag-company-updates, [data-theme="dark"] .badge-company-updates, [data-theme="dark"] .tag-business, [data-theme="dark"] .badge-business, [data-theme="dark"] .tag-biz, [data-theme="dark"] .badge-biz { --tag-bg: rgba(148, 163, 184, 0.18); --tag-text: #CBD5E1; --tag-border: rgba(148, 163, 184, 0.32); }
[data-theme="dark"] .tag-research, [data-theme="dark"] .badge-research, [data-theme="dark"] .tag-res, [data-theme="dark"] .badge-res, [data-theme="dark"] .tag-semiconductors, [data-theme="dark"] .badge-semiconductors { --tag-bg: rgba(79, 70, 229, 0.20); --tag-text: #A5B4FC; --tag-border: rgba(79, 70, 229, 0.36); }
[data-theme="dark"] .tag-product-launch, [data-theme="dark"] .badge-product-launch, [data-theme="dark"] .tag-cloud, [data-theme="dark"] .badge-cloud, [data-theme="dark"] .tag-storage, [data-theme="dark"] .badge-storage { --tag-bg: rgba(8, 145, 178, 0.20); --tag-text: #67E8F9; --tag-border: rgba(8, 145, 178, 0.36); }
[data-theme="dark"] .tag-ai, [data-theme="dark"] .badge-ai, [data-theme="dark"] .tag-transition, [data-theme="dark"] .badge-transition { --tag-bg: rgba(124, 58, 237, 0.20); --tag-text: #C4B5FD; --tag-border: rgba(124, 58, 237, 0.36); }
[data-theme="dark"] .tag-cybersecurity, [data-theme="dark"] .badge-cybersecurity { --tag-bg: rgba(220, 38, 38, 0.20); --tag-text: #FCA5A5; --tag-border: rgba(220, 38, 38, 0.36); }
[data-theme="dark"] .tag-coal, [data-theme="dark"] .badge-coal, [data-theme="dark"] .tag-oil-gas, [data-theme="dark"] .badge-oil-gas { --tag-bg: rgba(180, 83, 9, 0.20); --tag-text: #FDBA74; --tag-border: rgba(180, 83, 9, 0.36); }
[data-theme="dark"] .tag-sponsored, [data-theme="dark"] .badge-sponsored, [data-theme="dark"] .tag-default, [data-theme="dark"] .badge-default { --tag-bg: rgba(148, 163, 184, 0.20); --tag-text: #CBD5E1; --tag-border: rgba(148, 163, 184, 0.36); }

/* Refined post-card taxonomy badge tokens */
.tag-ai { --tag-accent: #7C3AED; --tag-text: #5B21B6; --tag-bg: rgba(124, 58, 237, 0.09); --tag-border: rgba(124, 58, 237, 0.24); --tag-text-dark: #DDD6FE; --tag-bg-dark: rgba(124, 58, 237, 0.18); --tag-border-dark: rgba(221, 214, 254, 0.28); }
.tag-cloud { --tag-accent: #2563EB; --tag-text: #1D4ED8; --tag-bg: rgba(37, 99, 235, 0.09); --tag-border: rgba(37, 99, 235, 0.24); --tag-text-dark: #BFDBFE; --tag-bg-dark: rgba(37, 99, 235, 0.18); --tag-border-dark: rgba(191, 219, 254, 0.28); }
.tag-cybersecurity { --tag-accent: #DC2626; --tag-text: #B91C1C; --tag-bg: rgba(220, 38, 38, 0.09); --tag-border: rgba(220, 38, 38, 0.24); --tag-text-dark: #FECACA; --tag-bg-dark: rgba(220, 38, 38, 0.18); --tag-border-dark: rgba(254, 202, 202, 0.28); }
.tag-enterprise-software { --tag-accent: #0891B2; --tag-text: #0E7490; --tag-bg: rgba(8, 145, 178, 0.09); --tag-border: rgba(8, 145, 178, 0.24); --tag-text-dark: #A5F3FC; --tag-bg-dark: rgba(8, 145, 178, 0.18); --tag-border-dark: rgba(165, 243, 252, 0.28); }
.tag-semiconductors { --tag-accent: #4F46E5; --tag-text: #4338CA; --tag-bg: rgba(79, 70, 229, 0.09); --tag-border: rgba(79, 70, 229, 0.24); --tag-text-dark: #C7D2FE; --tag-bg-dark: rgba(79, 70, 229, 0.18); --tag-border-dark: rgba(199, 210, 254, 0.28); }
.tag-startups, .tag-startup { --tag-accent: #DB2777; --tag-text: #BE185D; --tag-bg: rgba(219, 39, 119, 0.09); --tag-border: rgba(219, 39, 119, 0.24); --tag-text-dark: #FBCFE8; --tag-bg-dark: rgba(219, 39, 119, 0.18); --tag-border-dark: rgba(251, 207, 232, 0.28); }
.tag-policy, .tag-regulation, .tag-regulatory, .tag-reg, .tag-policy-regulation { --tag-accent: #64748B; --tag-text: #475569; --tag-bg: rgba(100, 116, 139, 0.10); --tag-border: rgba(100, 116, 139, 0.26); --tag-text-dark: #CBD5E1; --tag-bg-dark: rgba(100, 116, 139, 0.18); --tag-border-dark: rgba(203, 213, 225, 0.28); }
.tag-markets, .tag-business, .tag-biz, .tag-institutional, .tag-macro, .tag-finance, .tag-fin { --tag-accent: #16A34A; --tag-text: #15803D; --tag-bg: rgba(22, 163, 74, 0.09); --tag-border: rgba(22, 163, 74, 0.24); --tag-text-dark: #BBF7D0; --tag-bg-dark: rgba(22, 163, 74, 0.18); --tag-border-dark: rgba(187, 247, 208, 0.28); }
.tag-banking { --tag-accent: #0284C7; --tag-text: #0369A1; --tag-bg: rgba(2, 132, 199, 0.09); --tag-border: rgba(2, 132, 199, 0.24); --tag-text-dark: #BAE6FD; --tag-bg-dark: rgba(2, 132, 199, 0.18); --tag-border-dark: rgba(186, 230, 253, 0.28); }
.tag-fintech { --tag-accent: #9333EA; --tag-text: #7E22CE; --tag-bg: rgba(147, 51, 234, 0.09); --tag-border: rgba(147, 51, 234, 0.24); --tag-text-dark: #E9D5FF; --tag-bg-dark: rgba(147, 51, 234, 0.18); --tag-border-dark: rgba(233, 213, 255, 0.28); }
.tag-payments { --tag-accent: #0EA5E9; --tag-text: #0369A1; --tag-bg: rgba(14, 165, 233, 0.09); --tag-border: rgba(14, 165, 233, 0.24); --tag-text-dark: #BAE6FD; --tag-bg-dark: rgba(14, 165, 233, 0.18); --tag-border-dark: rgba(186, 230, 253, 0.28); }
.tag-wealth { --tag-accent: #CA8A04; --tag-text: #A16207; --tag-bg: rgba(202, 138, 4, 0.10); --tag-border: rgba(202, 138, 4, 0.26); --tag-text-dark: #FEF3C7; --tag-bg-dark: rgba(202, 138, 4, 0.18); --tag-border-dark: rgba(254, 243, 199, 0.28); }
.tag-insurance { --tag-accent: #0D9488; --tag-text: #0F766E; --tag-bg: rgba(13, 148, 136, 0.09); --tag-border: rgba(13, 148, 136, 0.24); --tag-text-dark: #CCFBF1; --tag-bg-dark: rgba(13, 148, 136, 0.18); --tag-border-dark: rgba(204, 251, 241, 0.28); }
.tag-crypto { --tag-accent: #F59E0B; --tag-text: #B45309; --tag-bg: rgba(245, 158, 11, 0.10); --tag-border: rgba(245, 158, 11, 0.26); --tag-text-dark: #FED7AA; --tag-bg-dark: rgba(245, 158, 11, 0.18); --tag-border-dark: rgba(254, 215, 170, 0.28); }
.tag-oil-gas { --tag-accent: #B45309; --tag-text: #92400E; --tag-bg: rgba(180, 83, 9, 0.10); --tag-border: rgba(180, 83, 9, 0.26); --tag-text-dark: #FED7AA; --tag-bg-dark: rgba(180, 83, 9, 0.18); --tag-border-dark: rgba(254, 215, 170, 0.28); }
.tag-power { --tag-accent: #EA580C; --tag-text: #C2410C; --tag-bg: rgba(234, 88, 12, 0.09); --tag-border: rgba(234, 88, 12, 0.24); --tag-text-dark: #FDBA74; --tag-bg-dark: rgba(234, 88, 12, 0.18); --tag-border-dark: rgba(253, 186, 116, 0.28); }
.tag-renewables { --tag-accent: #22C55E; --tag-text: #15803D; --tag-bg: rgba(34, 197, 94, 0.09); --tag-border: rgba(34, 197, 94, 0.24); --tag-text-dark: #BBF7D0; --tag-bg-dark: rgba(34, 197, 94, 0.18); --tag-border-dark: rgba(187, 247, 208, 0.28); }
.tag-grid, .tag-infrastructure { --tag-accent: #2563EB; --tag-text: #1D4ED8; --tag-bg: rgba(37, 99, 235, 0.09); --tag-border: rgba(37, 99, 235, 0.24); --tag-text-dark: #BFDBFE; --tag-bg-dark: rgba(37, 99, 235, 0.18); --tag-border-dark: rgba(191, 219, 254, 0.28); }
.tag-storage, .tag-product-launch { --tag-accent: #06B6D4; --tag-text: #0E7490; --tag-bg: rgba(6, 182, 212, 0.09); --tag-border: rgba(6, 182, 212, 0.24); --tag-text-dark: #A5F3FC; --tag-bg-dark: rgba(6, 182, 212, 0.18); --tag-border-dark: rgba(165, 243, 252, 0.28); }
.tag-nuclear { --tag-accent: #84CC16; --tag-text: #4D7C0F; --tag-bg: rgba(132, 204, 22, 0.10); --tag-border: rgba(132, 204, 22, 0.26); --tag-text-dark: #D9F99D; --tag-bg-dark: rgba(132, 204, 22, 0.18); --tag-border-dark: rgba(217, 249, 157, 0.28); }
.tag-transition { --tag-accent: #A855F7; --tag-text: #7E22CE; --tag-bg: rgba(168, 85, 247, 0.09); --tag-border: rgba(168, 85, 247, 0.24); --tag-text-dark: #E9D5FF; --tag-bg-dark: rgba(168, 85, 247, 0.18); --tag-border-dark: rgba(233, 213, 255, 0.28); }
.tag-news { --tag-accent: #2563EB; --tag-text: #1D4ED8; --tag-bg: rgba(37, 99, 235, 0.09); --tag-border: rgba(37, 99, 235, 0.24); --tag-text-dark: #BFDBFE; --tag-bg-dark: rgba(37, 99, 235, 0.18); --tag-border-dark: rgba(191, 219, 254, 0.28); }
.tag-tech, .tag-technology { --tag-accent: #4F46E5; --tag-text: #4338CA; --tag-bg: rgba(79, 70, 229, 0.09); --tag-border: rgba(79, 70, 229, 0.24); --tag-text-dark: #C7D2FE; --tag-bg-dark: rgba(79, 70, 229, 0.18); --tag-border-dark: rgba(199, 210, 254, 0.28); }
.tag-research, .tag-res { --tag-accent: #6366F1; --tag-text: #4F46E5; --tag-bg: rgba(99, 102, 241, 0.09); --tag-border: rgba(99, 102, 241, 0.24); --tag-text-dark: #C7D2FE; --tag-bg-dark: rgba(99, 102, 241, 0.18); --tag-border-dark: rgba(199, 210, 254, 0.28); }
.tag-coal { --tag-accent: #78716C; --tag-text: #57534E; --tag-bg: rgba(120, 113, 108, 0.10); --tag-border: rgba(120, 113, 108, 0.26); --tag-text-dark: #D6D3D1; --tag-bg-dark: rgba(120, 113, 108, 0.18); --tag-border-dark: rgba(214, 211, 209, 0.28); }
.tag-company-updates, .tag-sponsored, .tag-default { --tag-accent: #64748B; --tag-text: #475569; --tag-bg: rgba(100, 116, 139, 0.10); --tag-border: rgba(100, 116, 139, 0.26); --tag-text-dark: #CBD5E1; --tag-bg-dark: rgba(100, 116, 139, 0.18); --tag-border-dark: rgba(203, 213, 225, 0.28); }
.tag-analysis { --tag-accent: #CA8A04; --tag-text: #A16207; --tag-bg: rgba(202, 138, 4, 0.10); --tag-border: rgba(202, 138, 4, 0.26); --tag-text-dark: #FEF3C7; --tag-bg-dark: rgba(202, 138, 4, 0.18); --tag-border-dark: rgba(254, 243, 199, 0.28); }

[data-theme="dark"] .badge {
  color: var(--tag-text-dark, #E2E8F0);
  background: linear-gradient(rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.76)), var(--tag-bg-dark, rgba(15, 23, 42, 0.72));
  border-color: var(--tag-border-dark, rgba(148, 163, 184, 0.28));
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card-img .badge {
  background: linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.72)), var(--tag-bg-dark, rgba(15, 23, 42, 0.72));
  border-color: var(--tag-border-dark, rgba(148, 163, 184, 0.28));
}

[data-theme="dark"] .badge::before {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-accent, currentColor) 24%, transparent);
}

/* Hero card — spans 2 columns */
.hero-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1F1838, #3A2B6F);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  color: #fff;
  text-decoration: none;
  grid-column: span 2;
}

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

.hero-card-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease);
}

.hero-card:hover .hero-card-bg {
  transform: scale(1.03);
}

.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

.hero-card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-20);
}

.hero-card h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: var(--space-8);
  color: #fff;
}

.hero-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: var(--space-12);
  max-width: 600px;
}

.hero-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-10);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
    SIDEBAR
    ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 140px;
  align-self: start;
  height: fit-content;
}

/* Sidebar Sections */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sidebar-ads-top,
.sidebar-ads-middle,
.sidebar-ads-bottom {
  width: 100%;
}

.sidebar-subscribe {
  margin: var(--space-4) 0;
}

/* 9 Ad Slots — 600×500 each with 3-ad carousel */
.ad-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  margin-bottom: var(--space-12);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  aspect-ratio: 6 / 5;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 6 / 5;
}

.ad-block {
  width: 100%;
  aspect-ratio: 6 / 5;
  height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--color-surface-3);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}

.ad-block.ad-filled {
  aspect-ratio: 6 / 5;
  height: auto;
  padding-bottom: 0;
}

.ad-tag {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-border);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--r-full);
}

.ad-size {
  font-size: 11px;
  color: var(--color-text-subtle);
  font-weight: 500;
}

/* Carousel dots indicator */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  background: var(--color-surface-2);
}
.carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--color-border);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  padding: 0;
}
.carousel-dot.active {
  background: var(--color-primary);
  width: 16px;
}

/* Ad filled state — sidebar */
.ad-block.ad-filled { padding: 0; overflow: hidden; aspect-ratio: 6 / 5; }
.ad-block .ad-link { display: block; width: 100%; height: 100%; }
.ad-block .ad-link img { width: 100%; height: 100%; object-fit: fill; border-radius: var(--r-md); display: block; }
.carousel-slide a img { width: 100%; height: 100%; object-fit: fill; display: block; border-radius: var(--r-md); }
.carousel-slide a { display: block; width: 100%; height: 100%; }

/* Leaderboard ad filled state */
.leaderboard-ad.ad-filled { padding: 0; overflow: hidden; }
.leaderboard-ad .ad-link { display: block; width: 100%; height: 100%; position: relative; }
.leaderboard-ad .ad-link img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Leaderboard dots */
.leaderboard-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-6);
  background: transparent;
}
.leaderboard-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--color-border);
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  padding: 0;
}
.leaderboard-dot.active {
  background: var(--color-primary);
  width: 14px;
}

/* Hide unpopulated ad blocks so empty slots collapse */
/* Only hide completely empty carousel (no ads at all) */
.ad-block[data-ad-empty="true"] { opacity: 0; pointer-events: none; }
.ad-carousel:not(:has(.ad-block:not([data-ad-empty="true"]))) { display: none !important; }
.ad-carousel:has(.carousel-dots) .carousel-dots { display: none; }

/* Theme toggle icon visibility */
.theme-icon-light { display: inline; }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

/* Subscribe box */
.subscribe-box {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--r-md);
  padding: var(--space-20) var(--space-16);
  margin-bottom: var(--space-12);
  color: var(--color-on-primary);
  text-align: center;
  box-shadow: var(--shadow-brand);
}
.subscribe-box h3 { font-size: 14px; font-weight: 700; margin-bottom: var(--space-6); color: currentColor; }
.subscribe-box p { font-size: 11px; opacity: 0.9; margin-bottom: var(--space-12); line-height: 1.5; }
.sidebar-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.sidebar-subscribe-form input {
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.14);
  color: currentColor;
  outline: none;
}
.sidebar-subscribe-form input::placeholder { color: currentColor; opacity: 0.78; }
.sidebar-subscribe-form input:focus {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.45);
}
.sidebar-subscribe-form button {
  width: 100%;
  min-height: 42px;
  font-size: 11px;
  font-weight: 800;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.sidebar-subscribe-form button:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.sidebar-subscribe-form.loading button {
  opacity: 0.75;
  cursor: wait;
}
.sidebar-subscribe-form button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.subscribe-message {
  display: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: currentColor;
}
.sidebar-subscribe-form.success .subscribe-success,
.sidebar-subscribe-form.error .subscribe-error {
  display: block;
}

/* ============================================================
    PAGINATION
    ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  margin: 48px auto 32px;
  padding: 0;
  width: 100%;
  clear: both;
}

.pagination-arrows {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.pagination-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}

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

.pagination-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--color-text-muted);
  border-color: var(--color-border-light);
  box-shadow: none;
  transform: none;
}

.pagination-btn .arrow-icon {
  line-height: 1;
  font-size: 18px;
  font-weight: 700;
}

.pagination-btn:disabled .arrow-icon {
  opacity: 0.5;
}

.pagination-prev .arrow-icon {
  margin-right: 2px;
}

.pagination-next .arrow-icon {
  margin-left: 2px;
}

.pagination-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 110px;
  text-align: center;
  background: var(--color-surface-2);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ============================================================
   ABOUT SECTION (footer area)
   ============================================================ */
.about-horizon-wrapper {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border-light);
  padding: 32px 0;
  margin-top: auto;
}
.about-section { width: 100%; }

.about-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-16);
}



.about-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-16);
  letter-spacing: -0.02em;
}

.about-section-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
}

.about-img {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1F1838, #3A2B6F);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }

.about-text { display: flex; flex-direction: column; gap: var(--space-8); }
.about-text p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Footer */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-20) var(--space-16);
}
.footer-content {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer-copy {
  font-size: 12px;
  color: var(--color-text-subtle);
  line-height: 1.7;
}

.footer-copy a {
  color: inherit;
  transition: color var(--transition);
}

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

/* ============================================================
   POST PAGE
   ============================================================ */
.post-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--gap);
}

.post-header {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-light);
}

.post-tag-badge {
  display: inline-flex;
  align-items: center;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 10px;
  font-weight: 700;
  padding: var(--space-3) var(--space-10);
  border-radius: var(--r-full);
  border: 1px solid var(--tag-border);
  margin-bottom: var(--space-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-28);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border-light);
}
.post-tag {
  display: inline-flex;
  align-items: center;
  background: var(--tag-bg);
  color: var(--tag-text);
  padding: var(--space-3) var(--space-12);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--tag-border);
  transition: all var(--transition);
}
.post-tag:hover {
  background: var(--tag-bg);
  color: var(--tag-text);
  border-color: var(--tag-border);
  transform: translateY(-1px);
}

.post-title {
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: 12px;
  color: var(--color-text-subtle);
  flex-wrap: wrap;
}
.post-meta .author-avatar { width: 28px; height: 28px; border-radius: 50%; }
.post-meta a { color: var(--color-primary); }

.post-feature-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: var(--space-28);
}

.post-content-full {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}
.post-content-full h2 { font-size: 22px; font-weight: 700; margin: var(--space-28) 0 var(--space-12); }
.post-content-full h3 { font-size: 18px; font-weight: 600; margin: 22px 0 var(--space-10); }
.post-content-full p { margin-bottom: var(--space-16); }
.post-content-full a { color: var(--color-primary); text-decoration: underline; }
.post-content-full img { border-radius: var(--r-md); margin: var(--space-20) 0; max-width: 100%; }
.post-content-full blockquote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-12) var(--space-20);
  background: var(--color-primary-light);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: var(--space-20) 0;
  font-style: italic;
}
.post-content-full ul, .post-content-full ol { padding-left: var(--space-24); margin-bottom: var(--space-16); }
.post-content-full li { margin-bottom: var(--space-6); }
.post-content-full code {
  background: var(--color-surface-3);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--r-xs);
  font-size: 0.9em;
}
.post-content-full pre {
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--space-16);
  overflow-x: auto;
  margin: var(--space-20) 0;
}

/* ============================================================
    RELATED POSTS SECTION
    ============================================================ */
.related-posts-section {
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: 2px solid var(--color-border-light);
}

.related-posts-header {
  margin-bottom: var(--space-28);
  text-align: center;
}

.related-posts-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}

.related-posts-header p {
  font-size: 14px;
  color: var(--color-text-muted);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.related-post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}

.related-post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

.related-post-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  position: relative;
}

.related-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

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

.related-post-img.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.related-post-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-14);
  flex: 1;
}

.related-post-tag {
  display: inline-flex;
  align-items: center;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 10px;
  font-weight: 700;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--r-full);
  border: 1px solid var(--tag-border);
  width: fit-content;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.related-post-body h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}

.related-post-card:hover .related-post-body h3 {
  color: var(--color-primary);
}

.related-post-excerpt {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.related-post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 11px;
  color: var(--color-text-subtle);
  margin-top: var(--space-4);
}

/* ============================================================
   TAG / AUTHOR PAGE
   ============================================================ */
.tag-page, .author-template {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-16) 32px;
}

.tag-page .main,
.author-template .main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-20) var(--space-16) 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.tag-page .content,
.author-template .content {
  min-width: 0;
}

.page-header {
  padding: var(--space-28) 0 var(--space-20);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.page-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
}
.tag-description, .author-bio {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 640px;
}
.tag-count {
  display: none;
}

/* Author page header */
.author-header-full {
  flex-direction: row;
  gap: var(--space-20);
  align-items: center;
  padding-bottom: var(--space-24);
}

.author-avatar-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-border);
  flex-shrink: 0;
}

.author-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.author-avatar-placeholder svg { stroke: currentColor; }

.author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.author-info h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
}
.author-bio {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 640px;
}
.author-stats {
  display: flex;
  gap: var(--space-12);
  font-size: 11px;
  color: var(--color-text-subtle);
  flex-wrap: wrap;
}
.author-website {
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.author-website svg { stroke: currentColor; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.page-about {
  max-width: var(--content-max);
  margin: 0 auto;
}

.about-hero-img {
  width: 100%;
  max-width: var(--content-max);
  margin: 24px auto 0;
  padding: 0 var(--space-16);
}
.about-hero-img img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: var(--r-xl);
}

.about-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 36px var(--space-16) 64px;
}

.about-header {
  margin-bottom: var(--space-28);
}
.about-header h1 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-12);
  line-height: 1.15;
}
.about-lead {
  font-size: 17px;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 620px;
}

.about-content {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.85;
}
.about-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 36px;
  margin-bottom: var(--space-12);
  letter-spacing: -0.02em;
}
.about-content p { margin-bottom: var(--space-16); }
.about-content a { color: var(--color-primary); text-decoration: underline; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.page-contact {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 20px 64px;
}

.contact-header {
  margin-bottom: var(--space-36);
  max-width: 640px;
}
.contact-header-left { max-width: 640px; }
.contact-header h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-10);
  letter-spacing: -0.03em;
}
.contact-header p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: clamp(22px, 3vw, 32px);
  align-items: start;
}
.contact-grid > * { min-width: 0; }
.post-main { min-width: 0; }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-lg);
  padding: var(--space-28);
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
}
.contact-google-form-card {
  position: relative;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}
.contact-google-form-card::before {
  content: "";
  display: block;
  height: 8px;
  width: 100%;
  background: var(--color-primary);
}
.contact-google-form-frame {
  width: 100%;
  height: 860px;
  min-height: 860px;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: inherit;
}
.contact-google-form-frame iframe {
  display: block;
  width: 100%;
  height: 860px;
  min-height: 860px;
  border: 0;
  background: transparent;
}
.form-group { display: flex; flex-direction: column; gap: var(--space-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-input, .form-textarea {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  background: var(--color-surface);
}
.form-textarea { min-height: 140px; resize: vertical; }

.contact-status {
  margin-top: var(--space-6);
  padding: var(--space-12);
  border-radius: var(--r-sm);
  text-align: center;
  border: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.5;
}
.contact-status-success {
  background: rgba(46, 160, 67, 0.12);
  border-color: rgba(46, 160, 67, 0.35);
  color: #1f7a38;
}
.contact-status-error {
  background: rgba(207, 34, 46, 0.1);
  border-color: rgba(207, 34, 46, 0.32);
  color: #b4232d;
}
.contact-status-warning {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="dark"] .contact-status-success { color: #78d08a; }
[data-theme="dark"] .contact-status-error { color: #ff8a91; }
[data-theme="dark"] .contact-google-form-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .contact-google-form-frame {
  background: var(--color-surface);
}

.form-note {
  font-size: 11px;
  color: var(--color-text-subtle);
  text-align: center;
  margin-top: var(--space-4);
}
.form-note a { color: var(--color-primary); }

/* Contact Info Sidebar */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-18);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}
.contact-info-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-2px);
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-icon svg { stroke: currentColor; }

.contact-info-card h4 {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.contact-info-card p {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
}

/* ============================================================
   CATEGORIES PAGE
   ============================================================ */
.page-categories {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-36) var(--space-20);
}
.categories-header {
  margin-bottom: var(--space-24);
}
.categories-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
}
.categories-header p {
  font-size: 15px;
  color: var(--color-text-muted);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  align-items: stretch;
}
.cat-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:nth-child(7n+1) { background: linear-gradient(135deg, #3A2B6F, #42a5f5); }
.cat-card:nth-child(7n+2) { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.cat-card:nth-child(7n+3) { background: linear-gradient(135deg, #e65100, #ffb74d); }
.cat-card:nth-child(7n+4) { background: linear-gradient(135deg, #6a1b9a, #ce93d8); }
.cat-card:nth-child(7n+5) { background: linear-gradient(135deg, #b71c1c, #ef9a9a); }
.cat-card:nth-child(7n+6) { background: linear-gradient(135deg, #006064, #4dd0e1); }
.cat-card:nth-child(7n) { background: linear-gradient(135deg, #880e4f, #f06292); }

.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  z-index: 1;
}
.cat-card-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  transition: transform 0.4s var(--ease);
}
.cat-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-card.has-image .cat-card-bg,
.cat-card:has(.cat-card-bg img) .cat-card-bg {
  opacity: 1;
}
.cat-card:hover .cat-card-bg { transform: scale(1.06); opacity: 0.25; }
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.cat-card-event {
  box-shadow: 0 20px 40px rgba(58, 43, 111, 0.18);
}
.cat-card-content {
  position: relative;
  z-index: 2;
  padding: var(--space-20);
}
.cat-card-chip {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-8);
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.cat-card-icon { font-size: 24px; margin-bottom: var(--space-8); }
.cat-card-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.cat-card-name:last-child {
  margin-bottom: 0;
}
.cat-card-count {
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.cat-card-num {
  margin-top: var(--space-6);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.categories-latest {
  margin-top: 52px;
}
.categories-latest h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.page-search {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px var(--space-16) 64px;
}
.search-header { margin-bottom: var(--space-28); }
.search-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}
.search-query { color: var(--color-primary); }
.search-count { font-size: 13px; color: var(--color-text-muted); }
.search-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}
.search-empty {
  text-align: center;
  padding: 64px 0;
}
.search-empty-icon { font-size: 48px; margin-bottom: var(--space-16); }
.search-empty h2 { font-size: 20px; font-weight: 700; color: var(--color-text); margin-bottom: var(--space-8); }
.search-empty p { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-24); }
.search-empty .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-10) 22px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--transition);
  border: 1px solid var(--color-primary);
}
.search-empty .btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   GENERIC PAGE (Ghost default page)
   ============================================================ */
.page-generic {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px var(--space-16) 64px;
}
.page-generic-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.page-generic-header h1 {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
}
.page-generic-lead {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-top: 10px;
  line-height: 1.7;
}
.page-generic-img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  border-radius: var(--r-xl);
  margin-bottom: 32px;
}
.page-generic-content {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

/* ============================================================
    LEGAL PAGES (Privacy, Terms)
    ============================================================ */
.page-legal, .page-terms {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--space-16) 80px;
}
.page-legal .legal-header, .page-terms .terms-header {
  max-width: 720px;
  margin: 0 auto var(--space-36);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}
.page-legal .legal-header h1, .page-terms .terms-header h1 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  text-align: center;
}
.page-legal .legal-date, .page-terms .legal-date {
  font-size: 12px;
  color: var(--color-text-subtle);
  display: block;
  text-align: center;
  margin-top: var(--space-8);
}
.page-legal .legal-lead, .page-terms .legal-lead {
  font-size: 15px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-8);
}
.page-legal .legal-content, .page-terms .terms-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-muted);
}
.page-legal .legal-content h2, .page-terms .terms-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 32px 0 var(--space-12);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}
.page-legal .legal-content h3, .page-terms .terms-content h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-20) 0 var(--space-8);
}
.page-legal .legal-content p, .page-terms .terms-content p { margin-bottom: var(--space-14); }
.page-legal .legal-content ul, .page-legal .legal-content ol {
  padding-left: 22px;
  margin-bottom: var(--space-14);
}
.page-legal .legal-content li { margin-bottom: var(--space-6); }
.page-legal .legal-content a { color: var(--color-primary); }
.page-legal .legal-content a:hover { text-decoration: underline; }

/* ============================================================
   404 PAGE
   ============================================================ */
.page-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 40px var(--space-16);
}
.error-wrapper {
  text-align: center;
  max-width: 480px;
}
.error-visual {
  margin-bottom: var(--space-24);
  color: var(--color-primary);
  opacity: 0.7;
}
.error-visual svg {
  width: 120px;
  height: 120px;
}
.page-404 h1 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-12);
}
.page-404 > .error-wrapper > p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-28);
}
.error-actions { display: flex; gap: var(--space-12); justify-content: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 11px var(--space-24);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--transition);
  border: 1px solid var(--color-primary);
  box-shadow: 0 3px 10px rgba(95, 38, 62, 0.2);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
  color: var(--color-on-primary);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: transparent;
  color: var(--color-primary);
  padding: 11px var(--space-24);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--transition);
  border: 1px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   EVENTS PAGE — 2-col grid listing
   ============================================================ */

.page-events {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px var(--space-16) 72px;
}
.page-events-header { width: 100%; }

.page-events-collection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, var(--sidebar-w));
  gap: var(--space-24);
  align-items: start;
}

.page-events-collection .content {
  min-width: 0;
}

.page-events .page-header {
  margin-bottom: var(--space-28);
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  box-shadow: var(--shadow-xs);
}
.page-events .page-header h1 {
  margin-bottom: var(--space-6);
}
.page-events .page-header p {
  max-width: 680px;
  color: var(--color-text-muted);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  align-items: stretch;
}

.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.event-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-surface-3);
}
.event-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.event-card:hover .event-card-img img {
  transform: scale(1.04);
}

.event-card-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--color-surface-3), var(--color-border-light));
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-card-placeholder::after {
  content: '';
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-border);
  border-radius: var(--r-full);
  border-top-color: var(--color-primary);
}

.event-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-16);
}
.event-card-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid var(--tag-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-card-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}
.event-card:hover .event-card-body h3 {
  color: var(--color-primary);
}
.event-card-excerpt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-events {
  grid-column: 1 / -1;
  padding: 56px 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 15px;
  text-align: center;
}

/* ============================================================
   SINGLE EVENT PAGE
   ============================================================ */

.event-single {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) 0;
}

.event-hero-img {
  width: 100%;
  margin-bottom: var(--space-24);
}
.event-hero-img img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.event-single-inner {
  padding: 0 var(--space-16) 64px;
  max-width: 860px;
  margin: 0 auto;
}

.event-header {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-light);
}

.event-tag-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: var(--space-3) var(--space-10);
  border-radius: var(--r-full);
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid var(--tag-border);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-10);
}

.post-tag-badge,
.post-tag,
.related-post-tag,
.event-card-tag,
.event-tag-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--tag-border);
  background: var(--tag-bg);
  color: var(--tag-text);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
}

[data-theme="dark"] .post-tag-badge,
[data-theme="dark"] .post-tag,
[data-theme="dark"] .related-post-tag,
[data-theme="dark"] .event-card-tag,
[data-theme="dark"] .event-tag-badge {
  box-shadow: none;
}

.event-header h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: var(--space-8);
}

.event-summary {
  margin-top: var(--space-12);
  max-width: 720px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Event Description */
.event-description {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-muted);
}
.event-description p { margin-bottom: 1.2em; }

/* Register Button */
.event-cta {
  margin-top: var(--space-28);
  text-align: center;
}

.btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 15px;
  font-weight: 700;
  padding: var(--space-14) var(--space-28);
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  border: 1px solid var(--color-primary);
  box-shadow: 0 3px 10px rgba(95, 38, 62, 0.2);
}
.btn-register svg { stroke: currentColor; transition: transform var(--transition); }
.btn-register:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
  color: var(--color-on-primary);
}
.btn-register:hover svg { transform: translateX(3px); }
.btn-register:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-register-lg {
  font-size: 17px;
  padding: var(--space-16) var(--space-36);
}

/* ============================================================
   UTILITY
   ============================================================ */
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.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;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  padding: 48px 0;
  font-size: 15px;
}

.tag-page-event-redirect {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px var(--space-16) 72px;
}

.event-redirect-card {
  display: flex;
  justify-content: center;
  padding: 48px var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}

/* ============================================================
    RESPONSIVE — TABLET (≤1024px)
    ============================================================ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 280px; }

  .posts-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .search-grid { grid-template-columns: repeat(2, 1fr); }
  .page-events-collection { grid-template-columns: 1fr; }

  .main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--sidebar-w));
    padding: 12px 12px 24px;
    gap: 24px;
  }

  .sidebar {
    order: 1;
  }
  .page-events-collection .sidebar {
    order: 1;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE LANDSCAPE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --header-h: 44px; }

  .header-ad-wrapper { display: none; }

  .header-row { padding: 0 12px; }
  .logo-img { height: 31px; max-width: 178px; }

  /* Hide category bar on mobile — categories accessible via nav panel */
  .category-bar { display: none; }

  /* Nav panel full-width on mobile */
  .nav-panel-inner {
    flex-direction: column;
    gap: var(--space-6);
    align-items: flex-start;
  }
  .nav-panel-inner a {
    font-size: 14px;
    padding: var(--space-10) var(--space-16);
    width: 100%;
  }
  .nav-panel-divider {
    width: 100%;
    height: 1px;
    margin-left: 0;
  }

  .hero-card { grid-column: span 2; }

  .main {
    grid-template-columns: 1fr;
    padding: 12px 12px 24px;
    gap: 24px;
  }

  /* Sidebar after posts on small screens */
  .sidebar { order: 1; }

  .posts-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }

  .about-inner { grid-template-columns: 1fr; }
  .about-section-inner { grid-template-columns: 1fr; }
  .about-img { aspect-ratio: 16/7; }

  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .search-grid { grid-template-columns: 1fr; }
  .post-layout { grid-template-columns: 1fr; }
  .related-posts-grid { grid-template-columns: 1fr; }
  .page-events-collection { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-single { padding-top: var(--space-16); }
  .pagination-arrows { gap: var(--space-10); }
  .pagination-info { min-width: 96px; padding: 10px 14px; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--space-28); }
  .contact-google-form-card { border-radius: var(--r-md); }
  .contact-google-form-frame,
  .contact-google-form-frame iframe { height: 980px; min-height: 980px; }
  .form-row { grid-template-columns: 1fr; }

  .author-header-full { gap: var(--space-16); padding: var(--space-24) var(--space-16); }
  .author-avatar-lg { width: 64px; height: 64px; }

  .page-legal { padding: 32px var(--space-16) 64px; }

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

/* ============================================================
   RESPONSIVE — MOBILE PORTRAIT (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .page-contact { padding: 24px var(--space-16) 64px; }
  .contact-google-form-frame,
  .contact-google-form-frame iframe { height: 1050px; min-height: 1050px; }
  .posts-grid { grid-template-columns: 1fr; }
  .hero-card { grid-column: span 1; }
  .categories-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .search-modal { padding: var(--space-10); }
  .search-modal-content { max-height: 86vh; margin-top: var(--space-20); }
  .search-modal-header { padding: var(--space-12); gap: var(--space-8); }
  .search-results { padding: var(--space-12); }
  .search-result-item { padding: var(--space-14); }
  .search-result-kicker,
  .search-result-footer { align-items: flex-start; flex-direction: column; gap: var(--space-6); }
  .page-events .page-header { padding: var(--space-18); }
  .pagination-btn { min-width: 44px; height: 42px; padding: 0 12px; }
  .pagination-info { width: 100%; order: -1; }
  .error-actions { flex-direction: column; align-items: center; }
  .btn-register { padding: var(--space-12) var(--space-20); font-size: 14px; }
  .author-header-full { flex-direction: column; text-align: center; }
  .author-stats { justify-content: center; }
  .author-website { margin: 0 auto; }
}

/* ============================================================
    RESPONSIVE — 4K / WIDE (≥1600px)
    ============================================================ */
@media (min-width: 1600px) {
  :root {
    --content-max: 1440px;
    --sidebar-w: 360px;
  }
  .posts-grid { 
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
  }
  .hero-card { min-height: 420px; }
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .search-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   TAG ARCHIVE RESPONSIVE LAYOUT
   ============================================================ */
.tag-page .main {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.tag-page .content,
.tag-page .sidebar,
.tag-page .posts-grid,
.tag-page .posts-grid .card {
  min-width: 0;
}

.tag-page .posts-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}

.tag-page .posts-grid .card {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .tag-page .main {
    grid-template-columns: 1fr;
  }

  .tag-page .sidebar {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
}

@media (max-width: 760px) {
  .tag-page .posts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .tag-page {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: hidden;
  }

  .tag-page .main {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   DARK MODE REFINEMENTS
   ============================================================ */
[data-theme="dark"] .card {
  border-color: var(--color-border);
  background: var(--color-surface);
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .ad-block {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
[data-theme="dark"] .ad-carousel {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
[data-theme="dark"] .nav-panel {
  border-color: var(--color-border);
}
/* Glassmorphism uses CSS variables - no override needed */
[data-theme="dark"] .header-ad-wrapper {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .cat-link:hover,
[data-theme="dark"] .cat-link.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
[data-theme="dark"] .post-tag-badge {
  background: var(--tag-bg);
  color: var(--tag-text);
  border-color: var(--tag-border);
}
[data-theme="dark"] .about-horizon-wrapper {
  background: var(--color-surface);
}
[data-theme="dark"] .site-footer {
  background: var(--color-surface-2);
}

/* ============================================================
   AD LABELS / EMPTY STATE
   ============================================================ */
.ad-label { display: none; }
.nav-ad.ad-filled .ad-label { display: block; }

.nav-ad.ad-filled {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.nav-ad .ad-img-link { display: block; width: 100%; height: 100%; }
.nav-ad .ad-img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--r-xs); }

/* Injected ad image styles */
.ad-block.ad-filled { padding: 0; overflow: hidden; }
.ad-block .ad-img-link { display: block; width: 100%; height: 100%; }
.ad-block .ad-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */
.card, .cat-card, .btn, .btn-primary, .btn-secondary,
.cat-link, .form-input, .form-textarea,
.dark-toggle-btn {
  will-change: transform;
}