/* Sanctuary of the Heart — rebuild mockup. Mobile-first (390), no framework. */
@font-face{font-family:"Playfair";src:url(/fonts/playfair-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair";src:url(/fonts/playfair-latin-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --paper:#f5efe6;--paper2:#ece3d6;--ink:#221d18;--ink2:#4a4037;--soft:#7a6d60;
  --teal:#2f6b64;--rust:#a4472f;--line:#d9cdbd;--night:#1a1714;
  --fd:"Playfair",Georgia,"Times New Roman",serif;
  --fb:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:22px;--max:1120px;--focus:#2f6b64;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--fb);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
picture{display:block}
/* blur-up: the tiny placeholder is painted behind every photo until it decodes */
picture img{background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rust)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--fd);font-weight:500;line-height:1.15;letter-spacing:-.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:40px}h2{font-size:30px}h3{font-size:21px;margin-top:1.4em}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:680px}
.wrap.narrow{max-width:calc(680px + 2*var(--gutter))}
.center{text-align:center;margin-left:auto;margin-right:auto}
.band{padding-top:64px;padding-bottom:64px}
.first{padding-top:88px}
.big{font-family:var(--fd);font-size:23px;line-height:1.45;color:var(--ink)}
.soft{color:var(--soft)}
.tag{font:600 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin:0 0 12px}
.meta{color:var(--soft);font-size:15px;margin:0 0 .6em}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:8px 12px}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:20}
.top__in{max-width:var(--max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font:500 19px/1.1 var(--fd);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand i{font-style:italic;color:var(--soft)}
.top nav{display:flex;gap:18px}
.top nav a{font-size:14px;color:var(--ink2);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.top nav a[aria-current]{border-color:currentColor;color:var(--ink)}
.on-dark .top .brand,.on-dark .top nav a,.on-dark .top nav a[aria-current]{color:#f7f1e8}
.on-dark .top .brand i{color:#e3d6c4}
@media (max-width:420px){.top__in{justify-content:center}.brand{width:100%;text-align:center}.top nav{gap:22px}}

/* buttons */
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .ctas,.ctas.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--rust);color:#fff;font:600 15px/1 var(--fb);letter-spacing:.02em;text-decoration:none;border:1px solid var(--rust);transition:background .2s ease}
.btn:hover{background:#8d3b26;color:#fff}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink2)}
.btn--line:hover{background:var(--paper2);color:var(--ink)}
.more{font:600 14px/1 var(--fb);letter-spacing:.04em;color:var(--teal);text-decoration:none}
.more::after{content:" →"}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#f7f1e8;overflow:hidden;background:var(--night)}
.hero__img{position:absolute;inset:0}
.hero__img img,.phead__img img,.duo__bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,.35) 0%,rgba(20,17,14,0) 30%,rgba(20,17,14,.1) 55%,rgba(20,17,14,.72) 100%);pointer-events:none}
.hero__txt{position:relative;z-index:1;padding-bottom:56px;width:100%}
.hero h1{font-size:50px;line-height:1.02;font-weight:500;margin-bottom:18px}
.hero h1 span{display:block;font-style:italic;font-weight:400;font-size:.62em;margin-top:6px;color:#efe3d1}
.hero .lede{font-size:19px;max-width:28ch;margin-bottom:10px}
.hero .where{font-size:14px;color:#e2d6c5;margin-bottom:6px}
.hero .vals{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#d7c9b5;max-width:34ch;line-height:1.8}
/* Ken Burns: one very slow drift, only when motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .kb img{animation:kb 38s ease-in-out infinite alternate;transform-origin:50% 60%;will-change:transform}
  @keyframes kb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2.2%,-1.2%,0)}}
}

/* page header photo */
.phead{position:relative;min-height:62svh;display:flex;align-items:flex-end;color:#f7f1e8;background:var(--night);overflow:hidden}
.phead__img{position:absolute;inset:0}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,.45),rgba(20,17,14,0) 35%,rgba(20,17,14,.65));pointer-events:none}
.phead__txt{position:relative;z-index:1;padding-bottom:40px;width:100%}
.phead .tag{color:#f0b9a5}.phead .meta{color:#e8dccb}
.phead--sq{min-height:70svh}

/* duotone band */
.duo{position:relative;color:#f7f1e8;background:var(--night);overflow:hidden}
.duo__bg{position:absolute;inset:0}
.duo__bg img{opacity:.55}
.duo__in{position:relative;padding-top:72px;padding-bottom:72px}
.duo h2{text-align:center}
.duo p.narrow{margin-left:auto;margin-right:auto;text-align:center;color:#efe5d6}
.two,.three{display:grid;gap:16px;margin-top:28px}
.card{background:rgba(26,23,20,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:26px 24px}
.card h3{margin-top:0;color:#fff}
.card p{color:#e9dfd0;font-size:16px}
.duo .more{color:#9fd6cc}

/* gallery thumbs (lightbox lives in gallery.js) */
.gal{padding-top:64px}
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gallery li{aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:var(--paper2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.gallery__open:hover img{transform:scale(1.03)}
@media (min-width:760px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

/* split image/text */
.split{display:grid;gap:28px}
.split__img img{width:100%;border-radius:14px}
.split__img--sm{max-width:260px}
.soft-vig{position:relative;border-radius:14px;overflow:hidden}
.soft-vig::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 60px rgba(30,22,14,.28);pointer-events:none}
blockquote{margin:0 0 1.2em;padding:0 0 0 18px;border-left:2px solid var(--rust);font:italic 400 22px/1.45 var(--fd);color:var(--ink)}

/* events list */
.list{display:grid;gap:22px;padding-top:40px}
.ev{display:grid;background:#fffaf3;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease}
.ev:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(60,40,20,.08);color:var(--ink)}
.ev__img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ev__txt{padding:22px 22px 24px}
.ev h2{font-size:26px;margin-bottom:.3em}
.row{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}
.row h3{margin-top:0}

/* offers */
.offers{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.offers li{padding:18px 0;border-bottom:1px solid var(--line)}
.offers h3{margin:0 0 4px;font-size:20px}
.offers p{margin:0;color:var(--ink2);font-size:16px}

/* event detail */
.ehead{padding-bottom:8px}
.facts{display:grid;gap:12px;margin:24px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:8px}
.facts dt{font:600 12px/1.9 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.facts dd{margin:0}
.guides{display:grid;gap:22px;margin-top:28px}
.guide{background:#fffaf3;border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.guide .face{width:104px;height:104px;border-radius:50%;overflow:hidden;margin-bottom:6px}
.guide .face img{width:100%;height:100%;object-fit:cover}
.guide h3{margin-top:10px}
.guide p{font-size:16px;color:var(--ink2)}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{padding:10px 0 10px 28px;border-bottom:1px solid var(--line);position:relative}
.ticks li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.price{font:500 40px/1 var(--fd);margin:0 0 .5em}
.sched{list-style:none;padding:0;margin:0 0 40px}
.sched>li{padding:0 0 28px 22px;border-left:1px solid var(--line);position:relative}
.sched>li::before{content:"";position:absolute;left:-5px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--rust)}
.sched .time{font:600 13px/1.4 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--rust);margin-bottom:6px}
.sched h2{font-size:25px}
.sched ul{padding-left:18px;margin:0}
.sched ul li{margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0 !important}
.chips li{border:1px solid var(--line);background:#fffaf3;border-radius:999px;padding:6px 14px;font-size:15px;margin:0 !important}
.names{font:500 21px/1.5 var(--fd)}
.mail{font:500 22px/1.3 var(--fd);margin:20px 0 6px;word-break:break-word}
.hello{margin-top:24px}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0 calc(40px + env(safe-area-inset-bottom));text-align:center;color:var(--soft);font-size:14px;margin-top:24px}
.foot__name{font:500 20px/1.2 var(--fd);color:var(--ink);margin-bottom:8px}
.foot__c{margin:0}

@media (min-width:760px){
  :root{--gutter:40px}
  body{font-size:18px}
  h1{font-size:54px}h2{font-size:36px}
  .band{padding-top:96px;padding-bottom:96px}
  .first{padding-top:130px}
  .big{font-size:26px}
  .top__in{padding-top:22px}
  .hero{min-height:88vh}
  .hero h1{font-size:84px}
  .hero__txt{padding-bottom:88px}
  .hero .lede{font-size:22px}
  .phead{min-height:56vh}
  .split{grid-template-columns:44% 1fr;gap:64px;align-items:start}
  .split--rev .split__img{order:2}
  .split__img{position:sticky;top:32px}
  .split__img--sm{max-width:320px;justify-self:center}
  .two{grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin-left:auto;margin-right:auto}
  .three{grid-template-columns:repeat(3,1fr)}
  .list{grid-template-columns:1fr 1fr;padding-top:64px}
  .offers{grid-template-columns:1fr 1fr 1fr;column-gap:40px;border-top:0}
  .offers li{border-top:1px solid var(--line);border-bottom:0}
  .guides{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:56px}
  .facts div{grid-template-columns:auto;gap:2px}
}

/* ---------- photo lightbox (gallery.js, from bonnydome.yoga) ---------- */
.gallery__open{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.gallery__open:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gallery__open picture{display:block;width:100%;height:100%}
html.lb-open,html.lb-open body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:60;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.lb[hidden]{display:none}
.lb__backdrop{position:absolute;inset:0;background:var(--night);opacity:0;transition:opacity .3s cubic-bezier(.22,.8,.24,1)}
.lb.is-shown .lb__backdrop{opacity:var(--lb-fade,1)}
.lb__stage{position:absolute;inset:0;overflow:hidden}
.lb__track{display:flex;height:100%;will-change:transform}
.lb__slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center}
.lb__slide picture{display:contents}
.lb__img{display:block;max-width:none;background-color:#0000;background-size:cover;background-position:50% 50%;will-change:transform;-webkit-user-drag:none;cursor:default}
.lb__btn{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--paper);cursor:pointer;opacity:0;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent}
.lb__btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb.is-shown .lb__btn{opacity:.78}
.lb.is-shown .lb__btn:hover{opacity:1}
.lb__btn:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
.lb__close{top:calc(6px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right))}
.lb__nav{top:50%;margin-top:-22px;display:none}
.lb__prev{left:20px}.lb__next{right:20px}
.lb.is-shown .lb__nav.is-end{opacity:0;pointer-events:none}
.lb.is-shown .lb__nav.is-end:focus-visible{opacity:.3}
@media (hover:hover) and (pointer:fine){.lb__nav{display:grid}}
.lb__dots{position:absolute;z-index:2;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:2px;opacity:0;transition:opacity .2s ease}
.lb.is-shown .lb__dots{opacity:1}
.lb__dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.lb__dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--paper);opacity:.35;transition:opacity .2s ease,transform .2s ease}
.lb__dot[aria-current]::before{opacity:.95;transform:scale(1.15)}
.lb__dot:focus-visible{outline:2px solid var(--paper);outline-offset:-4px;border-radius:50%}
@media (prefers-reduced-motion:reduce){
  .lb__backdrop,.lb__btn,.lb__dots{transition-duration:.12s}
  .lb__dot::before{transition:none}
  .gallery img,.ev{transition:none}
}

/* legibility over bright sky */
.hero .where span,.hero .vals span{white-space:nowrap}
.hero__txt,.phead__txt{text-shadow:0 1px 18px rgba(10,8,6,.45),0 1px 2px rgba(10,8,6,.35)}
.on-dark .top{background:linear-gradient(180deg,rgba(20,17,14,.42),rgba(20,17,14,0));text-shadow:0 1px 10px rgba(10,8,6,.4)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 70% at 20% 70%,rgba(20,17,14,.5),rgba(20,17,14,0) 70%);pointer-events:none}
.hero .vals{max-width:none}
@media (min-width:760px){.hero::before{background:linear-gradient(90deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,.25) 40%,rgba(20,17,14,0) 65%)}}
.hero::before{z-index:1}.hero::after{z-index:1}.hero__txt{z-index:2}