:root{
  --logo-navy:#060529;
  --navy-2:#080738;
  --navy-3:#0a0944;
  --navy-4:#0c0b50;
  --paper:#f2f5f7;
  --muted:#aeb6ca;
  --muted-2:#858da9;
  --teal:#68d1ca;
  --teal-2:#a5e9e4;
  --line:rgba(218,225,242,.16);
  --max:1440px;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;background:var(--logo-navy)}
body{margin:0;background:var(--logo-navy);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.64}
a{color:inherit;text-underline-offset:.18em}
img{max-width:100%;display:block}

/* header: only the official horizontal logo, aligned right */
.site-header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  background:rgba(6,5,41,.91);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09)
}
.header-inner{height:82px;max-width:var(--max);margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.header-brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.header-logo{display:block;width:min(330px,43vw);height:auto}
.navlinks{display:flex;align-items:center;gap:10px;margin-left:auto}
.navlinks a{text-decoration:none;font-size:10px;letter-spacing:.025em;color:#dfe3ec;white-space:nowrap}
.navlinks a:hover{color:var(--teal)}

.nav-toggle{
  display:none;
  width:44px;height:44px;padding:10px;
  border:1px solid rgba(104,209,202,.34);border-radius:3px;
  background:rgba(6,5,41,.35);color:#e8edf5;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  flex:0 0 auto
}
.nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile navigation: pure CSS :target, so it also works in iOS local-file preview without JavaScript. */
.mobile-menu-trigger{
  display:none;margin-left:auto;flex:0 0 auto;
  width:44px;height:44px;padding:10px;
  border:1px solid rgba(104,209,202,.34);border-radius:3px;
  background:rgba(6,5,41,.35);color:#e8edf5;text-decoration:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px
}
.mobile-menu-trigger span{display:block;width:20px;height:1.5px;background:currentColor}
.mobile-menu-panel{
  display:none;position:fixed;top:70px;left:18px;right:18px;z-index:1000;
  flex-direction:column;align-items:stretch;gap:0;
  max-height:calc(100svh - 88px);overflow:auto;padding:10px 14px;
  background:rgba(6,5,41,.99);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.42);backdrop-filter:blur(14px)
}
.mobile-menu-panel:target{display:flex}
.mobile-menu-panel a{
  display:block;width:100%;padding:10px 2px;text-decoration:none;
  font-size:13px;letter-spacing:.02em;color:#dfe3ec;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.mobile-menu-panel a:last-child{border-bottom:0}
.mobile-menu-panel a:hover,.mobile-menu-panel a:focus{color:var(--teal)}
.mobile-menu-close{
  position:sticky;top:0;align-self:flex-end;width:auto !important;
  padding:4px 8px 8px !important;border-bottom:0 !important;
  font-size:24px !important;line-height:1;color:#dfe3ec !important
}


/* common */
.inner{max-width:var(--max);margin:auto;position:relative;z-index:2}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h1{font-family:var(--sans);font-size:clamp(70px,9vw,124px);font-weight:800;letter-spacing:.035em;line-height:.86;margin:0}
h2{font-size:clamp(39px,5vw,62px);line-height:1.05;margin:0 0 26px}
h3{font-size:clamp(25px,3vw,37px);line-height:1.14;margin:0 0 18px}
p{margin:0 0 1.25em}
.lead{font-size:20px;color:#e0e4ef;max-width:840px}
.muted{color:var(--muted)}
.section,.section.alt,.section.deep,.section.deeper{padding:104px 20px;border-top:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;background:var(--logo-navy)}
.prose{max-width:810px}
.prose p{color:var(--muted)}
.prose strong{color:#f0f3fa}

/* hero: official symbol on the left, approved copy on the right */
.hero{
  min-height:820px;padding:142px 20px 78px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 22% 44%,rgba(104,209,202,.09),transparent 26%),
    linear-gradient(135deg,#080737 0%,#060529 53%,#080738 100%)
}
.hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(104,209,202,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(104,209,202,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000,transparent 93%)
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--max);margin:auto;
  display:grid;grid-template-columns:1.18fr .82fr;gap:64px;align-items:center
}
.hero-symbol{
  min-height:560px;position:relative;display:grid;place-items:center
}
.hero-symbol:before,.hero-symbol:after{
  content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(104,209,202,.28)
}
.hero-symbol:before{width:520px;height:520px}
.hero-symbol:after{width:390px;height:390px;border-style:dashed}
.hero-symbol img{
  width:min(250px,54%);height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 0 28px rgba(255,255,255,.05))
}
.hero-copy{padding:50px 0}
.hero-copy .society-name{
  font-family:var(--serif);font-size:clamp(25px,3.2vw,40px);
  line-height:1.12;margin:24px 0 18px;color:#eef2f6;max-width:690px
}
.hero-line{height:2px;width:42px;background:var(--teal);margin:0 0 22px}
.hero-tagline{
  font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.44;
  color:#dfe3ee;max-width:690px;margin:0
}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 18px;text-decoration:none;border-radius:3px;font-weight:700;font-size:12px
}
.btn.primary{background:linear-gradient(90deg,#4cb7b2,#72d4ce);color:#050421}
.btn.secondary{border:1px solid rgba(154,221,216,.65);color:#edf5f5}

/* sticky photographic scenes — text remains completely free */
.photo-scene{position:relative;background:#050423;isolation:isolate;z-index:1}
.photo-sticky{
  position:sticky;top:82px;height:calc(100vh - 82px);overflow:hidden
}
.photo-sticky img{width:100%;height:100%;object-fit:cover}
.photo-sticky.outer img{filter:saturate(.78) contrast(1.06) brightness(.57)}
.photo-sticky.how img{filter:grayscale(1) contrast(1.12) brightness(.58)}
.photo-sticky.tech-presence img{filter:saturate(.80) contrast(1.06) brightness(.54)}
.presence-phase{position:relative;background:var(--logo-navy)}
.presence-copy h3{font-size:clamp(34px,4vw,52px)}
.photo-sticky.apollo img{filter:grayscale(1) contrast(1.12) brightness(.58)}
.photo-sticky.mars img{filter:saturate(.70) contrast(1.05) brightness(.52)}
.photo-sticky.map img{filter:saturate(.60) contrast(1.05) brightness(.47)}
.photo-sticky:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,5,41,.90) 0%,rgba(6,5,41,.68) 38%,rgba(6,5,41,.22) 72%,rgba(6,5,41,.16) 100%),
    linear-gradient(0deg,rgba(6,5,41,.55),transparent 43%,rgba(6,5,41,.25))
}
.photo-sticky.right-shade:after{
  background:
    linear-gradient(270deg,rgba(6,5,41,.91) 0%,rgba(6,5,41,.69) 38%,rgba(6,5,41,.20) 72%,rgba(6,5,41,.15) 100%),
    linear-gradient(0deg,rgba(6,5,41,.52),transparent 43%,rgba(6,5,41,.22))
}
.photo-grid{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(104,209,202,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(104,209,202,.045) 1px,transparent 1px);
  background-size:90px 90px
}
.photo-credit{
  position:absolute;right:28px;bottom:22px;z-index:4;
  font-size:10px;color:#dce1ed;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.75)
}
.scroll-layer{
  position:relative;z-index:6;margin-top:calc(-100vh + 82px);
  padding:16vh 0 18vh
}
.scroll-inner{width:min(calc(100% - 56px),var(--max));margin:auto}
.free-copy{
  width:min(670px,57vw);margin:0 0 30vh;
  color:#f5f7fb;text-shadow:0 2px 15px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.8)
}
.free-copy.right{margin-left:auto}
.free-copy:last-child{margin-bottom:7vh}
.free-copy h2,.free-copy h3{color:#fff}
.free-copy p{
  font-size:clamp(18px,1.48vw,21px);line-height:1.55;
  color:#e5e9f2;max-width:660px
}
.how-copy{width:min(940px,78vw)}
.how-copy h2{white-space:nowrap}
.how-copy p{max-width:900px}
.key-term{color:var(--teal-2);font-weight:700}
.free-copy a{color:var(--teal-2);font-weight:700}

/* Outer-space paragraph spacing: between V5 and the earlier looser version */
.outer-copy p:first-of-type{margin-bottom:1.05em}
.outer-copy p:last-of-type{margin-bottom:0}

/* specific sequence spacing */
.apollo-sequence .how-place{margin-top:18vh}
.apollo-sequence .how-place p{font-size:clamp(17px,1.34vw,20px)}
.definition-closing{
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(165,233,228,.42);
  font-family:var(--serif);font-size:clamp(21px,2vw,28px)!important;
  line-height:1.42!important;color:#fff!important
}

/* What we look at cards */
.quick-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:46px
}
.quick-card{
  min-height:220px;padding:27px 24px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.iconline{width:56px;height:56px;margin-bottom:27px;color:var(--teal)}
.iconline svg{width:100%;height:100%}
.quick-card h3{
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.25;margin:0 0 10px
}
.quick-card p{font-size:13px;line-height:1.52;color:#949bb2;margin:0}

/* detailed USGS sequence */
.theme-free{min-height:56vh;display:flex;flex-direction:column;justify-content:center}
.theme-free h3{font-size:clamp(38px,5vw,66px)}
.theme-free p{font-size:clamp(17px,1.34vw,20px)}
.detailed-sequence .free-copy{margin-bottom:25vh}

/* merged Why a society + The Society */
.society-cover-tail{
  height:calc(100vh - 82px);
  pointer-events:none
}
.society-section{
  position:relative;
  overflow:hidden;
  z-index:50;
  margin-top:calc(82px - 100vh);
  min-height:900px;
  background:
    radial-gradient(circle at 24% 50%,rgba(104,209,202,.055),transparent 34%),
    var(--logo-navy)
}

/* Full-section EXOGEO symbol + orbital field */
.society-orbit-bg{
  position:absolute;
  left:47%;
  top:50%;
  width:min(980px,72vw);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:.22
}
.society-orbit-bg .society-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(104,209,202,.18)
}
.society-orbit-bg .ring-1{width:94%;height:94%}
.society-orbit-bg .ring-2{
  width:76%;height:76%;
  border-style:dashed;
  border-color:rgba(104,209,202,.20)
}
.society-orbit-bg .ring-3{width:57%;height:57%}
.society-orbit-bg .ring-4{
  width:38%;height:38%;
  border-style:dashed;
  border-color:rgba(104,209,202,.22)
}
.society-orbit-bg:before,
.society-orbit-bg:after{
  content:"";
  position:absolute;
  background:rgba(104,209,202,.10)
}
.society-orbit-bg:before{width:100%;height:1px}
.society-orbit-bg:after{width:1px;height:100%}
.society-orbit-bg img{
  width:56%;
  height:auto;
  position:relative;
  z-index:2;
  opacity:.52;
  filter:drop-shadow(0 0 46px rgba(255,255,255,.045))
}
.society-merged{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:72px;
  align-items:start
}
.society-merged .left-note{
  position:sticky;
  top:126px;
  min-height:560px;
  display:flex;
  align-items:center
}
.society-merged .left-note h2{
  font-size:clamp(39px,5vw,62px);
  line-height:1.05;
  margin:0;
  color:#eef1f7;
  max-width:440px;
  text-shadow:0 2px 18px rgba(6,5,41,.82)
}
.society-merged .body{
  position:relative;
  padding:18px 0 26px
}
.society-merged .body p{
  font-size:clamp(18px,1.48vw,21px);
  line-height:1.55;
  color:#e5e9f2;
  max-width:780px
}

/* Vision/Mission */



/* Vision & Mission */
.vision-section{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.008),rgba(255,255,255,0)),
    var(--logo-navy)
}
.vision-head{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  align-items:start
}
.vision-head>h2{
  font-size:clamp(39px,5vw,62px);
  line-height:1.05;
  margin:0;
  color:#eef1f7
}
.vm-intro{
  max-width:850px;
  margin:0
}
.vm-intro p{
  font-size:clamp(18px,1.48vw,21px);
  line-height:1.55;
  color:#e5e9f2;
  margin-top:0
}
.vm-intro p+p{margin-top:20px}

.vm-split{
  display:grid;
  grid-template-columns:25% 75%;
  margin-top:72px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.vision-block,.mission-block{
  position:relative;
  padding:44px 28px 48px 0
}
.mission-block{
  padding-left:30px;
  padding-right:0;
  border-left:1px solid var(--line)
}
.vm-icon{
  width:72px;
  height:72px;
  color:var(--teal);
  opacity:.92;
  margin-bottom:22px
}
.vm-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round
}
.vm-label{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.18;
  font-weight:650;
  color:#eef1f7;
  margin-bottom:18px
}
.vision-statement{
  font-family:var(--serif);
  font-size:clamp(21px,1.85vw,25px);
  line-height:1.42;
  color:#f0f2f8;
  max-width:500px;
  margin:0
}
.mission-lead{
  font-size:clamp(20px,1.55vw,22px);
  line-height:1.5;
  color:#eef1f7;
  margin:0 0 22px
}
.mission-block ul{
  margin:0;
  padding-left:20px;
  max-width:none
}
.mission-block li{
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.52;
  color:#d4d9e5;
  margin:0 0 13px
}
.mission-block li::marker{color:var(--teal)}

.society-principles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:34px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.principle{
  min-height:154px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:15px;
  text-align:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 16px
}
.principle-icon{
  width:50px;height:50px;
  color:var(--teal);
  opacity:.88
}
.principle-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.principle span{
  font-family:var(--sans);
  font-size:clamp(15px,1.12vw,16.5px);
  line-height:1.48;
  color:#d9deea
}



/* The Quadruple Filter */
.filters-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(104,209,202,.05), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)),
    var(--logo-navy)
}
.filters-intro{
  max-width:920px;
  margin-top:24px;
  font-size:clamp(18px,1.48vw,21px);
  line-height:1.55;
  color:#e5e9f2;
  position:relative;
  z-index:2
}
.filters-diagram{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22
}
.f-axis,.f-diag{
  position:absolute;
  background:transparent
}
.f-axis.h{
  left:14%;
  right:14%;
  top:52%;
  border-top:1px dashed rgba(165,233,228,.32)
}
.f-axis.v{
  top:18%;
  bottom:18%;
  left:50%;
  border-left:1px dashed rgba(165,233,228,.32)
}
.f-diag.d1{
  left:22%;
  top:23%;
  width:56%;
  transform:rotate(31deg);
  border-top:1px dashed rgba(165,233,228,.24)
}
.f-diag.d2{
  left:22%;
  top:23%;
  width:56%;
  transform:rotate(-31deg);
  border-top:1px dashed rgba(165,233,228,.24)
}
.f-center{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:rgba(238,241,247,.72)
}
.filters-grid{
  position:relative;
  z-index:2;
  margin-top:42px
}
.filters-grid .quick-card{
  background:rgba(8,6,48,.56)
}
.filters-grid .quick-card h3{
  min-height:44px
}


/* Membership */
.join-copy{
  max-width:980px;
  margin-top:24px
}
.join-copy p{
  font-size:clamp(18px,1.48vw,21px);
  line-height:1.55;
  color:#e5e9f2;
  margin:0 0 20px
}

.membership-scheme{
  display:grid;
  grid-template-columns:1.15fr repeat(5,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  margin-top:44px;
  margin-bottom:58px
}
.membership-intro-card,
.member-card{
  min-height:228px;
  padding:28px 22px 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.membership-intro-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  padding-top:24px
}
.membership-intro-icon,
.member-icon{
  width:52px;
  height:52px;
  color:var(--teal);
  opacity:.9;
  margin-bottom:18px
}
.membership-intro-icon svg,
.member-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.membership-intro-card h3{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.18;
  font-weight:650;
  color:#eef1f7;
  margin:0
}
.member-card h4{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.2;
  font-weight:600;
  color:#eef1f7;
  margin:0 0 12px
}
.member-card p{
  font-family:var(--sans);
  font-size:clamp(15px,1.12vw,16.5px);
  line-height:1.48;
  color:#aeb5c8;
  margin:0
}
#application h3{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.18;
  font-weight:650;
  color:#eef1f7;
  margin:0 0 26px
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:940px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{
  font-size:14px;
  line-height:1.35;
  letter-spacing:.03em;
  color:#b8bfd0
}
input,select,textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  background:#090838;
  color:#edf0f8;
  padding:14px 15px;
  border-radius:3px;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.4;
  outline:none
}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(104,209,202,.65)}
.form-note{font-size:13px;line-height:1.45;color:#8f97ad;grid-column:1/-1}



.privacy-disclosure{
  max-width:940px;
  margin-top:2px;
  color:#8f97ad
}
.privacy-disclosure summary{
  cursor:pointer;
  width:max-content;
  list-style:none;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.035em;
  color:#9ea6bb
}
.privacy-disclosure summary::-webkit-details-marker{display:none}
.privacy-disclosure summary:after{
  content:" +";
  color:var(--teal)
}
.privacy-disclosure[open] summary:after{content:" –"}
.privacy-copy{
  margin-top:12px;
  max-width:880px;
  font-size:13px;
  line-height:1.58;
  color:#a6aec0
}
.privacy-copy p{margin:0 0 11px}
.privacy-copy strong{color:#dfe4ef;font-weight:650}
.privacy-copy a{color:var(--teal);text-decoration:none}
.privacy-copy a:hover{text-decoration:underline}


.contact-social-strip{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:70px;
  margin-top:64px;
  padding-top:46px;
  border-top:1px solid var(--line)
}
.contact-side h3,
.social-side h3{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.18;
  font-weight:650;
  color:#eef1f7;
  margin:0 0 24px
}
.contact-name-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 24px
}
.contact-name{
  max-width:none;
  white-space:nowrap;
  font-size:16px;
  line-height:1.5;
  color:#d3d8e4;
  margin:0
}
.contact-row{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  margin:13px 0;
  color:#c5cbd9;
  text-decoration:none;
  font-size:15px
}
.contact-row:hover{color:var(--teal)}
.contact-icon{
  width:24px;
  height:24px;
  color:var(--teal);
  flex:0 0 auto
}
.contact-icon svg,
.social-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.social-side{
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.social-links{
  display:flex;
  gap:12px;
  margin-bottom:30px
}
.social-icon{
  width:46px;
  height:46px;
  border:1px solid rgba(104,209,202,.42);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--teal);
  text-decoration:none;
  padding:11px
}
.social-icon:hover{
  border-color:rgba(104,209,202,.78);
  background:rgba(104,209,202,.06)
}
.back-top{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(154,221,216,.52);
  border-radius:3px;
  color:#e5e9f2;
  text-decoration:none;
  font-size:13px;
  font-weight:650
}
.back-top:hover{
  color:var(--teal);
  border-color:var(--teal)
}

/* Footer */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:30px 20px;color:#858ca3;font-size:12px;line-height:1.5;background:#04031e
}
.footer-inner{
  max-width:var(--max);margin:auto;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap
}

/* Responsive */
@media(max-width:930px){
  .site-header{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:0 !important;left:auto;right:auto;
    z-index:2000;
    width:100%;
  }
  .header-inner{position:relative}
  .hero{padding-top:60px}
  .nav-toggle{display:none}
  .navlinks{display:none}
  .mobile-menu-trigger{display:flex}
  .hero-inner,.presence-layout,.society-merged{grid-template-columns:1fr}
  .hero-symbol{min-height:400px}.hero-symbol:before{width:390px;height:390px}.hero-symbol:after{width:290px;height:290px}
  .hero-symbol img{width:min(205px,50%)}
  .quick-grid{grid-template-columns:1fr 1fr}
  .vision-head{grid-template-columns:1fr;gap:28px}.vm-split{grid-template-columns:1fr}.mission-block{border-left:0;border-top:1px solid var(--line);padding-left:0}.society-principles{grid-template-columns:1fr 1fr}
  .membership-scheme{grid-template-columns:1fr 1fr}
  .free-copy,.free-copy.right{width:min(760px,82vw);margin-left:auto;margin-right:auto}
  .how-copy{width:min(760px,82vw)}
  .how-copy h2{white-space:normal}
  .how-copy p{max-width:760px}
  .society-merged .left-note{position:relative;top:auto}
}
@media(max-width:640px){
  html{scroll-padding-top:78px}
  .header-inner{height:70px;padding:0 18px}.header-logo{width:min(245px,67vw)}
  .hero,.section{padding-left:18px;padding-right:18px}
  .hero{padding-top:36px;min-height:auto}
  .hero-inner{gap:12px}.hero-symbol{min-height:300px;order:0}.hero-copy{order:1;padding:20px 0 48px}
  .hero-symbol:before{width:270px;height:270px}.hero-symbol:after{width:210px;height:210px}
  .hero-symbol img{width:145px}
  h1{font-size:64px}.hero-copy .society-name{font-size:27px}.hero-tagline{font-size:19px}
  /* Keep photographic scrollytelling active in portrait mobile. */
  .photo-sticky{position:sticky;top:70px;height:calc(100svh - 70px);min-height:430px}
  .scroll-layer{margin-top:calc(-100svh + 70px);padding:12svh 0 14svh;background:transparent}
  .scroll-inner{width:calc(100% - 32px)}
  .free-copy,.free-copy.right{
    width:auto;max-width:680px;margin:0 0 28svh;padding:0 4px;background:transparent;
    text-shadow:0 2px 15px rgba(0,0,0,.78),0 1px 2px rgba(0,0,0,.9)
  }
  .free-copy:last-child{margin-bottom:9svh}
  .free-copy h2{font-size:clamp(36px,10vw,48px);line-height:1.04}
  .free-copy h3{font-size:clamp(30px,8vw,40px)}
  .free-copy p{font-size:clamp(16px,4.35vw,18px);line-height:1.52;color:#eef1f7}
  .how-copy,.exogeo-copy,.detailed-sequence .theme-free{width:auto;max-width:none}
  .apollo-sequence .how-place{margin-top:0}
  .detailed-sequence .free-copy{margin-bottom:22svh}
  .theme-free{min-height:auto}
  .section{padding-top:78px;padding-bottom:78px}
  .quick-grid,.member-grid,.form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .vm-card{min-height:auto}
  .presence-layout{gap:16px}.symbol-watermark{min-height:260px}
  .closing{margin:52px 0}
}

/* Image-over-image cover transitions for the opening photographic sequence.
   A real spacer extends the previous sticky scene while the next scene,
   with a higher stacking level, rises over it from below. */
:root{--scene-cover:calc(100vh - 82px)}
.cover-tail{height:var(--scene-cover);pointer-events:none}
#outer-space{z-index:10}
#how-place{z-index:20;margin-top:calc(82px - 100vh)}
#exogeography{z-index:30;margin-top:calc(82px - 100vh)}

@media(max-width:640px){
  :root{--scene-cover:calc(100svh - 70px)}
  .cover-tail{display:block;height:var(--scene-cover)}
  #how-place,#exogeography{margin-top:calc(70px - 100svh)}
}


/* What exogeography is — Apollo 17 human/environment interaction */
.photo-sticky.exogeo-human img{
  filter:saturate(.78) contrast(1.08) brightness(.54);
  transform:translateX(-8%) scale(1.10);
  transform-origin:center center
}
.exogeo-copy{width:min(760px,63vw)}
.exogeo-copy p{max-width:740px}
@media(max-width:930px){
  .exogeo-copy{width:min(760px,82vw)}
  .exogeo-copy p{max-width:760px}
}
@media(max-width:640px){
  .photo-sticky.exogeo-human img{transform:none}
}


/* What we look at — transition from Exogeography */
.what-cover-tail{height:calc(100vh - 82px);pointer-events:none}
#what-we-look-at{
  z-index:40;
  margin-top:calc(82px - 100vh);
  background:var(--logo-navy)
}
.detailed-sequence{z-index:40;margin-top:0}

/* Compact overview cards */
.quick-card{
  min-height:242px;
  padding:28px 22px 26px
}
.quick-card h3{
  font-size:18px;
  line-height:1.2;
  margin-bottom:12px
}
.quick-card p{
  font-size:clamp(15px,1.12vw,16.5px);
  line-height:1.48;
  color:#aeb5c8
}

/* Detailed sequence */
.detailed-sequence .theme-free{
  width:min(710px,60vw);
  min-height:43vh
}
.detailed-sequence .theme-free p{
  max-width:700px
}
.detailed-sequence .free-copy{
  margin-bottom:6vh
}
.detailed-sequence .free-copy:last-child{
  margin-bottom:2vh
}

@media(max-width:930px){
  .quick-card{min-height:auto}
  .quick-card p{font-size:16px}
}
@media(max-width:640px){
  .what-cover-tail{display:block;height:calc(100svh - 70px)}
  #what-we-look-at{margin-top:calc(70px - 100svh)}
  .detailed-sequence .theme-free{width:auto}
}





/* How a space becomes a place — lunar map aligned to the user's reference direction */
.photo-sticky.lunar-reference-map img{
  object-position:center center;
  filter:saturate(.88) contrast(1.03) brightness(.64)
}
.how-toponyms{
  position:absolute;
  inset:0;
  pointer-events:none
}
.how-toponyms .topolabel{
  position:absolute;
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(11px,.84vw,13px);
  line-height:1.12;
  letter-spacing:.08em;
  color:#eef5ff;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(5,185,226,.18)
}
.how-toponyms .tb,
.how-toponyms .tranquillitatis{
  text-transform:uppercase
}
.how-toponyms .topolabel::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:28px;
  height:1px;
  margin-left:8px;
  background:rgba(238,245,255,.72)
}
.how-toponyms .serenitatis{left:45%; top:24%}
.how-toponyms .tranquillitatis{left:37%; top:47%}
.how-toponyms .asperitatis{left:64%; top:62%}
.how-toponyms .crisium{left:74%; top:26%}
.how-toponyms .tb{left:30%; top:59%}
@media(max-width:640px){
  .how-toponyms .topolabel{font-size:10.5px}
  .how-toponyms .topolabel::after{width:18px}
}


@media(max-width:930px){
  .society-orbit-bg{
    left:46%;
    width:820px;
    opacity:.18
  }
  .society-merged .left-note{min-height:auto}
}
@media(max-width:640px){
  .society-cover-tail{display:block;height:calc(100svh - 70px)}
  .society-section{
    margin-top:calc(70px - 100svh);
    min-height:auto
  }
  .society-orbit-bg{
    left:50%;
    top:260px;
    width:560px;
    transform:translateX(-50%);
    opacity:.13
  }
  .society-orbit-bg img{width:40%}
}


/* Align Presence without people with main section-title scale */
.presence-copy h3{
  font-size:clamp(39px,5vw,62px);
  line-height:1.05;
  margin-bottom:22px;
  color:#fff
}


@media(max-width:640px){
  .vision-head{gap:22px}
  .vm-split{margin-top:46px}
  .vision-block,.mission-block{padding:32px 0}
  .vm-icon{width:62px;height:62px}
  .society-principles{grid-template-columns:1fr 1fr;margin-top:26px}
  .principle{min-height:132px}
}


@media(max-width:930px){
  .membership-scheme{grid-template-columns:1fr 1fr 1fr}
  .membership-intro-card{grid-column:1/-1;min-height:auto}
}
@media(max-width:640px){
  .membership-scheme{grid-template-columns:1fr 1fr;margin-bottom:40px}
  .membership-intro-card{grid-column:1/-1}
  .membership-intro-card h3{font-size:clamp(20px,5.5vw,25px)}
}


@media(max-width:930px){
  .filters-intro{max-width:100%}
  .f-axis.h{left:8%;right:8%}
  .f-diag.d1,.f-diag.d2{left:10%;width:80%}
}
@media(max-width:640px){
  .filters-diagram{display:none}
}


@media(max-width:930px){
  .contact-social-strip{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:640px){
  .contact-social-strip{grid-template-columns:1fr;gap:38px;margin-top:48px;padding-top:36px}
  .contact-row{width:auto}
}


@media(max-width:640px){
  .contact-name-row{align-items:flex-start}.contact-name{white-space:normal}
}


/* V1.8 refinements: stronger header identity and tighter What we look at sequence. */
.header-logo{
  width:min(370px,46vw);
}
.detailed-sequence .theme-free{
  min-height:36vh;
}
.detailed-sequence .free-copy{
  margin-bottom:3vh;
}
.detailed-sequence .free-copy:last-child{
  margin-bottom:0;
}

/* Give the enlarged institutional logo room before the full desktop menu becomes cramped. */
@media(max-width:1260px) and (min-width:931px){
  .navlinks{display:none}
  .mobile-menu-trigger{display:flex}
  .mobile-menu-panel{top:82px}
}

/* On phones, enlarge the full logo/name without increasing the 70px header height. */
@media(max-width:640px){
  .header-inner{gap:12px}
  .header-logo{
    width:min(270px,calc(100vw - 102px));
  }
  .detailed-sequence .theme-free{
    min-height:auto;
  }
  .detailed-sequence .free-copy{
    margin-bottom:7svh;
  }
  .detailed-sequence .free-copy:last-child{
    margin-bottom:2svh;
  }
}


/* V1.9: slightly stronger header identity. */
.header-logo{
  width:min(410px,50vw);
}
@media(max-width:640px){
  .header-logo{
    width:min(292px,calc(100vw - 92px));
  }
}


/* V2.0: improve desktop navigation legibility without altering mobile dropdown. */
.navlinks{
  gap:13px;
}
.navlinks a{
  font-size:13.5px;
  line-height:1.2;
  letter-spacing:.01em;
}



/* Production form additions */
.form-status{
  grid-column:1/-1;
  margin:0 0 22px;
  padding:14px 16px;
  border:1px solid rgba(104,209,202,.32);
  background:rgba(104,209,202,.07);
  color:#edf5f5;
  font-size:14px;
  line-height:1.5;
}
.form-status.error{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
}
.hp-field{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* EXOGEO symbol statement — optional overlay, no JavaScript */
.hero-symbol-info-link{
  position:absolute;
  left:50%;
  bottom:38px;
  transform:translateX(-50%);
  z-index:4;
  white-space:nowrap;
  font-size:12px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(104,209,202,.78);
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease;
}
.hero-symbol-info-link:hover,
.hero-symbol-info-link:focus-visible{
  color:var(--teal);
}

.logo-modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.logo-modal:target{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.logo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,3,24,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.logo-modal-card{
  position:relative;
  z-index:1;
  width:min(780px,94vw);
  max-height:min(84vh,860px);
  overflow:auto;
  padding:46px 54px 52px;
  border:1px solid rgba(104,209,202,.24);
  background:#08072f;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  color:#e9eef3;
  scrollbar-width:thin;
}
.logo-modal-close{
  position:absolute;
  top:18px;
  right:20px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  font-size:25px;
  line-height:1;
}
.logo-modal-mark{
  width:min(240px,42vw);
  margin:0 auto 26px;
}
.logo-modal-mark img{
  display:block;
  width:100%;
  height:auto;
}
.logo-modal-card .eyebrow{
  margin:0 0 10px;
  color:var(--teal);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.logo-modal-card h2{
  margin:0 48px 30px 0;
  font-family:var(--serif);
  font-size:clamp(34px,5vw,54px);
  line-height:1.02;
  color:#fff;
}
.logo-modal-card h3{
  margin:34px 0 12px;
  font-size:15px;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal);
}
.logo-modal-card p{
  max-width:68ch;
  margin:0 0 16px;
  font-size:16px;
  line-height:1.72;
  color:#d6dde5;
}
.logo-modal-card strong{
  color:#fff;
  font-weight:650;
}

@media(max-width:930px){
  .hero-symbol-info-link{
    bottom:24px;
  }
}

@media(max-width:640px){
  .hero-symbol-info-link{
    bottom:8px;
    font-size:10px;
    letter-spacing:.07em;
  }
  .logo-modal{
    padding:0;
    align-items:stretch;
  }
  .logo-modal-card{
    width:100%;
    max-height:100svh;
    min-height:100svh;
    padding:68px 22px 42px;
    border:0;
  }
  .logo-modal-close{
    position:fixed;
    top:18px;
    right:18px;
    z-index:2;
    background:#08072f;
  }
  .logo-modal-mark{
    width:min(190px,50vw);
    margin-bottom:24px;
  }
  .logo-modal-card h2{
    margin-right:42px;
  }
  .logo-modal-card p{
    font-size:15px;
    line-height:1.68;
  }
}

/* Privacy & Cookies link and modal */
.footer-legal-link{
  color:#aeb5c7;
  text-decoration:none;
  letter-spacing:.02em;
}
.footer-legal-link:hover,
.footer-legal-link:focus-visible{
  color:var(--teal);
  text-decoration:underline;
}
.privacy-modal .logo-modal-card a:not(.logo-modal-close){
  color:var(--teal);
  text-decoration:none;
}
.privacy-modal .logo-modal-card a:not(.logo-modal-close):hover{
  text-decoration:underline;
}
@media(max-width:640px){
  .footer-inner{
    align-items:flex-start;
  }
}

/* Institutional status note */
.hero-status{
  max-width:690px;
  margin:18px 0 0;
  font-size:14px;
  line-height:1.55;
  color:#aeb5c7;
}
@media(max-width:640px){
  .hero-status{
    margin-top:16px;
    font-size:13px;
    line-height:1.5;
  }
}

/* Final expression-of-interest / consent additions */
.form-scope-note{
  max-width:940px;
  margin:-2px 0 20px;
  font-size:14px;
  line-height:1.5;
  color:#9ea6bb;
}
.consent-field{
  margin-top:4px;
}
.consent-label{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:13px;
  line-height:1.55;
  letter-spacing:0;
  color:#aeb5c7;
  cursor:pointer;
}
.consent-label input[type="checkbox"]{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:2px 0 0;
  padding:0;
  accent-color:#68d1ca;
}
.consent-label a{
  color:var(--teal);
  text-decoration:none;
}
.consent-label a:hover,
.consent-label a:focus-visible{
  text-decoration:underline;
}

/* V11 — Main chapter paragraphs only; compact editorial typography.
   The hero, headings, illustrated cards, display statements, form and popups are unchanged. */
.photo-scene .free-copy p:not(.definition-closing),
.society-merged .body p,
.vm-intro p,
.filters-intro,
.join-copy p {
  font-size:16px;
  line-height:1.64;
}


/* Video as the sticky background itself: no player, no boxes, no layout changes. */
.photo-sticky > img{position:absolute;inset:0;z-index:0;transition:opacity .35s ease}
.photo-sticky > video.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;transition:opacity .35s ease;background:transparent}
.photo-sticky.is-video-playing > img{opacity:0}
.photo-sticky.is-video-playing > video.scene-video{opacity:1}
.photo-sticky:after{z-index:2}
.photo-sticky .photo-grid{z-index:3}
.photo-sticky .photo-credit{z-index:4}
.photo-sticky.is-video-playing .how-toponyms{display:none}
.photo-sticky.outer >video.scene-video{filter:saturate(.78) contrast(1.06) brightness(.57)}
.photo-sticky.tech-presence >video.scene-video{filter:saturate(.80) contrast(1.06) brightness(.54)}
.photo-sticky.how >video.scene-video{filter:grayscale(1) contrast(1.12) brightness(.58)}
.photo-sticky.exogeo-human >video.scene-video{filter:grayscale(1) contrast(1.12) brightness(.58)}
.photo-sticky.map >video.scene-video{filter:saturate(.60) contrast(1.05) brightness(.47)}
/* Targeted fixes, 20 Sep: brighter footage and an astronaut visible on the uncovered left. */
.photo-sticky.tech-presence > video.scene-video {
  filter:saturate(.86) contrast(1.04) brightness(.78);
  object-position:center center;
  transform:scale(1.02);
}
.photo-sticky.exogeo-human > video.scene-video {
  filter:grayscale(1) contrast(1.16) brightness(.98);
  object-position:28% center;
  transform:scale(1.14);
}
.photo-sticky.exogeo-human.right-shade:after {
  background:
    linear-gradient(270deg,rgba(6,5,41,.94) 0%,rgba(6,5,41,.76) 38%,rgba(6,5,41,.12) 68%,rgba(6,5,41,.03) 100%),
    linear-gradient(0deg,rgba(6,5,41,.22),transparent 40%,rgba(6,5,41,.08));
}

.scene-video-error{display:none;position:absolute;bottom:18px;left:18px;z-index:5;font:12px Arial,sans-serif;color:#f0f4f8;background:rgba(6,5,41,.88);padding:7px 12px;border:1px solid rgba(255,255,255,.35);max-width:min(440px,calc(100% - 36px))}
.photo-sticky.video-failed>.scene-video-error{display:block}
@media(prefers-reduced-motion:reduce){.photo-sticky >video.scene-video{display:none!important}.photo-sticky >img{opacity:1!important}}


/* 20 Sep — concept revisions requested by user */
.photo-sticky.outer > video.scene-video{filter:saturate(.86) contrast(1.03) brightness(.68)}
.photo-sticky.tech-presence.right-shade:after{
  background:
    linear-gradient(270deg,rgba(6,5,41,.82) 0%,rgba(6,5,41,.54) 30%,rgba(6,5,41,.16) 58%,rgba(6,5,41,.08) 100%),
    linear-gradient(0deg,rgba(6,5,41,.30),transparent 42%,rgba(6,5,41,.12));
}
.photo-sticky.tech-presence > video.scene-video{
  filter:saturate(.88) contrast(1.02) brightness(.74);
  object-position:center center;
  transform:scale(1.00);
}
#how-place .how-copy{width:min(720px,58vw);max-width:720px}
.photo-sticky.how > video.scene-video{
  filter:saturate(.88) contrast(1.06) brightness(.82) !important;
  object-position:center center;
  transform:none;
}
.photo-sticky.map > video.scene-video{filter:grayscale(.24) contrast(1.10) brightness(.62) !important; object-position:center center}
.photo-sticky.map > video.scene-video{filter:grayscale(.24) contrast(1.10) brightness(.62) !important; object-position:center center}

/* Final preview refinements: hide the old still image while videos load; restore it only on failure. */
.photo-sticky > img{opacity:0;transition:opacity .18s ease}
.photo-sticky.video-failed > img{opacity:1}
.photo-sticky > video.scene-video{opacity:1 !important;background:#050423}
.photo-sticky.video-failed > video.scene-video{opacity:0 !important}
.photo-sticky.exogeo-human > video.scene-video {
  filter:grayscale(1) contrast(1.16) brightness(.98);
  object-position:30% center;
  transform:scale(1.14);
}



/* Targeted vertical rhythm: Why a society -> Vision and Mission. */
.section.society-section{min-height:800px;padding-bottom:56px}
.section.vision-section{padding-top:66px}
@media(max-width:930px){
  .section.society-section{min-height:auto;padding-bottom:54px}
  .section.vision-section{padding-top:64px}
}
@media(max-width:640px){
  .section.society-section{padding-bottom:48px}
  .section.vision-section{padding-top:54px}
}