/* ============================================================
   SKN BY STAS — site stylesheet
   Palette: cream / ink / sage (matches printed brand assets)
   Type:    Cormorant Garamond (display) + Karla (body)
   ============================================================ */

:root{
  --cream:      #F7F3EB;
  --cream-deep: #EFE9DD;
  --ink:        #23201B;
  --ink-soft:   #5C564C;
  --sage:       #8C9B84;
  --sage-deep:  #5E6C57;
  --hairline:   #DDD4C4;
  --max:        1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

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

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Karla', Arial, sans-serif;
  font-size:1.0rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------- type roles ---------- */

.display{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:0.01em;
}

.eyebrow{
  font-family:'Karla', sans-serif;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--sage-deep);
}

.wordmark{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  letter-spacing:0.45em;
  text-transform:uppercase;
}

.lede{
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:34em;
}

/* ---------- layout ---------- */

.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.4rem; }

section{ padding:4.5rem 0; }
section.tight{ padding:3rem 0; }
section.alt{ background:var(--cream-deep); }

.rule{
  width:56px; height:2px; background:var(--sage);
  margin:1.2rem 0 1.6rem;
}
.rule.center{ margin-left:auto; margin-right:auto; }

/* ---------- header / nav ---------- */

header.site{
  border-bottom:1px solid var(--hairline);
  background:var(--cream);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:1.1rem 1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 1.6rem;
  justify-content:space-between;
}
.brand{
  text-decoration:none; font-size:1.02rem; color:var(--ink);
}
nav.main{ display:flex; flex-wrap:wrap; gap:0.2rem 1.4rem; }
nav.main a{
  text-decoration:none; font-size:0.78rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft);
  padding:0.3rem 0; border-bottom:2px solid transparent;
}
nav.main a:hover{ color:var(--ink); }
nav.main a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--sage); }
nav.main a.book{ color:var(--sage-deep); }

/* ---------- hero ---------- */

.hero{ text-align:center; padding:6rem 0 5.5rem; }
.hero .monogram{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600; font-size:1.4rem; letter-spacing:0.3em;
  color:var(--sage-deep); margin-bottom:1.4rem;
}
.hero h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); }
.hero .sub{
  margin-top:1.5rem; font-size:1.05rem; color:var(--ink-soft);
  max-width:30em; margin-left:auto; margin-right:auto;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-block; text-decoration:none;
  font-size:0.78rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  padding:0.95rem 2.1rem; border:1px solid var(--ink); color:var(--ink);
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--ink); color:var(--cream); }
.btn.solid{ background:var(--ink); color:var(--cream); }
.btn.solid:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
.btn-row{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- menu (signature element) ---------- */

.menu-cat{ margin-top:3rem; }
.menu-cat:first-of-type{ margin-top:2.2rem; }
.menu-cat h3{
  font-size:0.72rem; font-weight:600; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--sage-deep);
  padding-bottom:0.7rem; border-bottom:1px solid var(--hairline);
}
.menu-item{
  padding:1.3rem 0; border-bottom:1px solid var(--hairline);
}
.menu-line{
  display:flex; align-items:baseline; gap:0.9rem;
}
.menu-line .name{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.45rem; font-weight:500;
}
.menu-line .leader{
  flex:1; border-bottom:1px dotted var(--hairline);
  transform:translateY(-5px);
}
.menu-line .price{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem; font-weight:600; white-space:nowrap;
}
.menu-item .desc{ margin-top:0.45rem; color:var(--ink-soft); max-width:46em; }
.menu-item .bestfor{
  margin-top:0.35rem; font-size:0.86rem; color:var(--sage-deep);
}
.menu-item .bestfor strong{ font-weight:700; letter-spacing:0.06em; }

/* ---------- cards / grids ---------- */

.grid{ display:grid; gap:1.2rem; margin-top:2.4rem; }
.grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width: 820px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; }
}

.card{
  border:1px solid var(--hairline); background:var(--cream);
  padding:1.8rem 1.6rem;
}
.card h3{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.5rem; font-weight:500; margin-bottom:0.5rem;
}
.card p{ color:var(--ink-soft); font-size:0.95rem; }
.card .price-tag{
  margin-top:0.9rem; font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.2rem; font-weight:600;
}
.card a.more{
  display:inline-block; margin-top:0.9rem; font-size:0.74rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--sage-deep);
  text-decoration:none; border-bottom:1px solid var(--sage);
  padding-bottom:2px;
}

/* ---------- prose / inner pages ---------- */

.page-head{ text-align:center; padding:4rem 0 1rem; }
.page-head h1{ font-size:clamp(2.1rem, 5vw, 3.2rem); }
.page-head .lede{ margin:1.2rem auto 0; }

.prose{ max-width:44em; }
.prose p{ margin-bottom:1.1rem; color:var(--ink-soft); }
.prose p strong{ color:var(--ink); }
.prose h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.7rem; font-weight:500; margin:2.2rem 0 0.8rem; color:var(--ink);
}
.prose ul{ margin:0 0 1.1rem 1.2rem; color:var(--ink-soft); }
.prose li{ margin-bottom:0.4rem; }

.placeholder{
  background:#FFF7D6; border:1px dashed #C9B458;
  padding:0.9rem 1.1rem; font-size:0.9rem; color:#6B5D1E; margin:1.2rem 0;
}

/* ---------- booking ---------- */

.booking-frame{
  margin-top:2.4rem; border:1px solid var(--hairline); background:#fff;
  min-height:680px; width:100%;
}

/* ---------- footer ---------- */

footer.site{
  border-top:1px solid var(--hairline); padding:3.2rem 0 2.6rem;
  text-align:center;
}
footer .wordmark{ font-size:0.95rem; }
footer .tag{
  margin-top:0.9rem; font-size:0.78rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-soft);
}
footer .links{ margin-top:1.4rem; display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; }
footer .links a{
  font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
footer .links a:hover{ color:var(--ink); }
footer .fine{ margin-top:1.6rem; font-size:0.78rem; color:var(--ink-soft); }

/* ---------- focus visibility ---------- */
a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--sage-deep); outline-offset:3px;
}

@media (max-width: 640px){
  section{ padding:3.2rem 0; }
  .hero{ padding:4.2rem 0 3.8rem; }
  .menu-line .name{ font-size:1.25rem; }
}

/* ---------- treatment detail pages ---------- */
.tmeta{ text-align:center; }
.tmeta .price{
  font-family:'Cormorant Garamond', Georgia, serif; font-size:1.6rem;
  font-weight:600; color:var(--ink); margin-top:0.4rem;
}
.feature-list{ list-style:none; margin:0.4rem 0 0; padding:0; }
.feature-list li{
  position:relative; padding-left:1.4rem; margin-bottom:0.55rem; color:var(--ink-soft);
}
.feature-list li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:6px; height:6px; background:var(--sage); border-radius:50%;
}
.detail-section{ margin-top:2.2rem; }
.back-link{
  display:inline-block; margin-top:2.4rem; font-size:0.74rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--sage-deep);
  text-decoration:none; border-bottom:1px solid var(--sage); padding-bottom:2px;
}
.menu-item .learn{
  display:inline-block; margin-top:0.5rem; font-size:0.72rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-deep);
  text-decoration:none; border-bottom:1px solid var(--sage); padding-bottom:1px;
}

/* ---------- soft note (replaces warning-styled placeholder for real content) ---------- */
.note-soft{
  background:var(--cream-deep); border-left:3px solid var(--sage);
  padding:1rem 1.2rem; font-size:0.92rem; color:var(--ink-soft); margin:0 0 1.4rem;
}