/* Concordia Members' Club. Landing page stylesheet.
   Brand v4 tokens (green / cream / gold), Tinos + Belleza + one Pinyon phrase.
   Square corners, hairlines, no shadows, no glass. */

@font-face{font-family:"Tinos";src:url("fonts/tinos-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tinos";src:url("fonts/tinos-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Belleza";src:url("fonts/belleza-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url("fonts/pinyon-script.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --green:#072414;
  --green-2:#0c2f1c;
  --cream:#F4F0E8;
  --cream-2:#EAE4D8;
  --gold:#B08C5C;
  --sage:#506252;
  --cream-muted:#CFC8B8;
  --line:rgba(244,240,232,.16);
  --line-dark:rgba(7,36,20,.16);
  --serif:"Tinos",Georgia,serif;
  --sans:"Belleza","Gill Sans",sans-serif;
  --script:"Pinyon Script",cursive;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:max(22px,calc((100% - 1180px) / 2));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--cream);color:var(--green);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--green)}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(38px,5.4vw,76px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase}
.h2{font-size:clamp(30px,3.4vw,50px);line-height:1.06;letter-spacing:.005em;text-transform:uppercase}
.h3{font-size:clamp(22px,2vw,27px);line-height:1.25}
h1 em,.h2 em,.h3 em{font-style:italic;color:var(--gold)}
.lead{font-family:var(--serif);font-size:clamp(23px,2.5vw,34px);line-height:1.3;max-width:24em}
p{max-width:38em}
.sub{font-size:clamp(17px,1.3vw,19px)}
.muted{color:var(--sage)}
.green .muted{color:var(--cream-muted)}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);display:block}
.script{font-family:var(--script);font-weight:400;line-height:1;color:var(--gold);font-size:clamp(36px,4.6vw,58px)}
.small{font-size:15px}

/* ---------- layout ---------- */
.wrap{padding-inline:var(--pad)}
.s{padding-block:clamp(76px,9vw,132px)}
.s.tight{padding-block:clamp(56px,6vw,88px)}
.green{background:var(--green);color:var(--cream)}
.cream{background:var(--cream);color:var(--green)}
.stack>*+*{margin-top:18px}
.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}.mt-4{margin-top:64px}
.head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:clamp(40px,5vw,72px);max-width:900px}

/* hairline rules that draw in */
.rule{height:1px;background:var(--line-dark);transform:scaleX(0);transform-origin:left center;transition:transform 1100ms var(--ease)}
.green .rule{background:var(--line)}
.rule.in{transform:scaleX(1)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-block;font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.3;letter-spacing:1.5px;text-transform:uppercase;padding:17px 32px 19px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease),transform .15s ease}
.btn::after{content:"";position:absolute;left:32px;right:32px;bottom:11px;height:1px;background:var(--gold);transition:left .5s var(--ease),right .5s var(--ease)}
.btn:hover::after{left:16px;right:16px}
.btn:active{transform:translateY(1px)}
.btn-green{background:var(--green);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--green)}
.btn-sm{padding:13px 24px 15px;font-size:13px}
.btn-sm::after{left:24px;right:24px;bottom:8px}
.btn-sm:hover::after{left:12px;right:12px}
.cta{margin-top:40px}
.link{position:relative;padding-bottom:3px;border-bottom:1px solid var(--gold);transition:color .3s}
.link:hover{color:var(--gold)}

/* ---------- header + sticky bar ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;height:clamp(72px,9vw,96px);color:var(--cream)}
.lockup{display:block}
.lockup img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:36px}
.nav a{font-size:15px;letter-spacing:.2px;position:relative;padding-bottom:4px}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .4s var(--ease)}
.nav a:hover::after{right:0}
.nav .btn{margin-left:8px}
.bar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;height:60px;background:var(--cream);color:var(--green);border-bottom:1px solid var(--line-dark);transform:translateY(-101%);transition:transform .5s var(--ease)}
.bar.show{transform:none}
.bar .lockup img{height:34px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--green);color:var(--cream);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1);animation:heroZoom 18s var(--ease) forwards}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.075)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,36,20,.55) 0%,rgba(7,36,20,.25) 45%,rgba(7,36,20,0) 75%),linear-gradient(to top,rgba(7,36,20,.92) 0%,rgba(7,36,20,.62) 32%,rgba(7,36,20,.18) 62%,rgba(7,36,20,.42) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:140px;padding-bottom:clamp(56px,8vw,104px)}
.hero-copy{max-width:920px}
.hero-copy>*{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
html.ready .hero-copy>*{opacity:1;transform:none}
html.ready .hero-copy>:nth-child(1){transition-delay:120ms}
html.ready .hero-copy>:nth-child(2){transition-delay:260ms}
html.ready .hero-copy>:nth-child(3){transition-delay:420ms}
html.ready .hero-copy>:nth-child(4){transition-delay:560ms}
html.ready .hero-copy>:nth-child(5){transition-delay:680ms}
.hero h1{margin-top:18px;max-width:14em}
.hero .sub{margin-top:26px;max-width:34em;color:var(--cream)}
.hero .cta{margin-top:36px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero .note{font-size:14px;color:var(--cream-muted);letter-spacing:.2px}

/* ---------- media + placeholders ---------- */
.media{position:relative;overflow:hidden;background:var(--green-2)}
.media img{width:100%;height:100%;object-fit:cover;will-change:transform;transition:filter .6s var(--ease)}
.media:hover img{filter:brightness(1.05)}
.media.ratio{aspect-ratio:var(--ar,16/9)}
.media.band{height:clamp(320px,56vh,640px)}
.ph{position:relative;display:grid;place-items:center;text-align:center;padding:24px;width:100%;height:100%;aspect-ratio:var(--ar,16/9);background:var(--green-2);border:1px solid var(--line)}
.cream .ph{background:var(--cream-2);border-color:var(--line-dark)}
.ph::before{content:"";position:absolute;inset:0;background:url("logo/crest-gold.svg") center/96px no-repeat;opacity:.14}
.ph span{position:relative;font-family:var(--sans);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-muted);line-height:1.7}
.cream .ph span{color:var(--sage)}
.ph em{display:block;font-family:var(--serif);font-style:italic;font-size:16px;text-transform:none;letter-spacing:0;margin-top:4px}
.media.band .ph{aspect-ratio:auto}
.ph.video::after{content:"";position:relative;width:0;height:0;border-left:16px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-top:14px}

/* ---------- who it is for ---------- */
.intro-grid{display:grid;grid-template-columns:1fr;gap:28px;max-width:900px}
.qualifier{border-left:1px solid var(--gold);padding-left:22px;max-width:36em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;padding-top:36px}
.stat-n{font-family:var(--serif);font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.01em}
.stat-l{margin-top:12px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage)}

/* ---------- acts ---------- */
.act-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,110px);padding-block:clamp(64px,8vw,112px)}
.act-l .h2{margin-top:16px}
.act-r p+p{margin-top:16px}
.proof{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark)}
.green .proof{border-top-color:var(--line)}
.proof-n{font-family:var(--serif);font-size:clamp(30px,3vw,42px);line-height:1}
.proof-l{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage)}
.green .proof-l{color:var(--cream-muted)}
.trips{margin-top:28px;border-top:1px solid var(--line-dark)}
.trips li{display:grid;grid-template-columns:1.2fr 1.4fr .9fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-dark);font-size:16px}
.trips li span:first-child{font-family:var(--serif);font-size:19px}
.trips li span:nth-child(2){color:var(--sage)}
.trips li span:last-child{text-align:right;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);align-self:center}

/* ---------- app ---------- */
.app-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.list{border-top:1px solid var(--line-dark);margin-top:34px}
.list li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line-dark)}
.list .n{font-family:var(--serif);font-size:20px;color:var(--gold)}
.phones{position:relative;width:100%;aspect-ratio:1/1;max-width:520px;margin-left:auto}
.phone{position:absolute;width:42%;aspect-ratio:9/19;background:var(--cream-2);border:1px solid var(--line-dark)}
.phone .ph{aspect-ratio:auto;border:0}
.phone.p1{left:2%;top:10%;transform:rotate(-5deg)}
.phone.p2{left:29%;top:0;z-index:2}
.phone.p3{left:56%;top:12%;transform:rotate(5deg)}

/* ---------- proof ---------- */
.journal{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:8px}
.journal .j1{grid-column:span 4}
.journal .j2{grid-column:span 8}
.journal .j3{grid-column:span 6}
.journal .j4{grid-column:span 6}
.quotes{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.quote{padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:18px}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.6vw,36px);line-height:1.25;max-width:26em}
.quote cite{font-style:normal;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.quote .tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-muted);border:1px solid var(--line);display:inline-block;padding:4px 9px;width:max-content}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.step{border-top:1px solid var(--line-dark);padding-top:22px}
.step .n{font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold)}
.step .h3{margin-top:18px}
.step p{margin-top:12px;font-size:17px}

/* ---------- objections ---------- */
.faq{border-top:1px solid var(--line)}
.faq li{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(20px,4vw,72px);padding:30px 0;border-bottom:1px solid var(--line)}
.faq .h3{max-width:14em}
.faq p{font-size:17px;color:var(--cream)}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.founder .media{--ar:4/5}
.sig{margin-top:30px}
.sig .name{font-size:17px}
.sig .role{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage);margin-top:4px}
.sig .script{margin-top:26px}

/* ---------- close ---------- */
.close{position:relative;min-height:84svh;display:flex;align-items:flex-end;color:var(--cream);background:var(--green);overflow:hidden}
.close .media{position:absolute;inset:0;height:auto}
.close .media img{object-position:50% 60%}
.close .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,36,20,.94) 0%,rgba(7,36,20,.55) 45%,rgba(7,36,20,.25) 100%)}
.close-inner{position:relative;z-index:2;width:100%;padding-block:clamp(64px,9vw,120px)}
.close .h2{max-width:14em}

/* ---------- footer ---------- */
.foot{background:var(--green);color:var(--cream);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-block:clamp(48px,6vw,80px)}
.foot .lockup img{height:44px}
.foot .k{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.foot li+li{margin-top:10px}
.foot a{font-size:16px}
.foot a:hover{color:var(--gold)}
.colophon{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 28px;border-top:1px solid var(--line);font-size:13px;color:var(--cream-muted);letter-spacing:.2px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 680ms var(--ease),transform 680ms var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>:nth-child(1){transition-delay:0ms}
.stagger.in>:nth-child(2){transition-delay:110ms}
.stagger.in>:nth-child(3){transition-delay:220ms}
.stagger.in>:nth-child(4){transition-delay:330ms}
.stagger.in>:nth-child(5){transition-delay:440ms}
.stagger.in>:nth-child(6){transition-delay:550ms}
.stagger.in>:nth-child(7){transition-delay:660ms}
.stagger.in>:nth-child(8){transition-delay:770ms}
.stagger[data-reveal]{opacity:1;transform:none}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],.stagger>*,.hero-copy>*{opacity:1!important;transform:none!important;transition:none!important}
  .rule{transform:none!important;transition:none!important}
  .hero-bg img{animation:none!important}
  .media img{transform:none!important}
  .bar{transition:none}
}
html.static [data-reveal],html.static .stagger>*,html.static .hero-copy>*{opacity:1!important;transform:none!important;transition:none!important}
html.static .rule{transform:none!important;transition:none!important}
html.static .hero-bg img{animation:none!important}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .nav a:not(.btn){display:none}
}
@media (max-width:900px){
  .act-grid{grid-template-columns:1fr;gap:28px}
  .app-grid{grid-template-columns:1fr}
  .phones{margin-left:0;max-width:440px}
  .founder{grid-template-columns:1fr}
  .founder .media{max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  body{font-size:17px}
  .lockup img{height:36px}
  .site-head{height:72px}
  .hero-inner{padding-top:110px}
  .hero-scrim{background:linear-gradient(to top,rgba(7,36,20,.95) 0%,rgba(7,36,20,.7) 38%,rgba(7,36,20,.25) 68%,rgba(7,36,20,.45) 100%)}
  .stats{grid-template-columns:1fr 1fr;gap:28px 18px}
  .journal .j1,.journal .j2,.journal .j3,.journal .j4{grid-column:span 12}
  .steps{grid-template-columns:1fr;gap:34px}
  .faq li{grid-template-columns:1fr;gap:12px}
  .trips li{grid-template-columns:1fr;gap:4px}
  .trips li span:last-child{text-align:left}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .colophon{flex-direction:column;gap:6px}
  .btn{padding:16px 26px 18px}
  .btn::after{left:26px;right:26px}
}
@media (max-width:420px){
  h1{font-size:clamp(34px,10.5vw,40px)}
  .hero .cta{gap:14px}
}

/* static mode (screenshots, ?static=1): viewport-height sections get a fixed height */
html.static .hero{min-height:820px}
html.static .close{min-height:600px}
@media (max-width:767px){html.static .hero{min-height:760px}html.static .close{min-height:560px}}

/* =====================================================================
   v2 (5 Nov 26, after Cal's review): globe section, member interviews,
   retreat films, passport stamps, stronger motion. Appended so it wins.
   ===================================================================== */

/* hairline colour follows the section background */
.green{--hair:var(--line)}
.cream{--hair:var(--line-dark)}
.proof,.trips,.trips li,.list,.list li,.step,.faq,.faq li,.quotes,.quote{border-color:var(--hair)}
.faq p{color:inherit}
.green .proof-l,.green .trips li span:nth-child(2),.green .sig .role{color:var(--cream-muted)}
.green .trips li span:first-child{color:var(--cream)}

/* stronger, more visible reveals */
[data-reveal]{transform:translateY(38px);transition-duration:950ms}
.stagger>*{transform:translateY(30px);transition-duration:850ms}
.stagger.in>:nth-child(2){transition-delay:130ms}
.stagger.in>:nth-child(3){transition-delay:260ms}
.stagger.in>:nth-child(4){transition-delay:390ms}
.stagger.in>:nth-child(5){transition-delay:520ms}

/* headlines rise from under a line */
.h2{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h2 .t{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.in .h2 .t,.stagger.in .h2 .t,.h2.in .t{transform:none}

/* images open like a curtain, then settle */
.media[data-reveal]{opacity:1;transform:none}
.media[data-reveal]::after{content:"";position:absolute;inset:0;z-index:2;background:var(--curtain,var(--cream));transform:scaleY(1);transform-origin:bottom center;transition:transform 1.2s var(--ease);pointer-events:none}
.green .media[data-reveal]::after,.map-s .media[data-reveal]::after{background:var(--green)}
.media[data-reveal] img,.media[data-reveal] video,.media[data-reveal] .ph{transform:scale(1.08);transition:transform 1.6s var(--ease)}
.media[data-reveal].in::after{transform:scaleY(0)}
.media[data-reveal].in img,.media[data-reveal].in video,.media[data-reveal].in .ph{transform:none}
.media video{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}

/* passport stamps */
.stamps{display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:22px;padding-bottom:clamp(56px,7vw,96px)}
.stamp{display:inline-flex;flex-direction:column;align-items:center;padding:10px 16px 9px;border:1.5px solid rgba(107,42,46,.78);outline:1px solid rgba(107,42,46,.32);outline-offset:3px;color:#6B2A2E;font-family:var(--serif);text-transform:uppercase;font-size:13px;letter-spacing:.1em;line-height:1.15;opacity:0;transform:rotate(var(--r,0deg)) scale(1.35);transition:transform .6s cubic-bezier(.2,1.35,.4,1),opacity .35s ease}
.stamp em{font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:1.5px;margin-top:4px;opacity:.8}
.stamps.in .stamp{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}
.stamps.in .stamp:nth-child(2){transition-delay:.08s}.stamps.in .stamp:nth-child(3){transition-delay:.16s}.stamps.in .stamp:nth-child(4){transition-delay:.24s}.stamps.in .stamp:nth-child(5){transition-delay:.32s}.stamps.in .stamp:nth-child(6){transition-delay:.4s}.stamps.in .stamp:nth-child(7){transition-delay:.48s}.stamps.in .stamp:nth-child(8){transition-delay:.56s}.stamps.in .stamp:nth-child(9){transition-delay:.64s}.stamps.in .stamp:nth-child(10){transition-delay:.72s}.stamps.in .stamp:nth-child(11){transition-delay:.8s}.stamps.in .stamp:nth-child(12){transition-delay:.88s}.stamps.in .stamp:nth-child(13){transition-delay:.96s}.stamps.in .stamp:nth-child(14){transition-delay:1.04s}
#experiences .act-grid{padding-bottom:clamp(40px,5vw,64px)}

/* ---------- the globe section ---------- */
.map-s{position:relative;overflow:hidden;color:var(--cream);--hair:var(--line);background:linear-gradient(to bottom,var(--cream) 0,#2E4536 22%,var(--green) 40%);padding:clamp(150px,20vw,260px) 0 clamp(90px,10vw,150px)}
.globe-col{position:absolute;top:50%;left:0;width:min(60vw,820px);aspect-ratio:1/1;transform:translate(-30%,-46%);z-index:0}
#globe{width:100%;height:100%;display:block}
.map-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px)}
.map-copy{max-width:560px}
.drum{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}
.drum-slot{position:relative;display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--cream-muted);font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.08;letter-spacing:.04em;text-transform:uppercase;transition:transform .8s var(--ease),font-size .7s var(--ease),color .45s ease}
.drum-slot::before{content:"";flex:none;width:7px;height:7px;background:var(--gold);opacity:0;transition:opacity .45s ease}
.drum-slot:hover{color:var(--cream)}
.drum-slot.is-active{color:var(--cream);font-size:clamp(32px,3.4vw,48px)}
.drum-slot.is-active::before{opacity:1}
.map-progress{height:1px;background:var(--line);margin:22px 0 28px;overflow:hidden}
.map-progress span{display:block;height:100%;width:0;background:var(--gold)}
.map-panels{position:relative}
.map-panel{position:absolute;inset:0 auto auto 0;width:100%;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.map-panel.is-active{position:relative;opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.map-panel .media{max-width:520px}
.map-panel .h3{margin-top:22px}
.map-panel p{margin-top:10px;color:var(--cream-muted)}
.map-panel .trips{margin-top:18px}
.map-panel .trips li{padding:11px 0}

/* ---------- films (proof) ---------- */
.journal{margin-top:8px}
.films{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,5vw,64px)}
.film{margin:0}
.film figcaption{margin-top:12px;font-family:var(--serif);font-size:18px}
.film figcaption em{font-style:italic;color:var(--gold)}
.yt{cursor:pointer;background:var(--green-2)}
.yt img{transition:transform 1.6s var(--ease),filter .5s ease}
.yt:hover img{transform:scale(1.03);filter:brightness(1.06)}
.yt .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.yt .play i{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--cream);background:rgba(7,36,20,.38);transition:background .35s ease,transform .5s var(--ease)}
.yt .play i::after{content:"";width:0;height:0;border-left:14px solid var(--cream);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.yt:hover .play i{background:rgba(176,140,92,.8);transform:scale(1.06)}
.yt:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.is-playing{cursor:default}

/* ---------- interviews ---------- */
.interviews{display:grid;gap:clamp(40px,6vw,88px)}
.interview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.interview.flip .media{order:2}
.interview-t .h3{font-size:clamp(24px,2.2vw,30px)}
.interview-t .meta{margin-top:8px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage)}
.interview-t .meta .link{letter-spacing:.2px;text-transform:none;font-size:14px;border-bottom-color:var(--gold)}
.interview-t blockquote{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.7vw,23px);line-height:1.4;max-width:30em}
.green .interview-t .meta{color:var(--cream-muted)}

/* ---------- static / reduced motion for the new pieces ---------- */
@media (prefers-reduced-motion:reduce){
  .media[data-reveal]::after{display:none!important}
  .media[data-reveal] img,.media[data-reveal] video,.media[data-reveal] .ph{transform:none!important;transition:none!important}
  .h2 .t{transform:none!important;transition:none!important}
  .stamp{opacity:1!important;transform:rotate(var(--r,0deg))!important;transition:none!important}
  .drum-slot,.map-panel{transition:none!important}
}
html.static .media[data-reveal]::after{display:none!important}
html.static .media[data-reveal] img,html.static .media[data-reveal] video,html.static .media[data-reveal] .ph{transform:none!important;transition:none!important}
html.static .h2 .t{transform:none!important;transition:none!important}
html.static .stamp{opacity:1!important;transform:rotate(var(--r,0deg))!important;transition:none!important}
html.static .drum-slot,html.static .map-panel{transition:none!important}

/* ---------- responsive for the new pieces ---------- */
@media (max-width:1100px){
  .films{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .map-s{padding-top:0;background:linear-gradient(to bottom,var(--cream) 0,#2E4536 10%,var(--green) 24%)}
  .globe-col{position:relative;top:auto;left:auto;transform:none;width:118vw;max-width:none;margin:-4vw 0 8px -38vw}
  .map-grid{grid-template-columns:1fr}
  .map-spacer{display:none}
  .map-copy{max-width:none;padding-top:8px}
  .interview{grid-template-columns:1fr;gap:20px}
  .interview.flip .media{order:0}
}
@media (max-width:767px){
  .films{grid-template-columns:1fr}
  .drum-slot.is-active{font-size:clamp(28px,8vw,36px)}
  .stamps{gap:12px 12px}
  .stamp{font-size:12px;padding:8px 12px 7px}
}
/* journal: three photographs, varied sizes */
.journal .j1{grid-column:span 3}.journal .j2{grid-column:span 6}.journal .j3{grid-column:span 3}
@media (max-width:767px){.journal .j1,.journal .j2,.journal .j3{grid-column:span 12}}

/* ---------- gallery (from the trips) ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:18px 16px;margin-top:22px}
.gallery .g{margin:0;grid-column:span var(--c,4)}
.gallery figcaption{margin-top:10px;font-family:var(--serif);font-size:15px;color:var(--cream-muted)}
.gallery figcaption em{font-style:italic;color:var(--gold)}
.gallery .media img{transition:transform 1.6s var(--ease),filter .5s ease}
.gallery .media:hover img{transform:scale(1.03)}
@media (max-width:900px){
  .gallery .g{grid-column:span 6}
  .gallery .g[style*="--c:7"],.gallery .g[style*="--c:6"]{grid-column:span 12}
}
@media (max-width:480px){
  .gallery .g[style*="--c:5"]{grid-column:span 12}
}

/* ---------- globe v3: app styling, drag, legend, trip cards from the app ---------- */
#globe{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#globe.is-dragging{cursor:grabbing}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-8px 0 26px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend .sw{width:10px;height:10px;display:inline-block;flex:none}
.legend .sw.going{background:#8a2f2a}.legend .sw.been{background:#B08C5C}.legend .sw.hub{background:#b8860b;border-radius:50%;box-shadow:0 0 0 3px rgba(176,140,92,.28)}
.legend .hint{color:var(--gold)}
.trip-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 14px;margin-top:20px}
.trip-card .media{aspect-ratio:4/3}
.trip-card .t{font-family:var(--serif);font-size:17px;line-height:1.2;margin-top:10px;color:var(--cream)}
.trip-card .m{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-muted);margin-top:5px;line-height:1.5}
.trip-card .m em{font-style:normal;color:var(--gold);display:block}
.hubs-row{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px;font-family:var(--serif);font-size:22px;color:var(--cream)}
.map-panel .media{max-width:none}
.stamps.in .stamp:nth-child(15){transition-delay:1.12s}.stamps.in .stamp:nth-child(16){transition-delay:1.2s}
@media (max-width:767px){.trip-cards{grid-template-columns:repeat(2,1fr)}}
/* the copy grid sits above the globe for stacking only; let pointer events through to the canvas */
.map-grid{pointer-events:none}
.map-copy{pointer-events:auto}

/* ---------- map section on cream, like the app's map page. No gradient. ---------- */
.map-s{background:var(--cream);color:var(--green);--hair:var(--line-dark);padding:clamp(80px,9vw,128px) 0 clamp(80px,9vw,128px);border-top:1px solid var(--line-dark)}
.globe-col{transform:translate(-30%,-50%)}
.map-s .eyebrow{color:var(--gold)}
.drum-slot{color:var(--sage)}
.drum-slot:hover,.drum-slot.is-active{color:var(--green)}
.map-progress{background:var(--line-dark)}
.legend{color:var(--sage)}
.map-panel p,.trip-card .m{color:var(--sage)}
.trip-card .t,.hubs-row,.map-panel .h3{color:var(--green)}
.map-s .media[data-reveal]::after{background:var(--cream)}
.map-s .media{background:var(--cream-2)}
#app{border-top:1px solid var(--line-dark)}
@media (max-width:900px){
  .map-s{padding-top:0;background:var(--cream)}
  .globe-col{transform:none;margin:-2vw 0 8px -38vw}
}

/* ---------- map tabs: obviously clickable, auto-plays with a gold progress line ---------- */
.map-title{margin-top:16px;color:var(--green)}
.map-title .t{transition:transform .7s var(--ease),opacity .5s ease}
.map-title.swap .t{transform:translateY(110%);opacity:0;transition:transform .25s ease-in,opacity .2s ease-in}
.tabs{display:flex;align-items:stretch;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:26px}
.tab{position:relative;flex:1 1 0;background:none;border:0;margin:0;padding:18px 16px 18px 0;text-align:left;cursor:pointer;display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage);transition:color .3s ease}
.tab .i{font-family:var(--serif);font-size:15px;letter-spacing:0;color:var(--gold)}
.tab:hover,.tab.is-active{color:var(--green)}
.tab .bar{position:absolute;left:0;right:16px;bottom:-1px;height:2px;background:transparent;transition:background .3s ease}
.tab.is-active .bar{background:rgba(176,140,92,.25)}
.tab .bar i{display:block;height:100%;width:0;background:var(--gold)}
.tab:focus-visible{outline:1px solid var(--gold);outline-offset:-4px}
.tab-nav{display:flex;align-items:center;gap:8px;padding-left:12px}
.arrow{width:42px;height:42px;border:1px solid var(--line-dark);background:none;color:var(--green);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .3s ease,color .3s ease}
.arrow:hover{background:var(--green);color:var(--cream)}
.arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.legend{margin-top:18px}
@media (max-width:600px){
  .tabs{flex-wrap:wrap;border-bottom:0}
  .tab{flex:1 1 100%;border-bottom:1px solid var(--hair);padding:14px 0}
  .tab .bar{right:0}
  .tab-nav{width:100%;padding:12px 0 0}
}
.tab{flex:0 1 auto;white-space:nowrap;padding-right:26px}
.tab-nav{margin-left:auto;padding-left:0}
@media (max-width:600px){.tab{flex:1 1 100%;white-space:normal;padding-right:0}}