/* ==========================================================================
   Shining the Light - Design System & Stylesheet
   Theme: Warm, peaceful, reflective, sunset, and nature-inspired
   ========================================================================== */

/* Design Tokens (CSS Custom Properties) */
:root {
  /* Colors */
  --primary: #d48259;
  --primary-hover: #be6d45;
  --primary-light: #f5e4da;
  --secondary: #5c8266;
  --secondary-hover: #486a51;
  --secondary-light: #e6eee9;
  
  --bg-main: #fdfbf7;
  --bg-section-alt: #f9f3ea;
  --bg-card: rgba(255, 255, 255, 0.72);
  --bg-card-hover: rgba(255, 255, 255, 0.88);
  --header-bg: rgba(253, 251, 247, 0.8);
  
  --text-primary: #2c231c;
  --text-secondary: #5c4f45;
  --text-muted: #8c7b6e;
  
  --border-color: rgba(212, 130, 89, 0.15);
  --border-focus: #d48259;
  
  /* Fonts */
  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  
  /* Shadows */
  --shadow-light: 0 4px 20px rgba(92, 79, 69, 0.04);
  --shadow-medium: 0 10px 30px rgba(92, 79, 69, 0.08);
  --shadow-glow: 0 15px 35px rgba(212, 130, 89, 0.12);
  
  /* Layout */
  --container-width: 1120px;
  --header-height: 80px;
}

/* ==========================================================================
   1. Base & Reset Styles
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-main) 0%, #faf4eb 30%, #fcf7ef 60%, #f8f1e5 100%);
  background-attachment: fixed;
  line-height: 1.625;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

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

ul {
  list-style: none;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
}

/* Helper Class for Grid/Flex layouts */
.container {
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.05); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ==========================================================================
   2. Components & Typography
   ========================================================================== */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeIn 0.8s ease-out forwards;
}

.section-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.section-description {
  margin-top: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-secondary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-align: center;
  border: none;
}

.btn-primary {
  background-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(212, 130, 89, 0.2);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 130, 89, 0.35);
}

.btn-secondary {
  background-color: var(--secondary-light);
  color: var(--secondary);
}

.btn-secondary:hover {
  background-color: var(--secondary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(92, 130, 102, 0.2);
}

.btn-with-icon {
  gap: 0.5rem;
}

.btn-icon {
  transition: transform 0.3s ease;
}

.btn-with-icon:hover .btn-icon {
  transform: translate(2px, -2px);
}

/* Highlight Text */
.highlight {
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(212, 130, 89, 0.15);
  border-radius: 2px;
}

/* Section dividers */
.section-divider {
  width: 100%;
  line-height: 0;
  margin-top: -1px;
}

.section-divider svg {
  width: 100%;
  height: 40px;
}

/* ==========================================================================
   3. Header & Navigation (Mobile-first CSS Checkbox Drawer)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.5rem;
  max-width: var(--container-width);
  margin: 0 auto;
}

.logo-link {
  display: flex;
  flex-direction: column;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}

.site-tagline {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-top: 2px;
}

/* Navigation Menu */
.nav-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height));
  background-color: var(--bg-main);
  padding: 2.5rem 2rem;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-medium);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.nav-link:hover {
  color: var(--primary);
  padding-left: 5px;
}

/* Checkbox Toggle Hack */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1001;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-primary);
  position: relative;
  transition: all 0.3s ease;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-label span::before {
  top: -8px;
}

.nav-toggle-label span::after {
  bottom: -8px;
}

/* Checked States (Hamburger to 'X' and Drawer sliding in) */
.nav-toggle:checked ~ .nav-toggle-label span {
  background-color: transparent;
}

.nav-toggle:checked ~ .nav-toggle-label span::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle:checked ~ .nav-toggle-label span::after {
  transform: rotate(-45deg);
  bottom: 0;
}

.nav-toggle:checked ~ .nav-menu {
  transform: translateX(0);
}

/* ==========================================================================
   4. Hero Section
   ========================================================================== */
.hero-section {
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 3rem;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile stack order: text/buttons, then heart-cloud, then the soft hero image */
  grid-template-areas:
    "center"
    "left"
    "right";
  gap: 3rem;
  align-items: center;
}

/* Map the three hero blocks to their grid areas (placement is independent of
   source order, so the same markup works for mobile stack and desktop 3-up) */
.hero-content {
  grid-area: center;
  animation: fadeIn 0.8s ease-out;
}

.hero-media-left {
  grid-area: left;
}

.hero-media-right {
  grid-area: right;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.hero-lead {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Hero Media Area */
.hero-media-wrapper {
  animation: fadeIn 1s ease-out;
  display: flex;
  justify-content: center;
}

.hero-media-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  max-width: 360px; /* both hero images share this card, so they stay the same size */
  width: 100%;
}

.hero-media-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-glow);
}

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.hero-media-card:hover .hero-image {
  transform: scale(1.05);
}

.media-glow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(212, 130, 89, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ==========================================================================
   5. Featured Reflection Section
   ========================================================================== */
.featured-section {
  background-color: var(--bg-section-alt);
  padding: 5rem 0;
}

.featured-card {
  background-color: var(--bg-card);
  border-radius: 24px;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-color);
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: fadeIn 1s ease-out;
}

.featured-card:hover {
  transform: translateY(-4px);
  background-color: var(--bg-card-hover);
  box-shadow: var(--shadow-medium);
}

.card-image-container {
  width: 100%;
  height: 260px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  background-color: #030205; /* Matches the black background of the energy portrait */
}

.featured-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.8s ease;
}

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

.featured-card .card-content {
  padding: 2rem 1.25rem; /* Reduced horizontal padding on mobile for breathing room */
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem; /* Vertical and horizontal gap to prevent crowding on wrap */
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.meta-separator {
  color: rgba(212, 130, 89, 0.3);
}

.meta-tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
}

.tag-updated {
  background-color: var(--secondary-light);
  color: var(--secondary);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.card-excerpt {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* Increased gap for tap targets and spacing */
  margin-bottom: 2rem;
}

.tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: rgba(92, 79, 69, 0.05);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(92, 79, 69, 0.06);
}

.card-action {
  display: flex;
}

/* ==========================================================================
   6. Reflections Page (topic filters + reflection grid)
   ========================================================================== */
/* Standalone Reflections page: clear the fixed header and add a soft warm wash */
.reflections-page {
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 5rem;
  background-image:
    radial-gradient(70% 55% at 50% 0%, rgba(212, 130, 89, 0.06) 0%, rgba(212, 130, 89, 0) 70%),
    radial-gradient(60% 50% at 85% 100%, rgba(92, 130, 102, 0.05) 0%, rgba(92, 130, 102, 0) 72%);
}

.reflections-intro {
  margin-bottom: 2.5rem;
}

/* Topic filter buttons — mobile: horizontal scroll row, no wrap clutter */
.topic-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin: 0 auto 3rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  justify-content: flex-start;
}

.filter-btn {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.filter-btn:hover {
  background-color: var(--bg-card-hover);
  color: var(--primary);
  transform: translateY(-2px);
}

.filter-btn.is-active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(212, 130, 89, 0.25);
}

/* Reflection grid — mobile-first single column */
.reflections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.reflection-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-light);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: fadeIn 0.6s ease-out;
}

.reflection-card:hover {
  transform: translateY(-5px);
  background-color: var(--bg-card-hover);
  box-shadow: var(--shadow-medium);
}

/* Filtering: hidden cards are removed from flow so there is no gap */
.reflection-card.is-hidden {
  display: none;
}

.reflection-image-container {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-section-alt);
}

.reflection-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* keep the upper part of portrait images (faces) in view */
  transition: transform 0.8s ease;
}

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

.reflection-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem 1.5rem;
}

.reflection-topic {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

/* Author / meta row — mirrors the live Wix blog card header */
.card-author-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover; /* CG's portrait — fill the circle cleanly */
  object-position: center top;
  background-color: var(--bg-section-alt);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.author-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.author-dateline {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Subtle three-dot (kebab) menu visual on the far right of the author row */
.card-menu-dots {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.55;
  flex-shrink: 0;
}

.reflection-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.reflection-title-link {
  color: var(--text-primary);
}

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

/* Engagement footer — views (left) and like (right), pinned to the card bottom.
   The live blog cards show no numeric counts, so only the icons are rendered. */
.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}

.card-stat {
  display: inline-flex;
  align-items: center;
}

.card-like {
  transition: color 0.3s ease;
}

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

/* Empty-state message when a filter has no matching cards */
.reflections-empty {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2rem;
}

/* ==========================================================================
   7. About CG Section
   ========================================================================== */
.about-section {
  background-color: var(--bg-section-alt);
  padding: 5rem 0;
  overflow: hidden;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.about-content {
  animation: fadeIn 0.8s ease-out;
}

.about-text {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.about-signature {
  margin-top: 2rem;
  border-left: 2px solid var(--primary);
  padding-left: 1rem;
}

.sig-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sig-title {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* About Visual Container and Floating Orbs */
.about-visual {
  display: flex;
  justify-content: center;
}

.visual-orb-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Energy/Vibration Floating Orbs */
.glowing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.45;
  pointer-events: none;
}

.orb-primary {
  width: 160px;
  height: 160px;
  background-color: var(--primary);
  top: 10%;
  left: 15%;
  animation: floatOrb 8s infinite ease-in-out;
}

.orb-secondary {
  width: 180px;
  height: 180px;
  background-color: var(--secondary);
  bottom: 15%;
  right: 10%;
  animation: floatOrb 10s infinite ease-in-out reverse;
}

.visual-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  padding: 2.25rem;
  box-shadow: var(--shadow-medium);
  text-align: center;
  transition: transform 0.3s ease;
}

.visual-card:hover {
  transform: rotate(-1deg) translateY(-3px);
}

.visual-quote {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}

.visual-cite {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

/* ==========================================================================
   8. Connect Section (Mailing List & Direct Contact)
   ========================================================================== */
.connect-section {
  padding: 5rem 0;
}

.connect-card {
  background-color: var(--bg-card);
  border-radius: 28px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.connect-card:hover {
  box-shadow: var(--shadow-glow);
}

.connect-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.connect-form-area,
.connect-info-area {
  padding: 2.5rem 1.75rem;
}

.connect-info-area {
  background-color: rgba(92, 130, 102, 0.04);
  border-top: 1px solid var(--border-color);
}

.connect-card-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.connect-card-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Newsletter form */
.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.875rem 1.5rem;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  color: var(--text-primary);
  width: 100%;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(212, 130, 89, 0.15);
}

.form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.form-checkbox {
  margin-top: 0.25rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.form-checkbox-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.form-disclaimer {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.25rem;
}

/* Contact Info Area */
.contact-details {
  margin-bottom: 1.5rem;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 0.5rem 0;
  border-bottom: 1.5px solid transparent;
}

.contact-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.contact-icon {
  color: var(--primary);
}

.contact-subtext {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer {
  background-color: #37291d; /* warm dark brown/charcoal — softer than near-black, strong contrast kept */
  color: #ffffff;
  padding: 3rem 0;
  text-align: center;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
}

.footer-dot {
  color: var(--primary);
  font-size: 1.5rem;
  line-height: 1;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-credits {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-subcredits {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* ==========================================================================
   9b. About Page (standalone) & Homepage Teaser
   ========================================================================== */
/* Standalone About page: add top space so content clears the fixed header */
.about-page {
  padding-top: calc(var(--header-height) + 4rem);
  /* Barely-there warm glow over the cream base — soft, never competes with text/images */
  background-image:
    radial-gradient(70% 55% at 50% 0%, rgba(212, 130, 89, 0.06) 0%, rgba(212, 130, 89, 0) 70%),
    radial-gradient(60% 50% at 85% 100%, rgba(92, 130, 102, 0.05) 0%, rgba(92, 130, 102, 0) 72%);
}

/* Homepage About teaser: spacing for the "Read More About CG" button */
.about-teaser-action {
  margin-top: 2rem;
}

/* About intro: her photo beside the intro text */
.about-photo-wrapper {
  display: flex;
  justify-content: center;
  order: -1; /* Mobile: stack the image above the text */
  width: 100%;
  max-width: 560px;
  margin: 0 auto; /* Mobile/tablet: image fills its container, centered */
}

.about-photo {
  width: 100%;
  height: auto; /* preserve natural aspect ratio — no stretch or face cropping */
  border-radius: 24px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-medium);
  background-color: var(--bg-card);
}

/* Intro lead line (her live-site subtitle wording) */
.about-lead {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0.75rem 0 1.5rem;
}

/* Two-column About + My Life Force layout (mobile-first: single column) */
.about-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.about-col {
  min-width: 0; /* let images shrink inside the column instead of overflowing */
}

/* CG portrait sits at the top of the left column, above her intro */
.about-col-left .about-portrait-wrapper {
  margin-bottom: 2rem;
}

/* "My Life Force" heading sits at the top of the right column */
.lifeforce-title {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Life Force / cosmic image sits at the bottom of the right column */
.about-col-right .lifeforce-photo-wrapper {
  margin-top: 2rem;
}

.about-prose {
  max-width: 760px;
  margin: 0 auto;
}

.about-prose p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

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

/* My Favorite Things sits under CG's bio in the left column */
.about-favorites {
  margin-top: 2.5rem;
}

.favorites-title {
  margin-bottom: 1.5rem;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.favorites-list li {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem 1.5rem;
  color: var(--text-secondary);
  font-size: 1.05rem;
  box-shadow: var(--shadow-light);
}

.fav-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 0.4rem;
}

/* Footer email contact (About page) */
.footer-contact {
  margin: 0;
}

.footer-email {
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 500;
}

.footer-email:hover {
  color: #ffffff;
}

/* ==========================================================================
   9c. "A Little Light" — static 3-column quote-tree section (rebuilt)
   Heading on top, then a true grid:
     3 quotes (left)  |  tree image (center)  |  2 quotes (right)
   No carousel, no buttons, no cards — quotes are clean serif text.
   ========================================================================== */
.quote-tree-section {
  padding: 7rem 1.5rem 6rem; /* top padding clears the sticky header */
  scroll-margin-top: var(--header-height);
  /* Soft warm cream/pink wash, anchored toward the tree side */
  background:
    radial-gradient(85% 80% at 80% 35%, rgba(212, 130, 89, 0.11) 0%, rgba(212, 130, 89, 0) 60%),
    radial-gradient(60% 65% at 25% 80%, rgba(190, 109, 69, 0.05) 0%, rgba(190, 109, 69, 0) 65%),
    var(--bg-section-alt);
}

.quote-tree-heading {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 4rem; /* clear spacing below the heading before the grid */
}

.quote-tree-heading .eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.quote-tree-heading h2 {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Mobile-first (< 800px): single column — tree first, then all five quotes */
.quote-tree-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.tree-image-wrap {
  order: -1; /* tree sits above the quotes on mobile */
  display: flex;
  justify-content: center;
  width: 100%;
}

.tree-image-wrap img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  object-fit: contain; /* never crop or stretch the tree */
}

.quote-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 480px;
}

/* Clean text quotes — no cards, no boxes, no backgrounds, no shadows */
.tree-quote {
  margin: 0;
  padding: 0;
}

.tree-quote-text {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  border-left: 2px solid rgba(212, 130, 89, 0.35); /* soft accent line, not a card */
  padding-left: 1rem;
}

.tree-quote-author {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.05em;
  padding-left: 1.15rem; /* matches the quote text indent */
}

/* >= 600px: real 3-column grid — 3 quotes (left) | tree (center) | 2 quotes (right).
   Named areas pin each column so quotes always sit beside the tree, never above
   or below it. Fluid tracks (0 floor on the sides) so it never overflows even on
   a narrow window; the column-gap scales down with the viewport. */
@media (min-width: 600px) {
  .quote-tree-heading h2 {
    font-size: 2.75rem;
  }

  .quote-tree-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 1.6fr) minmax(0, 1fr);
    grid-template-areas: "left tree right";
    align-items: center;
    column-gap: clamp(1rem, 3vw, 3rem);
    row-gap: 0;
    max-width: 1200px;
    margin: 0 auto;
  }

  .quote-column-left {
    grid-area: left;
    max-width: none;
  }

  .tree-image-wrap {
    grid-area: tree;
    order: 0; /* override the mobile "tree first" ordering */
  }

  .tree-image-wrap img {
    max-width: 520px; /* large, prominent tree anchored in the center column */
  }

  .quote-column-right {
    grid-area: right;
    max-width: none;
  }

  .tree-quote-text {
    font-size: 1.05rem; /* slightly tighter so narrow side columns stay readable */
  }
}

/* Wide desktop (>= 1024px): roomy side columns with a comfortable floor + the
   tree capped so the two quote columns get balanced space on each side. */
@media (min-width: 1024px) {
  .quote-tree-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 520px) minmax(260px, 1fr);
    column-gap: 3rem;
  }

  .tree-quote-text {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   10. Media Queries (Desktop & Tablet Layouts)
   ========================================================================== */

/* Tablet & Up (min-width: 768px) */
/* ==========================================================================
   11. Connect / Contact Page (+ homepage teaser)
   ========================================================================== */
/* Homepage Connect teaser: spacing for the "Contact CG" button */
.connect-teaser-action {
  margin-top: 2rem;
}

/* Standalone Connect page: clear the fixed header and add the soft warm wash */
.connect-page {
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 5rem;
  background-image:
    radial-gradient(70% 55% at 50% 0%, rgba(212, 130, 89, 0.06) 0%, rgba(212, 130, 89, 0) 70%),
    radial-gradient(60% 50% at 85% 100%, rgba(92, 130, 102, 0.05) 0%, rgba(92, 130, 102, 0) 72%);
}

.connect-page-intro {
  margin-bottom: 2.5rem;
}

/* Calm, centered panel that holds the message, contact details, and form */
.connect-panel {
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  box-shadow: var(--shadow-light);
  padding: 2.25rem 1.5rem;
  text-align: center;
  animation: fadeIn 0.8s ease-out;
}

.connect-heading {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.connect-message {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 2rem;
}

/* Email + social block */
.connect-contact-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.connect-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.connect-social-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.connect-social-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Contact form — warm, not a default browser form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.required-mark {
  color: var(--primary);
}

.contact-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  width: 100%;
  transition: all 0.3s ease;
}

.contact-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(212, 130, 89, 0.15);
}

.contact-textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.contact-form .form-disclaimer {
  text-align: left;
}

@media (min-width: 768px) {
  /* Typography */
  .section-title {
    font-size: 2.75rem;
  }

  /* Buttons & Layouts */
  .hero-actions {
    flex-direction: row;
  }
  
  .hero-title {
    font-size: 3.25rem;
  }

  .form-group {
    flex-direction: row;
    align-items: stretch;
  }

  .form-group .form-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .form-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
    padding: 0 2rem;
  }

  /* Topic filters: center the row once it fits comfortably */
  .topic-filters {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }

  /* Connect page: roomier panel + First/Last name side by side */
  .connect-panel {
    padding: 3rem 3rem;
  }

  .form-row {
    flex-direction: row;
  }

  /* Reflections grid - 2 columns */
  .reflections-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  /* Featured card responsive side-by-side layout */
  .featured-card {
    flex-direction: row;
    align-items: stretch;
  }

  .card-image-container {
    width: 42%;
    height: auto;
    min-height: 320px;
    border-bottom: none;
    border-right: 1px solid var(--border-color);
    background-color: #030205;
  }

  .featured-card .card-content {
    width: 58%;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Desktop & Up (min-width: 1024px) */
@media (min-width: 1024px) {
  /* Site Header Navigation (Inline - No Hamburger) */
  .nav-toggle-label {
    display: none;
  }

  .nav-menu {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0;
    transform: none;
    border-top: none;
    box-shadow: none;
  }

  .nav-list {
    flex-direction: row;
    gap: 2.25rem;
  }

  .nav-link {
    font-size: 0.95rem;
    color: var(--text-secondary);
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
  }

  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
  }

  .nav-link:hover {
    color: var(--primary);
    padding-left: 0;
  }

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

  /* Hero Layout Grid */
  .hero-section {
    padding-top: calc(var(--header-height) + 5rem);
    padding-bottom: 6rem;
  }

  /* Desktop 3-up hero: heart-cloud (left) | title + text + buttons (center) | soft image (right) */
  .hero-grid {
    grid-template-columns: 0.8fr 1.5fr 0.8fr;
    grid-template-areas: "left center right";
    gap: 3rem;
    align-items: center;
  }

  /* Center column reads as the focal point, flanked by two equal images */
  .hero-content {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-title {
    font-size: 3rem; /* fits the narrower center column between the two images */
    margin-bottom: 2rem;
  }

  /* Reflections grid - 3 columns */
  .reflections-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* About Layout Grid */
  .about-section {
    padding: 7rem 0;
  }

  /* Standalone About page keeps generous clearance under the fixed header */
  .about-page {
    padding-top: calc(var(--header-height) + 6rem);
  }

  /* Desktop: Hi, I'm CG! (left) and My Life Force (right) sit side by side */
  .about-layout-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start; /* top-align so the two columns line up at the top */
  }

  /* Desktop: images fill their column for more presence */
  .about-photo-wrapper {
    order: 0;
    max-width: none;
    margin: 0;
  }

  .about-photo {
    max-width: 600px;
  }

  .about-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
  }

  /* Connect Card Layout */
  .connect-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .connect-form-area {
    padding: 4rem 3.5rem;
  }

  .connect-info-area {
    padding: 4rem 3.5rem;
    border-top: none;
    border-left: 1px solid var(--border-color);
  }
}