/* Layout: one long dawn-to-dusk scroll. Sunrise bridge hero, then the four "Two Worlds" pillars,
   then Clair, her offerings, kind words, and a quiet contact close over the wave footer. */
:root{
  --cream:#fbf7ef;        /* the misty parchment of the poster */
  --mist:#f3eee6;
  --ink:#1c2b62;          /* deep navy of the lettering */
  --ink-soft:#3e4a78;
  --gold:#b98d45;         /* heart and divider gold */
  --gold-soft:#e6cf9f;
  --lavender:#8f7fc0;     /* lotus and spirit-side glow */
  --sky:#e4ebf8;
  --white:#fffdf9;
  --script:"Great Vibes","Snell Roundhand","Apple Chancery",cursive;
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --body:"EB Garamond",Garamond,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:1.18rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.caps{font-family:var(--caps);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;font-weight:500}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:400}
h2{font-family:var(--script);font-size:clamp(2.6rem,6vw,4rem);line-height:1.05;color:var(--ink)}
p{margin:0}

/* heart divider, as on the poster */
.divider{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold)}
.divider::before,.divider::after{content:"";height:1px;width:min(140px,28vw);background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.divider svg{width:22px;height:22px;flex:none}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--cream) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--gold) 25%,transparent)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.brand img{height:62px;width:auto}
.site-foot .brand img{height:110px}
.brand .name{font-family:var(--script);font-size:2rem;color:var(--ink)}
.brand .role{font-family:var(--caps);font-size:.62rem;letter-spacing:.3em;color:var(--gold);margin-top:2px}
.nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
.nav a{white-space:nowrap;text-decoration:none;font-family:var(--caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s}
.nav a:hover{color:var(--gold)}
/* nav-tight: narrower desktops keep the menu on one line */
@media (min-width:1101px) and (max-width:1340px){.nav{gap:18px}.nav a{letter-spacing:.12em}}
@media (min-width:861px) and (max-width:1100px){.nav{gap:14px}.nav a{font-size:.68rem;letter-spacing:.08em}.nav .btn{padding:.75em 1.1em}.brand img{height:52px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.8em 1.6em;border-radius:999px;font-family:var(--caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.btn-solid{background:var(--ink);color:var(--white)}
.btn-solid:hover{background:#2a3c80;box-shadow:0 0 24px color-mix(in srgb,var(--gold) 55%,transparent)}
.btn-ghost{background:color-mix(in srgb,var(--white) 70%,transparent);color:var(--ink)}
.btn-ghost:hover{background:var(--white)}
.nav .btn{color:var(--white)}
/* header "Book a reading" pulses with a gold halo to draw the eye; it rests while hovered */
.nav .btn-solid{position:relative;animation:bookPulse 2.4s ease-out infinite}
.nav .btn-solid:hover{animation-play-state:paused}
@keyframes bookPulse{0%{box-shadow:0 0 0 0 rgba(185,141,69,.7)}70%{box-shadow:0 0 0 14px rgba(185,141,69,0)}100%{box-shadow:0 0 0 0 rgba(185,141,69,0)}}
.menu-toggle{display:none;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}
.menu-toggle svg{width:28px;height:28px}
@media (max-width:860px){
  .menu-toggle{display:block}
  .nav{position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;padding:8px 16px 20px;background:var(--cream);border-bottom:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
  .nav:not(.open){display:none}
  .nav a{padding:14px 0;width:100%;text-align:center}
  .nav .btn{margin-top:8px;width:auto}
}

/* hero */
.hero{position:relative;isolation:isolate;text-align:center;overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:-1;background:url("images/hero.jpg") center 30%/cover no-repeat}
/* animated light in the hero: a stage locked to the image's 1024x475 frame so effects sit on the sun, heart and spirits */
.hero-art{container-type:size;overflow:hidden}
.hero-stage{--sw:max(100cqw,215.58cqh);position:absolute;width:var(--sw);aspect-ratio:1024/475;left:50%;top:calc((100cqh - var(--sw)*.46387)*.3);transform:translateX(-50%);pointer-events:none}
.hero-stage i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.sun-glow{left:15.8%;top:60.6%;width:26%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,rgba(255,244,214,.95) 0,rgba(255,214,150,.55) 14%,rgba(255,190,120,.18) 38%,transparent 66%);animation:sunBreathe 12s ease-in-out infinite}
.sun-rays{left:15.8%;top:60.6%;width:62%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,226,160,.75) 0 3deg,transparent 3deg 9deg,rgba(255,240,200,.45) 9deg 11deg,transparent 11deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 4%,rgba(0,0,0,.6) 28%,transparent 64%);mask-image:radial-gradient(circle,#000 4%,rgba(0,0,0,.6) 28%,transparent 64%);animation:spin 120s linear infinite,raysFade 12s ease-in-out infinite}
.heart-glow{left:50%;top:67.4%;width:15%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,rgba(255,248,226,.95) 0,rgba(255,215,140,.6) 18%,rgba(255,196,110,.22) 42%,transparent 68%);animation:heartbeat 3.2s ease-in-out infinite}
.heart-beam{left:50%;top:80%;width:5%;height:28%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse at 50% 20%,rgba(255,240,200,.7),transparent 70%);filter:blur(4px);animation:shimmer 3.2s ease-in-out infinite}
.spirit{left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1/2.6;translate:-50% -50%;background:radial-gradient(ellipse,rgba(235,243,255,.9) 0,rgba(175,205,255,.45) 38%,transparent 70%);animation:spiritGlow 9s ease-in-out infinite}
.twinkle{left:var(--x);top:var(--y);width:.9%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fff 0,rgba(210,225,255,.8) 25%,transparent 70%);opacity:0;animation:twinkle 4.5s ease-in-out var(--d) infinite}
.mote{left:var(--x);top:var(--y);width:calc(.91% * var(--s,1));aspect-ratio:1;mix-blend-mode:normal!important;background:radial-gradient(circle,#fff 0,#fffaf0 22%,rgba(255,236,200,.9) 36%,rgba(200,190,255,.45) 58%,transparent 72%);box-shadow:0 0 10px 3px rgba(255,240,215,.65),0 0 21px 6px rgba(170,160,255,.35);opacity:0;animation:rise-mote var(--t) ease-in-out var(--d) infinite}
.hero-stage .spirit-veil{position:absolute;left:75.195%;top:33.684%;width:21.484%;height:auto;max-width:none;opacity:0;animation:veil 9s ease-in-out infinite}
@keyframes veil{0%,100%{opacity:0}50%{opacity:.5}}
.heart-line{position:absolute;left:45.6%;top:60.4%;width:8.8%;height:auto;overflow:visible;filter:drop-shadow(0 0 3px rgba(255,236,190,.95)) drop-shadow(0 0 10px rgba(255,214,140,.6));animation:heartbeat 3.2s ease-in-out infinite}
.heart-line path{stroke:#ffe6b0;stroke-width:4.5;stroke-linejoin:round}
@keyframes sunBreathe{0%,100%{opacity:.75;scale:.94}50%{opacity:1;scale:1.08}}
@keyframes raysFade{0%,100%{opacity:.6;scale:.95}50%{opacity:1;scale:1.08}}
@keyframes spin{to{rotate:360deg}}
@keyframes heartbeat{0%,100%{opacity:.55;scale:.9}14%{opacity:1;scale:1.1}28%{opacity:.7;scale:.96}42%{opacity:.95;scale:1.06}70%{opacity:.6;scale:.92}}
@keyframes shimmer{0%,100%{opacity:.35}20%,45%{opacity:.85}}
@keyframes spiritGlow{0%,100%{opacity:.85;translate:-50% -50%}50%{opacity:.2;translate:-50% -53%}}
@keyframes twinkle{0%,100%{opacity:0;scale:.5}50%{opacity:1;scale:1.3}}
@keyframes rise-mote{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.55;transform:translate(10%,-60%) scale(1)}50%{opacity:.5;transform:translate(-25%,-220%) scale(1.1)}85%{opacity:.35}100%{opacity:0;transform:translate(40%,-460%) scale(.8)}}
.hero-art::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to bottom,transparent,var(--cream))}
.hero-in{padding-block:clamp(48px,8vw,96px) clamp(170px,26vw,300px);display:flex;flex-direction:column;align-items:center;gap:14px}
.hero .caps{color:var(--ink-soft)}
.hero h1{font-family:var(--script);font-size:clamp(3.6rem,11vw,7.4rem);line-height:.95;color:var(--ink);text-shadow:0 0 30px rgba(255,253,249,.8)}
.hero .lede{font-style:italic;font-size:clamp(1.2rem,2.4vw,1.5rem);max-width:34ch;color:var(--ink);text-shadow:0 0 18px rgba(255,253,249,.9)}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.hero h1,.hero .caps,.hero .lede,.hero .ctas{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero .caps{animation-delay:.1s}.hero h1{animation-delay:.25s}.hero .lede{animation-delay:.45s}.hero .ctas{animation-delay:.6s}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}

.bond{text-align:center;padding-block:4px 8px;display:flex;flex-direction:column;gap:22px;align-items:center}
.bond p{font-style:italic;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.35;max-width:30ch}

/* two worlds pillars */
.section{padding-block:clamp(64px,9vw,112px)}
.section-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:clamp(36px,5vw,56px)}
.section-head .caps{color:var(--gold)}
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(28px,5vw,64px);max-width:980px;margin-inline:auto}
.pillar{display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px;align-items:start}
.pillar img{width:92px;height:92px;border-radius:50%;object-fit:cover;mask-image:radial-gradient(circle,#000 56%,transparent 71%);-webkit-mask-image:radial-gradient(circle,#000 56%,transparent 71%)}
.pillar h3{font-family:var(--caps);font-size:1.05rem;letter-spacing:.14em;font-weight:500;margin-bottom:6px}
.pillar p{color:var(--ink-soft)}
@media (max-width:760px){.pillars{grid-template-columns:minmax(0,1fr)}.pillar{grid-template-columns:72px minmax(0,1fr)}.pillar img{width:72px;height:72px}}

/* the four pillar icons each move in their own way, with a coloured halo breathing behind */
.pillar .orb{position:relative;display:block;width:92px;height:92px;isolation:isolate}
.pillar .orb::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background:radial-gradient(circle,var(--halo) 0,transparent 68%);animation:haloBreathe 5s ease-in-out infinite}
.orb-worlds{--halo:rgba(110,160,235,.45)}
.orb-heart{--halo:rgba(240,190,100,.55)}
.orb-bridge{--halo:rgba(150,190,240,.45)}
.orb-lotus{--halo:rgba(170,140,225,.5)}
.orb-worlds img{animation:globeTurn 40s linear infinite}
.orb-heart img{animation:iconBeat 2.8s ease-in-out infinite}
.orb-heart::before{animation-duration:2.8s!important}
.orb-bridge img{animation:iconBob 4.5s ease-in-out infinite}
.orb-lotus img{animation:lotusBreathe 6s ease-in-out infinite}
.orb-worlds::before{animation-delay:-1s}.orb-bridge::before{animation-delay:-2.5s}.orb-lotus::before{animation-delay:-3.5s}
@keyframes haloBreathe{0%,100%{opacity:.45;scale:.9}50%{opacity:1;scale:1.12}}
@keyframes globeTurn{to{rotate:360deg}}
@keyframes iconBeat{0%,100%{scale:1}12%{scale:1.09}24%{scale:.98}36%{scale:1.06}55%{scale:1}}
@keyframes iconBob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:-1.5deg}}
@keyframes lotusBreathe{0%,100%{scale:.96;rotate:-2deg}50%{scale:1.06;rotate:2deg}}
@media (max-width:760px){.pillar .orb{width:72px;height:72px}}

/* about */
.about{background:linear-gradient(180deg,var(--cream),var(--sky) 55%,var(--cream))}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.about-card{position:relative;margin:0;border-radius:220px 220px 18px 18px;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:var(--gold-soft);box-shadow:0 30px 60px -30px rgba(28,43,98,.45)}
.about-card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about-copy{display:flex;flex-direction:column;gap:18px;max-width:60ch}
.about-copy .caps{color:var(--gold)}
.signoff{font-family:var(--script);font-size:2.2rem;line-height:1;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px;border-top:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding-top:20px}
.facts div{display:flex;flex-direction:column;gap:2px}
.facts strong{font-family:var(--caps);font-weight:500;font-size:1.5rem;color:var(--ink)}
.facts span{font-size:.95rem;color:var(--ink-soft);line-height:1.35}
@media (max-width:820px){.about-grid{grid-template-columns:minmax(0,1fr)}.about-card{max-width:380px;margin-inline:auto;width:100%}}
@media (max-width:460px){.facts{grid-template-columns:minmax(0,1fr)}}

/* offerings */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.offer{background:var(--white);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.offer.feature{background:linear-gradient(180deg,#24357a,var(--ink));color:var(--white);border-color:transparent;box-shadow:0 30px 60px -30px rgba(28,43,98,.6)}
.offer.feature h3,.offer.feature .price,.offer.feature li strong{color:var(--white)}
.offer.feature .muted,.offer.feature li span{color:#cfd6f0}
.offer .caps{color:var(--gold)}
.offer.feature .caps{color:var(--gold-soft)}
.offer h3{font-family:var(--script);font-size:2.5rem;line-height:1;color:var(--ink)}
.offer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.offer li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px dotted color-mix(in srgb,var(--gold) 50%,transparent);padding-bottom:12px}
.offer li div{display:flex;flex-direction:column;min-width:0}
.offer li strong{font-weight:500;color:var(--ink)}
.offer li span{font-size:.95rem;font-style:italic;color:var(--ink-soft);line-height:1.35}
.price{font-family:var(--caps);font-size:1.2rem;font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-soft);font-size:1rem}
.offer .btn{margin-top:auto;align-self:flex-start}
.offer.feature .btn{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.formats{margin-top:32px;text-align:center;font-style:italic;color:var(--ink-soft)}
/* readings intro with Clair's portrait */
.offer-intro{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,5vw,64px);align-items:center;max-width:900px;margin:0 auto clamp(36px,5vw,56px)}
.offer-portrait{margin:0;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--white),var(--sky) 60%,#d9d1f0);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.offer-portrait img{width:82%;height:auto}
.offer-intro-copy{display:flex;flex-direction:column;gap:14px;font-size:1.25rem}
.offer-intro-copy .muted{font-size:1.05rem}
@media (max-width:700px){.offer-intro{grid-template-columns:minmax(0,1fr);text-align:center}.offer-portrait{max-width:280px;width:100%;margin-inline:auto}}
@media (max-width:960px){.offers{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}}

/* testimonials */
.words{background:radial-gradient(ellipse at 80% 0%,#dcd3f1 0,transparent 55%),radial-gradient(ellipse at 10% 100%,#f5e3c3 0,transparent 50%),var(--mist)}
.quotes{columns:3 300px;column-gap:24px}
.quote{break-inside:avoid;margin:0 0 24px;background:color-mix(in srgb,var(--white) 82%,transparent);border-radius:16px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px}
.quote blockquote{margin:0;font-style:italic;font-size:1.15rem;line-height:1.5}
.quote blockquote::before{content:"\201C";display:block;font-family:Georgia,"Times New Roman",serif;font-style:normal;font-size:3.4rem;line-height:1;height:.45em;margin-bottom:.15em;color:var(--gold)}
.quote figcaption{font-family:var(--caps);font-size:.72rem;letter-spacing:.2em;color:var(--gold)}

/* motto band */
.motto{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:clamp(56px,8vw,96px)}
.motto .caps{font-size:clamp(.8rem,1.8vw,1.05rem);letter-spacing:.32em;color:var(--ink)}
.motto p.em{font-style:italic;font-size:clamp(1.25rem,2.6vw,1.6rem);max-width:40ch;line-height:1.45}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,72px);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:24px}
.place{display:flex;flex-direction:column;gap:2px}
.place .caps{color:var(--gold)}
.place a,.place span{font-size:1.15rem;text-decoration:none}
.place a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.socials{display:flex;gap:12px}
.socials a{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);color:var(--ink);transition:background .2s}
.socials a:hover{background:var(--white)}
.socials svg{width:20px;height:20px}
.rumi{font-style:italic;color:var(--ink-soft);border-left:2px solid var(--gold-soft);padding-left:16px}
form{background:var(--white);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:20px;padding:clamp(22px,4vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
label{font-family:var(--caps);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
input,select,textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:var(--cream);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:10px;padding:.65em .8em;width:100%}
textarea{min-height:130px;resize:vertical}
form .btn{justify-self:start}
.contact-hint{grid-column:1/-1;margin-top:-6px;font-size:.92rem;font-style:italic;color:var(--ink-soft)}
input[aria-invalid="true"]{border-color:#b4572f;box-shadow:0 0 0 2px rgba(180,87,47,.18)}
.form-note{grid-column:1/-1;font-size:.95rem;font-style:italic;color:var(--ink-soft)}
.room{margin:0;position:relative;border-radius:160px 160px 16px 16px;overflow:hidden;aspect-ratio:4/5;max-width:340px;box-shadow:0 24px 48px -28px rgba(28,43,98,.45)}
.room img{width:100%;height:100%;object-fit:cover}
.room figcaption,.moments figcaption{position:absolute;left:12px;bottom:12px;background:color-mix(in srgb,var(--white) 88%,transparent);border-radius:999px;padding:4px 12px;font-family:var(--caps);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
@media (max-width:820px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){form{grid-template-columns:minmax(0,1fr)}}

/* footer */
.site-foot{position:relative;isolation:isolate;padding-block:56px max(48px,10vw);text-align:center;background:var(--cream)}
.site-foot::before{content:"";position:absolute;inset:auto 0 0 0;aspect-ratio:1024/100;z-index:-1;background:url("images/waves.jpg") center bottom/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:16px}
.site-foot .brand{align-items:center}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:.95rem}
.foot-links a{color:var(--ink-soft)}
.site-foot small{font-size:.9rem;color:var(--ink-soft)}

/* policy pages */
.policy{max-width:760px;margin-inline:auto;padding-block:clamp(48px,8vw,88px);display:flex;flex-direction:column;gap:18px}
.policy h1{font-family:var(--script);font-size:clamp(2.8rem,7vw,4.2rem);line-height:1.05}
.policy h2{font-family:var(--caps);font-size:1rem;letter-spacing:.16em;margin-top:14px}
.policy .back{font-family:var(--caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--gold)}

/* gallery */
.gallery{background:linear-gradient(180deg,var(--cream),var(--sky) 50%,var(--cream))}
.moments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,18vw,220px);grid-auto-flow:dense;gap:14px}
.moments figure{margin:0;position:relative;overflow:hidden;border-radius:16px;background:var(--mist)}
.moments img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.moments figure:hover img{transform:scale(1.04)}
.moments .m-wide{grid-column:span 2;grid-row:span 2}
.moments .m-tall{grid-row:span 2}
.moments .m-span{grid-column:span 2}
.moments .m-keep img{object-position:50% 35%}
.moments .m-quote{display:flex;flex-direction:column;background:var(--white)}
.moments .m-quote img{flex:1;min-height:0;height:auto}
.moments .m-quote figcaption{position:static;background:none;border-radius:0;padding:12px 16px 14px;font-family:var(--body);font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none;text-align:center;color:var(--ink-soft)}
.moments .m-quote figcaption span{font-style:normal;font-family:var(--caps);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-left:6px}
@media (max-width:760px){.moments{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44vw}.moments .m-wide{grid-row:span 1}.moments .m-wide.m-keep{grid-row:span 2}.moments .m-span{grid-column:span 1}}

/* upcoming workshop */
.workshop{background:linear-gradient(180deg,var(--cream),#e9e6f6 50%,var(--cream))}
.ws-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:center;max-width:1000px;margin-inline:auto}
.ws-poster{display:block;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(28,43,98,.55);transition:transform .4s ease}
.ws-poster:hover{transform:translateY(-4px)}
.ws-poster img{width:100%;height:auto}
.ws-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.ws-lede{font-style:italic;font-size:1.35rem;line-height:1.45}
.ws-facts{margin:0;display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.ws-facts div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:12px;padding-block:10px;border-bottom:1px dotted color-mix(in srgb,var(--gold) 50%,transparent)}
.ws-facts dt{font-family:var(--caps);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-top:.3em}
.ws-facts dd{margin:0}
.ws-price{font-family:var(--caps);font-size:1.4rem;font-weight:500}
.ws-sub{color:var(--ink-soft)}
.ws-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ws-list li{padding-left:1.6em;position:relative}
.ws-list li::before{content:"\2661";position:absolute;left:0;color:var(--gold)}
.ws-copy .btn{align-self:flex-start}
.ws-motto{font-family:var(--caps);font-size:.78rem;letter-spacing:.32em;color:var(--ink-soft)}
@media (max-width:820px){.ws-grid{grid-template-columns:minmax(0,1fr)}.ws-poster{max-width:420px;margin-inline:auto;width:100%}}

/* phones: show the whole painting (sun, heart and spirits) as a band under the text instead of a cropped centre */
@media (max-width:600px){
  .hero-art{background:linear-gradient(90deg,#d9b9a8 0,#ecdfe0 30%,#e6e4f1 55%,#b7c4e8 80%,#7f9ad4 100%)}
  .hero-art::after{height:16%}
  .hero-stage{--sw:100cqw;top:auto;bottom:4%;background:url("images/hero.jpg") center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
  .hero-in{padding-block:40px calc(100vw * .46 + 10px)}
  /* phones: the stage is only ~375px wide, so enlarge and brighten the light effects */
  .sun-glow{width:42%;background:radial-gradient(circle,rgba(255,246,220,1) 0,rgba(255,214,150,.75) 16%,rgba(255,190,120,.3) 40%,transparent 68%)}
  .sun-rays{width:90%;-webkit-mask-image:radial-gradient(circle,#000 6%,rgba(0,0,0,.8) 34%,transparent 66%);mask-image:radial-gradient(circle,#000 6%,rgba(0,0,0,.8) 34%,transparent 66%)}
  .heart-glow{width:28%;background:radial-gradient(circle,rgba(255,250,230,1) 0,rgba(255,215,140,.8) 20%,rgba(255,196,110,.32) 44%,transparent 70%)}
  .heart-line{filter:drop-shadow(0 0 3px rgba(255,236,190,1)) drop-shadow(0 0 8px rgba(255,214,140,.9))}
  .heart-line path{stroke-width:6}
  .heart-beam{width:9%;filter:blur(2px)}
  .spirit{width:calc(var(--w) * 1.8);background:radial-gradient(ellipse,rgba(245,250,255,1) 0,rgba(175,205,255,.65) 40%,transparent 72%)}
  .hero-stage .spirit-veil{animation-name:veilPhone}
  .twinkle{width:2.4%}
  .mote{width:calc(2.1% * var(--s,1));box-shadow:0 0 6px 2px rgba(255,240,215,.8),0 0 12px 4px rgba(170,160,255,.45)}
}
@keyframes veilPhone{0%,100%{opacity:.1}50%{opacity:.85}}