:root{
  --black: #0e0e0d;
  --white: #ffffff;
  --panel: #f4f4f2;
  --gray: #8a8a85;
  --gray-dark: #57564f;
  --line: #dcdcd6;
  --sage: #8fa190;
  --sage-dim: #c3ccc3;
  --max: 1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--white);
  color:var(--black);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--sage); color:var(--black); }

h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:450;
  letter-spacing:-0.01em;
  color:var(--black);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

/* ---------- nav ---------- */
header{
  position:sticky; top:0; left:0; right:0; z-index:200;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{ display:flex; justify-content:space-between; align-items:center; height:84px; }
.brand{
  font-family:'Fraunces', serif; font-weight:500; font-size:1.15rem;
  letter-spacing:-0.01em;
}
.brand span{ font-family:'Fraunces', serif; font-weight:350; color:var(--gray-dark); font-size:0.82em; margin-left:2px; }
.navlinks{ display:flex; gap:40px; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; }
.navlinks a{
  color:var(--gray-dark); position:relative; padding-bottom:6px;
  transition:color 0.25s ease;
}
.navlinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--sage); transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s ease;
}
.navlinks a:hover{ color:var(--black); }
.navlinks a:hover::after{ transform:scaleX(1); }
.navlinks a.active{ color:var(--black); }
.navlinks a.active::after{ transform:scaleX(1); }
.navtoggle{ display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--black); }
@media (max-width:760px){
  .navlinks{ display:none; }
  .navtoggle{ display:block; }
}

/* ---------- generic section ---------- */
section{ padding:110px 0; }
@media (max-width:640px){ section{ padding:70px 0; } }
.section-head{ max-width:640px; margin-bottom:56px; }
.eyebrow{
  display:block; font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gray); margin-bottom:16px; font-weight:500;
}
.section-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); line-height:1.08; }
.rule-sage{ width:56px; height:2px; background:var(--sage); margin:20px 0 28px; }

.panel{ background:var(--panel); }

hr.hairline{ border:none; border-top:1px solid var(--line); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:15px 32px; border-radius:2px;
  font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:500;
  transition:all 0.25s ease; border:1px solid var(--black);
}
.btn.solid{ background:var(--black); color:var(--white); }
.btn.solid:hover{ background:var(--gray-dark); border-color:var(--gray-dark); }
.btn.ghost{ color:var(--black); background:transparent; }
.btn.ghost:hover{ background:var(--black); color:var(--white); }
.btn.sage{ border-color:var(--sage); color:var(--black); }
.btn.sage:hover{ background:var(--sage); }

/* ---------- footer ---------- */
footer{
  padding:44px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:0.8rem; color:var(--gray);
}
footer .foot-links{ display:flex; gap:26px; }
footer a:hover{ color:var(--black); }

.fade-up{ opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-up.in{ opacity:1; transform:translateY(0); }

/* ---------- mobile nav drawer ---------- */
.mobile-drawer{
  position:fixed; inset:0; z-index:300; background:var(--white);
  transform:translateX(100%); transition:transform 0.35s ease;
  display:flex; flex-direction:column; padding:28px 28px;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer .close-drawer{ align-self:flex-end; background:none; border:none; font-size:1.8rem; cursor:pointer; }
.mobile-drawer nav{ flex-direction:column; align-items:flex-start; gap:28px; height:auto; margin-top:40px; }
.mobile-drawer nav a{ font-family:'Fraunces', serif; font-size:1.6rem; }