/* ==========================================================================
   Watershed Soundscape — an immersive site-within-the-site
   Every color below is sampled from the project's own herbarium sheet:
   foraged Sonoran plants and their extracted inks.
   ========================================================================== */

:root {
  --w-paper: #efebe8;      /* the herbarium sheet */
  --w-ink: #2b2119;        /* walnut ink dark */
  --w-soil: #3a2e24;       /* wet soil */
  --w-creosote: #d88852;
  --w-bark: #ad7b4f;
  --w-crownbeard: #f2d06d;
  --w-brittlebush: #caa470;
  --w-hackberry: #ecb578;
  --w-willow: #deba9f;
  --w-mallow: #edd893;
  --w-river: #45806c;      /* the water — bridge to the main site */
  --w-display: "Libre Caslon Display", Georgia, serif;
  --w-quote: "Cormorant Garamond", Georgia, serif;
  --w-sans: "Albert Sans", "Helvetica Neue", sans-serif;
  --w-gutter: clamp(1.25rem, 5vw, 5rem);
  --w-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.watershed {
  background: var(--w-paper); color: var(--w-ink);
  font-family: var(--w-sans); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--w-creosote); color: var(--w-paper); }

/* ---------------- fixed chrome ---------------- */
.w-chrome {
  position: fixed; z-index: 200; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-end; align-items: center;
  padding: 1.1rem var(--w-gutter); pointer-events: none;
  mix-blend-mode: multiply;
}
.w-chrome > * { pointer-events: auto; }
.w-back {
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--w-ink); opacity: 0.75; transition: opacity 0.3s;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.w-back:hover { opacity: 1; }

/* ---------------- ink hero ---------------- */
.ink-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
#inkCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ink-hero .veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 108%, rgba(43, 33, 25, 0.14), transparent 55%);
}
.ink-title {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  pointer-events: none; padding: var(--w-gutter);
}
.ink-title .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--w-soil);
}
.ink-title h1 {
  font-family: var(--w-display); font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 7rem); line-height: 1.02; margin-top: 1rem;
  color: var(--w-ink); text-wrap: balance;
}
.ink-title .deck {
  font-family: var(--w-quote); font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem); color: var(--w-soil); margin-top: 1.3rem; max-width: 34ch;
}
.ink-scroll {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--w-soil);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.ink-scroll::after {
  content: ""; width: 1px; height: 42px; background: linear-gradient(var(--w-bark), transparent);
  animation: dropFall 2.6s var(--w-ease) infinite;
}
@keyframes dropFall { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------- shared section bits ---------------- */
.w-section { padding: clamp(5rem, 12vw, 10rem) var(--w-gutter); position: relative; }
.w-inner { max-width: 1140px; margin: 0 auto; }
.w-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--w-bark); display: flex; align-items: center; gap: 0.9rem;
}
.w-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--w-bark); opacity: 0.6; }
.w-title {
  font-family: var(--w-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin-top: 1.2rem;
  max-width: 20ch; text-wrap: balance;
}
.w-lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 300; line-height: 1.6;
  max-width: 58ch; margin-top: 1.4rem; color: var(--w-soil);
}
.w-reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--w-ease), transform 1s var(--w-ease); }
.w-reveal.is-in { opacity: 1; transform: none; }

/* ---------------- the film ---------------- */
.film { background: var(--w-ink); color: var(--w-paper); }
.film .w-eyebrow, .film .w-eyebrow::before { color: var(--w-crownbeard); background: none; }
.film .w-eyebrow::before { background: var(--w-crownbeard); }
.film .w-lede { color: rgba(239, 235, 232, 0.75); }
.player {
  position: relative; margin-top: 3rem; border-radius: 4px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.yt-embed {
  position: relative; margin-top: 3rem; border-radius: 4px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* theater mode: dim everything around the player while the film plays */
.theater-veil {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 7, 6, 0.86);
  opacity: 0; pointer-events: none;
  transition: opacity 0.9s var(--w-ease);
}
body.is-theater .theater-veil { opacity: 1; pointer-events: auto; cursor: pointer; }
body.is-theater .player { z-index: 41; }
.player video { width: 100%; height: 100%; object-fit: cover; }
.player .big-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(20, 14, 9, 0.5), rgba(20, 14, 9, 0.12));
  border: 0; cursor: pointer; transition: opacity 0.5s;
}
.player.is-playing .big-play { opacity: 0; pointer-events: none; }
.big-play span {
  width: 92px; height: 92px; border-radius: 50%;
  border: 1.5px solid rgba(239, 235, 232, 0.9); display: grid; place-items: center;
  background: rgba(43, 33, 25, 0.35); backdrop-filter: blur(8px);
  transition: transform 0.4s var(--w-ease), background 0.4s;
}
.big-play:hover span { transform: scale(1.08); background: rgba(216, 136, 82, 0.5); }
.big-play svg { width: 26px; height: 26px; fill: var(--w-paper); margin-left: 4px; }
.player-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(transparent, rgba(15, 11, 8, 0.75));
  opacity: 0; transition: opacity 0.35s;
}
.player.is-playing:hover .player-bar, .player.is-paused .player-bar { opacity: 1; }
.pb-btn { background: none; border: 0; color: var(--w-paper); cursor: pointer; display: grid; place-items: center; opacity: 0.85; }
.pb-btn:hover { opacity: 1; }
.pb-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pb-track { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; }
.pb-rail { width: 100%; height: 3px; background: rgba(239, 235, 232, 0.28); border-radius: 2px; overflow: hidden; }
.pb-fill { height: 100%; width: 0%; background: var(--w-crownbeard); }
.pb-time { font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(239, 235, 232, 0.85); font-variant-numeric: tabular-nums; }
.film-missing {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: rgba(20, 14, 9, 0.55); padding: 2rem;
}
.film-missing p { font-family: var(--w-quote); font-style: italic; font-size: 1.3rem; max-width: 30ch; }
.film-retry {
  font: inherit; color: var(--w-crownbeard); background: none; border: 0;
  border-bottom: 1px solid currentColor; padding: 0; cursor: pointer;
}
.film-retry:hover { color: var(--w-paper); }
.film-credits {
  display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; margin-top: 2.4rem;
  font-size: 0.85rem; color: rgba(239, 235, 232, 0.7);
}
.film-credits strong { display: block; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--w-crownbeard); font-weight: 500; margin-bottom: 0.3rem; }

/* about — the wider movement */
.w-prose { max-width: 62ch; margin-top: 1.8rem; }
.w-prose p { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 300; line-height: 1.75; color: var(--w-soil); }
.w-prose p:first-child { margin-top: 0; }

/* Kay He — new work (river-green variant of the film section) */
.film.kayhe { background: #14231d; }
.film.kayhe .w-eyebrow, .film.kayhe .w-eyebrow::before { color: var(--w-river); }
.film.kayhe .w-eyebrow::before { background: var(--w-river); }
.film.kayhe .film-credits strong { color: var(--w-river); }

/* ---------------- three movements ---------------- */
.movements { padding: 0; }
.movement {
  min-height: 92svh; display: grid; place-items: center; text-align: center;
  padding: clamp(5rem, 12vw, 8rem) var(--w-gutter);
  transition: background 1s var(--w-ease), color 1s var(--w-ease);
}
.movement .num {
  font-family: var(--w-quote); font-style: italic; font-size: 1.2rem; opacity: 0.55;
}
.movement h3 {
  font-family: var(--w-display); font-weight: 400;
  font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.06; margin-top: 0.8rem;
  max-width: 16ch; text-wrap: balance; margin-inline: auto;
}
.movement p {
  font-family: var(--w-quote); font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin-top: 1.4rem; max-width: 44ch; opacity: 0.85;
  margin-inline: auto;
}
.movement.past { background: var(--w-paper); color: var(--w-ink); }
.movement.present { background: var(--w-soil); color: var(--w-willow); }
.movement.present h3 { color: var(--w-creosote); }
.movement.future { background: #16241f; color: #cfe2d8; }
.movement.future h3 { color: #8fd0bc; }

/* ---------------- pigments / herbarium ---------------- */
.pigments { overflow: hidden; }
.palette { display: flex; flex-wrap: wrap; gap: 1.4rem 1.8rem; margin-top: 3rem; }
.palette .chip { display: flex; align-items: center; gap: 0.7rem; }
.palette .dot {
  width: 34px; height: 34px; border-radius: 52% 48% 55% 45%;
  box-shadow: inset 0 -4px 8px rgba(43, 33, 25, 0.14);
}
.palette .chip small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w-soil); }
.specimen-field {
  position: relative; margin-top: 4rem;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem;
  align-items: start;
}
.specimen {
  will-change: transform; position: relative;
  background: #fff; padding: 10px 10px 14px;
  box-shadow: 0 14px 40px -18px rgba(43, 33, 25, 0.35);
  border-radius: 2px; transform: rotate(var(--tilt, 0deg));
}
.specimen img { border-radius: 1px; }
.specimen figcaption {
  font-family: var(--w-quote); font-style: italic; font-size: 0.92rem;
  color: var(--w-soil); margin-top: 0.6rem; display: flex; align-items: center; gap: 0.55rem;
}
.specimen figcaption i { width: 13px; height: 13px; border-radius: 50% 46% 54% 50%; display: inline-block; flex: none; }
.sp-1 { grid-column: 1 / span 3; --tilt: -1.4deg; }
.sp-2 { grid-column: 4 / span 4; margin-top: 6rem; --tilt: 0.8deg; }
.sp-3 { grid-column: 8 / span 3; margin-top: 2.5rem; --tilt: -0.6deg; }
.sp-4 { grid-column: 11 / span 2; margin-top: 9rem; --tilt: 1.6deg; }
.sp-5 { grid-column: 2 / span 3; margin-top: 3rem; --tilt: 1deg; }
.sp-6 { grid-column: 5 / span 3; margin-top: 8rem; --tilt: -1.2deg; }
.sp-7 { grid-column: 8 / span 4; margin-top: 1rem; --tilt: 0.5deg; }
@media (max-width: 760px) {
  .specimen-field { grid-template-columns: repeat(6, 1fr); }
  .sp-1 { grid-column: 1 / span 3; } .sp-2 { grid-column: 4 / span 3; margin-top: 3rem; }
  .sp-3 { grid-column: 1 / span 3; margin-top: 1rem; } .sp-4 { grid-column: 4 / span 3; margin-top: 2rem; }
  .sp-5 { grid-column: 1 / span 3; } .sp-6 { grid-column: 4 / span 3; margin-top: 2rem; }
  .sp-7 { grid-column: 2 / span 4; margin-top: 1rem; }
}
.herbarium-note {
  font-family: var(--w-quote); font-style: italic; font-size: 1.05rem; color: var(--w-bark);
  margin-top: 2.4rem;
}

/* ---------------- 3D watershed ---------------- */
.terrain-sec { position: relative; height: 340vh; background: var(--w-paper); }
.terrain-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
#terrainCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.terrain-head {
  position: absolute; top: clamp(4.5rem, 10vh, 7rem); left: var(--w-gutter); z-index: 3; max-width: 30rem;
}
.milestone {
  position: absolute; z-index: 3; max-width: 21rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--w-ease), transform 0.7s var(--w-ease);
  background: rgba(239, 235, 232, 0.82); backdrop-filter: blur(8px);
  border-left: 2px solid var(--w-river);
  padding: 1.1rem 1.3rem; border-radius: 0 3px 3px 0;
}
.milestone.is-on { opacity: 1; transform: none; }
.milestone strong {
  font-family: var(--w-display); font-weight: 400; font-size: 1.5rem; display: block; color: var(--w-ink);
}
.milestone span { font-size: 0.82rem; color: var(--w-soil); }
.ms-1 { top: 24%; right: var(--w-gutter); }
.ms-2 { top: 52%; left: var(--w-gutter); }
.ms-3 { top: 38%; right: calc(var(--w-gutter) + 4vw); }
.ms-4 { bottom: 16%; left: calc(var(--w-gutter) + 2vw); }
@media (max-width: 700px) {
  .milestone { max-width: 15rem; padding: 0.85rem 1rem; }
  .ms-3 { right: var(--w-gutter); }
}

/* ---------------- credits ---------------- */
.credits { background: var(--w-ink); color: rgba(239, 235, 232, 0.82); }
.credits .w-eyebrow { color: var(--w-crownbeard); } .credits .w-eyebrow::before { background: var(--w-crownbeard); }
.credits .w-title { color: var(--w-paper); }
.credits .w-lede { color: rgba(239, 235, 232, 0.75); }
.credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.4rem; margin-top: 3rem; }
.credit-grid h4 {
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--w-crownbeard); font-weight: 500; margin-bottom: 0.7rem;
}
.credit-grid p { font-size: 0.92rem; line-height: 1.8; }
.credit-grid a { border-bottom: 1px solid rgba(242, 208, 109, 0.35); transition: color 0.3s, border-color 0.3s; }
.credit-grid a:hover { color: var(--w-crownbeard); border-color: var(--w-crownbeard); }
.support-note { margin-top: 3rem; font-size: 0.82rem; line-height: 1.9; color: rgba(239, 235, 232, 0.55); max-width: 72ch; }
.w-footer {
  background: var(--w-ink); padding: 2.5rem var(--w-gutter) 3rem; text-align: center;
  color: rgba(239, 235, 232, 0.55); font-size: 0.78rem;
}
.w-footer a { color: var(--w-paper); border-bottom: 1px solid var(--w-bark); }
.w-footer a:hover { color: var(--w-crownbeard); }

:focus-visible { outline: 2px solid var(--w-river); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .w-reveal { opacity: 1; transform: none; }
}