/* ============================================================
   MASSAGE CORE — Design Tokens
   Palette pulled from the studio's own brand photography:
   warm near-black, dusty blush, unbleached cream, muted sage.
   ============================================================ */

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

:root{
  /* --- color --- */
  --ink:        #14100e;   /* warm near-black, base background */
  --ink-soft:   #1e1815;   /* slightly lifted panel on ink */
  --cream:      #f4ede2;   /* unbleached cream, primary light surface/text */
  --cream-dim:  #cfc3b2;   /* muted cream for secondary text on ink */
  --blush:      #c98a80;   /* dusty rose/clay, primary accent */
  --blush-deep: #a8695f;   /* pressed/hover state of accent */
  --sage:       #838f74;   /* muted therapeutic green, used sparingly */
  --line:       #382f2a;   /* hairline on dark surfaces */

  /* --- type --- */
  --display: 'Fraunces', serif;
  --body:    'Work Sans', sans-serif;
  --script:  'Caveat', cursive;

  /* --- layout --- */
  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

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

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  color: var(--cream);
}
h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 400; line-height: 1.02; }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; color: var(--cream-dim); }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* eyebrow / script accent — the one recurring signature element,
   a hand-set aside the way she captions her own social photos */
.eyebrow{
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--blush);
  display: inline-block;
  margin-bottom: 0.3em;
  font-weight: 600;
}

/* soft warmth glow — used once per view, at hero art and primary CTAs only.
   Evokes heat / touch rather than being decoration for its own sake. */
.glow{ position: relative; isolation: isolate; }
.glow::before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 50% 50%, rgba(201,138,128,0.35), transparent 70%);
  z-index:-1;
  filter: blur(10px);
}

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: .02em;
  padding: 0.95em 1.9em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{ background: var(--blush); color: var(--ink); }
.btn-primary:hover{ background: var(--cream); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--cream); border-color: var(--cream-dim); }
.btn-ghost:hover{ border-color: var(--cream); background: rgba(244,237,226,0.06); }

/* --- nav --- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(20,16,14,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad);
  max-width: var(--max); margin:0 auto;
}
.brand{
  font-family: var(--display); font-size: 1.4rem; letter-spacing:.03em; color:var(--cream);
}
.brand span{ color: var(--blush); }
.nav-links{ display:flex; gap: 2.2rem; list-style:none; margin:0; padding:0; align-items:center;}
.nav-links a{
  font-size: .92rem; letter-spacing:.03em; color: var(--cream-dim);
  padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ color: var(--cream); border-color: var(--blush); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:1px; background:var(--cream);
  position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-8px; width:24px; }
.nav-toggle span::after{ position:absolute; top:8px; width:24px; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset: 65px 0 0 0; background: var(--ink);
    flex-direction:column; justify-content:flex-start; padding: 40px var(--pad);
    transform: translateX(100%); transition: transform .3s ease;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:block; }
}

/* --- footer --- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 56px var(--pad) 32px;
  margin-top: 100px;
}
.footer-grid{
  max-width: var(--max); margin:0 auto;
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px;
}
.footer-grid h4{ font-size: .8rem; text-transform:uppercase; letter-spacing:.12em; color: var(--cream-dim); font-family: var(--body); font-weight:600; margin-bottom: 1em;}
.footer-grid p, .footer-grid a{ font-size:.92rem; color: var(--cream-dim); }
.footer-bottom{
  max-width: var(--max); margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size:.8rem; color: var(--cream-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em;
}
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; } }

/* --- image slots --- */
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background-image: url('../images/hero-home.png');
  background-size: cover; background-position: center;
  background-color: var(--ink-soft); /* graceful fallback if file isn't in place yet */
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(20,16,14,.55) 0%, rgba(20,16,14,.88) 78%);
}
.photo-frame{
  background-size: cover; background-position: center;
  background-color: var(--ink-soft); /* graceful fallback if file isn't in place yet */
  border: 1px solid var(--line);
}

/* --- in-session photo band --- */
.session-band{
  position: relative;
  width: 100%;
  height: clamp(320px, 42vw, 560px);
  background-image: url('../images/in-session.png');
  background-size: cover;
  background-position: center;
  background-color: var(--ink-soft); /* graceful fallback if file isn't in place yet */
  overflow: hidden;
}
.session-band::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,16,14,.82) 0%, rgba(20,16,14,.15) 45%, transparent 70%);
}
.session-band .session-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 36px var(--pad);
  z-index: 2;
}

/* --- section utility --- */
section{ padding: 90px 0; }
.section-tight{ padding: 60px 0; }
.divider{
  width: 46px; height: 2px; background: var(--blush); border:none; margin: 1.4em 0;
}