@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root{
  --ink:#161513;
  --teal:#0E7C7B;
  --teal-deep:#0A5F5E;
  --pink:#E31C79;
  --cream:#FAF7F2;
  --blush:#FBEAF0;
  --stone:#6B6560;
  --line:#E7E1D8;
  --white:#ffffff;

  --serif: 'Fraunces', serif;
  --sans: 'Work Sans', sans-serif;
  --mono: 'Space Grotesk', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--teal-deep);
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
}

/* NAV */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(250,247,242,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-nav.scrolled{border-bottom-color:var(--line);}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  max-width:1180px;margin:0 auto;
}
.nav-logo{
  font-family:var(--serif);font-size:1.15rem;font-weight:600;
  display:flex;align-items:center;gap:10px;
}
.nav-logo .amp{color:var(--pink);font-style:italic;}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{
  font-family:var(--mono);font-size:0.74rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:4px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:var(--pink);transition:width .25s;
}
.nav-links a:hover::after{width:100%;}
.nav-social{display:flex;gap:14px;align-items:center;}
.nav-social a{color:var(--ink);display:flex;transition:color .2s;}
.nav-social a:hover{color:var(--pink);}
.text-link{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.text-link:hover{color:var(--pink);}

@media(max-width:820px){
  .nav-social{
    order:2;margin-top:8px;
  }
}

.nav-cta{
  background:var(--ink);color:var(--cream)!important;
  padding:11px 22px;border-radius:2px;
  font-family:var(--mono);font-size:0.72rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--teal-deep);}
.nav-toggle{display:none;}

@media(max-width:820px){
  .nav-links{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:var(--cream);flex-direction:column;
    justify-content:center;align-items:center;padding:40px 32px;gap:28px;
    transform:translateX(100%);transition:transform .3s ease;
    opacity:1;z-index:105;
  }
  .nav-links a{font-size:1rem;}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{
    display:block;background:none;border:none;cursor:pointer;
    width:26px;height:20px;position:relative;z-index:110;
  }
  .nav-toggle span{
    display:block;height:2px;background:var(--ink);margin:5px 0;
    transition:transform .25s, opacity .25s;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* SIGNATURE BALLOON LINE MOTIF */
.balloon-string{
  display:inline-flex;align-items:flex-end;gap:2px;
  vertical-align:middle;
}
.thread-divider{
  display:flex;align-items:center;justify-content:center;
  gap:22px;padding:10px 0;
}
.thread-divider svg{opacity:0.9;}
.thread-divider .line{
  height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent, var(--line), transparent);
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.76rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:2px;
  transition:transform .2s, background .2s, color .2s, border-color .2s;
  cursor:pointer;border:1px solid transparent;
}
.btn-solid{background:var(--ink);color:var(--cream);}
.btn-solid:hover{background:var(--teal-deep);transform:translateY(-2px);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);}
.btn-pink{background:var(--pink);color:var(--white);}
.btn-pink:hover{background:#C2135F;transform:translateY(-2px);}

/* FOOTER */
footer{
  background:var(--ink);color:var(--cream);
  padding:72px 0 28px;
}
.footer-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
  padding-bottom:48px;border-bottom:1px solid rgba(250,247,242,0.12);
}
.footer-logo{font-family:var(--serif);font-size:1.4rem;margin-bottom:14px;}
.footer-logo .amp{color:var(--pink);font-style:italic;}
footer p{color:#B9B4AC;font-size:0.92rem;max-width:320px;}
footer h4{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:#8f8a82;margin-bottom:16px;font-weight:600;
}
footer ul li{margin-bottom:10px;font-size:0.92rem;color:#D8D3CA;}
footer ul a:hover{color:var(--teal);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;font-size:0.78rem;color:#7d786f;flex-wrap:wrap;gap:10px;
}

@media(max-width:760px){
  .footer-inner{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;
}