:root{
  /* Cozy Fall Palette */
  --pumpkin-600:#c0392b; /* deep pumpkin red */
  --pumpkin-500:#e5652e; /* bright pumpkin */
  --pumpkin-300:#f19a5b;
  --maple-700:#7a2a12;
  --maple-500:#b23a15;
  --amber-400:#f2b646;
  --amber-200:#f9d98a;
  --chestnut-700:#5a3a2e;
  --cider-100:#fff7f0;

  /* Neutrals / shadows */
  --ink:#2b2b2b;
  --ink-70:#2b2b2bb3;
  --paper:#fffdfa;
  --paper-2:#fff7ef;
  --shadow: 0 12px 24px rgba(58, 35, 25, 0.15), 0 2px 6px rgba(58, 35, 25, 0.08);
  --radius-lg: 18px;
  --radius-md: 14px;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 30% -10%, #ffe9d1 0%, #fff3e2 35%, var(--cider-100) 100%);
}

/* Site header */
.site{
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 24px;
  padding: 24px 16px 56px;
}

.site-header{
  width: min(1100px, 100%);
  text-align: center;
}
.brand{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: clamp(1.05rem, 1rem + 1.2vw, 1.5rem);
  margin: 8px 0 0;
  color: var(--maple-700);
}

/* Card stack */
.card-stack{
  position: relative;
  width: min(820px, 100%);
  padding: clamp(6px, 1.5vw, 14px);
}

.card{
  border-radius: var(--radius-lg);
  background: var(--paper);
}

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

.layer{
  position: absolute;
  inset: 0;
  transform-origin: center;
  pointer-events: none;
}

.layer--1{
  transform: translate(12px, 14px) rotate(-1.2deg);
  background: var(--paper-2);
  opacity: 0.9;
}
.layer--2{
  transform: translate(-10px, 22px) rotate(1.6deg);
  background: #fff3e8;
  opacity: 0.85;
}

.card--content{
  position: relative;
  overflow: clip;
  border: 1px solid #f3e0d1;
}

/* Optional header image area */
.hero-placeholder{
  width: 100%;
  height: clamp(120px, 28vw, 220px);
  background:
    linear-gradient(135deg, rgba(226, 115, 53, .12), rgba(242, 182, 70, .18)),
    repeating-linear-gradient(135deg, #ffffff 0 6px, #fff9f3 6px 12px);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom: 1px solid #f2e2d4;
}

.hero-img {
  width: 100%;
  height: clamp(160px, 30vw, 260px);
  object-fit: cover;
  display: block;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom: 1px solid #f2e2d4;
}

/* Card content */
.card-body{
  padding: clamp(18px, 4vw, 36px) clamp(16px, 5vw, 42px) clamp(22px, 5vw, 40px);
}

.headline{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-size: clamp(1.35rem, 1rem + 3.2vw, 2.2rem);
  line-height: 1.2;
  margin: 4px 0 10px;
  color: var(--chestnut-700);
}
.headline .accent{
  color: var(--pumpkin-600);
  background: linear-gradient(180deg, rgba(245, 159, 75, .24), rgba(242, 182, 70, .28));
  padding: 0 .3em;
  border-radius: .35em;
}

.subhead{
  font-size: clamp(.98rem, .9rem + .7vw, 1.08rem);
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--ink-70);
}

.copy{
  font-size: clamp(.96rem, .9rem + .4vw, 1rem);
  line-height: 1.65;
  margin: 0 0 18px;
}

/* Actions */
.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
  margin-top: 16px;
}

.btn{
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font: 600 0.98rem/1 Poppins, Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:focus-visible{
  outline: 3px solid #2b2b2b22;
  outline-offset: 2px;
}
.btn--primary{
  color: white;
  background: linear-gradient(135deg, var(--pumpkin-500), var(--maple-500));
  box-shadow: 0 8px 18px rgba(226, 101, 46, .25);
}
.btn--primary:hover{ transform: translateY(-1px); }
.btn--primary:active{ transform: translateY(0); }

/* Footer note */
.footer-note{
  margin-top: 20px;
  color: #6b5247;
}

/* Animated leaves */
#leaves{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: clip;
}
.leaf{
  position: absolute;
  top: -10vh;
  width: 18px;
  height: 18px;
  transform-origin: center;
  opacity: .9;
  filter: drop-shadow(0 2px 2px rgba(65,34,18,.18));
  will-change: transform;
}

.btn {
  text-decoration: none; /* hides underline for anchor links styled as buttons */
}

/* ========== Theme Picker UI ========== */
.season-picker{
  position: absolute;
  top: 14px;
  right: 16px;
}
.site-header{ position: relative; } /* ensure top-right positioning works */

.season-picker select{
  appearance: none;
  border: 1px solid #ead7c8;
  border-radius: 999px;
  padding: 8px 12px;
  font: 600 0.9rem/1 Poppins, Inter, system-ui, sans-serif;
  background: #fffdfa;
  box-shadow: 0 2px 6px rgba(58,35,25,.08);
  cursor: pointer;
}

/* ========== THEME OVERRIDES ========== */
/* Default (Fall) is already your :root values; we also add a body class for clarity */
body.theme-fall {}

/* Winter — cozy cools & cranberries */
body.theme-winter{
  --pumpkin-600:#1b4b6b; /* deep winter blue */
  --pumpkin-500:#2f6f98;
  --pumpkin-300:#79a8c6;
  --maple-700:#244b5a;   /* pine */
  --maple-500:#3f6d7d;
  --amber-400:#c7d7e6;   /* frosty highlights */
  --amber-200:#e7f0f8;
  --chestnut-700:#2f3b46;
  --cider-100:#f5fbff;   /* cool background wash */

  --paper:#ffffff;
  --paper-2:#f7fbff;

  /* Page background */
  /* snowy sky gradient */
  /* (re-using your body background rule: it will read these vars) */
  /* If you want a stronger winter wash, add this: */
  /* body background is defined earlier — leave as-is since vars affect colors globally */
}

/* Spring — fresh greens & soft blossoms */
body.theme-spring{
  --pumpkin-600:#2f7a4f; /* leaf green */
  --pumpkin-500:#4e9b6a;
  --pumpkin-300:#81c49a;
  --maple-700:#5b3a5e;   /* plum accent */
  --maple-500:#8b5e8e;
  --amber-400:#f2c7d9;   /* blossom pink */
  --amber-200:#ffe7f1;
  --chestnut-700:#3d4a3f;
  --cider-100:#f7fff7;

  --paper:#ffffff;
  --paper-2:#fffaff;
}

/* Optional: tweak hero placeholder to reflect themes more strongly */
body.theme-winter .hero-placeholder{
  background:
    linear-gradient(135deg, rgba(47, 111, 152, .14), rgba(199, 215, 230, .20)),
    repeating-linear-gradient(135deg, #ffffff 0 6px, #f7fbff 6px 12px);
  border-bottom-color: #e3eef7;
}
body.theme-spring .hero-placeholder{
  background:
    linear-gradient(135deg, rgba(78,155,106,.14), rgba(242,199,217,.20)),
    repeating-linear-gradient(135deg, #ffffff 0 6px, #fff7fb 6px 12px);
  border-bottom-color: #f0e3ee;
}


/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  #leaves { display: none; }
  .btn, .registry-badge, .layer--1, .layer--2 { transition: none !important; }
}

/* Desktop niceties */
@media (min-width: 960px){
  .site{ padding-top: 48px; }
  .actions{ gap: 16px 20px; }
}

/* Mobile: stack the picker under the title */
@media (max-width: 640px){
  .site-header{
    position: relative;           /* keep */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;                     /* space between title and picker */
  }
  .season-picker{
    position: static;             /* no absolute overlap */
    margin-top: 4px;              /* tiny breathing room */
  }
  .season-picker select{
    padding: 6px 10px;            /* slightly smaller control on mobile */
    font-size: 0.9rem;
  }
}

/* Desktop: return picker to top-right */
@media (min-width: 641px){
  .site-header{ display: block; }  /* restore normal flow */
  .season-picker{
    position: absolute;
    top: 14px;
    right: 16px;
  }
}