/* saltmoor.css — page-specific CSS for the Saltmoor showcase (Ravia DNA, Sage Practice palette, Funnel Launch type).
   Load after tokens.css, ravia.css, palette.css, type.css. Values come from the tokens. */

/* ---------- palette tuning: soft sand → white → sage dawn (no tan flood), sage-ink tints ---------- */
:root {
  --dawn-a: #F4ECE2;           /* pale sand: the palette's sand pop at ~20% on white */
  --line-soft: rgba(22,35,25,.12);
  --fs-h2: clamp(36px, 3.75vw, 54px);   /* Funnel Display is wider than the condensed serif: one step smaller keeps heads to 2 lines */
}
/* light, airy headlines: Funnel Display at 400, never bold */
.t-h1, .t-h2, .t-h3, .t-quote, .t-num { font-weight: 400; }
.t-h4 { font-weight: 400; }
.btn--dark:hover { background: #24382A; }
.btn--lime:hover, .news__field button:hover { background: #A57450; }
.btn--lime { color: var(--pop-ink); }

/* brand mark: a sun rising over two waves */
.sm-mark { fill: currentColor; }
.sm-mark .sm-mark__wave { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.logo .sm-mark { width: 32px; height: 22px; }

/* ---------- hero: white head with photo pills, wide photo below, frosted facts on the photo ---------- */
.sm-hero { padding-top: 40px; }
.sm-hero__top { align-items: flex-end; }
.v-hero-b__top .s-head.sm-hero__head { max-width: 860px; }
.sm-hero__title { max-width: 860px; }
.sm-hero__title .pic { width: 1.5em; }
.v-hero-b__side { width: min(400px, 100%); gap: 24px; }
.sm-hero__note { font-size: 16px; color: var(--muted); margin-top: -8px; }
.sm-hero__photo { position: relative; height: clamp(420px, 58vw, 860px); }
.sm-hero__photo > img { object-position: 50% 55%; }
.sm-facts { position: absolute; left: 0; right: 0; bottom: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sm-facts li { display: flex; align-items: center; gap: 14px; height: 64px; padding: 8px 20px 8px 8px; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.sm-facts .well { background: var(--accent-soft); color: var(--ink); }

/* ---------- the ritual: sauna photo + three cards that climb left to right ---------- */
.sm-ritual { background: var(--mist); padding: var(--section) 0; }
.sm-ritual__head { margin-bottom: var(--head-gap); }
.sm-ritual__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 16px; align-items: end; }
.sm-ritual__photo { position: relative; align-self: stretch; min-height: 600px; border-radius: var(--r-card); overflow: hidden; }
.sm-ritual__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-step { background: var(--card); border-radius: var(--r-card); padding: 28px; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: transform var(--dur) var(--ease); }
.sm-step:hover { transform: translateY(-4px); }
.sm-step--1 { margin-top: 160px; }
.sm-step--2 { margin-bottom: 80px; }
.sm-step--3 { margin-bottom: 160px; background: var(--accent-soft); }
.sm-step .t-num { color: var(--ink); }
.sm-step > div { display: grid; gap: 10px; }
.sm-step__title { font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.sm-step p:not(.t-num) { color: var(--body); }

/* ---------- sessions rail ---------- */
.sm-prog .prog__top .i { color: var(--accent); }
.badge--glass { background: var(--glass-soft); color: var(--on-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.4); }
.sm-prog::after { background: linear-gradient(127deg, rgba(22,35,25,.7) 30%, rgba(22,35,25,0) 70%); }

/* ---------- memberships: frosted cards over the after-dip photo, washed from the top in sage ---------- */
.sm-members { padding-bottom: 120px; }
.sm-members .svc-band__bg img { object-position: 62% 30%; }
.sm-members::before { background: linear-gradient(180deg, var(--dawn-b) 0%, rgba(210,232,215,.9) 19%, rgba(210,232,215,0) 36%); }
.sm-members .sm-members__head { margin-bottom: 420px; }
.sm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sm-plan { aspect-ratio: auto; min-height: 520px; padding: 48px; }
.sm-plan__icon { width: 92px; height: 92px; color: var(--ink); }
.sm-plan__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sm-plan__body { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.sm-plan__body > div { display: grid; gap: 10px; }
.sm-plan__price { font-size: 20px; font-weight: 500; color: var(--ink); }

/* ---------- member words ---------- */
.sm-words { background: var(--mist); padding: var(--section) 0; }
.sm-words__head { margin-bottom: var(--head-gap); }
.sm-words__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sm-quote { background: var(--card); border-radius: var(--r-card); padding: 36px; display: flex; flex-direction: column; gap: 28px; min-height: 380px; }
.sm-quote__text { flex: 1; }
.sm-quote figcaption { display: grid; gap: 2px; padding-top: 20px; border-top: 1px solid var(--line); }
.sm-quote__name { font-weight: 500; color: var(--ink); font-size: 18px; }
.sm-quote__meta { color: var(--muted); }

/* ---------- your host ---------- */
.sm-host { padding: var(--section) 0; }
.sm-host__grid { display: grid; grid-template-columns: 560px 1fr; gap: 96px; align-items: center; }
.sm-host__photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; }
.sm-host__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; }
.sm-host__copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; max-width: 720px; }
.sm-host__quote { color: var(--ink); max-width: 640px; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-chips li { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--mist); color: var(--ink); font-weight: 500; }
.sm-host__sign { display: grid; gap: 2px; padding-top: 24px; border-top: 1px solid var(--line); min-width: 280px; }
.sm-host__sign b { font-weight: 500; color: var(--ink); font-size: 20px; }
.sm-host__sign span { color: var(--muted); }

/* ---------- FAQ on white, CTA on the sage dawn ---------- */
.sm-faq { padding-top: 40px; }
.sm-cta .s-head { max-width: 720px; }

/* ---------- footer C: tint the fade to the deep sage-ink ---------- */
.sm-foot .v-foot-c__photo::after { background: linear-gradient(180deg, rgba(22,35,25,0) 0%, rgba(22,35,25,.18) 40%, rgba(22,35,25,.72) 70%, var(--deep) 96%); }
.sm-foot .v-foot-c__photo { height: 640px; }
.sm-foot .v-foot-c__photo img { object-position: 50% 45%; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .sm-host__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sm-ritual__grid { grid-template-columns: 1fr 1fr 1fr; }
  .sm-ritual__photo { grid-column: 1 / -1; min-height: 420px; }
  .sm-step--1 { margin-top: 160px; }
}
@media (max-width: 1024px) {
  .sm-facts { grid-template-columns: 1fr; gap: 10px; bottom: 24px; }
  .sm-facts li { height: 56px; font-size: 17px; }
  .sm-plans, .sm-words__grid { grid-template-columns: 1fr; }
  .sm-plan { min-height: 420px; }
  .sm-members .sm-members__head { margin-bottom: 260px; }
  .sm-host__grid { grid-template-columns: 1fr; }
  .sm-host__photo { max-width: 560px; }
}
@media (max-width: 720px) {
  .sm-hero__title { font-size: 40px; }
  .sm-hero__photo { height: auto; display: flex; flex-direction: column; }
  .sm-hero__photo > img { height: 360px; }
  .sm-facts { position: static; padding-top: 16px; }
  .sm-facts li { background: var(--mist); }
  .sm-ritual__grid { grid-template-columns: 1fr; }
  .sm-ritual__photo { min-height: 300px; }
  .sm-step, .sm-step--1, .sm-step--2, .sm-step--3 { margin: 0; min-height: 0; padding: 24px; gap: 28px; }
  .sm-plan { min-height: 0; padding: 32px; border-radius: 40px; }
  .sm-plan__icon { width: 64px; height: 64px; }
  .sm-members .sm-members__head { margin-bottom: 220px; }
  .sm-quote { min-height: 0; padding: 28px 24px; }
  .sm-host__photo { aspect-ratio: 4 / 4.6; }
  .sm-host__sign { min-width: 0; width: 100%; }
}
.sm-prog .badge { white-space: nowrap; }
@media (max-width: 720px) {
  .sm-prog .prog__top { gap: 8px; }
  .sm-prog .badge { font-size: 14px; padding: 6px 10px; }
}