/* ===== About (Green Theme) — compatible, warning-free ===== */

/* Palette (same tokens your site uses) */
:root{
  --green: #6b7359;            /* sage accent */
  --green-strong: #546047;     /* darker sage for borders/text */
  --green-tint: #e9eee3;       /* pale sage for chips/panels */
  --page-bg: #f7f3ef;          /* off-white base */
}

/* Page background & subtle motif */
body.theme-green{
  /* soft sage -> off-white gradient */
  background:
    linear-gradient(180deg, rgba(107,115,89,0.18) 0%, rgba(247,243,239,1) 52%),
    var(--page-bg);
  /* sparkles pattern overlay via ::before so we can control opacity */
  position: relative;
}
body.theme-green::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../images/about/sparkles.png");
  background-repeat: repeat;
  background-size: 180px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Hero band */
.about-hero{
  background: linear-gradient(180deg, #6b7359 0%, #889279 100%);
  color: #fff;
  border-bottom: 2px solid #46503f;
  position: relative;
  z-index: 1; /* above the body ::before */
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 1rem 2.8rem;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.hero-copy h1{ color: #ffffff; margin: 0 0 .5rem; }
.hero-copy p{ max-width: 62ch; }
.hero-ctas{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top: .7rem; }

/* Portrait & decorative stickers */
.hero-art{ position: relative; min-height: 260px; }
.hero-art .selfie{
  width: 90%;
  max-width: 360px;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  position: relative;
  z-index: 2;
  display: block;
  margin-left: auto;
}
.dec{ position:absolute; pointer-events:none; }
.leaf{ width: 120px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.10)); opacity:.95; }
.leaf-a{ left:-10px; top: -10px; transform: rotate(-10deg); }
.leaf-b{ right: -20px; bottom: 6px; transform: rotate(14deg); }
.sparkles{ width: 140px; left: 50%; top: -24px; margin-left: -70px; opacity:.75; }

/* Interests chips */
.interests{ margin: 2rem 0 1rem; }
.interests h2{ color:#233026; margin: 0 0 .6rem; }
.chips{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.chips li{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-radius:999px;
  background: var(--green-tint);
  border: 1px solid #c8d0c1;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease;
}
.chips li:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.chips img{ width: 36px; height: 36px; object-fit: contain; }

/* Info cards */
.about-cards{
  margin: 1.2rem 0 2.4rem;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:1rem;
}
.about-cards .card{
  background:#fff;
  border:1px solid #e1e1dc;
  border-radius:16px;
}

/* Gentle bob for the decorative (not the cursor sprinkles) */
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
.leaf-a, .leaf-b, .sparkles{ animation: bob 6s ease-in-out infinite; }

/* Cursor sprinkles created by JS */
.cursor-sprinkle{
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85) rotate(0deg);
}
@media (prefers-reduced-motion: reduce){
  .cursor-sprinkle{ display:none; }
}