/* Ecolution key colors — sampled from the Echo-lution cover art */
:root {
  --eco-green: #7d9a5e;       /* grassy outer ring */
  --eco-olive: #5c6e3c;       /* script lettering */
  --eco-sky: #5fa8dc;         /* sky blue */
  --eco-cream: #f2efe2;       /* clouds */
  --eco-ink: #3e4a2a;         /* lettering shadow — body text */

  /* Fundamental fonts */
  --eco-font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --eco-font-body: "Lora", "Times New Roman", Georgia, serif;
  --bs-body-font-family: var(--eco-font-body);

  /* Map onto Bootstrap's theme variables */
  --bs-primary: var(--eco-green);
  --bs-primary-rgb: 125, 154, 94;
  --bs-secondary: var(--eco-sky);
  --bs-secondary-rgb: 95, 168, 220;
  --bs-body-bg: var(--eco-cream);
  --bs-body-color: var(--eco-ink);
  --bs-link-color: var(--eco-olive);
  --bs-link-hover-color: var(--eco-ink);
}

/* Bootstrap buttons read their own component variables, so override those too */
.btn-primary {
  --bs-btn-bg: var(--eco-green);
  --bs-btn-border-color: var(--eco-green);
  --bs-btn-hover-bg: var(--eco-olive);
  --bs-btn-hover-border-color: var(--eco-olive);
  --bs-btn-active-bg: var(--eco-olive);
  --bs-btn-active-border-color: var(--eco-ink);
}

/* Headings and brand use the display serif */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
  font-family: var(--eco-font-display);
}

.navbar-brand {
  font-weight: 600;
  font-style: italic; /* nods to the script lettering on the cover */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Auto-hiding top bar */
.eco-topbar {
  background-color: var(--eco-olive);
  transition: transform 0.3s ease;
}

.eco-topbar .navbar-brand,
.eco-topbar .nav-link {
  color: var(--eco-cream);
}

.eco-topbar .nav-link:hover,
.eco-topbar .nav-link.active {
  color: #ffffff;
}

.eco-topbar.topbar-hidden {
  transform: translateY(-100%);
}

/* Keep content from sliding under the fixed bar */
body {
  padding-top: 56px;
}

html {
  scroll-behavior: smooth;
}

#about,
#mission {
  scroll-margin-top: 56px;
}

/* Mission — dark band with a cursor-following spotlight through the headline */
.eco-mission {
  background-color: var(--eco-ink);
  color: var(--eco-cream);
  padding: 7rem 0;
}

.mission-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.9rem;
  color: var(--eco-sky);
  margin-bottom: 1.5rem;
}

/* Registered so the radius can transition smoothly */
@property --spot-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 1800px;
}

.mission-headline {
  --mx: 50%;
  --my: 50%;
  --spot-r: 1800px; /* huge radius = whole headline lit */
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  max-width: 16ch;
  margin-bottom: 2rem;
  /* sunlit spot at the cursor, fading out to a muted olive */
  background-image: radial-gradient(
    circle var(--spot-r) at var(--mx) var(--my),
    #fdf6d8 0%,
    #d9dec0 35%,
    rgba(242, 239, 226, 0.28) 70%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: --spot-r 0.6s ease;
}

/* Spotlight mode only while the pointer is inside the section */
.eco-mission:hover .mission-headline {
  --spot-r: 230px;
}

.mission-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: rgba(242, 239, 226, 0.75);
  max-width: 60ch;
}

/* Hero */
.eco-hero {
  position: relative;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 5rem;
  overflow: hidden;
}

/* Text sits on top of the logo */
.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 7rem);
  max-width: 14ch;
}

.eco-slogan {
  font-family: var(--eco-font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  color: #c0584a; /* placeholder marker — swap for the real slogan styling later */
}

.eco-since {
  color: var(--eco-olive);
  letter-spacing: 0.08em;
  font-size: 1.25rem;
}

/* Rotating logo placeholder — big, anchored to the right, behind the text */
.hero-logo-stage {
  position: absolute;
  top: 45%;
  right: max(-3vmin, calc(50% - 90vmin));
  transform: translateY(-50%);
  z-index: 0;
}

.hero-logo {
  width: min(80vmin, 800px);
  aspect-ratio: 1;
  animation: logo-spin 14s linear infinite;
}

.hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); } /* positive angle = clockwise */
}

/* "more about us" scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--eco-olive);
  text-decoration: none;
  font-family: var(--eco-font-display);
  font-style: italic;
}

.hero-scroll-cue:hover {
  color: var(--eco-ink);
}

.hero-scroll-cue svg {
  animation: cue-bounce 1.8s ease-in-out infinite;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Story / history timeline — stacked sticky sheets */
.eco-story {
  padding: 0;
}

#story {
  scroll-margin-top: 56px;
}

.story-panel {
  position: sticky;
  top: 56px;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  padding: 4rem 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 36px rgba(62, 74, 42, 0.22);
  transform-origin: center top;
  will-change: transform;
}

.story-panel-a {
  background-color: var(--eco-cream);
}

.story-panel-b {
  background-color: #e4e8d2; /* pale green sheet, reads clearly over the cream one */
}

.story-panel-c {
  background-color: #d6dec0; /* deeper sage — the stack darkens as time advances */
}

.story-panel > .container {
  width: 100%;
}

.story-timeline {
  position: relative;
  padding-left: 3.5rem;
}

/* The vine — each panel's segment drawn in by js/story.js as it arrives */
.story-vine {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
}

.era-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--eco-olive);
  margin-bottom: 2rem;
}

.era-year {
  font-weight: 700;
  color: var(--eco-ink);
}

/* Leaf pops once its heading reveals (after the rise finishes) */
.era-leaf {
  transform: scale(0);
  transition: transform 0.5s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.revealed .era-leaf {
  transform: scale(1);
}

.era-quote p {
  font-family: var(--eco-font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-style: italic;
  line-height: 1.25;
}

.era-quote footer {
  color: var(--eco-olive);
  font-size: 1rem;
}

.era-quote-sub {
  margin: 2rem 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--eco-green);
  color: var(--eco-olive);
  font-style: italic;
  max-width: 42ch;
}

/* 2025–2026 panel: Rebrewing Daegu */
.era-kicker {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.85rem;
  color: var(--eco-olive);
  margin: -1rem 0 1.5rem;
}

.project-intro {
  margin-bottom: 3rem;
}

.project-mission {
  font-family: var(--eco-font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  max-width: 56ch;
  line-height: 1.6;
  color: var(--eco-ink);
  margin: 0;
}

.circular-model {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  border-radius: 12px;
  mix-blend-mode: multiply; /* drops the diagram's cream backdrop into the sage panel */
}

.project-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 3rem;
}

.topic-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 1.1rem;
  border: 2px solid var(--eco-olive);
  border-radius: 999px;
  background: rgba(242, 239, 226, 0.65);
  color: var(--eco-ink);
  font-size: 0.95rem;
}

.topic-chip small {
  color: var(--eco-olive);
  font-style: italic;
}

.impact-heading {
  font-size: 1.5rem;
  color: var(--eco-olive);
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}

.impact-quote {
  border-left: 3px solid var(--eco-green);
  padding-left: 1.25rem;
  margin: 0;
}

.impact-quote p {
  font-family: var(--eco-font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--eco-ink);
  margin-bottom: 0.85rem;
}

.impact-quote footer {
  font-family: var(--eco-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--eco-olive);
}

.impact-photos {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}

.impact-photo {
  margin: 0;
}

.impact-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--eco-olive);
}

.impact-photo figcaption {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--eco-olive);
  text-align: center;
}

.impact-arrow {
  font-size: 1.5rem;
  color: var(--eco-olive);
}

.impact-caption {
  margin-top: 0.75rem;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--eco-olive);
}

/* Photo placeholders — swap for real <img> later */
.story-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 767px) {
  .story-photos {
    grid-template-columns: 1fr;
  }
}

.story-photo {
  margin: 0;
}

.photo-placeholder {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--eco-olive);
  border-radius: 4px;
  background: rgba(125, 154, 94, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--eco-olive);
  font-style: italic;
}

/* Meet the Team — flip cards */
.eco-team {
  padding: 6rem 0;
  background-color: rgba(125, 154, 94, 0.14); /* soft green band to set it apart */
}

#team {
  scroll-margin-top: 56px;
}

.team-heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 3rem;
}

.team-era {
  font-size: 1.4rem;
  color: var(--eco-olive);
  margin-bottom: 1.5rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.team-card {
  perspective: 1000px;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.team-card-lg {
  aspect-ratio: 3 / 4;
}

.team-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.team-card:hover .team-card-inner,
.team-card:focus-visible .team-card-inner,
.team-card.flipped .team-card-inner {
  transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
}

.team-card-front {
  display: flex;
  flex-direction: column;
  background: var(--eco-cream);
  border: 2px solid var(--eco-olive);
}

.team-photo {
  flex: 1;
  min-height: 0;         /* allow the image to shrink within the flex column */
  width: 100%;
  border: none;          /* the card already has a border */
  border-radius: 0;
  object-fit: cover;
  object-position: top center;
}

.team-label {
  padding: 0.6rem 0.9rem;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--eco-olive);
}

.team-label strong {
  font-family: var(--eco-font-display);
  font-size: 1.1rem;
}

.team-label span {
  color: var(--eco-olive);
  font-size: 0.9rem;
}

/* Back face — title & experiences */
.team-card-back {
  transform: rotateY(180deg);
  background: var(--eco-olive);
  color: var(--eco-cream);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.team-card-back h3 {
  font-size: 1.4rem;
  color: #ffffff;
}

.team-card-back .team-role {
  font-style: italic;
  color: var(--eco-cream);
  opacity: 0.85;
  margin-bottom: 0.85rem;
}

.team-card-back ul {
  padding-left: 1.1rem;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
}

.team-card-back li {
  margin-bottom: 0.35rem;
}

.team-find {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--eco-cream);
  opacity: 0.9;
}

.team-find span {
  display: block;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  opacity: 0.7;
  margin-bottom: 0.2rem;
}

/* Rebrewing Daegu photo collage */
.eco-gallery {
  background-color: #d6dec0; /* continues the sage of the rebrew (panel-c) sheet */
  padding: 6rem 0;
}

#rebrew-gallery {
  scroll-margin-top: 56px;
}

.gallery-heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.gallery-sub {
  color: var(--eco-olive);
  margin-bottom: 2.5rem;
  max-width: 48ch;
}

/* Masonry via CSS columns — handles mixed portrait/landscape cleanly */
.photo-collage {
  column-count: 4;
  column-gap: 1rem;
}

@media (max-width: 991px) { .photo-collage { column-count: 3; } }
@media (max-width: 767px) { .photo-collage { column-count: 2; } }
@media (max-width: 479px) { .photo-collage { column-count: 1; } }

.collage-item {
  margin: 0 0 1rem;
  break-inside: avoid;       /* keep an image from splitting across columns */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(62, 74, 42, 0.15);
}

.collage-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.collage-item:hover img {
  transform: scale(1.04);
}

/* Rebrewing Daegu — the experiment */
.eco-experiment {
  background-color: var(--eco-cream);
  padding: 6rem 0;
}

#experiment {
  scroll-margin-top: 56px;
}

.experiment-kicker {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.85rem;
  color: var(--eco-olive);
  margin-bottom: 1rem;
}

.experiment-heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 1.5rem;
}

.experiment-lead {
  max-width: 60ch;
  font-size: 1.15rem;
  margin-bottom: 3rem;
}

.experiment-photos {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 767px) { .experiment-photos { grid-template-columns: 1fr; } }

.experiment-photo {
  margin: 0;
}

.experiment-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(62, 74, 42, 0.18);
}

.experiment-photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--eco-olive);
  line-height: 1.4;
}

.experiment-photo figcaption span {
  font-style: italic;
  opacity: 0.8;
}

.experiment-credit {
  margin-top: 2rem;
}

.experiment-credit a {
  color: var(--eco-olive);
  font-weight: 600;
}

/* Voice — podcast / articles, dark band */
.eco-voice {
  background-color: var(--eco-ink);
  color: var(--eco-cream);
  padding: 6rem 0;
}

#voice {
  scroll-margin-top: 56px;
}

.voice-kicker {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.9rem;
  color: var(--eco-sky);
  margin-bottom: 1rem;
}

.voice-heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: var(--eco-cream);
  margin-bottom: 2.5rem;
}

.voice-sub {
  font-size: 1.4rem;
  color: #ffffff;
}

.voice-sub em {
  color: var(--eco-green);
}

.voice-desc {
  color: rgba(242, 239, 226, 0.75);
  max-width: 36ch;
}

.voice-embed {
  border-radius: 12px;
  display: block;
}

/* EarthTalk — horizontally scrolling episode strip */
.voice-recent,
.voice-earthtalk {
  margin-top: 4rem;
}

.voice-recent .voice-sub,
.voice-earthtalk .voice-sub {
  margin-bottom: 1.5rem;
}

.earthtalk-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  /* thin, on-brand scrollbar */
  scrollbar-color: var(--eco-olive) transparent;
  scrollbar-width: thin;
}

.earthtalk-card {
  flex: 0 0 min(340px, 82vw);
  scroll-snap-align: start;
  border-radius: 12px;
}

/* Instagram reels keep their own min-width (326px); just snap them in the strip */
.earthtalk-reel {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0 !important;
}

/* Articles — four cards side by side */
.voice-articles {
  margin-top: 4rem;
}

.voice-articles .voice-sub {
  margin-bottom: 1.5rem;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 991px) {
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  display: block;
  background: rgba(242, 239, 226, 0.06);
  border: 1px solid rgba(242, 239, 226, 0.25);
  border-radius: 12px;
  overflow: hidden;
  color: var(--eco-cream);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--eco-green);
  color: var(--eco-cream);
}

.article-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.article-body {
  padding: 1.1rem;
}

.article-title {
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.3;
}

.article-author {
  font-size: 0.85rem;
  font-style: italic;
  color: #aec68e;
  margin-bottom: 0.6rem;
}

.article-summary {
  font-size: 0.88rem;
  color: rgba(242, 239, 226, 0.72);
  margin: 0;
}

/* Collaborations — logo circles */
.eco-collab {
  padding: 6rem 0;
}

#collab {
  scroll-margin-top: 56px;
}

.collab-heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.collab-sub {
  color: var(--eco-olive);
  margin-bottom: 2.5rem;
}

.collab-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Logo circles flip to reveal the partner's name (same pattern as team cards) */
.collab-logo {
  width: 132px;
  aspect-ratio: 1;
  perspective: 600px;
  cursor: pointer;
}

.collab-logo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.collab-logo:hover .collab-logo-inner,
.collab-logo:focus-visible .collab-logo-inner,
.collab-logo.flipped .collab-logo-inner {
  transform: rotateY(180deg);
}

.collab-logo-front,
.collab-logo-back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--eco-olive);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.collab-logo-front {
  background: #ffffff;
  padding: 16px;
}

.collab-logo-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* photo-style entries fill the whole circle instead of sitting on white */
.collab-logo-photo {
  padding: 0;
}

.collab-logo-photo img {
  object-fit: cover;
}

/* sprout shown while a partner's logo file is still pending */
.collab-logo-front .pending-leaf {
  width: 45%;
  height: 45%;
  fill: var(--eco-green);
  opacity: 0.7;
}

.collab-logo-back {
  transform: rotateY(180deg);
  background: var(--eco-olive);
  color: var(--eco-cream);
  text-align: center;
  padding: 0.8rem;
}

.collab-logo-back span {
  font-size: 0.85rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.collab-logo-back small {
  font-style: italic;
  opacity: 0.8;
}

/* "Create your own chapter" — CTA band with form */
.eco-chapter {
  background-color: var(--eco-green);
  padding: 6rem 0;
}

#chapter {
  scroll-margin-top: 56px;
}

.chapter-heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--eco-ink);
}

.chapter-sub {
  color: var(--eco-ink);
  opacity: 0.85;
  max-width: 38ch;
}

.chapter-form .form-label {
  color: var(--eco-ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.chapter-form .form-control {
  background: rgba(242, 239, 226, 0.92);
  border: 2px solid var(--eco-olive);
  border-radius: 8px;
  color: var(--eco-ink);
}

.chapter-form .form-control:focus {
  background: #ffffff;
  border-color: var(--eco-ink);
  box-shadow: 0 0 0 0.2rem rgba(62, 74, 42, 0.2);
}

.chapter-submit {
  background: var(--eco-ink);
  color: var(--eco-cream);
  border: 2px solid var(--eco-ink);
  border-radius: 999px;
  padding: 0.6rem 1.8rem;
  font-weight: 600;
}

.chapter-submit:hover {
  background: var(--eco-olive);
  border-color: var(--eco-olive);
  color: #ffffff;
}

.chapter-status {
  display: inline-block;
  margin: 0 0 0 1rem;
  font-style: italic;
  color: var(--eco-ink);
}

/* "Join us" popup */
.join-modal {
  background: var(--eco-cream);
  border: 2px solid var(--eco-olive);
  border-radius: 16px;
  padding: 1rem;
}

.join-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.join-modal-title {
  font-size: 2.25rem;
  margin-top: 0.75rem;
}

.join-modal-text {
  color: var(--eco-olive);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.join-modal-snooze {
  display: block;
  margin: 0.9rem auto 0;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--eco-olive);
  text-decoration: underline;
  cursor: pointer;
}

.join-modal-snooze:hover {
  color: var(--eco-ink);
}

/* Footer — contact info */
.eco-footer {
  background-color: var(--eco-olive);
  color: var(--eco-cream);
  padding: 4rem 0;
}

.footer-brand {
  font-family: var(--eco-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.footer-tagline {
  color: rgba(242, 239, 226, 0.75);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}

.contact-label {
  flex: 0 0 4.5rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: rgba(242, 239, 226, 0.6);
  padding-top: 0.15rem;
}

.footer-contact a {
  color: var(--eco-cream);
  text-decoration: none;
}

.footer-contact a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Designer credit — deliberately understated */
.credit-footer {
  background-color: #161614;
  padding: 2.5rem 0 2rem;
  font-size: 0.85rem;
  color: #8d8d8a;
}

.credit-footer p {
  margin-bottom: 0.35rem;
}

.credit-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #9a9a96;
}

.credit-links {
  font-weight: 700;
}

.credit-links a {
  color: #9a9a96;
  text-decoration: none;
}

.credit-links a:hover {
  color: #c4c4bf;
}

.credit-copy {
  margin-top: 1.5rem;
  color: #a5a5a0;
}

/* Staggered scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-scroll-cue svg {
    animation: none;
  }

  .reveal,
  .era-leaf {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .team-card-inner,
  .collab-logo-inner {
    transition: none; /* cards still flip, just instantly */
  }
}

.btn-secondary {
  --bs-btn-bg: var(--eco-sky);
  --bs-btn-border-color: var(--eco-sky);
  --bs-btn-hover-bg: #4b8fc2;
  --bs-btn-hover-border-color: #4b8fc2;
}