/* ============================================
   CORAL TRIBE — site stylesheet
   White, spacious, typographic. Two families:
   - "Coral Tribe" display serif (wordmark font) for titles & numbers
   - Helvetica Neue for body, nav, labels
============================================= */

@font-face {
  font-family: "Coral Tribe";
  src: url("assets/fonts/coral-tribe.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #141414;
  --ink-soft: #3c3c3c;
  --muted: #8f8f8f;
  --rule: #dfdcd6;
  --dark: #101010;          /* video sections fallback */
  --font-display: "Coral Tribe", Georgia, serif;
  --font-body: -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

/* ============================================
   REVEAL — gentle fade-and-rise on scroll.
   scripts.js adds .is-visible; motion is subtle,
   never theatrical.
============================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   NAV LINKS — spaced words that reveal themselves
   as links on hover (underline), or when marked as
   the current page.
============================================= */
.nav-links {
  display: flex;
  gap: clamp(18px, 2.6vw, 40px);
}
.nav-links a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
  transition: opacity 0.3s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  text-decoration: underline;
}
.nav-links a:hover { opacity: 0.75; }

/* ============================================
   SITE HEADER — content pages only.
   The page's word sits where a logo would (never
   the Coral Tribe logotype off the homepage), nav
   pinned right. The bar is fixed and stays out of
   the way: it slides softly into view only when
   the visitor scrolls up (or is at the top).
============================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vh, 30px) var(--gutter);
  background: var(--paper);
  transition: opacity 0.5s ease;
}
/* Once the video footer takes the screen, the page word bows out —
   only CORAL TRIBE should be on stage. */
.site-header.is-past {
  opacity: 0;
  pointer-events: none;
}
/* The page word stays put; only the links are transient.
   They fade in on a scroll-up, linger a moment, fade away —
   and stay while hovered or focused so they can be clicked. */
.site-header .nav-links {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.site-header .nav-links.is-peek,
.site-header:hover .nav-links,
.site-header .nav-links:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.site-header__title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  letter-spacing: 0.05em;
  line-height: 1;
}
.site-header__title a {
  text-decoration: none;
}
.site-header .nav-links {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
}
/* Content pages start below the fixed bar. */
body.with-header {
  padding-top: clamp(76px, 10vh, 104px);
}

/* ============================================
   VIDEO SECTIONS — the hero (homepage) and the
   footer (bottom of every content page). The video
   crossfades in over its poster once it is actually
   playing; if it never plays, the poster remains.
============================================= */
.video-hero,
.video-footer {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.bg-video.is-playing { opacity: 1; }

/* Soft scrims so white text stays legible on any frame. */
.video-hero::after,
.video-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 26%),
    linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 26%);
}

/* Overlay content sits above video + scrim. */
.video-hero > .overlay,
.video-footer > .overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
}

.overlay .wordmark {
  position: absolute;
  top: clamp(24px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
}
.overlay .wordmark img {
  width: clamp(170px, 17vw, 300px);
  height: auto;
}

/* Hero: links live top-right. Footer: same links, bottom-right. */
.video-hero .nav-links {
  position: absolute;
  top: clamp(26px, 5vh, 50px);
  right: var(--gutter);
}
.video-footer .nav-links {
  position: absolute;
  bottom: clamp(26px, 5vh, 50px);
  right: var(--gutter);
}
.video-hero .nav-links a,
.video-footer .nav-links a {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* ============================================
   PAGE SCAFFOLD — content pages share a centered
   column and generous vertical rhythm.
============================================= */
.page-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-title {
  font-family: var(--font-display);
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.04em;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  margin-top: clamp(40px, 9vh, 110px);
}

/* Accent labels — uppercase, letterspaced, quiet.
   (Replaced the handwritten font: not on brand.) */
.hand {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ============================================
   FUND / INVESTMENT PAGE
   Four spotlights, one per screen: the number,
   the story, the stats, the call to action.
   Nothing shares the stage.
============================================= */
.fund-screen {
  min-height: calc(100dvh - clamp(76px, 10vh, 104px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* The closing ask keeps a screen to itself — nothing above or below it
   should share the view — but it sits high in that screen rather than
   dead centre, so the quiet falls between the ask and the film that
   follows instead of surrounding it. */
.fund-screen--cta {
  justify-content: flex-start;
  padding-top: clamp(72px, 20vh, 220px);
}

.fund-headline {
  text-align: center;
}
.fund-headline__amount {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(4.2rem, 15vw, 12.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.fund-headline__caption {
  margin-top: clamp(16px, 2.6vh, 28px);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
}
/* What the last month added — the sign that the number is still moving.
   Small and italic, the same quiet voice the impact dates speak in. */
.fund-headline__note {
  margin-top: clamp(8px, 1.3vh, 14px);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  color: var(--muted);
}

.fund-body {
  max-width: 34em;
  text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.fund-body p + p {
  margin-top: clamp(18px, 2.6vh, 28px);
}
/* The way on, quiet: a line of text that is simply a link. */
.fund-body p.fund-body__link {
  margin-top: clamp(22px, 3.2vh, 34px);
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
}
.fund-body__link a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
  transition: opacity 0.3s ease;
}
.fund-body__link a:hover { opacity: 0.6; }

/* Four numbers want room to stand apart. They step outside the reading
   column to get it — the page's text stays at its own width. */
.fund-stats {
  width: min(1200px, calc(100vw - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 88px);
}
.fund-stats__item {
  border-top: 1px solid var(--rule);
  padding-top: clamp(18px, 2.6vh, 28px);
}
/* The stats arrive one after another — a different rhythm
   from the single fade of the paragraph before them. */
.fund-stats .fund-stats__item:nth-child(2) { transition-delay: 0.22s; }
.fund-stats .fund-stats__item:nth-child(3) { transition-delay: 0.44s; }
.fund-stats .fund-stats__item:nth-child(4) { transition-delay: 0.66s; }
.fund-stats__value {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1;
}
.fund-stats__label {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The closing ask arrives still — no fade, it is simply there. */
.fund-cta {
  text-align: center;
}
.fund-cta__note {
  max-width: 26em;
  margin: 0 auto clamp(26px, 4vh, 40px);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

.btn-solid {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 38px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.btn-solid:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

/* ============================================
   COMMUNITY PAGE
============================================= */
.community {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 13vh, 150px) var(--gutter) clamp(90px, 18vh, 200px);
}

.community__eyebrow {
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  margin-bottom: clamp(18px, 3vh, 30px);
}
.community__statement {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.community__list {
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.community__list li {
  border-top: 1px solid var(--rule);
}
.community__list a {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
  padding: clamp(24px, 4.2vh, 42px) 6px;
  text-decoration: none;
}
.community__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.community__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  line-height: 1.25;
  flex: 1;
}
.community__arrow {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  transition: transform 0.35s ease;
}
.community__list a:hover .community__arrow { transform: translateX(8px); }
.community__list a:hover .community__label { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ============================================
   COMMUNITY — ALL LINKS
   Four chapters that carry on from the four in
   the hero. Same two columns, so the titles sit
   under the statement and the lists under 01–04.
============================================= */
.links {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 11vw, 160px) var(--gutter);
}

.links__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 48px;
}

/* One chapter per row, hairline between. */
.links__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 7vw, 110px);
  border-top: 1px solid var(--rule);
  padding: clamp(36px, 4vw, 56px) 0;
}
.links__group:last-child {
  border-bottom: 1px solid var(--rule);
}
/* The chapters arrive one after another, same step
   as the fund stats. */
.links__group:nth-of-type(2) { transition-delay: 0.22s; }
.links__group:nth-of-type(3) { transition-delay: 0.44s; }
.links__group:nth-of-type(4) { transition-delay: 0.66s; }

.links__head {
  display: flex;
  align-items: baseline;
  gap: 36px;
}
.links__num {
  flex: 0 0 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.links__title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);
  line-height: 1.15;
}

/* The first link sits on the title's line. */
.links__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}
.links__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  text-decoration: none;
}
.links__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.95vw, 1.75rem);
  line-height: 1.25;
  color: var(--ink);
}
.links__host {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}
.links__list a:hover .links__label {
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
}

/* ============================================
   IMPACT PAGE — PLANET & PEOPLE slider
   The handwritten words sit on the left and light
   up to match the picture on screen; the slider
   moves through the moments with arrows or ←/→.
============================================= */
.pinned-slider {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(36px, 7vh, 80px);
  margin-bottom: clamp(90px, 16vh, 190px);   /* air before the video footer */
  padding-left: clamp(20px, 4vw, 64px);
}

/* The words center on the picture, not on the whole section:
   the bottom padding offsets the caption strip below the image. */
.pinned-slider__words {
  flex: 0 0 auto;
  min-width: clamp(150px, 18vw, 280px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 4vh, 42px);
  padding-bottom: clamp(60px, 9vh, 100px);
}

.word {
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.22;                 /* dimmed until its picture is on screen */
  transition: opacity 0.6s ease;
}
.word.is-active { opacity: 1; }
.word--amp {
  opacity: 0.35;
  font-size: clamp(1rem, 1.7vw, 1.55rem);
}

/* The slider runs to the right edge of the screen. */
.slider {
  flex: 1;
  min-width: 0;
}

.slider__viewport {
  position: relative;
  width: 100%;
  height: clamp(320px, 58vh, 640px);
  overflow: hidden;
  touch-action: pan-y;           /* sideways belongs to the slider */
}

.slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
  .word { transition: none; }
}

.slide {
  flex: 0 0 100%;
  height: 100%;
}
.slide__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* contain, not cover: the whole picture is visible,
   breathing on the white page instead of zoomed in. */
.slide__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Invisible halves of the picture that page the slider:
   hovering one fades in a big soft arrow over the image. */
.slider__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.slider__zone--prev { left: 0; justify-content: flex-start; padding-left: 4%; }
.slider__zone--next { right: 0; justify-content: flex-end; padding-right: 4%; }
.slider__zone span {
  font-family: var(--font-body);
  font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.slider__zone:hover span,
.slider__zone:focus-visible span { opacity: 0.45; }

/* Below the image: caption left, arrows right. scripts.js sets
   the side paddings so both line up with the picture's edges. */
.slider__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(14px, 2.4vh, 24px);
}

.slider__caption {
  max-width: 46em;
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--ink-soft);
  min-height: 4.8em;             /* keeps the arrows from jumping between captions */
}
/* The date signs off under the words, smaller and quieter than them:
   it dates the moment, it is not the point of it. */
.slider__date {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 8px;
}
.slider__caption a {
  color: inherit;
  text-underline-offset: 3px;
}

.slider__nav {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
}
.slider__arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.45;
  padding: 0 4px;
  transition: opacity 0.3s ease;
}
.slider__arrow:hover { opacity: 1; }

/* ============================================
   NARROW — the header gives way first. The word in
   the middle and the links on the right run out of
   room long before the page does (they touch at
   about 820px), so the bar stacks while the rest of
   the layout is still comfortable in two columns.
============================================= */
@media (max-width: 900px) {
  /* Header stacks: page word, then nav centered beneath. */
  .site-header {
    flex-direction: column;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 16px;
  }
  .site-header .nav-links {
    position: static;
    transform: none;
  }
  body.with-header {
    padding-top: 118px;
  }
  .fund-screen {
    min-height: calc(100dvh - 118px);
  }

  /* Hero/footer: wordmark centered, links move to a centered
     row at the bottom so nothing crowds the top edge. */
  .video-hero .nav-links {
    top: auto;
    bottom: clamp(30px, 6vh, 48px);
    right: 50%;
    transform: translateX(50%);
  }
  .video-footer .nav-links {
    right: 50%;
    transform: translateX(50%);
  }
  .nav-links { gap: 20px; }
}

/* ============================================
   MOBILE
============================================= */
@media (max-width: 760px) {
  .fund-screen--cta {
    padding-top: clamp(56px, 15vh, 150px);
  }

  .fund-stats {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .community {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* Chapters stack: number and title on top, links beneath;
     each link puts its address under the label so long paths
     never squeeze the name. */
  .links__group {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* The number sits above the title so the whole chapter
     reads flush against the gutter. */
  .links__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .links__num {
    flex: none;
  }
  .links__list {
    padding-top: 0;
  }
  .links__list a {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .links__host {
    font-size: 12px;
    text-align: left;
  }

  /* Impact slider stacks: the words sit just above the pictures,
     and the whole thing keeps a gutter from the screen edges. */
  .pinned-slider {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 20px;
  }
  .pinned-slider__words {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding-bottom: 0;          /* no room to hold on a phone */
  }
  /* A step up from the caption, nowhere near a title. */
  .word {
    font-size: 0.88rem;
    letter-spacing: 0.16em;
  }
  .word--amp {
    font-size: 0.8rem;
    margin-left: 0;
  }
  /* The frame takes the shape of the pictures instead of a slice of
     the screen: a tall fixed frame letterboxes them, and that empty
     band is what pushed the words up and the caption down. */
  .slider__viewport {
    height: auto;
    aspect-ratio: 4 / 3;          /* until scripts.js measures the picture */
    transition: height 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  }
  /* The caption lines up with the picture's edges, so the section's
     own gutter is all it needs. */
  .slider__footer {
    flex-direction: column;
    padding: 0;
    margin-top: 12px;
  }
  .slider__caption { min-height: 6.4em; }
  .slider__nav { align-self: flex-end; }
}