/* ===========================================================
   Tell Me, What Is It You Plan To Do With Your One Wild and
   Precious Life? — Sisterhood & Sacred Medicine Retreat
   =========================================================== */

:root{
  --wine-deep: #660639;
  --wine-dark: #570531;
  --ink:       #2f031a;
  --gold:      #ebc792;
  --gold-soft: #f2dfbb;
  --cream:     #ece4db;
  --cream-alt: #f6f1e8;
  --white:     #fffdf9;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max: 1180px;
  --gap: clamp(1.5rem, 4vw, 4rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}
p{ margin: 0 0 1em; }
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.eyebrow{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--wine-deep);
  display:inline-block;
  margin-bottom: 1rem;
}
section.on-wine .eyebrow{ color: var(--gold); }
.section{
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  position: relative;
}
.section.on-wine{
  background: var(--wine-deep);
  color: var(--cream-alt);
}
.section.on-wine h2, .section.on-wine h3{ color: var(--white); }
.section.tight{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.center{ text-align: center; }
.divider{
  width: 46px; height: 46px;
  margin: 0 auto 1.75rem;
  opacity: 0.9;
}
.divider.small{ width: 30px; height: 30px; margin-bottom: 1.1rem; }
.divider img{ width:100%; height:100%; object-fit: contain; }

h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h2.display{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.55rem); }
.lede{
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  color: var(--wine-deep);
  max-width: 46ch;
  margin: 0 auto 1.5rem;
}
.section.on-wine .lede{ color: var(--gold); }
.prose{ max-width: 66ch; }
.prose.center{ margin-left:auto; margin-right:auto; }
.muted{ opacity: 0.75; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.35s ease;
  white-space: nowrap;
}
.btn-gold{
  background: var(--gold);
  color: var(--wine-deep);
}
.btn-gold:hover{ background: var(--white); color: var(--wine-deep); transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn-outline:hover{ background: rgba(255,255,255,0.12); border-color:#fff; }
.btn-outline-dark{
  background: transparent;
  color: var(--wine-deep);
  border-color: var(--wine-deep);
}
.btn-outline-dark:hover{ background: var(--wine-deep); color:#fff; }

/* ---------- Nav ---------- */
#site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.1rem 0;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow .4s ease;
}
#site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
}
#site-nav.scrolled{
  background: rgba(102,6,57,0.94);
  backdrop-filter: blur(6px);
  padding: 0.65rem 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.nav-logo{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.nav-logo img{ height: 34px; width:auto; flex-shrink:0; }
.nav-logo span{
  font-family: var(--serif); font-weight:600; letter-spacing:0.03em;
  color: var(--white); font-size: 1rem; white-space:nowrap;
}
.nav-links{
  display:flex; align-items:center; gap: clamp(0.7rem, 1.5vw, 1.5rem);
  list-style:none; margin:0; padding:0;
}
.nav-links a{ white-space:nowrap; }
@media (max-width: 1150px){
  .nav-logo span{ display:none; }
}
.nav-links a{
  color: rgba(255,255,255,0.88);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  transition: color .25s ease;
}
.nav-links a:hover{ color: var(--gold); }
.nav-links .btn{ padding: 0.6rem 1.4rem; font-size: 0.72rem; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:0.4rem; }
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition: all .3s ease; }

/* ---------- Hero ---------- */
#hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color: var(--white);
  overflow:hidden;
}
#hero .bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center 65%;
  transform: scale(1.05);
}
#hero .scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(47,3,26,0.55) 0%, rgba(102,6,57,0.55) 45%, rgba(87,5,49,0.88) 100%);
}
#hero .content{
  position:relative; z-index:2;
  max-width: 880px;
  padding: 8rem 1.5rem 4rem;
}
#hero .logo-mark{
  width: 78px; height:78px; margin: 0 auto 1.6rem;
}
#hero .eyebrow{ color: var(--gold); }
#hero h1{
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  color: var(--white);
  font-style: italic;
  margin-bottom: 0.55em;
  text-shadow: 0 2px 22px rgba(0,0,0,0.25);
}
#hero .sub{
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.06em;
  color: var(--gold-soft);
  margin-bottom: 2rem;
  font-weight: 400;
}
#hero .meta{
  display:flex; flex-wrap:wrap; gap: 0.6rem 1.4rem; justify-content:center;
  font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 2.4rem;
  color: rgba(255,255,255,0.9);
}
#hero .meta b{ color:#fff; font-weight:500; }
#hero .cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  z-index:2; color: rgba(255,255,255,0.75); font-size: 0.68rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.scroll-cue .line{ width:1px; height:34px; background: rgba(255,255,255,0.5); animation: scrollDown 2.2s infinite; }
@keyframes scrollDown{
  0%{ transform: scaleY(0); transform-origin: top; opacity:0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity:1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity:1;}
  100%{ transform: scaleY(0); transform-origin: bottom; opacity:0;}
}

/* ---------- Quote ---------- */
#quote{ background: var(--cream-alt); }
#quote blockquote{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  color: var(--wine-deep);
  max-width: 850px;
  margin: 0 auto 1.2rem;
  font-weight: 500;
}
#quote cite{
  font-style: normal;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.65;
}

/* ---------- Key details strip ---------- */
#key-details{
  background: var(--wine-dark);
  color: var(--cream-alt);
  padding: clamp(2rem, 4vw, 2.8rem) 0;
}
.details-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  text-align:center;
}
.details-grid .item .label{
  display:block; text-transform:uppercase; letter-spacing:0.14em;
  font-size: 0.65rem; color: var(--gold); margin-bottom: 0.5rem;
}
.details-grid .item .value{
  font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.25rem); color:#fff; font-weight:600;
}
@media (max-width: 900px){
  .details-grid{ grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
}
@media (max-width: 520px){
  .details-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Two column layout ---------- */
.split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap);
  align-items:center;
}
.split.reverse{ grid-template-columns: 0.95fr 1.05fr; }
.split.reverse .media{ order:2; }
.split .media img{
  width:100%; height: 100%; object-fit:cover;
  border-radius: 6px;
  min-height: 360px;
  box-shadow: 0 25px 60px -20px rgba(47,3,26,0.35);
}
@media (max-width: 860px){
  .split, .split.reverse{ grid-template-columns: 1fr; }
  .split.reverse .media{ order:0; }
  .split .media img{ min-height: 260px; }
}

/* ---------- Ceremony panel ---------- */
#ceremony{
  background: linear-gradient(155deg, var(--wine-deep) 0%, var(--wine-dark) 100%);
  color: var(--cream-alt);
  position: relative;
}
.ceremony-bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0.16;
}
#ceremony .container{ position:relative; z-index:1; }
#ceremony .panel{
  max-width: 800px; margin: 0 auto; text-align:center;
}

/* ---------- Who this is for ---------- */
#who{ background: var(--cream); }
#who .frame{
  max-width: 760px; margin: 0 auto; text-align:center;
}

/* ---------- Special cards ---------- */
.cards3{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
  margin-top: 3rem;
}
.card{
  background: var(--white);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 0 20px 45px -25px rgba(47,3,26,0.28);
  display:flex; flex-direction:column;
}
.card .thumb{ height: 210px; overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.card:hover .thumb img{ transform: scale(1.06); }
.card .body{ padding: 1.6rem 1.7rem 2rem; }
.card h3{ color: var(--wine-deep); margin-bottom: 0.5rem; }
.card p{ font-size: 0.94rem; margin-bottom:0; }
@media (max-width: 860px){
  .cards3{ grid-template-columns: 1fr; }
}

/* ---------- Itinerary ---------- */
#itinerary{ background: var(--cream-alt); }
.timeline{
  max-width: 780px; margin: 3rem auto 0;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left: 27px; top:6px; bottom:6px; width:1px;
  background: linear-gradient(var(--wine-deep), var(--gold));
  opacity:0.4;
}
.tl-item{
  display:grid; grid-template-columns: 56px 1fr; gap: 1.5rem;
  padding-bottom: 2.4rem; position:relative;
}
.tl-item:last-child{ padding-bottom:0; }
.tl-num{
  width:56px; height:56px; border-radius:50%;
  background: var(--wine-deep); color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size:1.3rem; font-weight:600;
  position: relative; z-index:1;
  box-shadow: 0 0 0 6px var(--cream-alt);
}
.tl-body h3{ margin-bottom: 0.35rem; color: var(--wine-deep); }
.tl-body p{ margin-bottom:0; font-size:0.95rem; }
.tl-checkinout{
  text-align:center; max-width: 780px; margin: 0 auto 1rem;
  font-size: 0.85rem; letter-spacing:0.05em; color: var(--wine-deep);
  text-transform: uppercase; font-weight:500;
}

/* ---------- Included checklist ---------- */
#included{ background: var(--cream); }
.check-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2.5rem;
  max-width: 980px; margin: 2.75rem auto 0;
}
.check-item{
  display:flex; align-items:flex-start; gap: 0.75rem;
  font-size: 0.98rem;
  padding: 0.4rem 0;
}
.check-item svg{ flex:none; width:20px; height:20px; margin-top:3px; }
.check-item svg circle{ fill: var(--wine-deep); }
.check-item svg path{ stroke:var(--gold); }
@media (max-width: 720px){
  .check-grid{ grid-template-columns: 1fr; }
}

/* ---------- Accommodation ---------- */
#accommodation{ background: var(--wine-deep); color: var(--cream-alt); }
.stay-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 2.25rem;
  margin-top: 3rem;
}
.stay-card{
  background: var(--white); color: var(--ink);
  border-radius: 10px; overflow:hidden;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.35);
}
.stay-gallery{
  display:grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap:3px; height: 260px;
  overflow: hidden;
}
.stay-gallery a{ display:block; width:100%; height:100%; overflow:hidden; }
.stay-gallery img{ width:100%; height:100%; object-fit:cover; }
.stay-gallery a:first-child{ grid-row: 1 / 3; }
.stay-body{ padding: 1.8rem 2rem 2.1rem; }
.stay-body .room-name{
  font-family: var(--serif); font-size: 1.5rem; font-weight:600; color: var(--wine-deep);
  margin-bottom: 0.2rem;
}
.stay-body .room-for{ font-size: 0.82rem; letter-spacing:0.06em; text-transform:uppercase; opacity:0.6; margin-bottom:0.9rem; }
.price-row{ display:flex; align-items:baseline; gap:0.75rem; margin-bottom:0.9rem; }
.price-row .price{ font-family: var(--serif); font-size:1.8rem; font-weight:600; color: var(--wine-deep); }
.price-row .early{ font-size:0.8rem; background: var(--gold-soft); color:var(--wine-deep); padding:0.25rem 0.65rem; border-radius:999px; font-weight:500; }
.stay-body .btn{ margin-top:0.75rem; padding:0.7rem 1.6rem; font-size:0.72rem; }
@media (max-width: 780px){
  .stay-grid{ grid-template-columns: 1fr; }
}

/* ---------- Food ---------- */
#food .split .media img{ min-height: 420px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.4rem; }
.tag{
  font-size: 0.76rem; letter-spacing:0.05em; text-transform:uppercase;
  padding: 0.4rem 0.9rem; border-radius:999px;
  background: var(--gold-soft); color: var(--wine-deep); font-weight:500;
}

/* ---------- Carousel ---------- */
#gallery{ background: var(--cream-alt); }
.carousel{ position:relative; margin-top: 3rem; }
.carousel-track{
  display:flex; gap: 1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding: 0.5rem clamp(1.25rem,4vw,2.5rem) 1.5rem;
  margin: 0 clamp(-1.25rem,-4vw,-2.5rem);
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track .slide{
  flex: 0 0 auto; scroll-snap-align:center;
  width: min(560px, 78vw);
  border-radius: 10px; overflow:hidden;
  box-shadow: 0 20px 45px -25px rgba(47,3,26,0.3);
  background: var(--white);
}
.carousel-track .slide img{
  width:100%; height: min(380px, 60vw); object-fit:cover; display:block;
}
.carousel-nav{
  display:flex; justify-content:center; gap:1rem; margin-top:1.5rem;
}
.carousel-nav button{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--wine-deep); background:transparent; color:var(--wine-deep);
  cursor:pointer; font-size:1.1rem; transition: background .25s ease, color .25s ease;
  display:flex; align-items:center; justify-content:center;
}
.carousel-nav button:hover{ background:var(--wine-deep); color:#fff; }

/* ---------- Safety / Preparation / Integration ---------- */
.safety-section{ padding-top:0; overflow:hidden; }
.safety-photo-band{
  position:relative; width:100%;
  height: clamp(260px, 42vw, 480px);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.safety-photo-band img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.safety-photo-band::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(47,3,26,0.15) 0%, rgba(47,3,26,0.55) 100%);
}
.safety-photo-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  text-align:center; padding: 0 1.5rem 1.75rem;
}
.safety-photo-caption p{
  font-family: var(--serif); font-style:italic; color:#fff;
  font-size: clamp(1.05rem, 2vw, 1.4rem); margin:0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.safety-wheel{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 4rem;
  border-top: 1px solid rgba(235,199,146,0.3);
  border-left: 1px solid rgba(235,199,146,0.3);
}
.safety-item{
  padding: 2.25rem 2rem;
  border-right: 1px solid rgba(235,199,146,0.3);
  border-bottom: 1px solid rgba(235,199,146,0.3);
  position:relative;
}
.safety-num{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--serif); font-size:1rem; letter-spacing:0.02em;
  margin-bottom: 1.1rem;
}
.safety-item h3{ color: var(--gold); font-size:1.08rem; margin-bottom:0.6rem; }
.safety-item p{ color: rgba(255,255,255,0.78); font-size:0.9rem; margin-bottom:0; }
@media (max-width: 900px){
  .safety-wheel{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .safety-wheel{ grid-template-columns: 1fr; }
}

/* ---------- Facilitators ---------- */
#facilitators{ background: var(--cream-alt); }
.together-banner{
  position:relative; border-radius: 10px; overflow:hidden;
  margin-bottom: 4rem;
  box-shadow: 0 30px 60px -25px rgba(47,3,26,0.35);
}
.together-banner img{ width:100%; height: clamp(260px, 40vw, 460px); object-fit:cover; object-position: 42% 82%; }
.together-banner .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 2rem clamp(1.25rem,4vw,3rem) 1.6rem;
  background: linear-gradient(0deg, rgba(47,3,26,0.82), rgba(47,3,26,0));
  color:#fff;
}
.together-banner .caption p{
  font-family: var(--serif); font-style:italic; font-size: clamp(1.05rem,2vw,1.4rem); max-width:640px; margin:0;
}
.facil-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 3rem;
}
.facil-card{ display:flex; flex-direction:column; }
.facil-photo{
  border-radius: 10px; overflow:hidden; margin-bottom: 1.6rem;
  box-shadow: 0 25px 55px -25px rgba(47,3,26,0.35);
  aspect-ratio: 4 / 5;
}
.facil-photo img{ width:100%; height:100%; object-fit:cover; }
.facil-card h3{ color: var(--wine-deep); font-size: 1.55rem; margin-bottom:0.15rem; }
.facil-card .role{
  text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem;
  color: var(--wine-deep); opacity:0.7; margin-bottom:1rem; display:block;
}
.facil-card p{ font-size: 0.96rem; }
@media (max-width: 820px){
  .facil-grid{ grid-template-columns: 1fr; gap: 3.5rem; }
}

/* ---------- Travel / Cancellation ---------- */
#practical{ background: var(--cream); }
.practical-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem);
}
.practical-grid .box{
  background: var(--white); padding: 2rem 2.2rem; border-radius:10px;
  box-shadow: 0 20px 45px -30px rgba(47,3,26,0.3);
}
.practical-grid h3{ color: var(--wine-deep); }
.practical-grid p{ font-size: 0.94rem; margin-bottom: 0.6rem; }
@media (max-width: 980px){ .practical-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .practical-grid{ grid-template-columns: 1fr; } }

/* ---------- Final CTA ---------- */
#book{
  background: linear-gradient(160deg, var(--wine-dark), var(--ink));
  color: var(--white); text-align:center;
}
#book .logo-mark{ width:64px; margin:0 auto 1.5rem; }
#book h2{ color:#fff; }
#book .price-note{ font-family: var(--serif); font-size:1.3rem; color: var(--gold); margin-bottom:2rem; }
#book .contact{ margin-top:2.2rem; font-size:0.9rem; opacity:0.85; }
#book .contact a{ text-decoration: underline; text-underline-offset:3px; }

/* ---------- Footer ---------- */
footer{
  background: var(--ink); color: rgba(255,255,255,0.6);
  padding: 2.5rem 0; text-align:center; font-size: 0.8rem;
}
footer img{ height: 40px; margin: 0 auto 1rem; opacity:0.9; }
footer .fnote{ letter-spacing:0.04em; }

/* ---------- Reveal animation (progressive enhancement: only animates if .js is present on <html>) ---------- */
.js .reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- Mobile nav ---------- */
@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav-links{
    position: fixed; inset: 0 0 0 auto; width: min(300px, 80vw);
    background: var(--wine-deep);
    flex-direction: column; align-items:flex-start;
    padding: 6.5rem 2rem 2rem; gap: 1.6rem;
    transform: translateX(100%); transition: transform .4s ease;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links .btn{ margin-top:0.5rem; }
}

@media (max-width: 640px){
  #hero .meta{ font-size: 0.78rem; gap:0.5rem 1rem; }
}
@media (max-width: 520px){
  #hero .content{ padding-top: 6.5rem; padding-bottom: 2rem; }
  .scroll-cue{ display:none; }
}
@media (max-height: 760px){
  .scroll-cue{ display:none; }
}