@import url("./styles.css?v=base-home-woods-v1");

body.home-surface {
  --ink: #26343d;
  --muted: #617066;
  --line: rgba(73, 96, 72, 0.2);
  --green: #496b4f;
  --green-deep: #263f32;
  --green-soft: #dfe9dc;
  --fern: #7b946f;
  --rose: #9b6f63;
  --paper: #f5f1e6;
  --white: #fffdf7;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 16%, rgba(123, 148, 111, 0.18), transparent 34%),
    radial-gradient(ellipse at 86% 30%, rgba(199, 168, 93, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(228, 237, 227, 0.92)),
    var(--paper);
}

body.home-surface::before {
  background:
    linear-gradient(132deg, transparent 0 46%, rgba(73, 107, 79, 0.12) 47% 49%, transparent 50%),
    linear-gradient(48deg, transparent 0 45%, rgba(123, 148, 111, 0.12) 46% 49%, transparent 50%),
    radial-gradient(ellipse 34px 86px at 12% 24%, rgba(73, 107, 79, 0.12) 0 44%, transparent 45%),
    radial-gradient(ellipse 28px 74px at 86% 18%, rgba(73, 107, 79, 0.1) 0 42%, transparent 43%),
    radial-gradient(ellipse 32px 82px at 78% 72%, rgba(123, 148, 111, 0.1) 0 42%, transparent 43%);
  background-size: 220px 220px, 260px 260px, 180px 180px, 230px 230px, 260px 260px;
  opacity: 0.72;
  mix-blend-mode: normal;
}

.home-surface .site-header {
  background: rgba(245, 241, 230, 0.88);
  border-bottom-color: rgba(73, 96, 72, 0.22);
}

.home-surface .brand,
.home-surface nav a {
  color: rgba(38, 63, 50, 0.76);
}

.home-surface .brand:hover,
.home-surface nav a:hover {
  color: var(--green-deep);
}

.home-surface .brand-mark {
  color: var(--white);
  background: var(--green);
}

.home-surface .hero {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.48), rgba(223, 233, 220, 0.74)),
    radial-gradient(ellipse at 22% 30%, rgba(255, 253, 247, 0.78), transparent 42%);
}

.home-surface .hero::before {
  inset: 0;
  background:
    linear-gradient(138deg, transparent 0 47%, rgba(73, 107, 79, 0.16) 48% 50%, transparent 51%),
    linear-gradient(42deg, transparent 0 47%, rgba(123, 148, 111, 0.15) 48% 50%, transparent 51%),
    radial-gradient(ellipse 42px 118px at 17% 28%, rgba(73, 107, 79, 0.15) 0 42%, transparent 43%),
    radial-gradient(ellipse 38px 104px at 84% 20%, rgba(73, 107, 79, 0.12) 0 42%, transparent 43%),
    radial-gradient(ellipse 36px 96px at 72% 78%, rgba(123, 148, 111, 0.12) 0 42%, transparent 43%);
  background-size: 260px 260px, 310px 310px, 220px 220px, 280px 280px, 320px 320px;
  opacity: 0.92;
}

.home-surface .hero::after {
  inset: auto 0 0;
  height: 46%;
  background:
    linear-gradient(150deg, transparent 0 44%, rgba(38, 63, 50, 0.14) 45% 56%, transparent 57%),
    linear-gradient(30deg, transparent 0 42%, rgba(73, 107, 79, 0.12) 43% 54%, transparent 55%),
    linear-gradient(180deg, transparent, rgba(73, 107, 79, 0.14));
  background-size: 180px 100%, 220px 100%, auto;
  opacity: 0.9;
}

.home-surface .hero-copy::before {
  content: "";
  display: block;
  width: min(46vw, 170px);
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--fern), var(--green), transparent);
}

.home-surface .hero-copy h1 {
  color: var(--green-deep);
  text-shadow: 0 12px 42px rgba(255, 253, 247, 0.72);
}

.home-surface .hero-subtitle {
  color: rgba(73, 107, 79, 0.84);
}

.home-surface .hero-photo-frame {
  border-color: rgba(73, 96, 72, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.92), rgba(223, 233, 220, 0.9));
  box-shadow: 0 26px 80px rgba(73, 96, 72, 0.22);
}

.home-small-photo {
  border-color: rgba(73, 96, 72, 0.22);
  background: rgba(255, 253, 247, 0.76);
  box-shadow: 0 18px 48px rgba(73, 96, 72, 0.18);
}

.home-surface footer {
  color: rgba(73, 96, 72, 0.74);
  border-top-color: rgba(73, 96, 72, 0.2);
  background: rgba(245, 241, 230, 0.82);
}

.home-surface footer .signature-link {
  color: var(--green-deep);
}