/* ─────────────────────────────────────────────────────────
   botanical brenda — style.css
   desert-earth palette · handmade / slow / warm
   ───────────────────────────────────────────────────────── */

:root {
  /* palette */
  --bone:        #f3ece0;
  --bone-soft:   #eadfcb;
  --clay:        #c07a50;
  --terracotta:  #b05a36;
  --rust:        #8a3d22;
  --sage:        #8a9a7a;
  --moss:        #566b4a;
  --ink:         #2b1d14;
  --ink-soft:    #5c4634;

  /* shadows / glow */
  --shadow-soft: 0 20px 60px -20px rgba(43, 29, 20, 0.25);
  --shadow-deep: 0 30px 80px -30px rgba(43, 29, 20, 0.45);

  /* type */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── grain ─── */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.5 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* ─── biome backdrops ─── */
.biome { position: fixed; inset: 0; z-index: -1; }
.biome-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  background-attachment: fixed;
}
.biome-layer.is-active { opacity: 1; }

.biome-desert {
  background:
    radial-gradient(ellipse at 20% 10%, #f7e6c8 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, #e8c798 0%, transparent 55%),
    linear-gradient(180deg, #f3ece0 0%, #e9d5b6 100%);
}
.biome-canyon {
  background:
    radial-gradient(ellipse at 30% 20%, #f4d4a8 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, #c47848 0%, transparent 60%),
    linear-gradient(180deg, #f0d9b5 0%, #b46a3e 100%);
}
.biome-alpine {
  background:
    radial-gradient(ellipse at 25% 15%, #e0e6dc 0%, transparent 50%),
    radial-gradient(ellipse at 75% 85%, #a8b6a4 0%, transparent 55%),
    linear-gradient(180deg, #ebefe5 0%, #8a9a7a 100%);
}
.biome-forest {
  background:
    radial-gradient(ellipse at 20% 20%, #d9dfcf 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, #566b4a 0%, transparent 60%),
    linear-gradient(180deg, #d6dfc6 0%, #3e4f36 100%);
}

/* ─── nav ─── */
.nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 2.2rem;
  z-index: 5;
}
.mark {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--rust);
}
.mark svg { color: var(--rust); }

.biome-toggle {
  display: flex; align-items: center; gap: 0.55rem;
  background: transparent;
  border: 1px solid rgba(43, 29, 20, 0.25);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.biome-toggle:hover {
  background: rgba(176, 90, 54, 0.08);
  border-color: var(--rust);
  color: var(--rust);
  transform: translateY(-1px);
}
.biome-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 3px rgba(192, 122, 80, 0.15);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
body.biome-canyon .biome-dot  { background: var(--rust);  box-shadow: 0 0 0 3px rgba(138, 61, 34, 0.15); }
body.biome-alpine .biome-dot  { background: var(--sage);  box-shadow: 0 0 0 3px rgba(138, 154, 122, 0.15); }
body.biome-forest .biome-dot  { background: var(--moss);  box-shadow: 0 0 0 3px rgba(86, 107, 74, 0.15); }

/* ─── hero ─── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 6rem;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
}
.word-bot {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
  font-size: 0.72em;
}
.word-brenda {
  display: block;
  color: var(--rust);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 0 rgba(138, 61, 34, 0.06);
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ─── floating botanical accents ─── */
.float {
  position: absolute;
  color: var(--moss);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  animation: float 10s ease-in-out infinite;
}
.float-1 {
  top: 12%; left: 6%;
  width: 80px; height: 120px;
  animation-delay: -2s;
  color: var(--sage);
}
.float-2 {
  bottom: 8%; right: 8%;
  width: 90px; height: 140px;
  animation-delay: -5s;
  color: var(--moss);
}
.float-3 {
  top: 18%; right: 12%;
  width: 90px; height: 90px;
  animation-delay: -1s;
  color: var(--clay);
  opacity: 0.4;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

/* ─── strip ─── */
.strip {
  padding: 2rem;
  display: flex;
  justify-content: center;
}
.strip-inner { width: 100%; max-width: 800px; color: var(--rust); opacity: 0.55; }
.ridge { width: 100%; height: auto; }

/* ─── grid ─── */
.grid-section {
  padding: 2rem 2rem 6rem;
  max-width: 1100px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 1rem;
}
.tile {
  position: relative;
  background: var(--bone-soft);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  cursor: default;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}
.tile-tall  { grid-row: span 2; }
.tile-wide  { grid-column: span 2; }

.tile-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.tile-art svg { width: 70%; height: 70%; transition: transform 0.8s ease; }
.tile:hover .tile-art svg { transform: scale(1.04) rotate(-1deg); }

.art-agave    { background: linear-gradient(160deg, #e9d5b6, #d9bd8f); color: var(--moss); }
.art-stone    { background: linear-gradient(160deg, #e3d3b7, #bfa176); color: var(--ink); }
.art-ridge    { background: linear-gradient(160deg, #d9bd8f, #b57a4c); color: var(--rust); }
.art-cactus   { background: linear-gradient(160deg, #ccd4c1, #8a9a7a); color: var(--ink); }
.art-horizon  { background: linear-gradient(160deg, #f1d7a8, #c47848); color: var(--rust); }
.art-fern     { background: linear-gradient(160deg, #c8d0bc, #566b4a); color: var(--bone); }

.tile figcaption {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(243, 236, 224, 0.85);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

/* ─── pull quote ─── */
.pull {
  padding: 5rem 2rem 3rem;
  text-align: center;
}
.pull blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  color: var(--ink);
  line-height: 1.3;
  max-width: 720px;
  margin: 0 auto;
}
.quote-mark {
  color: var(--rust);
  font-size: 1.4em;
  line-height: 0;
  position: relative;
  top: 0.12em;
}

/* ─── seasons / palette ─── */
.seasons {
  padding: 4rem 2rem 5rem;
}
.seasons-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.seasons .eyebrow { margin-bottom: 2rem; }
.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow-soft);
  border-radius: 4px;
  overflow: hidden;
}
.sw {
  flex: 1 1 130px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  padding: 0.85rem;
  position: relative;
  transition: flex-basis 0.5s ease;
  cursor: default;
}
.sw:hover { flex-basis: 180px; }
.sw span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.sw:hover span { opacity: 1; transform: translateY(0); }

.sw-1 { background: var(--terracotta); color: var(--bone); }
.sw-2 { background: var(--bone);        color: var(--ink); }
.sw-3 { background: var(--sage);        color: var(--ink); }
.sw-4 { background: var(--rust);        color: var(--bone); }
.sw-5 { background: var(--moss);        color: var(--bone); }
.sw-6 { background: var(--clay);        color: var(--bone); }

/* ─── closing ─── */
.closing {
  padding: 4rem 2rem 6rem;
  text-align: center;
}
.closing-inner {
  max-width: 400px;
  margin: 0 auto;
  color: var(--rust);
}
.sprig { width: 48px; height: 48px; color: var(--rust); }
.signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-top: 1rem;
}

/* ─── footer ─── */
footer {
  padding: 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(43, 29, 20, 0.08);
}
.footer-whisper {
  font-family: var(--serif);
  font-style: italic;
  color: var(--rust);
  opacity: 0.8;
}

/* ─── responsive ─── */
@media (max-width: 780px) {
  .nav { padding: 1.2rem 1.4rem; }
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .tile-wide { grid-column: span 2; }
  .tile-tall { grid-row: span 2; }
  .float-3 { display: none; }
}
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .tile-wide, .tile-tall { grid-column: auto; grid-row: auto; }
  .hero { min-height: 78vh; }
  .float-1, .float-2 { transform: scale(0.8); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
  .biome-layer { transition: opacity 0.2s ease; }
}