/* Robyn Birdsong site, v1 (7 Oct 2026).
   Direction: cream and white ground, forest and sage, stone text, one accent (fireweed), quiet serif + plain sans,
   her photographs as the only imagery. Inspiration for the feel (Ema, 7 Oct): tengilemalamala.com, i.e. full-screen
   video, very large taglines, nature close-ups behind text, sliding screens, slow reveals, generous space.
   Order: tokens, base, shell, home sections, inner pages, motion, small screens. */

:root{
  color-scheme:light;
  --cream:#FAF8F3; --white:#FFFFFF; --mist:#F2F3EE;
  --ink:#27312B; --ink-mid:#55635B; --ink-dim:#7E8B84; --line:#E1E5DE;
  --forest:#3F6B4A; --forest-deep:#24402D; --sage:#9DB89A; --sage-soft:#DCE5D8;
  --accent:#B9667C; --accent-soft:#F4E4E9;
  --p1:#3F6B4A; --p1-tint:#E6EFE6; --p2:#2C6C8C; --p2-tint:#E3EEF3; --p3:#B4633B; --p3-tint:#F8EBE2;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
p{margin:0;max-width:62ch;}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.015em;text-wrap:balance;}
h1 em,h2 em,h3 em,.giant em,.big em{font-style:italic;font-weight:400;}
a{color:var(--forest);}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px;}

/* type scale */
.giant{font-family:var(--display);font-weight:300;font-size:clamp(2.8rem,8.5vw,6.4rem);line-height:.98;letter-spacing:-.025em;}
.big{font-family:var(--display);font-weight:300;font-size:clamp(2rem,5.2vw,3.9rem);line-height:1.06;letter-spacing:-.02em;}
.eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-mid);max-width:56ch;}
.small{font-size:15px;color:var(--ink-mid);}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}

/* buttons */
.btn{display:inline-block;background:var(--forest);color:var(--white);text-decoration:none;padding:14px 26px;border-radius:2px;font-weight:600;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--forest);transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s;}
.btn:hover{background:var(--forest-deep);border-color:var(--forest-deep);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--forest);}
.btn.ghost:hover{background:var(--forest);color:var(--white);}
.btn.light{background:var(--white);color:var(--forest-deep);border-color:var(--white);}
.btn.light:hover{background:var(--cream);}
.btn.sm{padding:9px 16px;font-size:12.5px;}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* shell */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(rgba(39,49,43,.45),transparent);transition:background .4s;}
nav.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap;}
nav.site-nav .brand{font-family:var(--display);font-size:1.3rem;color:var(--white);text-decoration:none;letter-spacing:.02em;}
nav.site-nav .links{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
nav.site-nav .links a{color:rgba(255,255,255,.88);text-decoration:none;}
nav.site-nav .links a:hover{color:var(--white);}
nav.site-nav .btn.sm{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6);}
nav.site-nav .btn.sm:hover{background:var(--white);color:var(--forest-deep);border-color:var(--white);}
body:not(.home) nav.site-nav{position:sticky;background:var(--cream);border-bottom:1px solid var(--line);}
body:not(.home) nav.site-nav .brand,body:not(.home) nav.site-nav .links a{color:var(--ink);}
body:not(.home) nav.site-nav .btn.sm{color:var(--forest);border-color:var(--forest);}
body:not(.home) nav.site-nav .btn.sm:hover{background:var(--forest);color:var(--white);}
footer.site-footer{background:var(--forest-deep);color:#C9D6CB;}
footer.site-footer .wrap{padding-block:40px 48px;display:flex;flex-wrap:wrap;gap:12px 40px;font-size:14px;}
footer.site-footer a{color:var(--white);text-decoration:none;}
footer.site-footer b{color:var(--white);}

/* hero */
.video-hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:var(--white);}
.video-hero .hero-media{position:absolute;inset:0;overflow:hidden;background:var(--forest-deep);}
.video-hero video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(6px) saturate(.9);transform:scale(1.02);}
.video-hero .veil{position:absolute;inset:0;background:linear-gradient(115deg,rgba(36,64,45,.78) 0%,rgba(36,64,45,.42) 45%,rgba(250,248,243,.14) 70%,rgba(36,64,45,.6) 100%);background-size:220% 220%;animation:veil 30s ease-in-out infinite alternate;}
.video-hero .hero-text{position:relative;padding-block:0 112px;max-width:1120px;}
.video-hero .eyebrow{color:#E7CBD4;}
.video-hero .giant{color:var(--white);max-width:12ch;}
.video-hero .sub{color:#E3EBE2;font-size:clamp(1.05rem,1.7vw,1.35rem);margin-top:26px;max-width:40ch;}
.video-hero .ctas{margin-top:28px;}
.video-hero .btn.ghost{color:var(--white);border-color:rgba(255,255,255,.7);}
.video-hero .btn.ghost:hover{background:var(--white);color:var(--forest-deep);}
.scroll-cue{position:absolute;left:50%;bottom:28px;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.7);border-radius:14px;transform:translateX(-50%);}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:var(--white);border-radius:2px;animation:cue 2.2s ease-in-out infinite;}
@keyframes veil{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* statement sections: big text over a nature close-up */
.statement{position:relative;overflow:hidden;padding-block:clamp(96px,14vw,180px);isolation:isolate;}
.statement .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;opacity:.22;transform:scale(1.15);will-change:transform;z-index:-1;}
.statement::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--cream),rgba(250,248,243,.6) 50%,var(--cream));z-index:-1;}
.statement.light .bg{opacity:.16;}
.statement .wrap{display:flex;flex-direction:column;gap:22px;}
.statement .big{max-width:16ch;}
.connect{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;}
.connect>div{display:flex;flex-direction:column;gap:18px;}

/* sliding screens */
.slider-section{padding-block:clamp(72px,10vw,120px) 0;background:var(--white);}
.slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px;}
.slider-nav{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:1.1rem;color:var(--ink-mid);}
.slider-nav button{width:50px;height:50px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:20px;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease);}
.slider-nav button:hover{background:var(--forest-deep);color:var(--white);border-color:var(--forest-deep);transform:translateY(-2px);}
.slider-nav .count b{color:var(--ink);font-weight:400;}
.slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.slider::-webkit-scrollbar{display:none;}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;height:clamp(460px,78vh,760px);overflow:hidden;color:var(--white);}
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.08);transition:transform 1.6s var(--ease);}
.slide.active img{transform:scale(1);}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(36,64,45,.82) 0%,rgba(36,64,45,.25) 55%,rgba(36,64,45,.1) 100%);}
.slide-text{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(24px,6vw,96px) clamp(40px,6vw,72px);z-index:1;max-width:760px;opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) .2s,transform .9s var(--ease) .2s;}
.slide.active .slide-text{opacity:1;transform:none;}
.slide-text .eyebrow{color:#E7CBD4;margin-bottom:10px;}
.slide-text h3{font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1;color:var(--white);margin-bottom:16px;}
.slide-text p{color:#E3EBE2;font-size:1.1rem;max-width:46ch;margin-bottom:22px;}
.slide-text .btn{background:var(--white);color:var(--forest-deep);border-color:var(--white);}
.slide-text .btn:hover{background:var(--cream);}

/* three steps */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:28px;}
.tri{display:flex;flex-direction:column;gap:8px;min-width:0;border-top:1px solid var(--ink);padding:24px 18px 28px;cursor:default;background:transparent;
  opacity:0;transform:translateX(-48px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),background-color .35s,border-color .35s,color .35s;}
.trio .tri:nth-child(2){transition-delay:.15s,.15s,0s,0s,0s;}
.trio .tri:nth-child(3){transition-delay:.3s,.3s,0s,0s,0s;}
.trio.in .tri{opacity:1;transform:none;}
.tri .n{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-bottom:8px;transition:background-color .35s,color .35s;}
.tri b{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.15;}
.tri span:not(.n){font-size:15px;color:var(--ink-mid);transition:color .35s;}
.tri:hover,.tri:focus-within{background:var(--forest-deep);border-top-color:var(--forest-deep);color:var(--white);transform:translateY(-4px);}
.tri:hover b,.tri:hover span:not(.n){color:var(--white);}
.tri:hover .n{background:var(--accent);color:var(--white);}

/* full-bleed photo section (immersion) */
.full-bleed{position:relative;overflow:hidden;color:var(--white);padding-block:clamp(120px,18vw,240px);isolation:isolate;}
.full-bleed .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:50% 30%;transform:scale(1.15);will-change:transform;z-index:-2;}
.full-bleed::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(36,64,45,.86),rgba(36,64,45,.55) 60%,rgba(36,64,45,.35));z-index:-1;}
.full-bleed .wrap{display:flex;flex-direction:column;gap:22px;}
.full-bleed .eyebrow{color:#E7CBD4;}
.full-bleed .giant{color:var(--white);max-width:12ch;}
.full-bleed .lead{color:#E3EBE2;}

/* events */
.events-section{background:var(--white);padding-block:clamp(96px,12vw,160px);}
.events-section .wrap{display:flex;flex-direction:column;gap:22px;}
.events{display:flex;flex-direction:column;margin-top:18px;}
.ev{display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:padding .4s var(--ease),color .3s;}
.ev:last-child{border-bottom:1px solid var(--line);}
.ev:hover{padding-left:16px;color:var(--forest);}
.ev .when{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:300;color:var(--accent);white-space:nowrap;}
.ev .what{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2rem);font-weight:300;line-height:1.15;}
.ev .len{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);}

/* continuum: the movement sequence as a full-bleed background */
.continuum-section{position:relative;overflow:hidden;color:var(--white);padding-block:clamp(120px,18vw,240px);isolation:isolate;}
.continuum-section .sequence{position:absolute;inset:0;z-index:-1;background:var(--forest-deep);}
.sequence img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:0;animation:frames 30s infinite;}
.sequence img:nth-child(2){animation-delay:6s}
.sequence img:nth-child(3){animation-delay:12s}
.sequence img:nth-child(4){animation-delay:18s}
.sequence img:nth-child(5){animation-delay:24s}
.sequence .veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(36,64,45,.85),rgba(36,64,45,.45));}
@keyframes frames{0%{opacity:0;transform:scale(1.06)}6%{opacity:1}20%{opacity:1;transform:scale(1)}27%{opacity:0;transform:scale(1)}100%{opacity:0}}
.continuum-section .wrap{display:flex;flex-direction:column;gap:22px;}
.continuum-section .eyebrow{color:#E7CBD4;}
.continuum-section .giant{color:var(--white);max-width:12ch;}
.continuum-section .lead{color:#E3EBE2;}

/* stay connected form */
form.list{display:flex;flex-direction:column;gap:10px;max-width:420px;}
form.list label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);}
form.list input{padding:14px 16px;border:0;border-bottom:1px solid var(--ink);background:transparent;font-family:var(--body);font-size:16px;color:var(--ink);}
form.list button{align-self:flex-start;margin-top:8px;}
.thanks{font-size:15px;color:var(--forest);}

/* closing */
.closing-section{padding-block:clamp(96px,14vw,180px);background:var(--cream);}
.closing-section .wrap{display:flex;flex-direction:column;gap:32px;}
.quote-giant{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(1.8rem,4.6vw,3.6rem);line-height:1.15;max-width:22ch;color:var(--ink);}
.sign{color:var(--ink-mid);font-size:1.05rem;}

/* ---- inner pages ---- */
.hero:not(.video-hero){position:relative;background:var(--cream);}
.hero:not(.video-hero) .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:120px 72px;}
.hero-text{display:flex;flex-direction:column;gap:20px;}
.hero:not(.video-hero) h1{font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:1.02;}
.hero .sub{font-size:1.15rem;color:var(--ink-mid);}
.photo{position:relative;overflow:hidden;background:var(--sage-soft);aspect-ratio:4/5;max-width:100%;}
.photo img{width:100%;height:100%;object-fit:cover;}
.photo.wide{aspect-ratio:16/10;}
section{padding-block:72px;}
section.tint{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stack{display:flex;flex-direction:column;gap:20px;}
section h2:not(.big):not(.giant){font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.15;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.two.top{align-items:start;}
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.story .stack{gap:18px;}
.sticky{position:sticky;top:90px;}
.list2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0;padding:0;list-style:none;}
.list2 li{border-top:1px solid var(--line);padding:12px 0;font-size:15px;color:var(--ink-mid);}
.lineage{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.ln{border-top:2px solid var(--sage);padding-top:12px;}
.ln b{display:block;font-size:15px;}
.ln span{font-size:14.5px;color:var(--ink-mid);}
.how{background:var(--white);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:14px;}
.how h3{font-size:1.4rem;}
.steps{display:flex;flex-direction:column;gap:12px;}
.step{display:flex;gap:14px;align-items:flex-start;}
.step i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:13px;margin-top:3px;}
.step p{font-size:15.5px;}
.step b{color:var(--ink);}
ul.soft{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-mid);max-width:60ch;}
.quote{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.35;color:var(--ink);max-width:34ch;}
.band{position:relative;height:clamp(240px,36vw,420px);overflow:hidden;}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.person{display:flex;flex-direction:column;gap:10px;min-width:0;border-top:1px solid var(--line);padding-top:18px;}
.person h3{font-size:1.4rem;}
.person p{font-size:15.5px;color:var(--ink-mid);}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.part{display:flex;flex-direction:column;gap:8px;min-width:0;border-top:2px solid var(--line);padding-top:18px;}
.part .tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.part h3{font-size:1.5rem;}
.part p{font-size:15px;color:var(--ink-mid);}
.part.a .tag,.part.a h3{color:var(--p1);} .part.a{border-top-color:var(--p1);}
.part.b .tag,.part.b h3{color:var(--p2);} .part.b{border-top-color:var(--p2);}
.part.c .tag,.part.c h3{color:var(--p3);} .part.c{border-top-color:var(--p3);}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.card{display:flex;flex-direction:column;gap:10px;min-width:0;border-top:1px solid var(--line);padding-top:18px;}
.card h3{font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);}
.card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:15px;color:var(--ink-mid);}
.rhythm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.beat{border-top:2px solid var(--sage);padding-top:12px;}
.beat b{display:block;font-size:15px;}
.beat span{font-size:14.5px;color:var(--ink-mid);}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.fact{border-top:1px solid var(--line);padding-top:14px;}
.fact b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px;}
.fact span{font-size:1.05rem;}
form.apply{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;}
form.apply label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-mid);min-width:0;}
form.apply label.full{grid-column:1/-1;}
form.apply input,form.apply textarea,form.apply select{padding:12px 14px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;width:100%;}
form.apply textarea{min-height:110px;resize:vertical;}
form.apply .btn{justify-self:start;grid-column:1/-1;}
.note{font-size:14.5px;color:var(--ink-mid);background:var(--accent-soft);border-left:3px solid var(--accent);padding:12px 16px;max-width:62ch;}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.rise{transform:translateY(14px);transition:transform .9s var(--ease);}
.rise.in{transform:none;}

/* ---- small screens ---- */
@media (max-width:860px){
  .connect,.two,.story,.pair,form.apply,.hero:not(.video-hero) .wrap{grid-template-columns:1fr;}
  .sticky{position:static;}
  .ev{grid-template-columns:1fr;gap:4px;}
  .ev .when{white-space:normal;}
  nav.site-nav .links{display:none;}
  .video-hero .hero-text{padding-bottom:96px;}
  .photo{aspect-ratio:4/3;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.rise,.trio .tri,.slide-text{opacity:1;transform:none;transition:none;}
  .tri:hover{transform:none;}
  .video-hero .veil,.scroll-cue span,.sequence img,.slide img{animation:none;transition:none;}
  .video-hero video{display:none;}
  .video-hero .hero-media{background:url(/assets/img/hero.jpg) center/cover;}
  .sequence img:first-child{opacity:1;}
  .statement .bg,.full-bleed .bg{transform:none;}
}

/* ---- fixes after the first look, 7 Oct ---- */
/* nav turns into a solid cream bar once the hero has scrolled past */
body.home nav.site-nav.scrolled{background:rgba(250,248,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
body.home nav.site-nav.scrolled .brand,body.home nav.site-nav.scrolled .links a{color:var(--ink);}
body.home nav.site-nav.scrolled .btn.sm{color:var(--forest);border-color:var(--forest);}
body.home nav.site-nav.scrolled .btn.sm:hover{background:var(--forest);color:var(--white);}
/* hero copy needs more contrast over the light poster frame */
.video-hero .veil{background:linear-gradient(115deg,rgba(36,64,45,.82) 0%,rgba(36,64,45,.55) 45%,rgba(36,64,45,.3) 70%,rgba(36,64,45,.62) 100%),linear-gradient(to top,rgba(36,64,45,.75),transparent 55%);background-size:220% 220%,100% 100%;}
.video-hero .giant,.video-hero .sub{text-shadow:0 2px 24px rgba(20,36,26,.45);}
.video-hero .sub{color:var(--white);font-weight:600;}
/* event rows: let the date breathe */
.ev{grid-template-columns:minmax(220px,.5fr) 1.5fr auto;}
.ev .when{white-space:normal;}
/* keep the Continuum tagline off her face: picture sits to the right, text to the left */
.sequence img{object-position:70% 35%;}
.sequence .veil{background:linear-gradient(to right,rgba(36,64,45,.9) 0%,rgba(36,64,45,.7) 45%,rgba(36,64,45,.25) 100%);}
.ev{grid-template-columns:minmax(260px,.55fr) 1.45fr auto;}

/* ---- the three steps, 7 Oct: each one fades in with a soft pink glow as it scrolls into view, and fades out again when it leaves ---- */
.trio .tri{
  opacity:0;transform:translateY(26px) scale(.98);box-shadow:0 0 0 rgba(185,102,124,0);
  transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow 1.4s ease,background-color .35s,border-color .35s,color .35s;
  border-radius:4px;padding:28px 22px 30px;
}
.trio .tri:nth-child(2){transition-delay:.12s,.12s,.12s,0s,0s,0s;}
.trio .tri:nth-child(3){transition-delay:.24s,.24s,.24s,0s,0s,0s;}
.trio .tri.in{opacity:1;transform:none;animation:glow 2.6s ease-out forwards;}
.trio .tri.in:nth-child(2){animation-delay:.12s;}
.trio .tri.in:nth-child(3){animation-delay:.24s;}
.trio .tri.out{opacity:0;transform:translateY(-18px) scale(.98);box-shadow:0 0 0 rgba(185,102,124,0);animation:none;}
@keyframes glow{
  0%{box-shadow:0 0 0 rgba(185,102,124,0);background-color:transparent;}
  35%{box-shadow:0 0 60px 8px rgba(185,102,124,.38);background-color:rgba(244,228,233,.75);}
  100%{box-shadow:0 0 28px 0 rgba(185,102,124,.14);background-color:rgba(244,228,233,.28);}
}
.trio .tri:hover,.trio .tri:focus-within{animation:none;background:var(--forest-deep);box-shadow:0 0 40px 2px rgba(185,102,124,.25);}
@media (prefers-reduced-motion:reduce){.trio .tri,.trio .tri.in,.trio .tri.out{opacity:1;transform:none;animation:none;box-shadow:none;}}

/* ---- the three steps as a scroll stage, 7 Oct: the section pins while you scroll through it;
   step 1 fades in then out, then step 2, then step 3, each in the same place ---- */
.stage{padding-block:0;height:320vh;}
.stage .stage-inner{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;}
.stage .wrap{display:flex;flex-direction:column;gap:22px;width:100%;}
.trio.seq{display:grid;grid-template-columns:minmax(0,520px);margin-top:28px;min-height:190px;}
.trio.seq .tri{grid-area:1/1;opacity:0;transform:translateY(24px);transition:none;animation:none;will-change:opacity,transform;pointer-events:none;}
.trio.seq .tri.on{pointer-events:auto;}
.trio.seq .tri .n{transition:box-shadow 1.2s ease,background-color .6s;}
.trio.seq .tri.on .n{background:var(--accent);color:var(--white);box-shadow:0 0 36px 6px rgba(185,102,124,.45);}
.trio.seq .tri.on{box-shadow:0 0 56px 4px rgba(185,102,124,.22);background-color:rgba(244,228,233,.45);}
.trio.seq .tri{transition:box-shadow 1s ease,background-color .8s ease;}
.stage .dots{display:flex;gap:8px;margin-top:6px;}
.stage .dots i{width:28px;height:2px;background:var(--line);transition:background .4s;}
.stage .dots i.on{background:var(--accent);}
@media (max-width:860px){.stage{height:300vh;}}
@media (prefers-reduced-motion:reduce){
  .stage{height:auto;padding-block:clamp(96px,14vw,180px);}
  .stage .stage-inner{position:static;height:auto;}
  .trio.seq{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
  .trio.seq .tri{grid-area:auto;opacity:1!important;transform:none!important;pointer-events:auto;}
}
/* overflow:hidden on the section stops position:sticky from working; clip the background with clip-path instead */
.stage{overflow:visible;clip-path:inset(0);}
.stage .bg{inset:-12% 0;}

/* ---- ways to work with me as stacked panels, 7 Oct: each panel appears as you scroll, and its title's
   letters start scattered and drift back together as the panel reaches the middle of the screen ---- */
.panels{padding-block:clamp(72px,10vw,120px) 0;background:var(--white);}
.panels-head{margin-bottom:36px;}
.panel{position:relative;height:clamp(460px,82vh,780px);overflow:hidden;color:var(--white);
  clip-path:inset(12% 6% 12% 6% round 2px);transition:clip-path 1.2s var(--ease);}
.panel.seen{clip-path:inset(0 0 0 0 round 0);}
.panel img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.12);transition:transform 2.2s var(--ease);}
.panel.seen img{transform:scale(1);}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(36,64,45,.85) 0%,rgba(36,64,45,.3) 55%,rgba(36,64,45,.1) 100%);}
.panel-text{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(24px,6vw,96px) clamp(40px,6vw,72px);z-index:1;max-width:820px;}
.panel-text .eyebrow{color:#E7CBD4;margin-bottom:10px;}
.panel-text h3{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;color:var(--white);margin-bottom:18px;}
.panel-text h3 .ch{display:inline-block;will-change:transform,opacity;}
.panel-text h3 .sp{display:inline-block;width:.28em;}
.panel-text p{color:#E3EBE2;font-size:1.1rem;max-width:46ch;margin-bottom:22px;opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s;}
.panel-text .btn{background:var(--white);color:var(--forest-deep);border-color:var(--white);opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .45s,transform .9s var(--ease) .45s,background .3s;}
.panel.seen .panel-text p,.panel.seen .panel-text .btn{opacity:1;transform:none;}
.panel-text .btn:hover{background:var(--cream);}
@media (prefers-reduced-motion:reduce){
  .panel{clip-path:none;} .panel img{transform:none;transition:none;}
  .panel-text p,.panel-text .btn,.panel-text h3 .ch{opacity:1!important;transform:none!important;transition:none;}
}
.panel-text h3 .word{display:inline-block;white-space:nowrap;}
.panel-text h3 .sp{display:inline;width:auto;}

/* ---- the three steps, larger, on textured dark green (Ema, 7 Oct) ---- */
.trio.seq{grid-template-columns:minmax(0,980px);min-height:clamp(300px,42vh,420px);margin-top:36px;}
.trio.seq .tri{
  padding:clamp(36px,5vw,64px) clamp(28px,5vw,64px);border:0;border-radius:4px;
  color:var(--white);
  background:linear-gradient(120deg,rgba(28,52,36,.9),rgba(36,64,45,.78) 60%,rgba(28,52,36,.88)),url(/assets/img/tex-moss.jpg) center/cover;
  box-shadow:0 30px 60px -30px rgba(20,36,26,.55);
  gap:14px;
}
.trio.seq .tri .n{width:48px;height:48px;font-size:16px;background:rgba(255,255,255,.12);color:var(--white);margin-bottom:10px;}
.trio.seq .tri b{font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;color:var(--white);}
.trio.seq .tri span:not(.n){font-size:clamp(1.05rem,1.6vw,1.3rem);color:#DCE5D8;max-width:48ch;}
.trio.seq .tri.on{background:linear-gradient(120deg,rgba(28,52,36,.9),rgba(36,64,45,.78) 60%,rgba(28,52,36,.88)),url(/assets/img/tex-moss.jpg) center/cover;
  box-shadow:0 0 90px 10px rgba(185,102,124,.28),0 30px 60px -30px rgba(20,36,26,.55);}
.trio.seq .tri.on .n{background:var(--accent);box-shadow:0 0 36px 8px rgba(185,102,124,.55);}
.trio.seq .tri:hover,.trio.seq .tri:focus-within{transform:none;}
.stage .dots i{background:rgba(39,49,43,.18);}
.stage .dots i.on{background:var(--accent);}

/* ---- phone menu, 7 Oct ---- */
.nav-actions{display:flex;align-items:center;gap:12px;}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;}
.menu-btn span{display:block;height:1.5px;background:var(--white);transition:transform .3s,opacity .3s,background .3s;}
body:not(.home) .menu-btn span,body.home nav.site-nav.scrolled .menu-btn span{background:var(--ink);}
.drawer-overlay{position:fixed;inset:0;background:rgba(36,64,45,.45);z-index:30;opacity:0;transition:opacity .35s;}
.drawer-overlay.show{opacity:1;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);background:var(--cream);z-index:31;padding:24px 28px 40px;padding-top:calc(24px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:28px;transform:translateX(102%);transition:transform .45s var(--ease);box-shadow:-20px 0 60px rgba(20,36,26,.2);overflow-y:auto;}
.drawer.open{transform:none;}
.drawer-top{display:flex;align-items:center;justify-content:space-between;}
.drawer-top .brand{font-family:var(--display);font-size:1.25rem;color:var(--ink);}
.drawer-close{width:44px;height:44px;border:0;background:transparent;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;}
.drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.drawer-links a{display:block;padding:14px 0;border-top:1px solid var(--line);font-family:var(--display);font-size:1.6rem;font-weight:300;color:var(--ink);text-decoration:none;}
.drawer-links li:last-child a{border-bottom:1px solid var(--line);}
.drawer .btn{align-self:flex-start;}
.drawer-foot{font-size:14px;color:var(--ink-dim);margin-top:auto;}
body.menu-open{overflow:hidden;}
@media (max-width:860px){
  nav.site-nav .links{display:none;}
  nav.site-nav .btn.sm{display:none;}
  .menu-btn{display:flex;}
  nav.site-nav .wrap{flex-wrap:nowrap;padding-block:12px;}
}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-overlay{transition:none;}}

/* ---- hero CTA in fireweed (Ema, 7 Oct): the green button was lost on the green video ---- */
.video-hero .ctas .btn:not(.ghost){background:var(--accent);border-color:var(--accent);color:var(--white);}
.video-hero .ctas .btn:not(.ghost):hover{background:#A3566B;border-color:#A3566B;}

/* ---- gatherings: phone layout for the key dates, and the gatherings page (7 Oct) ---- */
@media (max-width:860px){
  .ev{grid-template-columns:1fr;gap:6px;padding:20px 0;}
  .ev .when{font-size:1.15rem;white-space:normal;}
  .ev .what{font-size:1.35rem;}
  .ev .len{font-size:12px;}
  .ev:hover{padding-left:0;}
  .events-section .ctas .btn{width:100%;text-align:center;}
}
.events2{display:flex;flex-direction:column;}
.ev2{display:grid;grid-template-columns:minmax(220px,.4fr) 1.6fr;gap:24px;padding:32px 0;border-top:1px solid var(--line);}
.ev2:last-child{border-bottom:1px solid var(--line);}
.ev2 .when{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;color:var(--accent);line-height:1.15;}
.ev2 h3{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;margin-bottom:10px;}
.ev2 p{color:var(--ink-mid);margin-bottom:10px;}
.ev2 .len{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);}
@media (max-width:860px){.ev2{grid-template-columns:1fr;gap:8px;padding:24px 0;}}

/* ---- moving leaves and flowers inside the step boxes (Ema, 7 Oct) ---- */
.trio.seq .tri{position:relative;overflow:hidden;}
.trio.seq .tri>*:not(.flora){position:relative;z-index:1;}
.trio.seq .tri .flora{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.6s ease .2s;pointer-events:none;}
.trio.seq .tri.on .flora{opacity:.75;}
.flora .fl{transform-box:fill-box;transform-origin:50% 100%;animation:leaf-sway 7s ease-in-out infinite alternate;animation-play-state:paused;}
.trio.seq .tri.on .flora .fl{animation-play-state:running;}
.flora .l2{animation-duration:9s;animation-delay:-2s;} .flora .l3{animation-duration:8s;animation-delay:-4s;} .flora .l4{animation-duration:6.5s;animation-delay:-1s;} .flora .l5{animation-duration:10s;animation-delay:-5s;}
.flora .f1,.flora .f2,.flora .f3,.flora .f4{transform-origin:50% 50%;animation:flower-drift 11s ease-in-out infinite alternate;}
.flora .f2{animation-duration:13s;animation-delay:-6s;} .flora .f3{animation-duration:9s;animation-delay:-3s;} .flora .f4{animation-duration:12s;animation-delay:-8s;}
@keyframes leaf-sway{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-6px)}}
@keyframes flower-drift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-10px,-14px) rotate(20deg)}100%{transform:translate(8px,-6px) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.flora .fl{animation:none;} .trio.seq .tri .flora{opacity:.6;}}
.trio.seq .tri b .w{display:inline-block;will-change:opacity,transform;}
@media (prefers-reduced-motion:reduce){.trio.seq .tri b .w{opacity:1!important;transform:none!important;letter-spacing:0!important;}}

/* ---- stay connected page (7 Oct) ---- */
.calendly-inline-widget{width:100%;max-width:960px;border:1px solid var(--line);background:var(--cream);}
#book .stack{gap:24px;}
#list-section .connect{align-items:start;}
form.list{position:relative;}
/* step titles, larger (Ema, 7 Oct) */
.trio.seq .tri b{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;}
.trio.seq .tri span:not(.n){font-size:clamp(1.1rem,1.8vw,1.4rem);}
.trio.seq{min-height:clamp(340px,48vh,480px);}
/* step titles, larger again (Ema, 7 Oct) */
.trio.seq .tri b{font-size:clamp(2.8rem,7.4vw,6rem);line-height:.98;letter-spacing:-.025em;}
.trio.seq{grid-template-columns:minmax(0,1080px);min-height:clamp(380px,54vh,540px);}
.trio.seq .tri{gap:18px;}
/* the title's word spans were picking up the small copy size from ".tri span"; make them inherit the title */
.trio.seq .tri b .w{font-size:inherit;color:inherit;max-width:none;line-height:inherit;}