/* ============================================================
   Harper Botanical — site-wide aesthetic layer
   Sage palette + Fraunces display + cream ground + grain.
   Linked LAST on every page so it harmonises the legacy styles.
   ============================================================ */

:root{
  --sage-deep:#3d534c;
  --sage-dark:#47605a;
  --sage:#5f8175;
  --sage-soft:#93aca2;
  --sage-tint:#d5e2dc;
  --sage-tint-2:#ebf2ef;
  --cream:#f6f5ee;
  --cream-2:#efeee4;
  --ink:#2b2f27;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
}

/* ── ground ── */
html,body{ background:var(--cream); }
body{ color:var(--ink); }

/* subtle organic grain over the whole site */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ── display typography ── */
.logo{ font-family:var(--display)!important; font-weight:500!important; letter-spacing:-.01em; }

h1,h2{ font-family:var(--display); font-weight:400; letter-spacing:-.01em; }
.hero h1,.page-hero h1,.project-title{ font-weight:300; }
.quote-section h2{ font-style:italic; }
.project-card h3{ font-family:var(--display); font-weight:500; }
/* keep sub-headings in the body sans for hierarchy contrast */
.project-detail h3,.social-card-tag,.card-tag,.fact .k{ font-family:'Open Sans',sans-serif; }

/* ── refined buttons everywhere ── */
.btn{
  border-radius:999px!important;
  padding:13px 30px!important;
  font-weight:700;letter-spacing:.03em;
  background-color:var(--sage)!important;color:#fff!important;
  box-shadow:0 10px 24px -12px rgba(61,83,76,.8);
  transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease!important;
}
.btn:hover{ background-color:var(--sage-dark)!important;transform:translateY(-2px); }

/* ── section grounds → warm neutrals (cards stay white) ── */
.bio-section{ background:var(--cream)!important; }
.quote-section,.garden-adventures,.contact-section,.social-teaser{ background:var(--cream-2)!important; }
.quote-section h2{ color:var(--sage-deep); }

/* ── homepage hero → "Sage Veil" ── */
.hero{ align-items:flex-end!important;justify-content:flex-start!important; }
.hero::before{
  background:linear-gradient(120deg,rgba(61,83,76,.82),rgba(106,138,126,.30) 60%,rgba(147,172,162,.12))!important;
  mix-blend-mode:multiply;z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(28,36,24,.72),transparent 55%),
             radial-gradient(120% 80% at 18% 30%,transparent 42%,rgba(28,36,24,.32));
}
.hero-content{
  position:relative;z-index:1;text-align:left;margin:0;max-width:860px;
  padding:0 clamp(22px,6vw,92px) clamp(48px,9vh,104px)!important;
}
.hero-content::before{ /* leaf tick */
  content:"";display:block;width:54px;height:3px;background:var(--sage-soft);
  border-radius:3px;margin-bottom:22px;
}
.hero h1{
  font-size:clamp(46px,7vw,88px)!important;line-height:.98;margin-bottom:16px!important;
  text-shadow:0 2px 30px rgba(20,26,16,.35);
}
.hero h1 em{ font-style:italic;color:var(--sage-tint); }
.hero h4{
  font-family:var(--display);font-style:italic;font-weight:300;
  color:var(--sage-tint);font-size:clamp(16px,2.1vw,21px)!important;
  margin-bottom:20px!important;max-width:560px;line-height:1.4;
}
.hero .btn{ background-color:var(--sage)!important; }
/* desktop: anchor hero image to bottom-right */
@media(min-width:769px){ .hero{ background-position:bottom right!important; } }

/* ── interior page heroes: deepen the sage gradient a touch ── */
.page-hero{
  background:linear-gradient(135deg,var(--sage-deep) 0%,var(--sage) 100%)!important;
}

/* ── open mobile menu: fully opaque so content doesn't bleed through ── */
header.menu-open{ background:var(--cream)!important;box-shadow:0 6px 20px rgba(61,83,76,.14)!important; }

/* ── live Instagram feed: "View on Instagram" link ── */
.post-permalink{
  display:inline-block;font-weight:700;font-size:14px;letter-spacing:.02em;
  color:var(--sage);text-decoration:none;transition:color .2s ease;
}
.post-permalink:hover{ color:var(--sage-dark);text-decoration:underline; }
.post-footer{ display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.post-date{ font-size:13px;color:#6b7266; }

/* ── Garden Adventures grid (linked IG garden photos) ── */
.photo-grid .grid-item a{ display:block;line-height:0;border-radius:5px;overflow:hidden; }
.photo-grid .grid-item img{ width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .5s ease; }
.photo-grid .grid-item a:hover img{ transform:scale(1.05); }

@media(max-width:768px){
  .hero-content{ padding:0 22px 60px!important; }
  .hero h1{ font-size:40px!important; }
}