/* /assets/css/pages/events.css : page-group layout only. Loaded AFTER /assets/css/site.css by the pages of this group.
   Rules here may only add page-specific layout (grids, spacing, one-off crops). Never redefine site.css tokens or components.
   Pages: retreats, cosmic-remembrance-november, called-to-shasta. */

/* ============================================================ shared by the event pages ============================================================ */
/* bleed hero with a still photo under the slot video (the hero-video element has no poster fade; a slot-video fades in once playing) */
.ev-hero .hero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.ev-hero .hero-media .slot-video{z-index:0}
.ev-hero .hero-frame{z-index:3}
.ev-hero .hero-copy{max-width:min(60%,880px)}
.ev-hero .hero-cue{display:flex;margin-top:10px}
.ev-hero .cue{flex-direction:row}
@media (min-width:1024px){.ev-hero .cue{margin:0}}   /* below 1024 site.css puts the dot on the rail */
.ev-hero .cue-dot{order:0;background:var(--gold-pale);box-shadow:0 0 0 5px rgba(233,215,166,.18)}
.ev-hero .h1.ev-giant{font-size:clamp(96px,15vw,240px);line-height:.82;letter-spacing:-.03em}
/* the golden-hour Shasta loop is bright snow and sky where the tall copy starts: deepen the left and upper veil so the small
   tracked eyebrow and the italic lines keep their contrast over the snow */
.ev-hero .hero-media::after{background:linear-gradient(to top,rgba(30,25,19,.8),rgba(30,25,19,.4) 52%,rgba(30,25,19,.2) 80%,rgba(30,25,19,.28)),linear-gradient(to right,rgba(30,25,19,.58),rgba(30,25,19,.12) 58%,rgba(30,25,19,0) 75%)}
.ev-hero .eyebrow,.ev-hero .lead,.ev-hero .hero-line{text-shadow:0 1px 14px rgba(30,25,19,.55)}
@media (max-width:767px){   /* phone: the copy spans the width and starts a third of the way down, over the snowfields */
  .ev-hero .hero-media::after{background:linear-gradient(to top,rgba(30,25,19,.84),rgba(30,25,19,.56) 50%,rgba(30,25,19,.4) 72%,rgba(30,25,19,.3))}
}
/* the date line under an event title: serif, not another caps label */
.door-when{display:flex;flex-direction:column;gap:12px;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.3vw,20px);line-height:1.3;color:var(--ink-2);padding-top:4px}
.door-when::before{content:"";width:34px;height:1px;background:var(--gold)}

/* ============================================================ retreats ============================================================ */
.ev-portals{padding-top:clamp(96px,12vw,170px)}
.doors.trio{position:relative;--dg:clamp(28px,4vw,64px);grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dg);align-items:start}
.doors.trio>a:nth-of-type(2){margin-top:clamp(60px,9vw,150px)}
.doors.trio>a:nth-of-type(3){margin-top:clamp(120px,18vw,300px)}
.doors.trio .door-title{font-size:clamp(32px,3vw,46px)}
.doors.trio #gapA{left:calc((100% - 2 * var(--dg)) / 3 + var(--dg) / 2);top:26%}
.doors.trio #gapB{left:calc((100% - 2 * var(--dg)) * 2 / 3 + var(--dg) * 1.5);top:52%}
.doors.trio #gapC{left:calc((100% - 2 * var(--dg)) * 2 / 3 + var(--dg) * 1.5);top:100%}
/* once Cosmic Remembrance has passed, the two Her Sacred Rebirth doors stay side by side */
.doors.trio.ret-single{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.doors.trio.ret-single>a:nth-of-type(2){margin-top:0}
.doors.trio.ret-single>a:nth-of-type(3){margin-top:clamp(60px,9vw,150px)}
.doors.trio.ret-single #gapA,.doors.trio.ret-single #gapB,.doors.trio.ret-single #gapC{left:50%}
/* the Tulum door: the cenote loop (place only) with her real circle as a still inset, never animated */
.door-stage{position:relative;display:block}
.door-inset{position:absolute;right:-7%;top:-9%;width:56%;aspect-ratio:3/2;overflow:hidden;background:var(--linen);border:6px solid var(--ivory);box-shadow:var(--shadow-card);z-index:4}
.door-inset img{width:100%;height:100%;object-fit:cover}
html.motion.js .door-inset.mask,html.motion.js .door-inset.mask img{transition-delay:.35s}
.ev-state{background:var(--champagne)}
.ev-state .ladder{font-size:clamp(44px,6vw,96px)}
.ev-state .ladder .call{max-width:none}

@media (max-width:1023px){
  .ev-hero .hero-copy{max-width:min(80%,640px)}
  .doors.trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doors.trio>a:nth-of-type(3){margin-top:0}
  .doors.trio #gapA{left:50%;top:22%}
  .doors.trio #gapB{left:50%;top:70%}
  .doors.trio #gapC{left:50%;top:100%}
}
/* tablet: three doors in two columns would leave the third hugging the left; it takes the centre of its own row */
@media (min-width:768px) and (max-width:1023px){
  .doors.trio:not(.ret-single):not(:has(>a[style*="none"]))>a:nth-of-type(3){grid-column:1/-1;justify-self:center;width:calc(50% - var(--dg) / 2)}
}
@media (max-width:767px){
  .ev-hero .hero-copy{max-width:none}
  .ev-hero .hero-media>img{object-position:50% 70%}
  .doors.trio{grid-template-columns:minmax(0,1fr);gap:72px}
  .doors.trio>a:nth-of-type(2){margin-top:0;width:88%;margin-left:auto;margin-right:auto}   /* the inset door stays a touch narrower, on the axis */
  .doors.trio>a:nth-of-type(3){margin-top:0}
  .doors.trio.ret-single{grid-template-columns:minmax(0,1fr)}
  .door-inset{right:-3%;width:54%;border-width:4px}
  .ev-state .ladder{font-size:clamp(38px,11vw,48px)}
  .ev-hero .h1.ev-giant{font-size:clamp(84px,26vw,120px)}
  .door-inset{top:-7%}
}

/* ============================================================ cosmic-remembrance-november ============================================================ */
.r32{aspect-ratio:3/2}
.cr-hero .hero-media>img{object-position:50% 64%}
.cr-hero .h1{font-size:clamp(64px,8.4vw,132px)}
.cr-dates{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.cr-dates::before{content:"";width:34px;height:1px;background:rgba(233,215,166,.7);margin-bottom:8px}
.cr-dates-note{max-width:24em;text-wrap:balance}
.cr-dates-n{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1.1;color:var(--ivory)}
.cr-dates-note{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(17px,1.3vw,19px);line-height:1.4;color:var(--gold-pale)}
.cr-index{padding-top:clamp(56px,6vw,88px);padding-bottom:0}
.cr-mountain{padding-top:clamp(80px,10vw,150px)}
.cr-doorway-in{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.cr-doorway-in .is-reading{max-width:620px}   /* lead and body share one left edge */
.cr-doorway-in .lead.it{text-wrap:balance}
.cr-doorway-in .lead.it{max-width:26em;margin-top:8px}
.cr-flourish{font-size:11px;letter-spacing:.9em;color:var(--gold);padding-left:.9em}
.cr-wide{margin-bottom:var(--head-gap)}
.cr-split{position:relative;align-items:start;row-gap:32px}
.cr-split-head{grid-column:1/6;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;position:sticky;top:calc(var(--bar) + 68px + 40px)}
.cr-split-head .h3{font-size:clamp(34px,3.6vw,54px);line-height:1.02}
.cr-split-body{grid-column:7/13;display:flex;flex-direction:column;gap:22px}
.cr-practices-head{max-width:min(100%,820px);margin-left:auto;margin-right:auto}   /* the head on the page axis; the serpent passes it on the right (route in the html) */
.cr-prac{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(56px,9vw,160px);row-gap:clamp(72px,8vw,120px);padding-bottom:clamp(80px,11vw,180px)}
.cr-prac-card{display:flex;flex-direction:column;gap:30px}
.cr-prac-card:nth-of-type(even){transform:translateY(clamp(80px,11vw,180px))}
.cr-prac-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.cr-prac-txt .body{max-width:32em;width:100%;text-align:left}   /* reading: left, under the centred kick and heading */
.cr-gate{position:relative;background:var(--light);background-image:radial-gradient(ellipse 55% 70% at 32% 50%,rgba(233,215,166,.5),rgba(255,253,246,0) 70%);padding:var(--pad-lg) 0;overflow:hidden}
.cr-gate-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center}
.cr-1111{grid-column:1/8;display:flex;align-items:baseline;justify-content:center;font-family:var(--serif);font-weight:300;font-size:clamp(150px,21vw,330px);line-height:.8;letter-spacing:-.01em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;color:var(--gold-soft);user-select:none}
@supports (-webkit-text-stroke:1px black){.cr-1111{color:rgba(233,215,166,.28);-webkit-text-stroke:1.2px var(--gold)}}
.cr-1111 .cr-colon{color:var(--gold);-webkit-text-stroke:0;font-size:.62em;margin:0 .04em;transform:translateY(-.12em)}
#gGate{left:61.4%;top:50%}
#gGate2{left:61.4%;top:calc(100% + clamp(60px,8vw,140px))}
.cr-gate-txt{grid-column:9/13;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.cr-gate-txt .body{width:100%;text-align:left}
.cr-gate-txt .h3{font-size:clamp(34px,3.6vw,54px);line-height:1.02}
.cr-gate-txt .btn{max-width:100%;white-space:normal;line-height:1.5;padding-top:12px;padding-bottom:12px}
@media (min-width:1024px) and (max-width:1279px){.cr-1111{grid-column:1/7;font-size:clamp(150px,17vw,210px)}.cr-gate-txt{grid-column:7/13}#gGate,#gGate2{left:50%}}
.cr-guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);align-items:start}
.cr-guide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.cr-guide figure{width:100%}
.cr-guide:nth-child(even){margin-top:clamp(40px,5vw,80px)}
.cr-guide figure{margin-bottom:12px}
.cr-guide .h4{font-size:clamp(22px,1.8vw,26px)}
.cr-guide p:not(.kick){font-size:15.5px;line-height:1.75;color:var(--ink-2);text-align:left;align-self:stretch}   /* bios are reading */
.cr-roomcue{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(88px,10vw,150px);text-align:center}
.cr-home .prose{max-width:720px}
.cr-home .prose>.lead{text-align:center}   /* her one-line answer to the heading sits on its axis; the reading below stays left */
.cr-plate{position:relative;z-index:2;height:clamp(360px,40vw,620px);overflow:hidden;background:var(--sand);margin:0}
.cr-plate img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:50% 58%}
.cr-hcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.cr-hgroup{border-top:1px solid var(--gold);padding-top:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.cr-hgroup .h4{display:flex;align-items:baseline;justify-content:center;gap:14px}
.cr-hgroup ul{align-self:stretch;text-align:left}
.cr-hgroup ul{display:flex;flex-direction:column}
.cr-hgroup li{position:relative;padding:14px 0 14px 24px;border-bottom:1px solid var(--rule-ink);font-size:16px;line-height:1.7;color:var(--ink-2)}
.cr-hgroup li::before{content:"\2013";position:absolute;left:0;top:14px;color:var(--gold)}
.cr-hgroup b{font-weight:400;color:var(--ink)}
.cr-bridge-in{max-width:880px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.cr-bridge-in .cta-row{justify-content:flex-start}
.cr-bridge-in .lead{font-size:clamp(23px,2.1vw,30px);line-height:1.5;color:var(--ink)}
.cr-room{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1180px;margin:0 auto}
.cr-room-photos{position:relative;padding-bottom:20%}
.cr-room-photos figure:first-child{width:84%}
.cr-room-photos figure:last-child{position:absolute;right:0;bottom:0;width:54%;border:6px solid var(--champagne);box-shadow:var(--shadow-card);z-index:3}
.cr-room-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;background:var(--ivory);border:1px solid var(--hair);padding:clamp(28px,3.4vw,48px)}
.cr-room-body .price{flex-direction:row;align-items:baseline;justify-content:center;gap:14px;margin-top:6px}
.cr-room-body .price-n{font-size:clamp(44px,4vw,60px)}
.cr-room-body .price-l{margin-top:0}
.cr-room-body p:not(.kick){font-size:16px;line-height:1.75;color:var(--ink-2)}
.cr-room-body .btn{width:100%;margin-top:8px;white-space:normal;line-height:1.5}
.cr-rooms .sec-head .lead{max-width:26em;text-wrap:balance}
.cr-roomnote{max-width:30em;text-wrap:balance;margin:clamp(48px,6vw,80px) auto 0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.7vw,24px);line-height:1.5;color:var(--ink-2)}
.cr-plan{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;max-width:640px;margin:0 auto}
.cr-amt{font-family:var(--serif);font-weight:300;font-size:clamp(96px,12vw,176px);line-height:.85;letter-spacing:-.025em;color:var(--gold-deep)}
.cr-paths{width:100%;max-width:520px;border-top:1px solid var(--hair);text-align:center}
.cr-paths li{text-wrap:balance;padding:14px 0;border-bottom:1px solid var(--hair);font-size:16px;color:var(--ink-2)}
.cr-paths b{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);margin-right:6px}
.cr-plan .btn{margin-top:10px}
.cr-talk{text-wrap:balance;font-family:var(--serif);font-style:italic;font-weight:300;font-size:20px;color:var(--ink-2)}
.cr-talk a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong);transition:color var(--t-fast)}
.cr-talk a:hover{color:var(--ink)}
.cr-sign{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:18px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:20px;color:var(--soft)}
.cr-sign-name{font-size:clamp(28px,2.6vw,36px);color:var(--gold-deep)}
.cr-call-intro{max-width:36em}
.cr-call-cta{justify-content:center;margin-top:clamp(56px,7vw,96px)}
.pg-cr .final-cta{flex-direction:column;gap:20px}
.cr-wait-head{grid-column:1/6;align-self:start;position:sticky;top:calc(var(--bar) + 68px + 40px)}
.cr-wait-embed{grid-column:7/13}

@media (max-width:1023px){
  .cr-split-head,.cr-split-body{grid-column:1/-1;position:static}
  .cr-prac{column-gap:40px}
  .cr-gate-in{row-gap:40px}
  .cr-1111{grid-column:1/-1;justify-content:center}
  .cr-gate-txt{grid-column:1/-1;max-width:640px;width:100%;margin:0 auto}
  #gGate,#gGate2{left:auto;right:18px;top:40%}
  .cr-guides{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .cr-guide:nth-child(even){margin-top:56px}
  .cr-hcols{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto}
  .cr-bridge-in{margin-left:0}
  .cr-room{grid-template-columns:minmax(0,1fr);max-width:640px}
  .cr-wait-head,.cr-wait-embed{grid-column:1/-1;position:static}
}
@media (max-width:767px){
  .cr-hero .h1{font-size:clamp(54px,15vw,64px)}
  .cr-hero .hero-copy{gap:16px}
  .cr-hero .hero-media>img{object-position:56% 66%}
  .cr-dates-n{font-size:24px}
  .cr-index{padding-top:40px}
  .cr-prac{grid-template-columns:minmax(0,1fr);row-gap:72px;padding-bottom:0}
  .cr-prac-card:nth-of-type(even){transform:none}
  .cr-1111{font-size:clamp(110px,33vw,150px)}
  .cr-guides{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .cr-guide:nth-child(even){margin-top:0}
  .cr-plate{height:min(110vw,520px)}
  .cr-room-photos{padding-bottom:24%}
  .cr-plan .btn,.cr-bridge-in .btn,.cr-gate-txt .btn{width:100%}
  .pg-cr .btn{white-space:normal;line-height:1.5;padding-top:12px;padding-bottom:12px}
  .cr-guide figure{width:86%;margin-left:auto;margin-right:auto}   /* portraits on the axis */
  .pg-cr .final-cta{gap:14px}
}

/* ============================================================ called-to-shasta (guide landing) ============================================================ */
.cs-hero{align-items:flex-start;background:var(--ivory);background-image:radial-gradient(ellipse 50% 60% at 80% 30%,rgba(233,215,166,.32),rgba(252,250,245,0) 70%);padding-bottom:clamp(80px,10vw,150px)}
/* desktop: the centred title lockup beside the mountain, then her words and the form on the page axis under both (the form no longer
   leaves an empty right half once the photo ends) */
.cs-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head media" "body body";column-gap:clamp(48px,7vw,120px);row-gap:clamp(56px,6vw,96px);align-items:start}
.cs-head{grid-area:head;align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding-top:clamp(8px,2vw,32px)}
.cs-head .lead.it{max-width:24em;font-size:clamp(22px,2vw,28px);text-wrap:balance}
.cs-body{grid-area:body;display:flex;flex-direction:column;align-items:center;gap:36px}
.cs-body .body{max-width:640px}
.cs-embed{width:100%;max-width:640px;margin:0 auto;min-height:560px;scroll-margin-top:calc(var(--bar) + var(--navh) + 16px)}
.cs-jump{margin-top:4px}   /* desktop too: the form starts at the fold, so the first screen still carries a gold CTA */
.cs-media{grid-area:media;position:relative;margin:0;padding:0 0 18% 0}
.cs-frame{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.cs-frame img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.cs-frame .slot-video{object-position:38% 50%}
.cs-frame::after{content:"";position:absolute;inset:16px;border:1px solid var(--hair-ivory);pointer-events:none;z-index:2}
.cs-cover{position:absolute;left:-12%;bottom:0;width:46%;height:auto;transform:rotate(-3deg);box-shadow:var(--shadow-card);outline:1px solid rgba(252,250,245,.7);outline-offset:-8px;z-index:3}
@media (max-width:1023px){
  .cs-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "head" "body";row-gap:40px}
  .cs-media{max-width:620px;width:100%;margin:0 auto;padding-bottom:0}
  .cs-frame{aspect-ratio:16/10}
  .cs-frame img,.cs-frame .slot-video{object-position:40% 50%}
  .cs-cover{left:auto;right:6%;bottom:-14%;width:30%}
  .cs-head{padding-top:24px}
}
@media (max-width:767px){
  .cs-hero{padding-top:calc(var(--bar) + var(--navh) + 20px)}
  .cs-grid{row-gap:28px}
  .cs-cover{width:32%;bottom:-18%;right:4%}
  .cs-head{padding-top:30px;gap:18px}
  .cs-head .h1{font-size:clamp(52px,15vw,62px)}
  .cs-jump{width:100%}
  .cs-body{gap:28px}
  .cs-embed{min-height:600px}
}

/* ============================================================ review round 1 (alignment) ============================================================ */
/* a left-set reading paragraph must not also balance its lines: balance shortens every line, so the block hugs the left of its
   centred column and reads off-centre (bridge, call intro, doorway). Pretty keeps the full measure and still avoids orphans. */
.is-reading{text-wrap:pretty}
/* the four steps of "Do you feel the call?" are one- to three-line captions under a centred numeral and heading: they sit on
   the same axis instead of hanging left under it */
.cr-call .steps p{text-align:center;text-wrap:balance;align-self:center;max-width:22em}
/* the waitlist heading keeps its italic gold second line on its own line at every width (tablet ran "November? Join" together) */
.cr-wait-head .h2 em{display:block}
/* stacked journey split: her one-line answer sits on the axis under the centred heading; the reading below stays left */
@media (max-width:1023px){
  .cr-split-body>.lead{text-align:center;align-self:center;text-wrap:balance}
}
/* small desktop (1024-1279): four guide columns are ~210px, so "Anya Dillon · Radiant Flo" broke with a leading dot; the council
   sits as a centred 2 x 2 like tablet. The room card gets an even share of the row so its Reserve label stays on one line. */
@media (min-width:1024px) and (max-width:1199px){
  .cr-guides{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px;column-gap:56px;max-width:760px;margin-left:auto;margin-right:auto}
  .cr-guide:nth-child(even){margin-top:56px}
}
@media (min-width:1024px) and (max-width:1279px){
  .cr-room{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cr-room-body .btn{padding-left:22px;padding-right:22px}
}

/* ============================================================ review round 2 (alignment) ============================================================ */
/* her legacy coda on phone: Navigate and Retreats/Sessions sit side by side, and Connect was stranded alone in the left half under
   Navigate with an empty right half. It sits on the axis at the same column width (same treatment as the library guide pages). */
@media (max-width:767px){
  :is(.pg-cr,.pg-shasta) .coda-col:last-child{grid-column:1/-1;justify-self:center;width:calc((100% - 20px) / 2)}
}
/* the bridge closes the whole reading page with the one gold Apply: it sits on the axis under her centred reading column, as the
   11:11 Apply and the call's Apply do, instead of being the only left-set button on an otherwise centred page (tablet/desktop) */
@media (min-width:768px){.cr-bridge-in .cta-row{align-self:center;justify-content:center}}

/* wow 1: her retreat reviews under the doors. On desktop the serpent leaves the last gutter (#gapC), crosses the open band above
   the strip and passes it on the left (#gapD) before the statement; the strip keeps 120px clear of each side for her. */
.ev-portals .proof{position:relative;max-width:min(860px,calc(100% - 240px));margin-top:clamp(120px,15vw,220px)}
.ev-portals .proof #gapD{left:-110px;top:50%}
@media (max-width:1023px){.ev-portals .proof{max-width:none;margin-top:80px}}