/* ============================================
   ALSEA BAY BLOG — MASTER STYLESHEET
   Oregon Coastal Vibe | Pure CSS | No Tailwind
   ============================================ */

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

/* ---------- ROOT VARIABLES ---------- */
:root {
  /* Voice Colors */
  --toni-primary: #8B00FF;
  --toni-secondary: #00CED1;
  --ken-primary: #1E40AF;
  --ken-secondary: #0D9488;
  --samba-primary: #7C3AED;
  --samba-secondary: #F59E0B;

  /* Base palette */
  --sand: #F5E6D3;
  --driftwood: #8B7355;
  --seafoam: #A8D8C8;
  --deep-ocean: #1a3a5c;
  --mist: #E8EDF2;
  --shell-pink: #F4E1D2;
  --kelp: #2D5016;
  --moonlight: #E8E0F0;
  --salt-white: #FAFBFC;

  /* Typography */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-accent: 'Lora', Georgia, serif;

  /* Spacing */
  --max-width: 1000px;
  --section-gap: 3rem;
  --paragraph-gap: 1.3rem;
}

/* ---------- BASE TYPOGRAPHY ---------- */
html { font-size: 17px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  line-height: 1.75;
  color: #2D3748;
  background: linear-gradient(180deg, var(--mist) 0%, var(--salt-white) 50%, var(--sand) 100%);
  min-height: 100vh;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

p { margin-bottom: var(--paragraph-gap); }

blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.1rem;
  border-left: 4px solid var(--seafoam);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(168, 216, 200, 0.12);
  border-radius: 0 8px 8px 0;
  color: #4A5568;
}

a { color: var(--ken-primary); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--toni-primary); text-decoration: underline; }

/* ---------- PAGE WRAPPER ---------- */
.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- ANIMATED BANNER ---------- */
.post-banner {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  margin: 2rem 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.banner-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.banner-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.banner-svg svg { width: 100%; height: 100%; }
.banner-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.banner-title-card {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  padding: 1.25rem 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  max-width: 90%;
}
.banner-title-card h1 {
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-bottom: 0.25rem;
}
.banner-title-card .subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .post-banner { height: 320px; }
  .banner-title-card h1 { font-size: 1.3rem; }
  .banner-title-card { padding: 1rem 1.5rem; bottom: 1rem; }
}

/* ---------- ARTICLE CONTENT ---------- */
.article-content {
  padding: 2rem 0 3rem;
}
.article-content p { text-align: justify; }
.article-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: #718096;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  align-items: center;
}
.article-meta i { margin-right: 0.3rem; }

/* ---------- CUSTOM BULLET LISTS ---------- */
.article-content ul {
  list-style: none;
  padding-left: 0.5rem;
  margin-bottom: var(--paragraph-gap);
}
.article-content ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.6rem;
}
.article-content ul li::before {
  content: '🐚';
  position: absolute;
  left: 0;
  top: 0;
}
/* Variant bullet types via classes */
ul.waves li::before { content: '~'; font-weight: 700; color: var(--ken-secondary); font-size: 1.2rem; }
ul.agates li::before { content: '🪨'; }
ul.crabs li::before { content: '🦀'; }
ul.paws li::before { content: '🐾'; }
ul.stars li::before { content: '⭐'; }
ul.trees li::before { content: '🌲'; }
ul.lighthouse li::before { content: '🔦'; }

.article-content ol {
  padding-left: 1.5rem;
  margin-bottom: var(--paragraph-gap);
}
.article-content ol li {
  margin-bottom: 0.6rem;
  padding-left: 0.5rem;
}

/* ---------- VOICE CALLOUT BOXES ---------- */
.callout {
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.callout-header {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Toni's Reflections */
.callout-toni {
  background: linear-gradient(135deg, #FAF5FF 0%, #F0E6FF 100%);
  border-left: 5px solid var(--toni-primary);
  border-top: 1px solid rgba(139,0,255,0.15);
}
.callout-toni .callout-header { color: var(--toni-primary); }

/* Ken's Research Notes */
.callout-ken {
  background: linear-gradient(135deg, #EFF6FF 0%, #E0F2FE 100%);
  border-left: 5px solid var(--ken-primary);
  border-top: 1px solid rgba(30,64,175,0.12);
}
.callout-ken .callout-header { color: var(--ken-primary); }

/* Samba's CEO Memo */
.callout-samba {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-left: 5px solid var(--samba-secondary);
  border-top: 1px solid rgba(245,158,11,0.2);
}
.callout-samba .callout-header { color: var(--samba-primary); }

/* Message in a Bottle */
.callout-bottle {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 2px dashed var(--ken-secondary);
  border-radius: 12px;
}
.callout-bottle .callout-header { color: var(--ken-secondary); }

/* Tide Pool of Thought */
.callout-tidepool {
  background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
  border: 2px solid transparent;
  border-image: repeating-linear-gradient(90deg, #0D9488 0px, #0D9488 8px, transparent 8px, transparent 14px) 2;
}
.callout-tidepool .callout-header { color: var(--ken-secondary); }

/* Lighthouse Insight */
.callout-lighthouse {
  background: linear-gradient(135deg, #FFFBEB 0%, #FFF7ED 100%);
  border-left: 5px solid #F59E0B;
  position: relative;
  overflow: hidden;
}
.callout-lighthouse::before {
  content: '💡';
  position: absolute;
  top: -5px;
  right: 10px;
  font-size: 2.5rem;
  opacity: 0.12;
}
.callout-lighthouse .callout-header { color: #D97706; }

/* ---------- SECTION DIVIDERS ---------- */
.divider {
  text-align: center;
  margin: 2.5rem 0;
  line-height: 1;
  overflow: hidden;
}
.divider-wave { color: var(--ken-secondary); font-size: 1.3rem; letter-spacing: 6px; opacity: 0.5; }
.divider-shells { font-size: 1rem; letter-spacing: 12px; opacity: 0.6; }
.divider-paws { font-size: 1rem; letter-spacing: 10px; opacity: 0.5; }
.divider-birds { font-size: 0.9rem; letter-spacing: 14px; opacity: 0.45; color: #8B7355; }
.divider-kelp { color: var(--kelp); font-size: 1.1rem; letter-spacing: 4px; opacity: 0.4; }

/* SVG Divider */
.divider svg { width: 300px; max-width: 80%; height: auto; opacity: 0.35; }

/* ---------- MEDICAL TOOLTIPS ---------- */
.med-term {
  position: relative;
  border-bottom: 2px dotted var(--ken-secondary);
  cursor: help;
  color: var(--ken-primary);
  font-weight: 500;
}
.med-term .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  width: max-content;
  max-width: 280px;
  line-height: 1.5;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}
.med-term .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1E293B;
}
.med-term:hover .tooltip { visibility: visible; opacity: 1; }

/* ---------- MICRO-INTERACTIONS ---------- */
.hover-wave:hover { animation: wiggle 0.5s ease-in-out; }
.hover-paw:hover { animation: bounce-paw 0.4s ease; }

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
@keyframes bounce-paw {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- PAGE LOADER ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #1a3a5c 0%, #0D9488 50%, var(--sand) 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-text {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 1.2rem;
  opacity: 0.8;
}
.loader-wave {
  display: flex;
  gap: 6px;
}
.loader-wave span {
  display: block;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: loader-bounce 1.2s ease-in-out infinite;
}
.loader-wave span:nth-child(2) { animation-delay: 0.15s; }
.loader-wave span:nth-child(3) { animation-delay: 0.3s; }
.loader-wave span:nth-child(4) { animation-delay: 0.45s; }
.loader-wave span:nth-child(5) { animation-delay: 0.6s; }

@keyframes loader-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-12px); opacity: 1; }
}

/* ---------- ANIMATED FOOTER ---------- */
.site-footer {
  background: linear-gradient(180deg, transparent 0%, #1a3a5c 40%);
  padding: 4rem 1.5rem 2rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.footer-signatures {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.footer-sig {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
}
.footer-sig .sig-emoji { font-style: normal; }
.footer-tagline {
  font-family: var(--font-heading);
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.footer-silhouettes {
  position: relative;
  height: 40px;
  margin-bottom: 1rem;
}
.footer-cat, .footer-dog {
  position: absolute;
  bottom: 0;
  font-size: 1.5rem;
  animation: walk-across 20s linear infinite;
}
.footer-cat { animation-delay: 0s; }
.footer-dog { animation-delay: 2s; }

@keyframes walk-across {
  0% { left: -5%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

.footer-copyright {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
}

/* ---------- HOMEPAGE STYLES ---------- */
.home-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  margin-bottom: 3rem;
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a3a5c 0%, #0D9488 40%, #A8D8C8 70%, #F5E6D3 100%);
  z-index: 1;
}
.home-hero-content {
  position: relative;
  z-index: 3;
}
.home-hero h1 {
  color: #fff;
  font-size: 3.2rem;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  margin-bottom: 0.75rem;
}
.home-hero .tagline {
  font-family: var(--font-accent);
  font-style: italic;
  color: rgba(255,255,255,0.9);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.home-hero .sub-tagline {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
}
.home-hero canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 768px) {
  .home-hero { min-height: 380px; padding: 3rem 1rem; }
  .home-hero h1 { font-size: 2.2rem; }
  .home-hero .tagline { font-size: 1rem; }
}

/* Article cards grid */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 0 0 3rem;
}
.article-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  text-decoration: none;
}
.card-gradient {
  height: 160px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.25rem;
}
.card-number {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.2);
}
.card-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #1a3a5c;
}
.card-body p {
  font-size: 0.88rem;
  color: #718096;
  line-height: 1.6;
  flex: 1;
}
.card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-top: 0.75rem;
  align-self: flex-start;
}

/* Individual card color themes */
.card-ocean-therapy .card-gradient { background: linear-gradient(135deg, #1a6b8a, #48b1a0, #d4c5a9); }
.card-ocean-therapy .card-tag { background: #E0F7FA; color: #00695C; }

.card-blue-mind .card-gradient { background: linear-gradient(135deg, #0c2d6b, #1565c0, #4fc3f7); }
.card-blue-mind .card-tag { background: #E3F2FD; color: #0D47A1; }

.card-ocean-sounds .card-gradient { background: linear-gradient(135deg, #1a1a3e, #2e3a6e, #7986cb); }
.card-ocean-sounds .card-tag { background: #EDE7F6; color: #4527A0; }

.card-beach-walks .card-gradient { background: linear-gradient(135deg, #8d6e45, #c4a265, #e8d5b7); }
.card-beach-walks .card-tag { background: #FFF3E0; color: #BF360C; }

.card-ocean-art .card-gradient { background: linear-gradient(135deg, #e65100, #ff8a65, #00897b); }
.card-ocean-art .card-tag { background: #FBE9E7; color: #D84315; }

.card-rhythm-waves .card-gradient { background: linear-gradient(135deg, #004d40, #00897b, #b2dfdb); }
.card-rhythm-waves .card-tag { background: #E0F2F1; color: #004D40; }

.card-saltwater .card-gradient { background: linear-gradient(135deg, #006064, #00acc1, #e0f7fa); }
.card-saltwater .card-tag { background: #E0F7FA; color: #006064; }

.card-seaside-strolls .card-gradient { background: linear-gradient(135deg, #5d4037, #a1887f, #d7ccc8); }
.card-seaside-strolls .card-tag { background: #EFEBE9; color: #4E342E; }

.card-ocean-breeze .card-gradient { background: linear-gradient(135deg, #78909c, #b0bec5, #cfd8dc); }
.card-ocean-breeze .card-tag { background: #ECEFF1; color: #37474F; }

.card-mindfulness .card-gradient { background: linear-gradient(135deg, #1a3a5c, #f9a825, #fff8e1); }
.card-mindfulness .card-tag { background: #FFF8E1; color: #F57F17; }

/* ---------- PER-POST COLOR THEMES ---------- */
/* Applied as body classes: .theme-ocean-therapy, .theme-blue-mind, etc. */

.theme-ocean-therapy { background: linear-gradient(180deg, #E0F7FA 0%, #B2EBF2 20%, #F5E6D3 60%, #FAFBFC 100%); }
.theme-ocean-therapy h2, .theme-ocean-therapy h3 { color: #1a6b8a; }

.theme-blue-mind { background: linear-gradient(180deg, #E3F2FD 0%, #BBDEFB 20%, #E8EDF2 60%, #FAFBFC 100%); }
.theme-blue-mind h2, .theme-blue-mind h3 { color: #0c2d6b; }

.theme-ocean-sounds { background: linear-gradient(180deg, #EDE7F6 0%, #D1C4E9 20%, #E8E0F0 60%, #FAFBFC 100%); }
.theme-ocean-sounds h2, .theme-ocean-sounds h3 { color: #2e3a6e; }

.theme-beach-walks { background: linear-gradient(180deg, #FFF3E0 0%, #FFE0B2 20%, #F5E6D3 60%, #FAFBFC 100%); }
.theme-beach-walks h2, .theme-beach-walks h3 { color: #8d6e45; }

.theme-ocean-art { background: linear-gradient(180deg, #FBE9E7 0%, #FFCCBC 15%, #E0F2F1 50%, #FAFBFC 100%); }
.theme-ocean-art h2, .theme-ocean-art h3 { color: #bf360c; }

.theme-rhythm-waves { background: linear-gradient(180deg, #E0F2F1 0%, #B2DFDB 20%, #E8EDF2 60%, #FAFBFC 100%); }
.theme-rhythm-waves h2, .theme-rhythm-waves h3 { color: #004d40; }

.theme-saltwater { background: linear-gradient(180deg, #E0F7FA 0%, #B2EBF2 15%, #E0F2F1 50%, #FAFBFC 100%); }
.theme-saltwater h2, .theme-saltwater h3 { color: #006064; }

.theme-seaside-strolls { background: linear-gradient(180deg, #EFEBE9 0%, #D7CCC8 20%, #F5E6D3 60%, #FAFBFC 100%); }
.theme-seaside-strolls h2, .theme-seaside-strolls h3 { color: #5d4037; }

.theme-ocean-breeze { background: linear-gradient(180deg, #ECEFF1 0%, #CFD8DC 20%, #E8EDF2 60%, #FAFBFC 100%); }
.theme-ocean-breeze h2, .theme-ocean-breeze h3 { color: #455a64; }

.theme-mindfulness { background: linear-gradient(180deg, #FFF8E1 0%, #FFECB3 15%, #E3F2FD 50%, #FAFBFC 100%); }
.theme-mindfulness h2, .theme-mindfulness h3 { color: #1a3a5c; }

/* ---------- BANNER ANIMATIONS ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes tail-wag {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
@keyframes paw-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}
@keyframes gentle-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-4px) rotate(-1deg); }
  75% { transform: translateY(2px) rotate(1deg); }
}
@keyframes wave-motion {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulse-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}
@keyframes drift {
  0%, 100% { transform: translateX(0) translateY(0); }
  33% { transform: translateX(10px) translateY(-5px); }
  66% { transform: translateX(-5px) translateY(3px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ---------- AUTHOR BYLINE ---------- */
.author-byline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #718096;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.author-byline a { color: var(--toni-primary); font-weight: 500; }
.author-byline a:hover { text-decoration: underline; }

/* ---------- MEDICAL DISCLAIMER ---------- */
.medical-disclaimer {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FDBA74;
  border-left: 4px solid #F97316;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  font-size: 0.85rem;
  color: #9A3412;
  line-height: 1.6;
}
.medical-disclaimer strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- TABLE OF CONTENTS ---------- */
.toc {
  background: linear-gradient(135deg, rgba(168,216,200,0.12) 0%, rgba(232,237,242,0.3) 100%);
  border: 1px solid rgba(13,148,136,0.15);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  position: relative;
}
.toc-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--deep-ocean);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding-left: 0;
  margin: 0;
}
.toc ol li {
  counter-increment: toc-counter;
  margin-bottom: 0.5rem;
  padding-left: 0;
}
.toc ol li::before {
  content: counter(toc-counter) '.';
  font-weight: 600;
  color: var(--ken-secondary);
  margin-right: 0.5rem;
  font-size: 0.9rem;
}
.toc ol li a {
  font-size: 0.92rem;
  color: #4A5568;
  text-decoration: none;
  transition: color 0.2s;
}
.toc ol li a:hover { color: var(--toni-primary); text-decoration: underline; }

/* ---------- SOURCE REFERENCES ---------- */
.source-ref {
  font-size: 0.7rem;
  color: var(--ken-primary);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  top: -0.1rem;
}
.source-ref a { color: var(--ken-primary); text-decoration: none; }
.source-ref a:hover { text-decoration: underline; }

.sources-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(13,148,136,0.15);
}
.sources-section h2 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
.sources-list {
  list-style: none;
  padding: 0;
}
.sources-list li {
  font-size: 0.85rem;
  color: #4A5568;
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.6;
}
.sources-list li::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--ken-primary);
  font-size: 0.8rem;
}
.sources-list li a { word-break: break-word; }
.source-back {
  font-size: 0.75rem;
  color: var(--ken-secondary);
  margin-left: 0.5rem;
  text-decoration: none;
  cursor: pointer;
}
.source-back:hover { text-decoration: underline; }

/* ---------- ARTICLE FOOTER (per-voice signature) ---------- */
.article-footer-sig {
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(168,216,200,0.1) 0%, rgba(245,230,211,0.2) 100%);
  border-radius: 12px;
  text-align: center;
}
.article-footer-sig .primary-sig {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--deep-ocean);
  margin-bottom: 0.75rem;
}
.article-footer-sig .samba-note {
  font-size: 0.88rem;
  color: #718096;
  font-style: italic;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- SURPRISE MOMENT ---------- */
.surprise-moment {
  font-family: 'Lora', serif;
  font-style: italic;
  background: rgba(139, 0, 255, 0.03);
  border-left: 3px solid var(--toni-primary);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  font-size: 0.95rem;
  line-height: 1.75;
}
.surprise-moment .surprise-date {
  font-weight: 700;
  font-style: normal;
  margin-bottom: 0.5rem;
  font-family: 'Inter', sans-serif;
  color: var(--toni-primary);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* ---------- PREV/NEXT NAVIGATION ---------- */
.article-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1.5rem;
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.article-nav a {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  max-width: 48%;
}
.article-nav a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-decoration: none;
}
.article-nav .nav-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ken-secondary);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.article-nav .nav-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--deep-ocean);
}
.article-nav .nav-next { text-align: right; margin-left: auto; }

@media (max-width: 600px) {
  .article-nav { flex-direction: column; }
  .article-nav a { max-width: 100%; }
}

/* ---------- PRINT STYLES ---------- */
@media print {
  .site-nav, .page-loader, .site-footer, .post-banner canvas,
  .banner-canvas, .footer-silhouettes { display: none !important; }
  body { background: #fff !important; }
  .page-wrapper { max-width: 100%; padding: 0; }
  .post-banner { height: auto; box-shadow: none; }
  .callout { break-inside: avoid; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
  html { font-size: 15px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .articles-grid { grid-template-columns: 1fr; }
  .footer-signatures { flex-direction: column; gap: 0.5rem; }
}