/* ============================================================
   WEAVING LIFE — shared design system
   Vero Web Consulting for Erin Elizabeth
   Direction: colorful, dramatic, image-forward. Natural-dye palette.
   ============================================================ */

:root{
  --wool:        #EFE6D4;
  --wool-light:  #F7F1E5;
  --ink:         #241813;
  --muted:       #6E6053;
  --cochineal:   #9E2B3F;
  --cochineal-d: #761F2E;
  --indigo:      #21304A;
  --indigo-d:    #16223A;
  --marigold:    #DA9128;
  --marigold-d:  #B9741A;
  --jade:        #3C6B5B;
  --cream:       #F3ECDD;
  --thread:      rgba(36,24,19,.10);

  --maxw: 1180px;
  --col:  64ch;
  --r:    3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--wool); color:var(--ink);
  font-family:'Mulish',system-ui,sans-serif; font-size:18px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,1.5rem + 4.6vw,5rem); font-weight:700}
h2{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.2rem)}
h3{font-size:1.4rem}
p{margin:0 0 1.05rem}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.narrow{max-width:820px}
.measure{max-width:var(--col)}
.eyebrow{font-family:'Mulish'; font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:.74rem; margin:0 0 1rem}
.kicker{font-family:'Fraunces'; font-style:italic; font-size:clamp(1.05rem,.9rem + .6vw,1.45rem)}
em{font-style:italic}
strong{font-weight:700}

/* woven warp/weft signature */
.weft{height:14px; margin:clamp(40px,7vw,84px) 0; background:repeating-linear-gradient(90deg,var(--thread) 0 2px,transparent 2px 9px)}
.warp-edge{position:relative}
.warp-edge::before{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px); opacity:.5}

/* buttons */
.btn{display:inline-block; font-weight:700; font-size:.95rem; letter-spacing:.02em; padding:.95em 1.7em; border-radius:var(--r); text-decoration:none; transition:.18s; border:2px solid transparent; cursor:pointer}
.btn-solid{background:var(--cochineal); color:#fff}
.btn-solid:hover{background:var(--cochineal-d)}
.btn-gold{background:var(--marigold); color:var(--ink)}
.btn-gold:hover{background:var(--marigold-d); color:#fff}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:var(--ink); color:var(--wool); border-color:var(--ink)}
.on-dark .btn-ghost{color:#fff}
.on-dark .btn-ghost:hover{background:#fff; color:var(--ink)}
.btn + .btn{margin-left:10px}

/* nav */
header.nav{position:fixed; inset:0 0 auto 0; z-index:60; transition:.3s; background:transparent}
header.nav.solid{background:rgba(239,230,212,.94); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--thread)}
header.nav.opaque{background:var(--indigo-d)}   /* interior pages w/o a hero image start solid-dark */
.nav-inner{display:flex; align-items:center; gap:22px; padding-block:16px}
.brand{font-family:'Fraunces'; font-weight:700; font-size:1.5rem; text-decoration:none; color:#fff; line-height:1; display:flex; flex-direction:column}
.brand small{font-family:'Mulish'; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.56rem; opacity:.8; margin-top:5px}
header.solid .brand{color:var(--ink)}
nav[aria-label="Primary"]{margin-left:auto}
.menu{list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center}
.menu > li{position:relative}
.menu a,.menu button.top{font:inherit; font-weight:600; font-size:.95rem; color:#fff; background:none; border:0; cursor:pointer; text-decoration:none; padding:10px 14px; border-radius:var(--r); display:inline-flex; align-items:center; gap:6px}
header.solid .menu a, header.solid .menu button.top{color:var(--ink)}
.menu a:hover,.menu button.top:hover{color:var(--marigold)}
.menu a.current{color:var(--marigold)}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.submenu{position:absolute; top:100%; left:0; min-width:250px; background:var(--wool-light); border:1px solid var(--thread); border-radius:var(--r); padding:8px; display:none; box-shadow:0 18px 40px rgba(36,24,19,.18)}
.submenu a{display:block; color:var(--ink); padding:11px 14px}
.submenu a:hover{background:var(--cochineal); color:#fff}
.menu > li:hover .submenu{display:block}
.nav-cta{display:flex; align-items:center; gap:12px}
.burger{display:none; width:42px; height:42px; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; justify-content:center; align-items:center}
.burger span{width:24px; height:2px; background:#fff; transition:.2s}
header.solid .burger span{background:var(--ink)}

/* HERO (home) + page hero (interior) */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; padding-bottom:clamp(48px,9vw,110px); padding-top:140px}
.page-hero{position:relative; display:flex; align-items:flex-end; color:#fff; min-height:62vh; padding:170px 0 clamp(40px,6vw,72px)}
.hero::before,.page-hero::before{content:""; position:absolute; inset:0; z-index:-2; background:#1a1410 center/cover no-repeat}
.hero::after,.page-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(22,34,58,.5) 0%,rgba(22,34,58,.12) 38%,rgba(36,24,19,.8) 100%)}
.hero h1{max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.page-hero h1{max-width:18ch; text-shadow:0 2px 26px rgba(0,0,0,.4)}
.hero .kicker,.page-hero .kicker{color:var(--marigold)}
.hero .lede,.page-hero .lede{max-width:56ch; font-size:clamp(1.1rem,1rem + .5vw,1.4rem); color:#f3ece0; margin-top:1.3rem}
.hero-cta{margin-top:1.9rem; display:flex; gap:12px; flex-wrap:wrap}

/* section rhythm */
section{position:relative}
.band{padding-block:clamp(60px,9vw,120px)}
.band-tight{padding-block:clamp(44px,6vw,80px)}
.band-cochineal{background:var(--cochineal); color:#fff}
.band-indigo{background:var(--indigo); color:#fff}
.band-jade{background:var(--jade); color:#fff}
.band-wool{background:var(--wool)}
.band-light{background:var(--wool-light)}
.on-dark{color:#fff}
.on-dark .eyebrow, .on-dark .kicker{color:var(--marigold)}
.on-dark a.inline{color:var(--marigold)}

/* prose — real paragraphs, the fix for "blocked copy" */
.prose{max-width:68ch}
.prose.center{margin-inline:auto}
.prose p{font-size:1.08rem}
.prose h2{margin:1.6rem 0 .8rem}
.prose h3{margin:1.4rem 0 .6rem; color:var(--cochineal)}
.lead{font-family:'Fraunces'; font-style:italic; font-size:clamp(1.3rem,1rem + 1.3vw,1.9rem); line-height:1.3; color:var(--ink); max-width:24ch}
.on-dark .lead{color:#fff}
.signoff{font-family:'Fraunces'; font-style:italic; color:var(--muted); margin-top:1.4rem}

/* checklists (this is for you if / showing up as) */
.checklist{list-style:none; padding:0; margin:1.2rem 0; max-width:64ch}
.checklist li{position:relative; padding:.55rem 0 .55rem 2rem; border-top:1px solid var(--thread)}
.checklist li::before{content:""; position:absolute; left:0; top:1.15rem; width:16px; height:2px; background:var(--cochineal)}
.on-dark .checklist li{border-top-color:rgba(255,255,255,.18)}
.on-dark .checklist li::before{background:var(--marigold)}
.cols2{columns:2; column-gap:48px}
.cols2 li{break-inside:avoid}

/* generic offering cards */
.section-head{max-width:62ch; margin-bottom:clamp(30px,4vw,52px)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,28px)}
.card{background:var(--wool-light); border-radius:var(--r); overflow:hidden; box-shadow:0 14px 36px rgba(36,24,19,.10); display:flex; flex-direction:column}
.band-indigo .card,.band-cochineal .card{background:rgba(255,255,255,.06); box-shadow:none; border:1px solid rgba(255,255,255,.16)}
.card .ph{aspect-ratio:16/10; overflow:hidden; background:#1a1410}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:.5s}
.card:hover .ph img{transform:scale(1.05)}
.card .cc{padding:26px 26px 30px; display:flex; flex-direction:column; gap:.5rem; flex:1}
.card .tag{display:inline-block; align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; padding:5px 10px; border-radius:2px; margin-bottom:6px}
.t-cochineal{background:var(--cochineal)} .t-indigo{background:var(--indigo)} .t-jade{background:var(--jade)} .t-marigold{background:var(--marigold-d)}
.card h3{margin-bottom:.2rem}
.card .meta{font-style:italic; color:var(--muted); font-size:.95rem}
.band-indigo .card .meta,.band-cochineal .card .meta{color:rgba(255,255,255,.75)}
.card .btn{margin-top:auto}

/* full-bleed interstitial / callout over image */
.interstitial{min-height:58vh; display:flex; align-items:center; color:#fff; position:relative; padding-block:80px}
.interstitial::before{content:""; position:absolute; inset:0; z-index:-2; background:#1a1410 center/cover no-repeat}
.interstitial::after{content:""; position:absolute; inset:0; z-index:-1; background:rgba(22,16,12,.52)}
.interstitial blockquote{font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:clamp(1.5rem,1.1rem + 1.9vw,2.9rem); line-height:1.2; max-width:22ch; margin:0; text-shadow:0 2px 24px rgba(0,0,0,.4)}
.interstitial cite{display:block; margin-top:1.4rem; font-family:'Mulish'; font-style:normal; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--marigold)}

/* feature quote — photo shown in full beside the quote (faces never covered) */
.feature{display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; min-height:clamp(420px,52vw,640px)}
.feature.rev{grid-template-columns:.95fr 1.05fr}
.feature .fimg{background:#1a1410 center/cover no-repeat}
.feature .ftext{display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,6vw,84px); color:#fff}
.feature.on-indigo .ftext{background:var(--indigo)}
.feature.on-cochineal .ftext{background:var(--cochineal)}
.feature blockquote{font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem); line-height:1.22; margin:0; max-width:20ch}
.feature cite{display:block; margin-top:1.4rem; font-style:normal; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--marigold)}
@media (max-width:880px){
  .feature, .feature.rev{grid-template-columns:1fr; min-height:0}
  .feature .fimg{order:-1; aspect-ratio:4/3}
  .feature.rev .fimg{order:-1}
}

/* quote band (no image) */
.quote-band blockquote{font-family:'Fraunces'; font-style:italic; font-size:clamp(1.3rem,1rem + 1.6vw,2.2rem); line-height:1.28; max-width:30ch; margin:0 auto; text-align:center}
.quote-band cite{display:block; margin-top:1.2rem; font-style:normal; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.76rem; text-align:center; color:var(--marigold)}

/* split: text + image */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,70px); align-items:center}
.split.rev .col-img{order:-1}
.split .col-img img{width:100%; border-radius:var(--r); box-shadow:0 26px 60px rgba(36,24,19,.26)}
.split .col-img.framed{position:relative}
.split .col-img.framed::after{content:""; position:absolute; left:-16px; top:-16px; right:24px; bottom:24px; z-index:-1; background:repeating-linear-gradient(0deg,var(--thread) 0 1px,transparent 1px 8px); border-left:3px solid var(--cochineal)}

/* image + caption (figures) */
figure.cap{margin:0}
figure.cap img{width:100%; border-radius:var(--r)}
figure.cap figcaption{font-style:italic; color:var(--muted); font-size:.92rem; margin-top:.6rem; max-width:60ch}
.on-dark figure.cap figcaption{color:rgba(255,255,255,.75)}

/* gallery grid (About) */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); box-shadow:0 10px 26px rgba(36,24,19,.14)}
.gallery figcaption{font-style:italic; color:var(--muted); font-size:.86rem; margin-top:.5rem}

/* details dropdowns (continue reading / FAQ / nations) */
details.read{margin:1.2rem 0 1.6rem; border-top:1px solid var(--thread); border-bottom:1px solid var(--thread)}
details.read > summary{cursor:pointer; list-style:none; font-weight:700; padding:1rem 0; display:flex; align-items:center; gap:12px; color:var(--cochineal)}
.on-dark details.read{border-color:rgba(255,255,255,.2)}
.on-dark details.read > summary{color:var(--marigold)}
details.read > summary::-webkit-details-marker{display:none}
.pm{width:18px;height:18px;position:relative;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:currentColor;transition:.2s}
.pm::before{left:0;top:8px;width:18px;height:2px}
.pm::after{left:8px;top:0;width:2px;height:18px}
details[open] .pm::after{transform:rotate(90deg);opacity:0}
details.read .body{padding-bottom:1.2rem}

/* FAQ accordion */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--thread)}
.faq summary{cursor:pointer; list-style:none; font-family:'Fraunces'; font-weight:600; font-size:1.2rem; padding:1.1rem 0; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:'Mulish'; color:var(--cochineal); font-size:1.5rem; line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .body{padding:0 0 1.2rem; color:var(--muted)}

/* pricing */
.pricing{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; max-width:760px; margin:1.4rem 0}
.price{background:var(--wool-light); border:1px solid var(--thread); border-radius:var(--r); padding:22px}
.price .n{font-family:'Fraunces'; font-size:1.15rem; font-weight:600}
.price .amt{font-family:'Fraunces'; font-size:2rem; font-weight:700; color:var(--cochineal); margin:.2rem 0}
.price .per{color:var(--muted); font-style:italic; font-size:.9rem}
.fineprint{color:var(--muted); font-style:italic; font-size:.95rem}

/* detail rows (retreats: destinations/timing/pricing) */
.deflist{display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1.4rem; margin:1.2rem 0; max-width:680px}
.deflist dt{font-weight:700; color:var(--cochineal)}
.on-dark .deflist dt{color:var(--marigold)}
.deflist dd{margin:0}

/* contact options */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:1.6rem}
.contact-card{background:var(--wool-light); border-radius:var(--r); padding:28px; box-shadow:0 14px 36px rgba(36,24,19,.10)}
.contact-card h3{color:var(--cochineal); margin-bottom:.4rem}

/* footer */
footer{background:var(--indigo-d); color:var(--wool); padding-block:clamp(54px,7vw,84px)}
footer .brand{color:#fff}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:40px}
footer h4{font-family:'Mulish'; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; color:var(--marigold); margin:0 0 1rem}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:.6rem}
footer a{color:#cdbfad; text-decoration:none}
footer a:hover{color:#fff}
.signup{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.signup input{flex:1; min-width:170px; padding:.8em 1em; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; border-radius:var(--r); font:inherit}
.signup input::placeholder{color:#bcae9d}
.foot-note{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:.85rem; color:#bcae9d}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* responsive */
@media (max-width:880px){
  .split{grid-template-columns:1fr}
  .split .col-img{order:-1; max-width:480px; margin-inline:auto}
  .foot-grid{grid-template-columns:1fr; gap:34px}
  .cols2{columns:1}
}
@media (max-width:760px){
  .burger{display:flex}
  nav[aria-label="Primary"]{position:fixed; inset:0; margin:0; background:var(--indigo); transform:translateX(100%); transition:.3s; padding:96px 28px 40px; overflow:auto}
  #menu{display:none; flex-direction:column; align-items:stretch; gap:2px}
  .menu a,.menu button.top{color:#fff !important; font-size:1.15rem; padding:14px 6px; width:100%; justify-content:space-between}
  .submenu{position:static; display:none; background:transparent; border:0; box-shadow:none; padding:0 0 10px 16px}
  .submenu a{color:#e7ded0 !important; font-size:1rem; padding:9px 6px}
  .submenu a:hover{background:none; color:var(--marigold) !important}
  .menu > li:hover .submenu{display:none}
  .submenu.open{display:block}
  nav[aria-label="Primary"].show{transform:translateX(0)}
  nav[aria-label="Primary"].show #menu{display:flex}
  .nav-cta .btn-solid{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .card:hover .ph img{transform:none}
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--marigold); outline-offset:3px; border-radius:3px}