/* ============================================================
   Susanna Peace Lovell — site styles
   Palette: sea glass & spruce
   Display: Fraunces · Body: Nunito Sans
   ============================================================ */
:root{
  --ink:#22372F;
  --ink-soft:#48594F;
  --sea:#EDF3EF;
  --sea-deep:#DDE9E2;
  --jade:#4E8570;
  --jade-deep:#35604F;
  --blush:#E7C6B4;
  --gold:#C9A24B;
  --paper:#FBFAF7;
  --radius:14px;
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:1.0625rem;
}
img{max-width:100%;display:block}
a{color:var(--jade-deep)}
h1,h2,h3,.display{
  font-family:"Fraunces",serif;
  font-weight:550;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.25rem}
.eyebrow{
  font-family:"Nunito Sans",sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jade);
  margin-bottom:.9rem;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.4rem}
section{padding:4.5rem 0}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:60ch}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sea-deep);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:.85rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{
  font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;
  color:var(--ink);text-decoration:none;line-height:1.2;
}
.brand span{display:block;font-family:"Nunito Sans",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
nav ul{display:flex;align-items:center;gap:1.4rem;list-style:none}
nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem}
nav a:hover,nav a[aria-current]{color:var(--jade-deep)}
.has-menu{position:relative}
.has-menu>button{
  background:none;border:0;font:inherit;font-weight:700;font-size:.95rem;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:.3rem;
}
.menu{
  position:absolute;top:calc(100% + .6rem);left:-0.8rem;
  background:#fff;border:1px solid var(--sea-deep);border-radius:12px;
  box-shadow:0 12px 30px rgba(34,55,47,.12);
  padding:.5rem;min-width:200px;display:none;flex-direction:column;gap:.1rem;
}
.menu a{display:block;padding:.55rem .8rem;border-radius:8px;font-weight:700}
.menu a:hover{background:var(--sea)}
.has-menu:hover .menu,.has-menu:focus-within .menu,.menu.open{display:flex}
.btn{
  display:inline-block;background:var(--jade-deep);color:#fff;text-decoration:none;
  font-weight:800;font-size:.95rem;padding:.7rem 1.4rem;border-radius:999px;
  border:0;cursor:pointer;transition:background .2s ease;
}
.btn:hover{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--jade-deep);border:2px solid var(--jade)}
.btn.ghost:hover{background:var(--sea);color:var(--jade-deep)}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer}

/* ---------- breathing rings (signature) ---------- */
.rings{position:relative}
.rings::before{
  content:"";position:absolute;inset:-14%;
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 52%,rgba(78,133,112,.14) 53%,transparent 56%),
    radial-gradient(circle,transparent 66%,rgba(78,133,112,.10) 67%,transparent 70%),
    radial-gradient(circle,transparent 80%,rgba(78,133,112,.07) 81%,transparent 84%);
  animation:breathe 7s ease-in-out infinite;
  z-index:0;pointer-events:none;
}
@keyframes breathe{0%,100%{transform:scale(.97)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){
  .rings::before{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--sea) 0%,var(--paper) 100%);padding:4.5rem 0 3.5rem}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero img{position:relative;z-index:1;border-radius:var(--radius)}
.hero .actions{display:flex;gap:.9rem;margin-top:1.8rem;flex-wrap:wrap}

/* ---------- testimonial ---------- */
.quote{
  background:var(--jade-deep);color:#fff;text-align:center;
  padding:3.2rem 0;
}
.quote blockquote{
  font-family:"Fraunces",serif;font-size:clamp(1.2rem,2.4vw,1.6rem);
  max-width:44ch;margin:0 auto .8rem;line-height:1.5;
}
.quote cite{font-style:normal;font-weight:800;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blush)}
.stars{color:var(--gold);letter-spacing:.2em;font-size:1.1rem;margin-bottom:1rem}

/* ---------- split sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split.rev>.media{order:2}
.media img{border-radius:var(--radius);position:relative;z-index:1}
.split p+p{margin-top:1rem}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2.2rem}
.card{
  background:#fff;border:1px solid var(--sea-deep);border-radius:var(--radius);
  padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;
}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--jade-deep)}
.card .date{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--jade)}
.card img{border-radius:10px;aspect-ratio:16/10;object-fit:cover}
.card .more{margin-top:auto;font-weight:800;text-decoration:none}

/* ---------- email capture ---------- */
.capture{background:var(--sea);border-radius:var(--radius);padding:2.6rem;display:grid;grid-template-columns:1.2fr .8fr;gap:2.4rem;align-items:center}
.capture form{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
input,textarea{
  font:inherit;padding:.75rem 1rem;border:1px solid var(--sea-deep);
  border-radius:10px;background:#fff;min-width:0;
}
input:focus,textarea:focus,.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;
}
.capture input[type=email]{flex:1 1 220px}

/* ---------- page hero (interior) ---------- */
.page-hero{background:linear-gradient(180deg,var(--sea) 0%,var(--paper) 100%);padding:3.6rem 0 2.6rem}
.page-hero .lede{margin-top:1rem}

/* ---------- topic list ---------- */
.topics{display:grid;gap:1.2rem;margin-top:2rem}
.topic{background:#fff;border:1px solid var(--sea-deep);border-left:5px solid var(--jade);border-radius:var(--radius);padding:1.5rem 1.7rem}
.topic h3{margin-bottom:.4rem}

/* ---------- contact ---------- */
.contact-form{display:grid;gap:1rem;max-width:640px;margin-top:2rem}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-weight:800;font-size:.9rem;display:block;margin-bottom:.3rem}
textarea{min-height:150px;resize:vertical}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--sea);padding:3rem 0 2rem;margin-top:4rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:center}
footer a{color:var(--sea);text-decoration:none;font-weight:700}
footer a:hover{color:var(--blush)}
footer nav ul{gap:1.2rem;flex-wrap:wrap}
.foot-brand{font-family:"Fraunces",serif;font-size:1.1rem;color:#fff}
.fineprint{width:100%;font-size:.85rem;color:#9DB3A8;border-top:1px solid rgba(255,255,255,.14);padding-top:1.2rem;margin-top:.6rem}

/* ---------- responsive ---------- */
@media (max-width:840px){
  .hero .wrap,.split,.capture{grid-template-columns:1fr}
  .split.rev>.media{order:0}
  .contact-form .row{grid-template-columns:1fr}
  .nav-toggle{display:block}
  nav#site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--sea-deep);padding:1rem 1.4rem}
  nav#site-nav.open{display:block}
  nav#site-nav ul{flex-direction:column;align-items:flex-start;gap:.9rem}
  .menu{position:static;display:flex;box-shadow:none;border:0;padding:0 0 0 1rem}
}